@font-face { font-family: Vazirmatn; src: url("assets/fonts/vazirmatn.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --primitive-ink-950: #171a17; --primitive-ink-900: #20231f; --primitive-ink-800: #2c302b; --primitive-paper-50: #f7f3eb; --primitive-paper-100: #eee8dc; --primitive-paper-200: #e1dacd; --primitive-stone-300: #c9c1b3; --primitive-stone-500: #8d877c; --primitive-red-600: #932f32; --primitive-red-700: #762226; --primitive-copper-500: #b16245; --primitive-olive-500: #6f7662; --primitive-gold-500: #c79842; --primitive-white: #ffffff; --primitive-space-1: 0.25rem; --primitive-space-2: 0.5rem; --primitive-space-3: 0.75rem; --primitive-space-4: 1rem; --primitive-space-5: 1.25rem; --primitive-space-6: 1.5rem; --primitive-space-8: 2rem; --primitive-space-10: 2.5rem; --primitive-space-12: 3rem; --primitive-space-16: 4rem; --primitive-space-20: 5rem; --primitive-space-24: 6rem; --primitive-radius-sm: 0.75rem; --primitive-radius-md: 1.125rem; --primitive-radius-lg: 1.75rem; --primitive-radius-xl: 2.5rem; --primitive-radius-pill: 999px; --primitive-shadow-soft: 0 1.5rem 4rem rgb(23 26 23 / 0.12); --primitive-shadow-raised: 0 2rem 6rem rgb(23 26 23 / 0.2); --primitive-duration-fast: 180ms; --primitive-duration-normal: 320ms; --primitive-duration-slow: 700ms; --primitive-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --color-page: var(--primitive-paper-50); --color-surface: var(--primitive-paper-100); --color-surface-strong: var(--primitive-paper-200); --color-ink: var(--primitive-ink-950); --color-ink-soft: #5e5b54; --color-line: rgb(32 35 31 / 0.18); --color-brand: var(--primitive-red-600); --color-brand-hover: var(--primitive-red-700); --color-focus: var(--primitive-gold-500); --color-dark-surface: var(--primitive-ink-900); --color-dark-ink: var(--primitive-paper-50); --color-dark-ink-soft: #c9c3b8; --font-body: "Vazirmatn", Tahoma, Arial, sans-serif; --font-code: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --font-size-label: clamp(0.9375rem, 0.88rem + 0.15vw, 1rem); --font-size-body: clamp(1.0625rem, 1rem + 0.16vw, 1.2rem); --font-size-lead: clamp(1.16rem, 1.02rem + 0.45vw, 1.5rem); --font-size-h3: clamp(1.75rem, 1.3rem + 1.25vw, 2.7rem); --font-size-h2: clamp(2.35rem, 1.65rem + 2.45vw, 4.75rem); --font-size-h1: clamp(2.8rem, 2rem + 3.4vw, 5.1rem); --line-body: 1.9; --line-heading: 1.2; --content-width: min(92vw, 1480px); --section-space: clamp(4.5rem, 3rem + 6vw, 9rem); --gutter: clamp(1.1rem, 0.4rem + 3vw, 4rem); --button-height: 3.4rem; --button-radius: var(--primitive-radius-pill); --button-bg: var(--color-brand); --button-fg: var(--primitive-white); --button-bg-hover: var(--color-brand-hover); --button-shadow: 0 0.9rem 2.2rem rgb(118 34 38 / 0.2); --card-bg: rgb(255 255 255 / 0.52); --card-border: 1px solid rgb(32 35 31 / 0.14); --card-radius: var(--primitive-radius-lg); --card-shadow-hover: var(--primitive-shadow-soft); --control-size: 3.25rem; --control-radius: var(--primitive-radius-pill); --control-bg: rgb(247 243 235 / 0.94); --control-fg: var(--primitive-ink-950); --control-border: 1px solid rgb(23 26 23 / 0.18); }
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.75rem; background: var(--color-page); }
body { margin: 0px; min-width: 320px; overflow-x: clip; background: var(--color-page); color: var(--color-ink); font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-body); text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
::selection { background: var(--color-brand); color: var(--primitive-white); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
.skip-link { position: fixed; inset: 0.75rem auto auto 0.75rem; z-index: 2000; padding: 0.75rem 1rem; border-radius: var(--primitive-radius-pill); background: var(--primitive-white); color: var(--primitive-ink-950); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.eyebrow { display: flex; align-items: center; gap: 0.7rem; margin: 0px 0px 1.25rem; color: currentcolor; font-size: var(--font-size-label); font-weight: 650; letter-spacing: 0.015em; opacity: 0.72; }
.eyebrow::before { width: 2.5rem; height: 1px; background: currentcolor; content: ""; opacity: 0.5; }
.button { display: inline-flex; min-height: var(--button-height); align-items: center; justify-content: center; gap: 0.8rem; padding: 0.7rem 1.45rem; border: 1px solid transparent; border-radius: var(--button-radius); cursor: pointer; font-size: 0.98rem; font-weight: 700; transition: background var(--primitive-duration-fast) ease,
    border-color var(--primitive-duration-fast) ease,
    color var(--primitive-duration-fast) ease,
    box-shadow var(--primitive-duration-fast) ease,
    transform var(--primitive-duration-fast) var(--primitive-ease-out); touch-action: manipulation; }
.button svg { width: 1.2rem; height: 1.2rem; transform: scaleX(-1); }
.button--primary { background: var(--button-bg); box-shadow: var(--button-shadow); color: var(--button-fg); }
.button--quiet { border-color: var(--color-line); background: transparent; color: var(--color-ink); }
.button--light { background: var(--primitive-paper-50); color: var(--primitive-ink-950); }
.button:active { transform: scale(0.975); }
.site-header { position: fixed; z-index: 900; inset: 0.75rem var(--gutter) auto; display: grid; min-height: 4.55rem; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 1.2rem; padding: 0.55rem 0.7rem 0.55rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--primitive-radius-pill); background: rgba(27, 30, 27, 0.78); box-shadow: rgba(18, 20, 18, 0.16) 0px 1rem 3.2rem; color: var(--primitive-paper-50); backdrop-filter: blur(18px) saturate(130%); transition: background var(--primitive-duration-normal) ease,
    transform var(--primitive-duration-normal) var(--primitive-ease-out); }
.site-header.is-hidden { transform: translateY(calc(-100% - 1.5rem)); }
.brand { display: inline-flex; min-height: 3.15rem; align-items: center; gap: 0.55rem; padding-inline: 0.8rem; border-radius: var(--primitive-radius-pill); }
.brand__mark, .loading-screen__mark { display: flex; width: 1.55rem; height: 1.1rem; align-items: flex-end; gap: 0.16rem; direction: ltr; }
.brand__mark i, .loading-screen__mark i { width: 0.27rem; border-radius: 0.2rem; background: currentcolor; transform-origin: center bottom; }
.brand__mark i:nth-child(1), .loading-screen__mark i:nth-child(1) { height: 35%; }
.brand__mark i:nth-child(2), .loading-screen__mark i:nth-child(2) { height: 68%; }
.brand__mark i:nth-child(3), .loading-screen__mark i:nth-child(3) { height: 100%; }
.brand__name { font-family: var(--font-code); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.22em; }
.brand__fa { padding-inline-start: 0.55rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.9rem; font-weight: 650; opacity: 0.72; }
.category-nav { min-width: 0px; overflow: hidden; }
.category-nav__track { display: flex; align-items: center; justify-content: center; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; }
.category-nav__track::-webkit-scrollbar { display: none; }
.category-nav__item { display: inline-flex; min-width: max-content; min-height: 2.75rem; align-items: center; gap: 0.42rem; padding: 0.45rem 0.85rem; border: 0px; border-radius: var(--primitive-radius-pill); background: transparent; color: inherit; cursor: pointer; font-size: 0.9rem; font-weight: 600; opacity: 0.62; transition: opacity var(--primitive-duration-fast) ease,
    background var(--primitive-duration-fast) ease; }
.category-nav__item b { font-family: var(--font-code); font-size: 0.875rem; letter-spacing: 0.08em; }
.category-nav__item.is-active { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.header-finder { display: inline-flex; min-height: 3.15rem; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; border: 0px; border-radius: var(--primitive-radius-pill); background: var(--primitive-paper-50); color: var(--primitive-ink-950); cursor: pointer; font-size: 0.9rem; font-weight: 700; }
.header-finder svg { width: 1.05rem; height: 1.05rem; }
.hero { position: relative; min-height: 100svh; overflow: clip; background: radial-gradient(circle at 18% 24%, rgba(177, 98, 69, 0.18), transparent 26rem), linear-gradient(135deg, rgb(36, 40, 34), rgb(25, 28, 25) 64%); color: var(--primitive-paper-50); }
.hero::before { position: absolute; inset: 0px; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 7vw 7vw; content: ""; mask-image: linear-gradient(black, transparent 90%); }
.hero__pin { position: relative; display: flex; width: 100%; min-height: 100svh; flex-direction: column; justify-content: center; padding: clamp(7.5rem, 12vh, 10rem) var(--gutter) 2rem; }
.hero__grid { position: relative; z-index: 1; display: grid; width: var(--content-width); margin: auto; grid-template-columns: minmax(20rem, 0.78fr) minmax(28rem, 1.22fr); align-items: center; gap: clamp(2rem, 5vw, 7rem); }
.hero__copy { position: relative; z-index: 3; max-width: 42rem; }
.hero h1, .catalogue-intro h2, .chapter__mast h2, .finder-section h2, .closing h2 { margin: 0px; font-size: var(--font-size-h1); font-weight: 560; letter-spacing: -0.045em; line-height: var(--line-heading); }
.hero h1 em, .catalogue-intro h2 em, .closing h2 em { color: rgb(215, 123, 88); font-style: normal; font-weight: 760; }
.hero__lead { max-width: 35rem; margin: 1.6rem 0px 0px; color: rgb(206, 201, 191); font-size: var(--font-size-lead); line-height: 1.85; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.hero .button--quiet { border-color: rgba(255, 255, 255, 0.24); color: var(--primitive-paper-50); }
.hero__selector { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
.hero-beat { display: inline-flex; min-height: 3rem; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--primitive-radius-pill); background: transparent; color: var(--primitive-paper-50); cursor: pointer; opacity: 0.58; transition: opacity var(--primitive-duration-fast) ease,
    background var(--primitive-duration-fast) ease,
    border-color var(--primitive-duration-fast) ease; }
.hero-beat b { font-family: var(--font-code); font-size: 0.82rem; letter-spacing: 0.08em; }
.hero-beat span { font-size: 0.88rem; font-weight: 650; }
.hero-beat.is-active { border-color: rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.1); opacity: 1; }
.hero__visual { position: relative; min-height: clamp(31rem, 64vh, 48rem); perspective: 1200px; touch-action: pan-y; }
.hero__orbit { position: absolute; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 50%; pointer-events: none; }
.hero__orbit--outer { inset: 3% 4% 6%; transform: rotate(-11deg); }
.hero__orbit--inner { inset: 15% 15% 18%; border-color: rgba(199, 152, 66, 0.24); transform: rotate(17deg); }
.hero__letter { position: absolute; inset: 50% auto auto 50%; color: rgba(255, 255, 255, 0.055); font-family: var(--font-code); font-size: clamp(18rem, 34vw, 38rem); font-weight: 800; line-height: 0.65; transform: translate(-50%, -50%); user-select: none; }
.hero__slides { position: absolute; inset: 3% 6% 8%; }
.hero-slide { position: absolute; inset: 0px; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translate3d(8%, 3%, 0px) scale(0.94) rotate(2deg); transition: opacity 480ms ease,
    transform 720ms var(--primitive-ease-out); }
.hero-slide::before { position: absolute; z-index: -1; width: 72%; aspect-ratio: 1 / 1; border-radius: 42% 58% 54% 46% / 49% 43% 57% 51%; background: var(--hero-glow, rgb(177 98 69 / 0.2)); filter: blur(1px); content: ""; }
.hero-slide img { width: min(82%, 42rem); max-height: 72vh; object-fit: contain; border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.22) 0px 2.5rem 5rem; }
.hero-slide.is-active { z-index: 2; opacity: 1; transform: translate3d(0px, 0px, 0px) scale(1) rotate(0deg); }
.hero__visual-meta { position: absolute; z-index: 4; inset: auto 6% 4% auto; display: flex; align-items: baseline; gap: 0.7rem; padding: 0.65rem 1rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--primitive-radius-pill); background: rgba(24, 27, 24, 0.66); backdrop-filter: blur(10px); }
.hero__visual-meta span { font-size: 0.9rem; font-weight: 600; opacity: 0.72; }
.hero__visual-meta strong { font-family: var(--font-code); font-size: 1rem; letter-spacing: 0.05em; }
.hero__footer { position: relative; z-index: 3; display: flex; width: var(--content-width); align-items: center; justify-content: flex-end; gap: 1rem; margin: 1.2rem auto 0px; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgb(189, 183, 173); font-size: 0.88rem; }
.hero__footer b { margin-inline-end: 0.2rem; color: var(--primitive-paper-50); font-family: var(--font-code); font-size: 1rem; }
.hero__scroll { display: inline-flex; align-items: center; gap: 0.65rem; }
.hero__scroll i { position: relative; display: inline-block; width: 2.5rem; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
.hero__scroll i::after { position: absolute; inset: 0px; background: var(--primitive-paper-50); content: ""; transform: translateX(100%); animation: 2.2s ease-in-out 0s infinite normal none running scroll-line; }
@keyframes scroll-line { 
  50%, 100% { transform: translateX(-100%); }
}
.catalogue-intro { display: grid; width: var(--content-width); margin: 0px auto; padding: var(--section-space) 0; grid-template-columns: minmax(12rem, 0.55fr) minmax(24rem, 1.4fr) minmax(18rem, 0.8fr); align-items: end; gap: clamp(2rem, 4vw, 5rem); }
.catalogue-intro .eyebrow { align-self: start; }
.catalogue-intro h2 { font-size: var(--font-size-h2); }
.catalogue-intro p:last-child { margin: 0px; color: var(--color-ink-soft); line-height: 1.95; }
.catalogue { position: relative; }
.chapter { --chapter-bg: var(--primitive-paper-100); --chapter-surface: rgb(255 255 255 / 0.56); --chapter-surface-strong: var(--primitive-paper-50); --chapter-ink: var(--primitive-ink-950); --chapter-soft: #615d55; --chapter-line: rgb(23 26 23 / 0.15); --chapter-accent: var(--primitive-red-600); position: relative; overflow: clip; padding: var(--section-space) var(--gutter); background: var(--chapter-bg); color: var(--chapter-ink); }
.chapter[data-prefix="M"] { --chapter-bg: #e8e1d5; --chapter-accent: #96383a; }
.chapter[data-prefix="B"] { --chapter-bg: #202620; --chapter-surface: rgb(255 255 255 / 0.055); --chapter-surface-strong: #2b322b; --chapter-ink: #f4efe6; --chapter-soft: #c5c0b7; --chapter-line: rgb(255 255 255 / 0.13); --chapter-accent: #c79650; }
.chapter[data-prefix="K"] { --chapter-bg: #d8d0c2; --chapter-accent: #6a765e; }
.chapter[data-prefix="W"] { --chapter-bg: #edf0eb; --chapter-accent: #647d78; }
.chapter[data-prefix="F"] { --chapter-bg: #222421; --chapter-surface: rgb(255 255 255 / 0.06); --chapter-surface-strong: #2d302c; --chapter-ink: #f4efe6; --chapter-soft: #c8c1b6; --chapter-line: rgb(255 255 255 / 0.13); --chapter-accent: #b66548; }
.chapter[data-prefix="C"] { --chapter-bg: #e5e0d7; --chapter-accent: #7b6652; }
.chapter[data-prefix="G"] { --chapter-bg: #513a31; --chapter-surface: rgb(255 255 255 / 0.065); --chapter-surface-strong: #60463b; --chapter-ink: #f7efe3; --chapter-soft: #d8c9bc; --chapter-line: rgb(255 255 255 / 0.14); --chapter-accent: #e0aa65; }
.chapter[data-prefix="T"] { --chapter-bg: #d9d2c7; --chapter-accent: #87674e; }
.chapter[data-prefix="H"] { --chapter-bg: #40362f; --chapter-surface: rgb(255 255 255 / 0.065); --chapter-surface-strong: #50443b; --chapter-ink: #f7efe4; --chapter-soft: #d7c9bc; --chapter-line: rgb(255 255 255 / 0.14); --chapter-accent: #d79b58; }
.chapter[data-prefix="O"] { --chapter-bg: #c9c3b8; --chapter-accent: #8c493d; }
.chapter[data-prefix="E"] { --chapter-bg: #d8ded8; --chapter-accent: #56766d; }
.chapter[data-prefix="R"] { --chapter-bg: #513a31; --chapter-surface: rgb(255 255 255 / 0.065); --chapter-surface-strong: #60463b; --chapter-ink: #f7efe3; --chapter-soft: #d8c9bc; --chapter-line: rgb(255 255 255 / 0.14); --chapter-accent: #e0aa65; }
.chapter::before { position: absolute; inset: -12rem auto auto -9rem; width: 30rem; aspect-ratio: 1 / 1; border: 1px solid var(--chapter-line); border-radius: 50%; content: ""; pointer-events: none; }
.chapter__inner { position: relative; z-index: 1; width: var(--content-width); margin: 0px auto; }
.chapter__mast { display: grid; grid-template-columns: minmax(13rem, 0.55fr) minmax(22rem, 1.1fr) minmax(18rem, 0.75fr); align-items: end; gap: clamp(1.5rem, 4vw, 4.5rem); margin-bottom: clamp(2.2rem, 5vw, 4.5rem); }
.chapter__index { display: flex; align-items: baseline; gap: 0.8rem; color: var(--chapter-soft); }
.chapter__index strong { color: var(--chapter-accent); font-family: var(--font-code); font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 500; line-height: 0.72; }
.chapter__index span { font-size: 0.92rem; font-weight: 650; }
.chapter__mast h2 { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--font-size-h2); }
.chapter__mast h2 b { color: var(--chapter-accent); font-family: var(--font-code); font-size: 0.32em; font-weight: 700; letter-spacing: 0.08em; }
.chapter__statement { margin: 0px; color: var(--chapter-soft); font-size: var(--font-size-lead); line-height: 1.85; }
.product-stage { display: grid; min-height: 43rem; grid-template-columns: minmax(0px, 1.26fr) minmax(21rem, 0.74fr); overflow: hidden; border: 1px solid var(--chapter-line); border-radius: var(--primitive-radius-xl); background: var(--chapter-surface); box-shadow: rgba(18, 20, 18, 0.08) 0px 2rem 6rem; }
.product-stage__visual { --selection-color: var(--chapter-accent); --tilt-x: 0deg; --tilt-y: 0deg; position: relative; display: grid; min-height: 42rem; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--selection-color) 20%, transparent), transparent 42%),
    linear-gradient(145deg, var(--chapter-surface-strong), color-mix(in srgb, var(--chapter-surface-strong) 82%, var(--chapter-accent))); perspective: 1000px; touch-action: pan-y; }
.product-stage__visual::before, .product-stage__visual::after { position: absolute; border: 1px solid var(--chapter-line); border-radius: 50%; content: ""; pointer-events: none; }
.product-stage__visual::before { inset: 9% 16%; transform: rotate(-9deg); }
.product-stage__visual::after { inset: 23% 29%; transform: rotate(18deg); }
.product-stage__code { position: absolute; z-index: 0; inset: 1.2rem auto auto 1.5rem; color: var(--chapter-ink); font-family: var(--font-code); font-size: clamp(5rem, 12vw, 11rem); font-weight: 800; letter-spacing: -0.08em; line-height: 1; opacity: 0.055; }
.product-stage__image-wrap { position: relative; z-index: 2; display: grid; width: min(75%, 36rem); aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border-radius: 2rem; background: rgb(233, 226, 215); box-shadow: rgba(0, 0, 0, 0.16) 0px 2rem 5rem; isolation: isolate; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform 140ms ease-out; }
.product-stage__image-wrap::after { position: absolute; z-index: -1; inset: auto 17% 5%; height: 9%; border-radius: 50%; background: rgba(10, 12, 10, 0.28); content: ""; filter: blur(18px); transform: translateZ(-20px); }
.product-stage__image { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; mix-blend-mode: multiply; transform: translateZ(28px); transition: opacity var(--primitive-duration-normal) ease,
    transform var(--primitive-duration-slow) var(--primitive-ease-out); }
.product-stage__image.is-changing { opacity: 0; transform: translate3d(0px, 1.2rem, 28px) scale(0.96); }
.product-stage__drag-hint { position: absolute; z-index: 4; inset: auto auto 1.3rem 1.3rem; display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border: 1px solid var(--chapter-line); border-radius: var(--primitive-radius-pill); background: color-mix(in srgb, var(--chapter-surface-strong) 88%, transparent); color: var(--chapter-soft); font-size: 0.9rem; font-weight: 650; backdrop-filter: blur(10px); }
.product-stage__drag-hint[hidden] { display: none; }
.product-stage__drag-hint svg { width: 1rem; height: 1rem; }
.stage-details { position: absolute; z-index: 5; inset: auto 1.3rem 1.3rem auto; display: inline-flex; min-height: 3.2rem; align-items: center; gap: 0.55rem; padding: 0.5rem 1rem; border: 0px; border-radius: var(--primitive-radius-pill); background: var(--chapter-ink); color: var(--chapter-bg); cursor: pointer; font-size: 0.9rem; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.16) 0px 1rem 2rem; }
.stage-details svg { width: 1.1rem; height: 1.1rem; }
.product-stage__panel { display: flex; min-width: 0px; flex-direction: column; padding: clamp(1.6rem, 3vw, 3rem); border-inline-start: 1px solid var(--chapter-line); }
.stage-family-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--chapter-soft); font-size: 0.9rem; font-weight: 650; }
.stage-family-label b { color: var(--chapter-accent); font-family: var(--font-code); font-size: 0.88rem; letter-spacing: 0.05em; }
.product-stage__panel h3 { margin: 1.1rem 0px 0px; font-size: var(--font-size-h3); font-weight: 610; letter-spacing: -0.035em; line-height: 1.35; }
.stage-summary { min-height: 5.8rem; margin: 1rem 0px 0px; color: var(--chapter-soft); font-size: 1.075rem; line-height: 1.9; }
.selector-group { margin-top: 1.45rem; }
.selector-pair { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.85rem; }
.selector-group__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; color: var(--chapter-soft); font-size: 0.9rem; font-weight: 650; }
.selector-group__head output { color: var(--chapter-ink); font-family: var(--font-code); font-size: 0.875rem; }
.model-options, .material-options, .base-options, .colour-options, .stage-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.model-option, .material-option, .base-option, .spec-chip { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: 0.45rem 0.78rem; border: 1px solid var(--chapter-line); border-radius: var(--primitive-radius-pill); background: transparent; color: var(--chapter-soft); font-size: 0.9rem; font-weight: 650; }
button.model-option, button.material-option, button.base-option { cursor: pointer; }
.model-option { font-family: var(--font-code); letter-spacing: 0.035em; }
.model-option.is-active, .material-option.is-active, .base-option.is-active { border-color: var(--chapter-accent); background: var(--chapter-accent); color: rgb(255, 255, 255); }
.colour-options { gap: 0.65rem; }
.colour-option { position: relative; width: 3rem; height: 3rem; padding: 0px; border: 1px solid var(--chapter-line); border-radius: 50%; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--chapter-surface-strong) 82%, transparent); }
.colour-option::after { position: absolute; inset: 50% auto auto 50%; width: 0.6rem; height: 0.35rem; border-style: solid; border-color: white; border-image: initial; border-width: 0px 0px 2px 2px; content: ""; opacity: 0; transform: translate(-50%, -65%) rotate(-45deg); }
.colour-option.is-active { box-shadow: 0 0 0 2px var(--chapter-bg),
    0 0 0 4px var(--chapter-accent),
    inset 0 0 0 4px color-mix(in srgb, var(--chapter-surface-strong) 82%, transparent); }
.colour-option.is-active::after { opacity: 1; }
.stage-specs { margin-top: auto; padding-top: 1.5rem; }
.spec-chip { min-height: 2.75rem; color: var(--chapter-soft); font-size: 0.875rem; }
.selection-note { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--chapter-line); color: var(--chapter-soft); font-size: 0.9rem; }
.selection-note i { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: var(--selection-color, var(--chapter-accent)); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--selection-color, var(--chapter-accent)) 15%, transparent); }
.family-browser { position: relative; margin-top: clamp(2rem, 4vw, 3.5rem); }
.family-browser__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.family-browser__head h3 { margin: 0px; font-size: clamp(1.45rem, 1.1rem + 0.8vw, 2.1rem); font-weight: 610; }
.family-browser__head p { margin: 0.25rem 0px 0px; color: var(--chapter-soft); font-size: 1.0625rem; }
.family-browser__rail-shell { position: relative; }
.rail-controls { position: absolute; z-index: 12; inset: 50% 0px auto; height: 0px; direction: ltr; pointer-events: none; }
.rail-arrow { position: absolute; top: 0px; display: grid; width: var(--control-size); height: var(--control-size); place-items: center; padding: 0px; border-top-style: ; border-top-width: ; border-right-style: ; border-right-width: ; border-bottom-style: ; border-bottom-width: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-color: var(--chapter-line); border-radius: var(--control-radius); background: var(--chapter-surface-strong); color: var(--chapter-ink); cursor: pointer; box-shadow: rgba(15, 17, 15, 0.18) 0px 0.8rem 2rem; pointer-events: auto; transform: translateY(-50%); transition: opacity var(--primitive-duration-fast) ease,
    transform var(--primitive-duration-fast) var(--primitive-ease-out),
    background var(--primitive-duration-fast) ease; }
.rail-arrow--prev { inset-inline-start: clamp(-1.45rem, -1.4vw, -0.55rem); }
.rail-arrow--next { inset-inline-end: clamp(-1.45rem, -1.4vw, -0.55rem); }
.rail-arrow svg { width: 1.15rem; height: 1.15rem; }
.rail-arrow--prev svg { transform: rotate(180deg); }
.rail-arrow.swiper-button-disabled, .rail-arrow[disabled] { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.82); }
.family-rail { position: relative; overflow: visible; touch-action: pan-y pinch-zoom; }
.family-rail .swiper-wrapper { align-items: stretch; }
.family-rail .swiper-slide { width: auto; height: auto; }
.family-rail:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 0.85rem; overflow-x: auto; padding-bottom: 0.75rem; scrollbar-width: thin; }
.family-card { position: relative; display: grid; width: clamp(13.5rem, 19vw, 18rem); min-height: 21rem; grid-template-rows: 1fr auto; overflow: hidden; padding: 0px; border: 1px solid var(--chapter-line); border-radius: var(--primitive-radius-lg); background: var(--chapter-surface); color: var(--chapter-ink); cursor: grab; text-align: start; transition: border-color var(--primitive-duration-normal) ease,
    box-shadow var(--primitive-duration-normal) ease,
    transform var(--primitive-duration-normal) var(--primitive-ease-out); user-select: none; }
.family-card:active { cursor: grabbing; }
.family-card__visual { position: relative; display: grid; min-height: 14rem; place-items: center; overflow: hidden; background: color-mix(in srgb, #eee7dc 92%, var(--chapter-accent)); isolation: isolate; }
.family-card__visual::before { position: absolute; width: 80%; aspect-ratio: 1 / 1; border: 1px solid var(--chapter-line); border-radius: 50%; content: ""; }
.family-card img { position: relative; z-index: 1; width: 85%; height: 13rem; object-fit: contain; border-radius: 0px 0px 0.9rem 0.9rem; mix-blend-mode: multiply; transition: transform 600ms var(--primitive-ease-out); }
.family-card__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.7rem; padding: 1rem 1.05rem 1.15rem; }
.family-card__body strong { display: block; font-size: 1.2rem; font-weight: 650; }
.family-card__body span { display: block; margin-top: 0.2rem; color: var(--chapter-soft); font-size: 0.9rem; }
.family-card__code { color: var(--chapter-accent); font-family: var(--font-code); font-size: 0.9rem; font-weight: 700; }
.family-card.is-active { border-color: var(--chapter-accent); box-shadow: rgba(15, 17, 15, 0.13) 0px 1.3rem 3rem; }
.material-story { position: relative; min-height: 100svh; overflow: clip; background: rgb(159, 82, 58); color: rgb(247, 240, 229); }
.material-story__pin { display: grid; width: 100%; min-height: 100svh; grid-template-columns: minmax(22rem, 0.9fr) minmax(28rem, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); padding: var(--section-space) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)); }
.material-story__copy { position: relative; z-index: 3; }
.material-story__copy h2 { margin: 0px; font-size: var(--font-size-h2); font-weight: 570; letter-spacing: -0.04em; line-height: 1.25; }
.material-story__copy h2 em { color: rgb(255, 210, 155); font-style: normal; }
.material-story__copy > p:last-of-type { max-width: 35rem; margin: 1.4rem 0px 0px; color: rgb(236, 213, 199); font-size: var(--font-size-lead); }
.material-steps { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.material-step { display: inline-flex; min-height: 3rem; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--primitive-radius-pill); background: transparent; color: inherit; cursor: pointer; font-size: 0.9rem; font-weight: 650; opacity: 0.58; }
.material-step b { font-family: var(--font-code); }
.material-step.is-active { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.material-story__visual { position: relative; min-height: clamp(32rem, 70vh, 46rem); }
.material-panel { position: absolute; inset: 5% 4%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--primitive-radius-xl); background: rgb(239, 233, 223); box-shadow: rgba(59, 23, 15, 0.28) 0px 3rem 8rem; opacity: 0; transform: translate3d(7%, 8%, 0px) rotate(3deg) scale(0.94); transition: opacity 420ms ease,
    transform 680ms var(--primitive-ease-out); }
.material-panel:nth-child(2) { inset: 10% 0px 0px 10%; }
.material-panel:nth-child(3) { inset: 0px 10% 10% 0px; }
.material-panel.is-active { z-index: 3; opacity: 1; transform: none; }
.material-panel img { width: 100%; height: 100%; object-fit: contain; }
.material-panel span { position: absolute; inset: 1rem 1rem auto auto; padding: 0.45rem 0.75rem; border-radius: var(--primitive-radius-pill); background: rgba(32, 35, 31, 0.82); color: rgb(255, 255, 255); font-size: 0.9rem; }
.spatial-story { position: relative; display: grid; min-height: 78svh; grid-template-columns: minmax(24rem, 0.85fr) minmax(28rem, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); overflow: clip; padding: var(--section-space) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)); background: rgb(211, 178, 142); color: rgb(42, 38, 33); }
.spatial-story::before { position: absolute; inset: 14% auto auto -8%; width: 46vw; aspect-ratio: 1 / 1; border: 1px solid rgba(42, 38, 33, 0.16); border-radius: 50%; content: ""; }
.spatial-story__copy { position: relative; z-index: 3; }
.spatial-story__copy h2 { margin: 0px; font-size: var(--font-size-h2); font-weight: 570; letter-spacing: -0.04em; line-height: 1.3; }
.spatial-story__copy h2 em { color: rgb(142, 56, 45); font-style: normal; }
.spatial-story__copy p:last-child { max-width: 37rem; color: rgb(92, 80, 69); font-size: var(--font-size-lead); }
.spatial-story__visual { position: relative; min-height: 34rem; }
.spatial-card { position: absolute; display: grid; overflow: hidden; border: 1px solid rgba(42, 38, 33, 0.16); border-radius: var(--primitive-radius-xl); background: rgb(240, 233, 220); box-shadow: rgba(56, 36, 22, 0.14) 0px 2rem 5rem; }
.spatial-card:first-child { inset: 2% 19% 14% 1%; transform: rotate(-3deg); }
.spatial-card:last-child { inset: 22% 0px 0px 52%; transform: rotate(4deg); }
.spatial-card img { width: 100%; height: 100%; object-fit: contain; }
.finder-section { padding: var(--section-space) var(--gutter); background: var(--primitive-paper-50); }
.finder-section__head, .finder-toolbar, .finder-grid, .finder-empty { width: var(--content-width); margin-inline: auto; }
.finder-section__head { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: end; gap: 3rem; }
.finder-section h2 { font-size: var(--font-size-h2); }
.finder-section__head > p { margin: 0px; color: var(--color-ink-soft); font-size: var(--font-size-lead); }
.finder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding: 1rem; border: 1px solid var(--color-line); border-radius: var(--primitive-radius-lg); background: var(--primitive-paper-100); }
.search-field { display: flex; min-width: min(100%, 23rem); min-height: 3.4rem; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem; border: 1px solid var(--color-line); border-radius: var(--primitive-radius-pill); background: var(--primitive-paper-50); }
.search-field svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.search-field input { width: 100%; min-height: 2.75rem; border: 0px; outline: 0px; background: transparent; color: var(--color-ink); font-size: 1rem; }
.search-field input::placeholder { color: rgb(129, 123, 112); }
.finder-filters { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.finder-filter { display: inline-flex; min-width: 2.9rem; min-height: 2.9rem; align-items: center; justify-content: center; padding: 0.4rem 0.75rem; border: 1px solid var(--color-line); border-radius: var(--primitive-radius-pill); background: transparent; color: var(--color-ink-soft); cursor: pointer; font-family: var(--font-code); font-size: 0.9rem; font-weight: 700; }
.finder-filter.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--primitive-paper-50); }
.finder-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.finder-card { display: grid; min-height: 8rem; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.7rem; border: 1px solid var(--color-line); border-radius: var(--primitive-radius-md); background: rgb(255, 253, 248); color: var(--color-ink); cursor: pointer; text-align: start; transition: transform var(--primitive-duration-normal) var(--primitive-ease-out),
    border-color var(--primitive-duration-normal) ease,
    box-shadow var(--primitive-duration-normal) ease; }
.finder-card img { width: 5.5rem; height: 6.2rem; border-radius: 0.65rem; object-fit: contain; background: var(--primitive-paper-100); mix-blend-mode: multiply; }
.finder-card strong { display: block; font-size: 1.05rem; font-weight: 680; }
.finder-card small { display: block; margin-top: 0.25rem; color: var(--color-ink-soft); font-size: 0.875rem; }
.finder-card b { color: var(--color-brand); font-family: var(--font-code); font-size: 0.875rem; }
.finder-empty { margin-top: 2rem; color: var(--color-ink-soft); text-align: center; }
.finder-more { margin: 1.4rem auto 0px; }
.finder-more[hidden] { display: none; }
.closing { position: relative; display: grid; min-height: 84svh; grid-template-columns: minmax(22rem, 0.9fr) minmax(25rem, 1.1fr); align-items: center; gap: 4rem; overflow: hidden; padding: var(--section-space) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)); background: rgb(32, 35, 31); color: var(--primitive-paper-50); }
.closing__graphic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; direction: ltr; }
.closing__graphic span { display: grid; min-height: clamp(18rem, 44vw, 36rem); place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--primitive-radius-xl); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.22); font-family: var(--font-code); font-size: clamp(4rem, 7vw, 8rem); font-weight: 800; }
.closing__graphic span:nth-child(2), .closing__graphic span:nth-child(4) { transform: translateY(8%); }
.closing__content { position: relative; z-index: 2; max-width: 45rem; }
.closing h2 { font-size: var(--font-size-h2); }
.closing__content > p:last-of-type { max-width: 38rem; margin: 1.5rem 0px 2rem; color: rgb(201, 195, 184); font-size: var(--font-size-lead); }
.site-footer { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); background: rgb(21, 24, 21); color: rgb(170, 165, 156); font-size: 1.0625rem; }
.site-footer a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--primitive-paper-50); }
.product-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0px; padding: 0px; border: 0px; background: transparent; color: var(--color-ink); }
.product-dialog::backdrop { background: rgba(13, 15, 13, 0.72); backdrop-filter: blur(8px); }
.product-dialog__backdrop { position: fixed; inset: 0px; }
.product-dialog__backdrop button { width: 100%; height: 100%; padding: 0px; border: 0px; background: transparent; cursor: default; }
.product-dialog__panel { position: absolute; inset: 4vh 3vw; display: grid; grid-template-columns: minmax(24rem, 1.05fr) minmax(24rem, 0.95fr); overflow: hidden; border-radius: var(--primitive-radius-xl); background: var(--primitive-paper-50); box-shadow: rgba(0, 0, 0, 0.34) 0px 3rem 10rem; }
.dialog-close { position: absolute; z-index: 6; inset: 1rem 1rem auto auto; display: grid; width: 3.2rem; height: 3.2rem; place-items: center; padding: 0px; border: 1px solid rgba(23, 26, 23, 0.16); border-radius: 50%; background: rgba(247, 243, 235, 0.9); color: var(--color-ink); cursor: pointer; backdrop-filter: blur(10px); }
.dialog-close svg { width: 1.15rem; height: 1.15rem; }
.product-dialog__gallery { display: grid; min-height: 0px; grid-template-rows: 1fr auto; gap: 0.8rem; padding: 1rem; background: var(--primitive-paper-200); }
.dialog-image-stage { display: grid; min-height: 0px; place-items: center; overflow: hidden; border-radius: var(--primitive-radius-lg); background: rgb(255, 255, 255); }
.dialog-image-stage img { width: 100%; height: 100%; object-fit: contain; }
.dialog-thumbs { display: flex; gap: 0.6rem; overflow-x: auto; }
.dialog-thumb { width: 5rem; height: 5rem; flex: 0 0 auto; padding: 0.2rem; border: 1px solid transparent; border-radius: 0.9rem; background: rgb(255, 255, 255); cursor: pointer; }
.dialog-thumb img { width: 100%; height: 100%; border-radius: 0.65rem; object-fit: contain; }
.dialog-thumb.is-active { border-color: var(--color-brand); }
.product-dialog__content { overflow-y: auto; padding: clamp(2rem, 4vw, 4.5rem); }
.product-dialog__content h2 { margin: 0px; font-size: var(--font-size-h2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.3; }
.product-dialog__summary { color: var(--color-ink-soft); font-size: var(--font-size-lead); }
.dialog-variants { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0px; }
.dialog-variant { min-height: 3rem; padding: 0.45rem 0.9rem; border: 1px solid var(--color-line); border-radius: var(--primitive-radius-pill); background: transparent; color: var(--color-ink-soft); cursor: pointer; font-family: var(--font-code); font-size: 0.9rem; }
.dialog-variant.is-active { border-color: var(--color-ink); background: var(--color-ink); color: rgb(255, 255, 255); }
.dialog-specs { display: grid; margin: 1.5rem 0px 2rem; border-top: 1px solid var(--color-line); }
.dialog-specs > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.85rem 0px; border-bottom: 1px solid var(--color-line); }
.dialog-specs dt { color: var(--color-ink-soft); font-size: 1rem; }
.dialog-specs dd { margin: 0px; font-size: 1.0625rem; font-weight: 620; }
.loading-screen { position: fixed; z-index: 3000; inset: 0px; display: grid; place-content: center; place-items: center; gap: 1rem; background: rgb(26, 29, 26); color: var(--primitive-paper-50); transition: opacity 600ms, visibility 600ms; }
.loading-screen.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.loading-screen__mark { width: 2.4rem; height: 2.3rem; }
.loading-screen p { margin: 0px; font-size: 1.0625rem; }
.loading-screen > span { position: relative; width: 8rem; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.loading-screen > span::after { position: absolute; inset: 0px; background: var(--color-brand); content: ""; animation: 1.2s ease-in-out 0s infinite normal none running loader; transform: translateX(100%); }
@keyframes loader { 
  50%, 100% { transform: translateX(-100%); }
}
.noscript { position: fixed; z-index: 4000; inset: auto 1rem 1rem; padding: 1rem; border-radius: var(--primitive-radius-md); background: rgb(255, 255, 255); color: rgb(17, 17, 17); text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .button--primary:hover { background: var(--button-bg-hover); box-shadow: rgba(118, 34, 38, 0.26) 0px 1.2rem 2.8rem; }
  .button--quiet:hover { border-color: currentcolor; background: rgba(255, 255, 255, 0.06); }
  .category-nav__item:hover, .hero-beat:hover { opacity: 1; }
  .rail-arrow:hover { background: color-mix(in srgb, var(--chapter-surface-strong) 84%, var(--chapter-accent)); transform: translateY(-50%) scale(1.035); }
  .family-card:hover { border-color: color-mix(in srgb, var(--chapter-accent) 70%, var(--chapter-line)); box-shadow: var(--card-shadow-hover); transform: translateY(-0.16rem); }
  .family-card:hover img { transform: scale(1.025) rotate(-0.4deg); }
  .finder-card:hover { border-color: var(--color-brand); box-shadow: rgba(23, 26, 23, 0.1) 0px 1.2rem 2.8rem; transform: translateY(-0.12rem); }
}
@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto minmax(0px, 1fr) auto; }
  .brand__fa, .header-finder span { display: none; }
  .header-finder { width: 3.15rem; justify-content: center; padding: 0px; }
  .hero__grid { grid-template-columns: minmax(18rem, 0.82fr) minmax(24rem, 1.18fr); gap: 2rem; }
  .catalogue-intro, .chapter__mast { grid-template-columns: 0.42fr 1fr; }
  .catalogue-intro > p:last-child, .chapter__statement { grid-column: 2; }
  .product-stage { grid-template-columns: minmax(0px, 1fr) minmax(20rem, 0.72fr); }
  .finder-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 900px) {
  :root { --section-space: clamp(4rem, 10vw, 6rem); }
  html { scroll-padding-top: 5rem; }
  .site-header { inset: 0.55rem 0.6rem auto; min-height: 4.2rem; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 0.45rem; padding: 0.42rem; }
  .brand { min-height: 3rem; padding-inline: 0.65rem; }
  .brand__name { display: none; }
  .category-nav__track { justify-content: flex-start; }
  .category-nav__item { min-width: 2.8rem; min-height: 2.8rem; padding-inline: 0.72rem; }
  .category-nav__item span { display: none; }
  .category-nav__item.is-active span { display: inline; font-size: 0.72rem; white-space: nowrap; }
  .hero__pin { min-height: auto; padding-top: 7rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 43rem; }
  .hero__visual { min-height: 34rem; }
  .hero__footer { flex-wrap: wrap; }
  .hero__scroll { display: none; }
  .catalogue-intro, .chapter__mast, .finder-section__head { grid-template-columns: 1fr; }
  .catalogue-intro > p:last-child, .chapter__statement { grid-column: auto; }
  .catalogue-intro { align-items: start; gap: 1.4rem; }
  .chapter__mast { align-items: start; gap: 1.2rem; }
  .chapter__index strong { font-size: 4rem; }
  .product-stage { min-height: 0px; grid-template-columns: 1fr; }
  .product-stage__visual { min-height: 34rem; }
  .product-stage__panel { min-height: 34rem; border-top: 1px solid var(--chapter-line); border-inline-start: 0px; }
  .material-story__pin, .spatial-story, .closing { grid-template-columns: 1fr; }
  .material-story__visual, .spatial-story__visual { min-height: 32rem; }
  .finder-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { min-width: 100%; }
  .finder-filters { width: 100%; }
  .finder-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .closing__graphic { order: 2; }
  .closing__graphic span { min-height: 18rem; }
  .product-dialog__panel { inset: 2vh 2vw; grid-template-columns: 1fr; grid-template-rows: minmax(20rem, 52vh) 1fr; overflow-y: auto; }
  .product-dialog__gallery { min-height: 0px; }
  .product-dialog__content { overflow: visible; }
}
@media (max-width: 620px) {
  :root { --gutter: 1rem; --font-size-h1: clamp(2.45rem, 11vw, 3.65rem); --font-size-h2: clamp(2.15rem, 9vw, 3.25rem); --font-size-h3: clamp(1.7rem, 7vw, 2.25rem); --font-size-body: 1.0625rem; --font-size-lead: 1.12rem; --control-size: 3rem; }
  .hero__pin { padding-top: 6.4rem; }
  .hero h1 br { display: none; }
  .hero__lead { line-height: 1.75; }
  .hero__actions .button { flex: 1 1 auto; }
  .hero__selector { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: none; }
  .hero-beat { flex: 0 0 auto; }
  .hero__visual { min-height: 27rem; }
  .hero__slides { inset: 2% 0px 12%; }
  .hero-slide img { width: 92%; }
  .hero__visual-meta { inset: auto 0px 2% auto; }
  .hero__footer { display: grid; grid-template-columns: 1fr 1fr; font-size: 0.78rem; }
  .catalogue-intro { padding-inline: 0.25rem; }
  .chapter { padding-inline: 0.75rem; }
  .chapter__inner { width: 100%; }
  .chapter__mast { padding-inline: 0.4rem; }
  .chapter__mast h2 { align-items: center; }
  .chapter__index strong { font-size: 3.5rem; }
  .product-stage { border-radius: 1.7rem; }
  .product-stage__visual { min-height: 28rem; }
  .product-stage__image-wrap { width: 88%; }
  .product-stage__panel { min-height: 0px; padding: 1.35rem; }
  .stage-summary { min-height: 0px; }
  .stage-specs { margin-top: 1.2rem; }
  .family-browser__head { align-items: center; padding-inline: 0.35rem; }
  .family-browser__head p { display: none; }
  .family-card { width: min(75vw, 17rem); }
  .material-story__pin, .spatial-story, .closing { padding-inline: 1rem; }
  .material-story__visual, .spatial-story__visual { min-height: 25rem; }
  .material-panel { inset: 3%; }
  .spatial-card:first-child { inset: 0px 16% 12% 0px; }
  .spatial-card:last-child { inset: 35% 0px 0px 48%; }
  .finder-section { padding-inline: 0.75rem; }
  .finder-section__head, .finder-toolbar, .finder-grid, .finder-empty { width: 100%; }
  .finder-grid { grid-template-columns: 1fr; }
  .finder-card { min-height: 7rem; grid-template-columns: 4.8rem 1fr auto; }
  .finder-card img { width: 4.8rem; height: 5.4rem; }
  .closing { min-height: auto; }
  .closing__graphic span { min-height: 11rem; border-radius: 1rem; font-size: 3.2rem; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .product-dialog__panel { inset: auto 0px 0px; max-height: 94svh; grid-template-rows: 42svh 1fr; border-radius: 1.75rem 1.75rem 0px 0px; }
  .dialog-close { inset: 0.75rem 0.75rem auto auto; }
  .product-dialog__gallery { padding: 0.7rem; }
  .product-dialog__content { padding: 1.4rem; }
  .dialog-specs > div { grid-template-columns: 6.5rem 1fr; }
}
@media (max-width: 1100px) {
  .chapter { content-visibility: auto; contain-intrinsic-size: auto var(--chapter-intrinsic, 1700px); }
}
@supports (animation-timeline: view()) {
  @media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .chapter-atmosphere__scene { animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: compact-chapter-drift; animation-timeline: view(); animation-range: entry exit; }
}
}
@keyframes compact-chapter-drift { 
  0% { transform: translate3d(0px, -1.5%, 0px) scale(1.01); }
  100% { transform: translate3d(0px, 2.5%, 0px) scale(1.035); }
}
.product-stage__image { transition: opacity 160ms !important; }
.product-stage__image.is-changing { opacity: 0.72; }
.story-scene { transition: opacity 180ms, visibility 180ms !important; }
.story-backdrop { transition: opacity 180ms !important; }
.story-scene__copy, .story-scene__product { will-change: auto !important; }
.family-card { transition: border-color 160ms, box-shadow 160ms, background 160ms !important; }
.family-card img { transition: filter 160ms, opacity 160ms !important; }
@media (max-width: 1100px) {
  .scrolly-story__pin { box-sizing: border-box; right: 0px !important; left: 0px !important; width: 100vw !important; max-width: none !important; }
  .family-rail { overscroll-behavior-inline: contain; touch-action: pan-x; }
  .story-scene__copy { backdrop-filter: blur(6px); }
  .product-stage__visual { transition: top 180ms; }
  .site-header.is-hidden + main .product-stage__visual { top: 0.5rem; }
  .site-header.is-hidden + main .product-stage { --showcase-sticky-top: 0.5rem; }
  .product-stage__visual { position: relative; z-index: 10; }
  .stage-colour-rail, .family-browser { position: relative; z-index: 8; }
  .product-stage__panel { position: relative; z-index: 11; }
  .family-browser, .product-stage__panel { background: color-mix(in srgb, var(--chapter-surface-strong) 96%, var(--chapter-bg)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero__scroll, .product-stage__drag-hint { display: none; }
}
:root { --ambient-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ambient-shadow: 0 2rem 7rem rgb(18 20 18 / 0.16); }
body { background: rgb(220, 213, 200); }
.hero h1, .catalogue-intro h2, .chapter__mast h2, .material-story h2, .spatial-story h2, .finder-section h2, .closing h2 { text-wrap: balance; text-shadow: rgba(20, 21, 19, 0.08) 0px 0.06em 0.18em; }
.hero h1 em, .catalogue-intro h2 em, .material-story h2 em, .spatial-story h2 em, .closing h2 em { position: relative; display: inline-block; filter: saturate(1.08); }
.hero h1 em::after, .catalogue-intro h2 em::after, .closing h2 em::after { position: absolute; inset: auto 0px -0.08em; height: 0.08em; border-radius: 99px; background: linear-gradient(90deg, transparent, currentcolor 24%, currentcolor 70%, transparent); content: ""; opacity: 0.28; transform: scaleX(0.36); transform-origin: right center; animation: text-glint 5.5s var(--ambient-ease) infinite alternate; }
.hero { isolation: isolate; }
.hero::after { position: absolute; z-index: 0; inset: 8% -14% auto auto; width: min(74vw, 68rem); aspect-ratio: 1.4 / 1; border: 1px solid rgba(238, 232, 220, 0.08); border-radius: 50%; background: radial-gradient(circle at 64% 44%, rgba(177, 98, 69, 0.16), transparent 29%), repeating-radial-gradient(circle, transparent 0px, transparent 5.8rem, rgba(255, 255, 255, 0.035) 5.9rem, rgba(255, 255, 255, 0.035) 6rem); content: ""; filter: blur(0.2px); pointer-events: none; transform: rotate(-11deg); }
.hero__grid, .hero__footer { position: relative; z-index: 2; }
.hero__visual { filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 2rem 4rem); }
.hero-slide::before { filter: blur(30px) saturate(1.2); animation: 6s ease-in-out 0s infinite alternate none running halo-breathe; }
.catalogue-intro, .finder-section, .closing { --art-y: 0%; position: relative; isolation: isolate; overflow: clip; }
.catalogue-intro::before, .finder-section::before, .closing::before { position: absolute; z-index: 0; width: clamp(24rem, 48vw, 52rem); aspect-ratio: 1 / 1; background-image: var(--section-art); background-position: center center; background-repeat: no-repeat; background-size: contain; content: ""; filter: blur(13px) saturate(0.72) contrast(1.18); mix-blend-mode: multiply; opacity: 0.1; pointer-events: none; mask-image: radial-gradient(circle, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0.86) 48%, transparent 74%); }
.catalogue-intro::after, .finder-section::after, .closing::after { position: absolute; z-index: 1; width: clamp(22rem, 42vw, 46rem); aspect-ratio: 1 / 1; border: 1px solid rgba(30, 32, 29, 0.12); border-radius: 50%; background: radial-gradient(circle, rgba(147, 47, 50, 0.12), transparent 68%); content: ""; filter: blur(1px); pointer-events: none; }
.catalogue-intro > *, .finder-section > *, .closing > * { position: relative; z-index: 2; }
.catalogue-intro { min-height: 76svh; background: linear-gradient(118deg, rgba(247, 243, 235, 0.98) 20%, rgba(236, 226, 213, 0.9)), rgb(247, 243, 235); }
.catalogue-intro::before { inset: 5% auto auto -7%; opacity: 0.17; transform: translateY(var(--art-y)) rotate(-12deg) scale(1.18); }
.catalogue-intro::after { inset: auto -8% -26% auto; }
.chapter { --atmosphere-blend: multiply; --atmosphere-opacity: 0.16; min-height: 100svh; isolation: isolate; background: linear-gradient(150deg, color-mix(in srgb, var(--chapter-bg) 92%, white), var(--chapter-bg) 46%, color-mix(in srgb, var(--chapter-bg) 92%, var(--chapter-accent))),
    var(--chapter-bg); }
.chapter[data-prefix="B"], .chapter[data-prefix="F"], .chapter[data-prefix="G"], .chapter[data-prefix="H"], .chapter[data-prefix="R"] { --atmosphere-blend: screen; --atmosphere-opacity: 0.115; }
.chapter::before { z-index: 1; inset: -8rem auto auto -7rem; width: min(34rem, 48vw); opacity: 0.7; }
.chapter::after { position: absolute; z-index: 1; inset: 0px; background: linear-gradient(90deg, transparent 0 49.9%, var(--chapter-line) 50%, transparent 50.1%),
    repeating-linear-gradient(120deg, transparent 0 8rem, color-mix(in srgb, var(--chapter-line) 45%, transparent) 8.05rem 8.1rem); content: ""; opacity: 0.18; pointer-events: none; }
.chapter-atmosphere { position: absolute; z-index: 0; inset: 0px; overflow: hidden; pointer-events: none; }
.chapter-atmosphere__wash { position: absolute; z-index: 5; inset: 0px; background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-bg) 62%, transparent), transparent 36% 64%, color-mix(in srgb, var(--chapter-bg) 72%, transparent)),
    linear-gradient(180deg, var(--chapter-bg) 0, transparent 20% 78%, var(--chapter-bg) 100%); }
.chapter-atmosphere__product { position: absolute; z-index: 1; width: clamp(21rem, 36vw, 44rem); aspect-ratio: 1 / 1; margin: 0px; opacity: var(--atmosphere-opacity); filter: blur(13px) saturate(1.25) contrast(1.08); mix-blend-mode: var(--atmosphere-blend); transform-origin: center center; }
.chapter-atmosphere__product img { width: 100%; height: 100%; object-fit: contain; }
.chapter-atmosphere__product--1 { inset: 4% auto auto -8%; transform: rotate(-9deg); }
.chapter-atmosphere__product--2 { inset: 34% -9% auto auto; transform: rotate(10deg) scale(0.82); }
.chapter-atmosphere__product--3 { inset: auto 25% -13% auto; transform: rotate(-5deg) scale(0.7); }
.chapter-atmosphere__halo { position: absolute; z-index: 2; display: block; width: clamp(18rem, 33vw, 40rem); aspect-ratio: 1 / 1; border-radius: 50%; background: color-mix(in srgb, var(--chapter-accent) 42%, transparent); filter: blur(54px) saturate(1.16); opacity: 0.22; animation: 8s ease-in-out 0s infinite alternate none running halo-drift; }
.chapter-atmosphere__halo--a { inset: 18% 9% auto auto; }
.chapter-atmosphere__halo--b { inset: auto auto 9% 3%; width: clamp(15rem, 27vw, 32rem); opacity: 0.14; animation-delay: -3s; }
.chapter-atmosphere__orbit { position: absolute; z-index: 3; display: block; border: 1px solid color-mix(in srgb, var(--chapter-accent) 48%, transparent); border-radius: 50%; opacity: 0.38; }
.chapter-atmosphere__orbit::after { position: absolute; top: 50%; left: -0.28rem; width: 0.55rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--chapter-accent); box-shadow: 0 0 1.5rem var(--chapter-accent); content: ""; }
.chapter-atmosphere__orbit--a { inset: 11% auto auto 7%; width: clamp(19rem, 34vw, 40rem); aspect-ratio: 1.18 / 1; transform: rotate(18deg); }
.chapter-atmosphere__orbit--b { inset: auto 1% 15% auto; width: clamp(14rem, 25vw, 30rem); aspect-ratio: 0.84 / 1; transform: rotate(-24deg); }
.chapter-atmosphere__letter { position: absolute; z-index: 0; inset: 15% auto auto 44%; color: var(--chapter-accent); font-family: var(--font-code); font-size: clamp(18rem, 39vw, 42rem); font-weight: 900; line-height: 0.7; opacity: 0.035; transform: translateX(-50%); }
.chapter__inner { z-index: 3; }
.chapter__mast { position: relative; z-index: 3; padding: 0px clamp(0rem, 2vw, 2rem); }
.chapter__mast h2 { text-shadow: 0 0.12em 0.6em color-mix(in srgb, var(--chapter-bg) 68%, transparent); }
.chapter__statement { text-shadow: 0 1px 1.4rem color-mix(in srgb, var(--chapter-bg) 92%, transparent); }
.product-stage { --selection-color: var(--chapter-accent); position: relative; display: grid; min-height: 0px; grid-template-areas: "visual panel" "roster roster"; grid-template-columns: minmax(0px, 1.12fr) minmax(26rem, 0.88fr); overflow: hidden; border: 1px solid color-mix(in srgb, var(--chapter-line) 86%, var(--chapter-accent)); border-radius: clamp(2rem, 3vw, 3.2rem); background: linear-gradient(122deg, color-mix(in srgb, var(--chapter-surface) 94%, transparent), color-mix(in srgb, var(--chapter-surface-strong) 90%, transparent)),
    var(--chapter-surface); box-shadow: rgba(12, 14, 12, 0.15) 0px 3rem 8rem, rgba(255, 255, 255, 0.12) 0px 1px inset; isolation: isolate; }
.product-stage::before { position: absolute; z-index: 4; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, transparent, var(--selection-color), var(--chapter-accent), transparent); content: ""; opacity: 0.78; transform: translateX(calc((var(--family-progress, 0) - 0.5) * 26%)); transition: transform 600ms var(--ambient-ease), background 320ms ease; }
.product-stage__backdrop { position: absolute; z-index: -1; inset: 0px; overflow: hidden; pointer-events: none; }
.product-stage__backdrop::after { position: absolute; inset: 0px; background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-surface) 92%, transparent), transparent 46%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--chapter-surface) 76%, transparent)); content: ""; }
.product-stage__backdrop img { position: absolute; inset: -24% -6% auto auto; width: 70%; aspect-ratio: 1 / 1; object-fit: contain; filter: blur(48px) saturate(1.45) contrast(1.02); mix-blend-mode: var(--atmosphere-blend); opacity: 0.16; transform: scale(1.04); }
.product-stage__backdrop i { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--selection-color) 50%, transparent); filter: blur(34px); opacity: 0.18; transition: background 320ms; }
.product-stage__backdrop i:nth-of-type(1) { inset: 8% 18% auto auto; width: 24rem; aspect-ratio: 1 / 1; }
.product-stage__backdrop i:nth-of-type(2) { inset: auto auto 16% 8%; width: 18rem; aspect-ratio: 1 / 1; opacity: 0.12; }
.product-stage__backdrop i:nth-of-type(3) { inset: 20% auto auto 43%; width: 1px; height: 58%; border-radius: 0px; background: var(--chapter-line); filter: none; opacity: 0.62; transform: rotate(17deg); }
.product-stage__panel { position: relative; z-index: 3; grid-area: panel; min-width: 0px; padding: clamp(1.6rem, 3vw, 3.2rem); border: 0px; border-inline-start: 1px solid var(--chapter-line); background: color-mix(in srgb, var(--chapter-surface-strong) 61%, transparent); backdrop-filter: blur(19px) saturate(1.1); }
.stage-family-label { min-height: 2.2rem; color: var(--chapter-soft); font-size: 1rem; }
.stage-family-label > span { display: inline-flex; align-items: center; gap: 0.65rem; }
.stage-family-label i { width: 0.55rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--selection-color); box-shadow: 0 0 0 0.42rem color-mix(in srgb, var(--selection-color) 16%, transparent); transition: background 320ms; }
.stage-family-label b { padding: 0.42rem 0.65rem; border: 1px solid var(--chapter-line); border-radius: 0.65rem; background: color-mix(in srgb, var(--chapter-surface) 58%, transparent); font-size: 1rem; }
.product-stage__panel h3 { max-width: 17ch; margin-top: 1rem; font-size: clamp(2rem, 1.45rem + 1.2vw, 3.15rem); line-height: 1.28; text-shadow: 0 0.16em 0.8em color-mix(in srgb, var(--chapter-bg) 60%, transparent); }
.stage-summary { min-height: 0px; max-width: 58ch; margin-top: 0.8rem; font-size: 1.075rem; line-height: 1.85; }
.stage-loadout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(11rem, 0.82fr); gap: 0.85rem; margin-top: 1.3rem; }
.stage-loadout__choices, .stage-loadout__finish { min-width: 0px; padding: 0.85rem; border: 1px solid var(--chapter-line); border-radius: 1.25rem; background: color-mix(in srgb, var(--chapter-surface) 48%, transparent); }
.selector-group { margin-top: 0.9rem; }
.selector-group:first-child { margin-top: 0px; }
.selector-pair { display: block; }
.selector-group__head { margin-bottom: 0.58rem; font-size: 0.92rem; }
.selector-group__head output { max-width: 54%; overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.model-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.model-option { display: grid; min-height: 3.4rem; grid-template-columns: auto 1fr; align-items: center; gap: 0.48rem; padding: 0.48rem 0.65rem; border-radius: 0.9rem; text-align: start; }
.model-option small, .base-option small { color: currentcolor; font-family: var(--font-code); font-size: 0.875rem; opacity: 0.58; }
.model-option strong { font-size: 0.96rem; }
.material-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.material-option { justify-content: flex-start; gap: 0.55rem; min-height: 3.15rem; border-radius: 0.85rem; }
.material-option i { width: 0.7rem; aspect-ratio: 1 / 1; border: 1px solid; border-radius: 50%; box-shadow: transparent 0px 0px 0px 3px inset; }
.material-option.is-active i { box-shadow: inset 0 0 0 3px var(--chapter-accent); background: rgb(255, 255, 255); }
.base-options { display: grid; gap: 0px; }
.base-option { display: grid; min-height: 3.1rem; grid-template-columns: auto 1fr; place-items: center start; gap: 0.58rem; padding: 0.4rem 0.2rem; border-top: 0px; border-right: 0px; border-left: 0px; border-image: initial; border-bottom: 1px solid var(--chapter-line); border-radius: 0px; background: transparent; text-align: start; }
.base-option.is-active { border-color: var(--chapter-accent); background: transparent; color: var(--chapter-accent); }
.colour-options { display: grid; grid-template-columns: repeat(3, minmax(2.75rem, 1fr)); gap: 0.48rem; }
.colour-option, .colour-more { position: relative; width: auto; min-width: 0px; height: 3.55rem; overflow: hidden; padding: 0px; border: 1px solid var(--chapter-line); border-radius: 0.82rem; background: color-mix(in srgb, var(--chapter-surface) 68%, transparent); cursor: pointer; box-shadow: none; isolation: isolate; }
.colour-option i { position: absolute; z-index: -1; inset: 0px; background: var(--swatch); transition: transform 320ms var(--ambient-ease), filter 320ms ease; }
.colour-option span { position: absolute; inset: auto 0px 0px; overflow: hidden; padding: 0.32rem 0.22rem; background: rgba(18, 20, 18, 0.72); color: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 650; opacity: 0; text-overflow: ellipsis; transform: none; transition: opacity 220ms; white-space: nowrap; }
.colour-option::after { inset: 0.48rem 0.48rem auto auto; transform: rotate(-45deg); }
.colour-option.is-active { border-color: var(--chapter-accent); box-shadow: 0 0 0 2px var(--chapter-surface), 0 0 0 4px var(--chapter-accent); }
.colour-option.is-active span { opacity: 1; }
.colour-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; color: var(--chapter-ink); font-family: var(--font-code); font-size: 1rem; line-height: 1.15; }
.colour-more span { font-family: var(--font-body); font-size: 0.78rem; opacity: 0.66; }
.stage-specs { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.48rem; margin-top: 0.9rem; padding-top: 0px; }
.spec-chip { display: block; min-height: 4.4rem; padding: 0.62rem; border-radius: 0.88rem; background: color-mix(in srgb, var(--chapter-surface-strong) 72%, transparent); text-align: start; }
.spec-chip small { display: block; color: var(--chapter-accent); font-family: var(--font-code); font-size: 0.875rem; font-weight: 700; }
.spec-chip strong { display: -webkit-box; margin-top: 0.35rem; overflow: hidden; color: var(--chapter-ink); font-size: 0.88rem; font-weight: 620; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.selection-note { margin-top: auto; padding-top: 1rem; font-size: 0.92rem; line-height: 1.7; }
.product-stage__visual { grid-area: visual; min-height: clamp(39rem, 64vw, 48rem); border: 0px; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--selection-color) 22%, transparent), transparent 35%),
    radial-gradient(circle at 52% 52%, color-mix(in srgb, var(--chapter-surface-strong) 94%, transparent), transparent 66%); }
.product-stage__visual::before { inset: 8% 13%; border-color: color-mix(in srgb, var(--selection-color) 42%, var(--chapter-line)); animation: 14s linear 0s infinite normal none running orbit-drift; }
.product-stage__visual::after { inset: 20% 26%; border-style: dashed; border-color: color-mix(in srgb, var(--selection-color) 33%, var(--chapter-line)); animation: 18s linear 0s infinite reverse none running orbit-drift; }
.product-stage__image-wrap { width: min(78%, 39rem); overflow: visible; border: 0px; border-radius: 42% 42% 2.4rem 2.4rem; background: color-mix(in srgb, #eee7dc 92%, var(--selection-color)); box-shadow: 0 2.6rem 6rem rgb(8 10 8 / 0.18),
    0 0 0 1px color-mix(in srgb, var(--selection-color) 28%, transparent); transition: background 420ms, transform 140ms ease-out; }
.product-stage__image-wrap::before { position: absolute; z-index: 2; inset: -0.7rem -0.7rem auto auto; width: 3.8rem; height: 3.8rem; border-top: 2px solid var(--selection-color); border-right: 2px solid var(--selection-color); border-radius: 0px 1.4rem 0px 0px; content: ""; transition: border-color 320ms; }
.product-stage__image { border-radius: inherit; filter: saturate(1.05) contrast(1.025); }
.product-stage__code { inset: 4% auto auto 4%; font-size: clamp(7rem, 13vw, 12.5rem); opacity: 0.07; text-shadow: 0 0 2rem color-mix(in srgb, var(--selection-color) 35%, transparent); }
.product-stage__telemetry { position: absolute; z-index: 4; inset: 1.6rem auto auto 1.6rem; display: grid; gap: 0.18rem; direction: ltr; color: var(--chapter-soft); font-family: var(--font-code); font-size: 0.84rem; letter-spacing: 0.08em; text-align: left; }
.product-stage__telemetry b { color: var(--chapter-accent); font-size: 1rem; }
.stage-details, .product-stage__drag-hint { backdrop-filter: blur(14px) saturate(1.1); }
.stage-details { min-height: 3.5rem; padding-inline: 1.2rem; font-size: 1rem; transition: transform 240ms var(--ambient-ease), box-shadow 240ms ease; }
.product-stage__drag-hint { min-height: 3.2rem; font-size: 0.96rem; }
.family-browser { position: relative; z-index: 5; grid-area: roster; margin: 0px; padding: 1.25rem clamp(1rem, 2.4vw, 2rem) 1.5rem; border-top: 1px solid var(--chapter-line); background: color-mix(in srgb, var(--chapter-surface-strong) 76%, transparent); backdrop-filter: blur(22px) saturate(1.12); }
.family-browser__head { display: grid; grid-template-columns: auto minmax(15rem, 1fr); align-items: end; gap: 2rem; margin-bottom: 0.8rem; }
.family-browser__head > div > span { color: var(--chapter-accent); font-family: var(--font-code); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.08em; }
.family-browser__head h3 { margin-top: 0.12rem; font-size: clamp(1.3rem, 1.05rem + 0.5vw, 1.75rem); }
.family-browser__head p { max-width: 48rem; justify-self: end; font-size: 1.0625rem; text-align: end; }
.family-rail { padding: 0.25rem 0.12rem 0.5rem; }
.family-card { width: clamp(10.25rem, 13.6vw, 12.7rem); min-height: 15rem; grid-template-rows: minmax(9rem, 1fr) auto; border-radius: 1.25rem; background: linear-gradient(160deg, color-mix(in srgb, var(--chapter-surface) 72%, transparent), color-mix(in srgb, var(--chapter-surface-strong) 82%, transparent)); box-shadow: rgba(255, 255, 255, 0.08) 0px 1px inset; }
.family-card::after { position: absolute; z-index: 5; inset: 0px auto 0px 0px; width: 3px; background: var(--chapter-accent); content: ""; opacity: 0; transform: scaleY(0.2); transition: opacity 260ms ease, transform 320ms var(--ambient-ease); }
.family-card__number { position: absolute; z-index: 4; inset: 0.65rem 0.7rem auto auto; color: var(--chapter-soft); font-family: var(--font-code); font-size: 0.78rem; }
.family-card__visual { min-height: 9.6rem; background: transparent; }
.family-card__visual::before { width: 72%; border-color: color-mix(in srgb, var(--chapter-accent) 40%, var(--chapter-line)); opacity: 0.65; }
.family-card img { width: 92%; height: 10.7rem; filter: saturate(0.86) contrast(1.03); }
.family-card__body { display: grid; min-height: 4.9rem; grid-template-columns: auto 1fr; align-items: center; gap: 0.65rem; padding: 0.75rem; border-top: 1px solid var(--chapter-line); background: color-mix(in srgb, var(--chapter-surface-strong) 72%, transparent); }
.family-card__body > span { min-width: 0px; margin: 0px; }
.family-card__body strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.family-card__body small { display: block; overflow: hidden; margin-top: 0.15rem; color: var(--chapter-soft); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.family-card__code { display: grid; width: 2.8rem; aspect-ratio: 1 / 1; place-items: center; border: 1px solid var(--chapter-line); border-radius: 0.85rem; font-size: 0.83rem; }
.family-card__selected { position: absolute; z-index: 6; inset: 0.62rem auto auto 0.6rem; padding: 0.27rem 0.46rem; border-radius: 99px; background: var(--chapter-accent); color: rgb(255, 255, 255); font-size: 0.72rem; font-weight: 700; opacity: 0; transform: translateY(-0.35rem); transition: opacity 220ms ease, transform 260ms var(--ambient-ease); }
.family-card.is-active { border-color: var(--chapter-accent); background: color-mix(in srgb, var(--chapter-accent) 12%, var(--chapter-surface)); box-shadow: 0 1.1rem 2.8rem color-mix(in srgb, var(--chapter-accent) 22%, transparent); transform: none; }
.family-card.is-active::after, .family-card.is-active .family-card__selected { opacity: 1; transform: none; }
.rail-controls { inset-inline: -0.25rem; }
.rail-arrow { width: 3.6rem; height: 3.6rem; background: color-mix(in srgb, var(--chapter-surface-strong) 92%, transparent); box-shadow: rgba(10, 12, 10, 0.24) 0px 1rem 2.4rem; backdrop-filter: blur(12px); }
.material-story { isolation: isolate; background: rgb(136, 67, 48); transition: background 700ms; }
.material-story[data-active-step="1"] { background: rgb(118, 81, 60); }
.material-story[data-active-step="2"] { background: rgb(93, 68, 55); }
.material-story__backdrops, .spatial-story__atmosphere { position: absolute; z-index: 0; inset: 0px; overflow: hidden; pointer-events: none; }
.material-story__pin, .spatial-story__copy, .spatial-story__visual { position: relative; z-index: 2; }
.material-story__backdrops::after { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(80, 31, 24, 0.84), rgba(106, 50, 36, 0.57) 46%, rgba(62, 31, 27, 0.58)), linear-gradient(transparent 52%, rgba(60, 26, 21, 0.48)); content: ""; }
.material-backdrop { position: absolute; inset: -18%; margin: 0px; opacity: 0; transform: scale(1.12) rotate(-3deg); transition: opacity 800ms ease, transform 1.2s var(--ambient-ease), filter 1.2s ease; }
.material-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.35) contrast(1.28); mix-blend-mode: multiply; }
.material-backdrop.is-active { opacity: 0.38; transform: scale(1.02) rotate(0deg); }
.material-story__backdrops > i { position: absolute; z-index: 3; display: block; width: 32rem; aspect-ratio: 1 / 1; border: 1px solid rgba(255, 226, 192, 0.18); border-radius: 50%; }
.material-story__backdrops > i:first-of-type { inset: 8% auto auto -9%; }
.material-story__backdrops > i:last-of-type { inset: auto -4% 4% auto; width: 21rem; }
.material-story__copy h2, .material-story__copy > p, .spatial-story__copy h2, .spatial-story__copy > p { text-shadow: rgba(40, 20, 16, 0.22) 0px 0.12em 1.2em; }
.material-step { min-height: 3.35rem; padding-inline: 1rem; font-size: 0.98rem; transition: opacity 220ms ease, background 220ms ease, transform 240ms var(--ambient-ease); }
.material-step.is-active { box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(55, 22, 17, 0.18) 0px 0.8rem 2rem; transform: translateY(-0.15rem); }
.material-panel { background: color-mix(in srgb, rgb(239, 233, 223) 92%, rgb(160, 78, 56)); box-shadow: rgba(42, 16, 12, 0.34) 0px 3rem 9rem; }
.material-panel.is-active img { animation: 7s ease-in-out 0s infinite alternate none running panel-focus; }
.spatial-story { isolation: isolate; background: linear-gradient(112deg, rgba(213, 182, 147, 0.96), rgba(184, 143, 105, 0.88)), rgb(211, 178, 142); }
.spatial-story__atmosphere::after { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(211, 177, 141, 0.82), rgba(211, 177, 141, 0.26) 48%, rgba(194, 155, 117, 0.66)); content: ""; }
.spatial-story__atmosphere img { position: absolute; width: min(40rem, 48vw); aspect-ratio: 1 / 1; object-fit: contain; filter: blur(20px) saturate(1.1); mix-blend-mode: multiply; opacity: 0.15; }
.spatial-story__atmosphere img:first-child { inset: -8% auto auto -10%; }
.spatial-story__atmosphere img:nth-child(2) { inset: auto -8% -12% auto; }
.spatial-story__atmosphere i { position: absolute; inset: 18% 16% auto auto; width: 30rem; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(142, 56, 45, 0.16); filter: blur(44px); }
.spatial-card { backdrop-filter: blur(8px); transition: filter 420ms, box-shadow 420ms; }
.finder-section { background: linear-gradient(135deg, rgb(247 243 235 / 0.97), rgb(232 224 211 / 0.93)),
    var(--primitive-paper-50); }
.finder-section::before { inset: 10% -10% auto auto; filter: blur(15px) saturate(0.74) contrast(1.2); opacity: 0.16; transform: rotate(12deg) scale(1.2); }
.finder-section::after { inset: auto auto -22% -8%; background: radial-gradient(circle, rgba(111, 118, 98, 0.16), transparent 68%); }
.finder-toolbar, .finder-card { backdrop-filter: blur(14px) saturate(1.08); }
.closing { background: radial-gradient(circle at 18% 50%, rgba(177, 98, 69, 0.2), transparent 30rem), linear-gradient(135deg, rgb(32, 35, 31), rgb(23, 26, 23) 72%); }
.closing::before { inset: 2% auto auto -9%; filter: blur(30px) saturate(1.25); mix-blend-mode: screen; opacity: 0.13; transform: rotate(-10deg) scale(1.2); }
.closing::after { inset: 8% auto auto 7%; border-color: rgba(226, 169, 112, 0.2); background: radial-gradient(circle, rgba(177, 98, 69, 0.15), transparent 65%); }
@media (hover: hover) and (pointer: fine) {
  .colour-option:hover i { filter: saturate(1.3) brightness(1.06); transform: scale(1.1); }
  .colour-option:hover span { opacity: 1; }
  .family-card:hover { border-color: color-mix(in srgb, var(--chapter-accent) 65%, var(--chapter-line)); box-shadow: rgba(12, 14, 12, 0.14) 0px 1.2rem 3rem; transform: none; }
  .family-card:hover img { filter: saturate(1.08) contrast(1.04); transform: scale(1.07) translateY(-0.2rem); }
  .stage-details:hover { box-shadow: rgba(0, 0, 0, 0.24) 0px 1.2rem 2.8rem; transform: translateY(-0.15rem); }
  .spatial-card:hover { filter: saturate(1.12); box-shadow: rgba(56, 36, 22, 0.2) 0px 2.6rem 6rem; }
}
@keyframes halo-breathe { 
  0% { opacity: 0.72; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1.08) translate3d(1.5%, -1%, 0px); }
}
@keyframes halo-drift { 
  0% { transform: translate3d(-3%, 2%, 0px) scale(0.94); }
  100% { transform: translate3d(6%, -4%, 0px) scale(1.08); }
}
@keyframes orbit-drift { 
  100% { transform: rotate(360deg); }
}
@keyframes panel-focus { 
  0% { filter: saturate(0.96) contrast(1); transform: scale(1); }
  100% { filter: saturate(1.12) contrast(1.03); transform: scale(1.025); }
}
@keyframes text-glint { 
  0% { opacity: 0.12; transform: scaleX(0.28); }
  100% { opacity: 0.34; transform: scaleX(0.86); }
}
@media (max-width: 1240px) {
  .product-stage { grid-template-columns: minmax(0px, 1fr) minmax(24rem, 0.92fr); }
  .stage-loadout { grid-template-columns: 1fr; }
  .product-stage__visual { min-height: 44rem; }
}
@media (max-width: 900px) {
  .chapter-atmosphere__product { width: 36rem; opacity: calc(var(--atmosphere-opacity) * 0.8); }
  .chapter-atmosphere__wash { background: linear-gradient(180deg, var(--chapter-bg), transparent 24% 70%, var(--chapter-bg)); }
  .product-stage { grid-template-areas: "visual" "panel" "roster"; grid-template-columns: minmax(0px, 1fr); }
  .product-stage__visual { min-height: clamp(31rem, 92vw, 42rem); }
  .product-stage__panel { border-top: 1px solid var(--chapter-line); border-inline-start: 0px; }
  .stage-loadout { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .family-browser__head { grid-template-columns: 1fr; gap: 0.3rem; }
  .family-browser__head p { justify-self: stretch; text-align: start; }
  .material-story__backdrops, .spatial-story__atmosphere { z-index: 0; }
  .material-story__pin, .spatial-story__copy, .spatial-story__visual { position: relative; z-index: 2; }
}
@media (max-width: 620px) {
  .catalogue-intro { min-height: auto; }
  .catalogue-intro::before, .finder-section::before, .closing::before { width: 28rem; opacity: 0.075; }
  .chapter { min-height: auto; }
  .chapter-atmosphere__product--2, .chapter-atmosphere__product--3, .chapter-atmosphere__orbit--b { display: none; }
  .chapter-atmosphere__letter { inset-inline-start: 58%; font-size: 24rem; }
  .product-stage { border-radius: 1.6rem; }
  .product-stage__visual { min-height: 27rem; }
  .product-stage__image-wrap { width: 79%; border-radius: 36% 36% 1.6rem 1.6rem; }
  .product-stage__telemetry { inset: 1rem auto auto 1rem; font-size: 0.76rem; }
  .product-stage__drag-hint { inset-inline-start: 0.75rem; bottom: 0.75rem; min-height: 2.8rem; font-size: 0.86rem; }
  .stage-details { inset-inline-end: 0.75rem; bottom: 0.75rem; min-height: 3rem; font-size: 0.9rem; }
  .product-stage__panel { padding: 1.25rem; }
  .product-stage__panel h3 { font-size: clamp(1.8rem, 8vw, 2.35rem); }
  .stage-loadout { grid-template-columns: 1fr; }
  .colour-options { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .colour-option, .colour-more { height: 3.55rem; }
  .family-browser { padding: 1rem 0.85rem 1.2rem; }
  .family-card { width: 9.6rem; min-height: 13.5rem; }
  .family-card__visual { min-height: 8.4rem; }
  .family-card img { height: 9.2rem; }
  .family-card__body { grid-template-columns: 1fr; gap: 0.35rem; }
  .family-card__code { width: auto; min-height: 2.1rem; aspect-ratio: auto; place-self: start; padding-inline: 0.45rem; }
  .family-card__body small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em::after, .catalogue-intro h2 em::after, .closing h2 em::after, .hero-slide::before, .chapter-atmosphere__halo, .product-stage__visual::before, .product-stage__visual::after, .material-panel.is-active img { animation: auto ease 0s 1 normal none running none !important; }
  .material-backdrop, .family-card, .product-stage__image-wrap, .colour-option i { transition-duration: 1ms !important; }
}
:root { --roster-skew: -3.5deg; --roster-counter-skew: 3.5deg; --stage-height: 47rem; }
.catalogue-intro, .finder-section, .closing { background-position: center center; background-repeat: no-repeat; background-size: cover; }
.catalogue-intro { background-image: linear-gradient(112deg, rgb(247 243 235 / 0.94), rgb(226 232 219 / 0.85)),
    var(--section-scene); }
.finder-section { background-image: linear-gradient(135deg, rgb(247 243 235 / 0.94), rgb(224 236 234 / 0.88)),
    var(--section-scene); }
.closing { background-image: linear-gradient(115deg, rgb(21 24 21 / 0.93), rgb(28 25 22 / 0.75)),
    var(--section-scene); }
.chapter { --scene-opacity: 0.34; }
.chapter[data-prefix="B"] { --scene-opacity: 0.48; }
.chapter[data-prefix="K"] { --scene-opacity: 0.4; }
.chapter[data-prefix="W"] { --scene-opacity: 0.42; }
.chapter[data-prefix="F"] { --scene-opacity: 0.46; }
.chapter[data-prefix="C"] { --scene-opacity: 0.4; }
.chapter[data-prefix="G"] { --scene-opacity: 0.5; }
.chapter-atmosphere__scene { position: absolute; z-index: 0; inset: -7%; background-image: var(--chapter-scene); background-position: center center; background-size: cover; filter: saturate(1.12) contrast(1.06); opacity: var(--scene-opacity); transform: scale(1.06); transform-origin: center center; will-change: transform; }
.chapter-atmosphere__wash { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-bg) 54%, transparent), transparent 30% 72%, color-mix(in srgb, var(--chapter-bg) 62%, transparent)),
    linear-gradient(180deg, var(--chapter-bg) 0, transparent 17% 81%, var(--chapter-bg) 100%); }
.chapter[data-prefix="B"] .chapter-atmosphere__wash, .chapter[data-prefix="F"] .chapter-atmosphere__wash, .chapter[data-prefix="G"] .chapter-atmosphere__wash, .chapter[data-prefix="H"] .chapter-atmosphere__wash, .chapter[data-prefix="R"] .chapter-atmosphere__wash { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-bg) 64%, transparent), transparent 34% 68%, color-mix(in srgb, var(--chapter-bg) 68%, transparent)),
    linear-gradient(180deg, var(--chapter-bg) 0, transparent 17% 78%, var(--chapter-bg) 100%); }
.chapter-atmosphere__product { opacity: calc(var(--atmosphere-opacity) * 0.56); filter: blur(8px) saturate(1.18) contrast(1.06); }
.chapter-atmosphere__halo { opacity: 0.16; }
.product-stage { grid-template-columns: minmax(0px, 1fr) clamp(23.5rem, 28vw, 29rem); grid-template-rows: var(--stage-height) auto; border-radius: 1.15rem; background: color-mix(in srgb, var(--chapter-surface) 76%, transparent); box-shadow: rgba(12, 14, 12, 0.18) 0px 3rem 8rem, rgba(255, 255, 255, 0.1) 0px 1px inset; }
.product-stage__backdrop { background-image: var(--chapter-scene); background-position: center center; background-size: cover; }
.product-stage__backdrop::after { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-surface) 78%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--chapter-surface) 34%, transparent), color-mix(in srgb, var(--chapter-surface) 70%, transparent)); }
.product-stage__backdrop img { inset: -16% -2% auto auto; width: 62%; filter: blur(34px) saturate(1.35) contrast(1.04); opacity: 0.1; }
.product-stage__panel, .product-stage__visual { height: var(--stage-height); min-height: var(--stage-height); }
.product-stage__panel { overflow: auto; padding: 1.35rem 1.5rem 1.25rem; border-radius: 0px; background: color-mix(in srgb, var(--chapter-surface-strong) 70%, transparent); scrollbar-color: var(--chapter-accent) transparent; scrollbar-width: thin; }
.stage-family-label { min-height: 1.9rem; font-size: 0.98rem; }
.stage-family-label b { padding: 0.28rem 0.5rem; border-radius: 0.2rem; }
.product-stage__panel h3 { max-width: 20ch; margin-top: 0.68rem; font-size: clamp(1.85rem, 1.45rem + 0.75vw, 2.55rem); line-height: 1.28; }
.stage-summary { margin-top: 0.55rem; font-size: 1rem; line-height: 1.75; }
.stage-loadout { display: block; margin-top: 0.9rem; }
.stage-loadout__choices, .stage-loadout__finish { padding: 0px; border: 0px; border-radius: 0px; background: transparent; }
.stage-loadout__finish { margin-top: 0.8rem; border-top: 1px solid var(--chapter-line); }
.selector-group { margin-top: 0.72rem; }
.selector-group__head { margin-bottom: 0.4rem; font-size: 0.94rem; }
.selector-group__head output { font-size: 0.9rem; }
.model-options { gap: 0px; }
.model-option { min-height: 3.1rem; margin-inline-start: -1px; padding: 0.42rem 0.66rem; border: 1px solid var(--chapter-line); border-radius: 0px; background: color-mix(in srgb, var(--chapter-surface) 42%, transparent); clip-path: polygon(7% 0px, 100% 0px, 93% 100%, 0px 100%); }
.model-option.is-active { background: var(--chapter-accent); color: color-mix(in srgb, var(--chapter-bg) 92%, white); }
.material-options { display: flex; flex-wrap: wrap; gap: 0px; }
.material-option { min-height: 2.8rem; padding-inline: 0.6rem; border-top: 0px; border-right: 0px; border-left: 0px; border-image: initial; border-bottom: 2px solid var(--chapter-line); border-radius: 0px; background: transparent; }
.material-option.is-active { border-color: var(--chapter-accent); background: transparent; color: var(--chapter-accent); }
.base-option { min-height: 2.8rem; }
.stage-specs { gap: 0px; margin-top: 0px; padding-top: 0px; }
.spec-chip { min-height: 3.8rem; padding: 0.58rem 0.68rem; border-inline-start: 1px solid var(--chapter-line); border-bottom: 1px solid var(--chapter-line); border-radius: 0px; background: transparent; }
.spec-chip:nth-child(2n+1) { border-inline-start: 0px; }
.spec-chip small { font-size: 0.84rem; }
.spec-chip strong { margin-top: 0.22rem; font-size: 0.9rem; line-height: 1.45; }
.selection-note { margin-top: 0.78rem; padding-top: 0.7rem; font-size: 0.9rem; }
.product-stage__visual { overflow: hidden; background: linear-gradient(105deg, color-mix(in srgb, var(--chapter-surface-strong) 44%, transparent), color-mix(in srgb, var(--chapter-surface-strong) 20%, transparent)),
    radial-gradient(circle at 51% 48%, color-mix(in srgb, var(--selection-color) 20%, transparent), transparent 47%); }
.product-stage__visual::before { inset: 2% 4%; border-radius: 46%; opacity: 0.48; }
.product-stage__visual::after { inset: 14% 18%; opacity: 0.46; }
.product-stage__image-wrap { width: calc(100% - 2rem); height: calc(100% - 1.5rem); aspect-ratio: auto; border-radius: 0.35rem; background: color-mix(in srgb, rgb(238, 231, 220) 72%, transparent); box-shadow: 0 2.2rem 5rem rgb(8 10 8 / 0.2),
    0 0 0 1px color-mix(in srgb, var(--selection-color) 26%, transparent); clip-path: polygon(2.5% 0px, 100% 0px, 97.5% 100%, 0px 100%); transition: none; transform: none !important; }
.product-stage__image-wrap::before { display: none; }
.product-stage__image { width: 100%; height: 100%; object-fit: contain; border-radius: 0px; transition: opacity 240ms; transform: none !important; }
.product-stage__image.is-changing { opacity: 0 !important; transform: none !important; }
.product-stage__code { inset: 2% auto auto 2.2%; font-size: clamp(8rem, 15vw, 14rem); opacity: 0.08; }
.product-stage__telemetry { inset: 1rem auto auto 1rem; }
.stage-details { inset: auto 1rem 1rem auto; border-radius: 0.25rem; }
.product-stage__drag-hint { inset: auto auto 1rem 1rem; border-radius: 0.25rem; }
.stage-colour-rail { position: absolute; z-index: 8; top: 50%; right: 0px; width: auto; max-height: 82%; margin: 0px; transform: translateY(-50%); }
.stage-colour-rail .selector-group__head { position: absolute; right: 0px; bottom: calc(100% + 0.35rem); display: flex; width: max-content; max-width: 12rem; align-items: center; gap: 0.55rem; margin: 0px; padding: 0.35rem 0.55rem; background: color-mix(in srgb, var(--chapter-surface-strong) 88%, transparent); box-shadow: rgba(10, 12, 10, 0.14) 0px 0.7rem 1.8rem; backdrop-filter: blur(12px); }
.stage-colour-rail .selector-group__head span, .stage-colour-rail .selector-group__head output { font-size: 0.86rem; }
.stage-colour-rail .colour-options { display: flex; max-height: 31rem; flex-direction: column; align-items: flex-end; gap: 0px; overflow-y: auto; padding: 0px; scrollbar-width: none; }
.stage-colour-rail .colour-options::-webkit-scrollbar { display: none; }
.stage-colour-rail .colour-option, .stage-colour-rail .colour-more { width: 3.65rem; min-width: 3.65rem; height: 3rem; flex: 0 0 3rem; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.28); border-image: initial; border-radius: 0px; clip-path: polygon(12% 0px, 100% 0px, 88% 100%, 0px 100%); transition: width 260ms var(--ambient-ease), filter 220ms ease; }
.stage-colour-rail .colour-option span { inset: 50% 0px auto; padding: 0px 0.35rem; background: transparent; font-family: var(--font-code); font-size: 0.82rem; text-align: center; text-shadow: rgba(0, 0, 0, 0.8) 0px 1px 0.6rem; transform: translateY(-50%); }
.stage-colour-rail .colour-option.is-active { width: 6.2rem; border-color: rgba(255, 255, 255, 0.62); box-shadow: -0.7rem 0 1.8rem color-mix(in srgb, var(--selection-color) 32%, transparent); }
.stage-colour-rail .colour-option.is-active span { opacity: 1; }
.stage-colour-rail .colour-option::after { inset: 0.35rem 0.8rem auto auto; }
.stage-colour-rail .colour-more { background: color-mix(in srgb, var(--chapter-surface-strong) 90%, transparent); font-size: 0.9rem; backdrop-filter: blur(12px); }
.family-browser { padding: 0px; border-radius: 0px; background: color-mix(in srgb, var(--chapter-surface-strong) 82%, transparent); }
.family-browser__head { display: flex; min-height: 4.45rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 0px; padding: 0.62rem 1.15rem; border-bottom: 1px solid var(--chapter-line); }
.family-browser__head > div { display: flex; align-items: baseline; gap: 0.75rem; }
.family-browser__head > div > span { font-size: 0.86rem; }
.family-browser__head h3 { margin: 0px; font-size: clamp(1.18rem, 1rem + 0.38vw, 1.52rem); }
.family-browser__head p { max-width: 48rem; overflow: hidden; font-size: 0.98rem; text-overflow: ellipsis; white-space: nowrap; }
.family-browser__rail-shell, .family-rail { margin: 0px; }
.family-browser__rail-shell { isolation: isolate; overflow: hidden; }
.family-rail { position: relative; z-index: 2; overflow: hidden; padding: 0.6rem 0px 1rem; }
.family-rail:not(.swiper-initialized) .swiper-wrapper { gap: 0px; padding: 0px; }
.family-rail .swiper-slide { margin-inline-start: -1px; }
.family-card { width: clamp(12.8rem, 15vw, 14.8rem); height: 23rem; min-height: 23rem; display: block; overflow: hidden; border-radius: 0px; background: rgb(23, 25, 22); box-shadow: none; transform: skewX(var(--roster-skew)); transform-origin: center bottom; }
.family-card::after { inset: 0px 0px auto; width: auto; height: 4px; transform: scaleX(0.18); }
.family-card__visual { position: absolute; inset: 0px; min-height: 0px; background: rgb(203, 198, 187); }
.family-card__visual::before { z-index: 2; inset: 0px; width: auto; aspect-ratio: auto; border: 0px; border-radius: 0px; background: linear-gradient(rgba(11, 13, 11, 0.04) 26%, rgba(11, 13, 11, 0.2) 54%, rgba(11, 13, 11, 0.94) 100%); opacity: 1; }
.family-card img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; border-radius: 0px; filter: grayscale(1) saturate(0) brightness(0.72) contrast(1.12); mix-blend-mode: normal; transform: skewX(var(--roster-counter-skew)) scale(1.12); transition: filter 360ms ease, transform 650ms var(--ambient-ease); }
.family-card__body { position: absolute; z-index: 4; inset: auto 0px 0px; display: block; min-height: 0px; padding: 3.4rem 1rem 1rem; border: 0px; background: linear-gradient(transparent, rgba(9, 11, 9, 0.94)); color: rgb(255, 255, 255); transform: skewX(var(--roster-counter-skew)); }
.family-card__body > span { display: block; margin-top: 0.42rem; }
.family-card__body strong { display: block; overflow: visible; color: rgb(255, 255, 255); font-size: 1.18rem; line-height: 1.35; text-overflow: clip; text-shadow: rgba(0, 0, 0, 0.95) 0px 0.16rem 1rem; white-space: normal; }
.family-card__body small { margin-top: 0.22rem; color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; text-shadow: rgb(0, 0, 0) 0px 1px 0.5rem; }
.family-card__code { display: inline-flex; width: auto; min-height: 0px; aspect-ratio: auto; padding: 0px; border: 0px; border-radius: 0px; color: var(--chapter-accent); font-size: 0.9rem; text-shadow: rgb(0, 0, 0) 0px 1px 0.5rem; }
.family-card__number { z-index: 5; inset: 0.7rem 0.85rem auto auto; color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; text-shadow: rgb(0, 0, 0) 0px 1px 0.5rem; transform: skewX(var(--roster-counter-skew)); }
.family-card__selected { inset: 0px auto auto 0px; padding: 0.38rem 0.62rem; border-radius: 0px; clip-path: polygon(12% 0px, 100% 0px, 88% 100%, 0px 100%); transform: translateY(-0.35rem) skewX(var(--roster-counter-skew)); }
.family-card.is-active { border-color: var(--chapter-accent); background: rgb(23, 25, 22); box-shadow: 0 1.35rem 3rem color-mix(in srgb, var(--chapter-accent) 25%, transparent); transform: skewX(var(--roster-skew)) translateY(-0.3rem); }
.family-card.is-active img { filter: grayscale(0) saturate(1.08) brightness(1) contrast(1.04); transform: skewX(var(--roster-counter-skew)) scale(1.16); }
.family-card.is-active::after { transform: scaleX(1); }
.family-card.is-active .family-card__selected { transform: skewX(var(--roster-counter-skew)); }
.rail-controls { z-index: 6; inset-inline: 0px; }
.rail-arrow { width: 3.9rem; height: 4.8rem; border-radius: 0px; background: color-mix(in srgb, var(--chapter-surface-strong) 88%, transparent); }
.rail-arrow--prev { inset-inline-start: 0.3rem; }
.rail-arrow--next { inset-inline-end: 0.3rem; }
.material-story { background: rgb(75, 37, 42); }
.material-story[data-active-step="1"] { background: rgb(44, 52, 57); }
.material-story[data-active-step="2"] { background: rgb(75, 44, 34); }
.material-story__backdrops::after { z-index: 2; background: linear-gradient(90deg, rgba(20, 20, 19, 0.78), rgba(24, 25, 23, 0.28) 48%, rgba(17, 18, 17, 0.52)), linear-gradient(rgba(18, 19, 17, 0.12), rgba(18, 19, 17, 0.5)); }
.material-backdrop { inset: -4%; overflow: hidden; background-image: var(--story-scene); background-position: center center; background-size: cover; opacity: 0; transform: scale(1.08); }
.material-backdrop::after { position: absolute; inset: 0px; background: radial-gradient(circle at 72% 50%, transparent, rgba(12, 13, 12, 0.42) 72%); content: ""; }
.material-backdrop img { position: absolute; z-index: 1; inset: 9% auto auto 5%; width: min(40rem, 43vw); height: 82%; object-fit: contain; filter: blur(2px) saturate(1.08) contrast(1.08); mix-blend-mode: multiply; opacity: 0.23; }
.material-backdrop.is-active { opacity: 1; transform: scale(1.02); }
.spatial-story { background-image: linear-gradient(112deg, rgba(191, 215, 210, 0.9), rgba(184, 143, 105, 0.68)), url("assets/backgrounds/waiting-cool.webp"); background-position: center center; background-size: cover; }
@media (min-width: 901px) {
  .catalogue-intro { width: 100%; min-height: 100svh; margin: 0px; padding: var(--section-space) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)); border-block: 1px solid rgba(27, 30, 26, 0.12); background-position: center center; box-shadow: rgba(255, 250, 241, 0.24) 0px 0px 8rem inset; }
  .catalogue-intro .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; }
  .catalogue-intro .eyebrow::after { width: min(9rem, 10vw); height: 1px; background: var(--primitive-red-600); content: ""; opacity: 0.62; }
  .catalogue-intro h2 { max-width: 16ch; padding-block: 0.42em; border-block: 1px solid rgba(30, 33, 29, 0.14); text-shadow: rgba(255, 252, 247, 0.84) 0px 0.12em 1.2em; }
  .catalogue-intro p:last-child { max-width: 34rem; padding: 1.2rem 1.35rem; border-inline-start: 3px solid var(--primitive-red-600); background: rgba(248, 244, 237, 0.58); box-shadow: rgba(33, 36, 31, 0.08) 0px 1.2rem 3.5rem; backdrop-filter: blur(12px) saturate(1.08); }
  .product-stage__panel h3 { min-height: 3.84em; margin-bottom: 0.35rem; font-size: clamp(1.72rem, 1.42rem + 0.62vw, 2.3rem); overflow-wrap: anywhere; text-wrap: balance; }
  .stage-summary { min-height: 6.75rem; margin-top: 0px; overflow-wrap: anywhere; }
  .model-option strong, .model-option small { direction: ltr; white-space: nowrap; }
  .product-stage { width: 100%; margin-inline: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .family-card:hover { border-color: color-mix(in srgb, var(--chapter-accent) 70%, var(--chapter-line)); transform: skewX(var(--roster-skew)) translateY(-0.26rem); }
  .family-card:not(.is-active):hover img { filter: grayscale(1) saturate(0) brightness(0.82) contrast(1.14); transform: skewX(var(--roster-counter-skew)) scale(1.16); }
  .family-card.is-active:hover { transform: skewX(var(--roster-skew)) translateY(-0.42rem); }
}
@media (max-width: 1240px) {
  :root { --stage-height: 43rem; }
  .product-stage { grid-template-columns: minmax(0px, 1fr) 23rem; }
  .product-stage__panel { padding-inline: 1.2rem; }
  .family-card { width: 13rem; height: 21.5rem; min-height: 21.5rem; }
}
@media (max-width: 900px) {
  :root { --stage-height: 39rem; }
  .chapter-atmosphere__scene { inset: -3%; background-position: 58% center; }
  .product-stage { grid-template-areas: "visual" "panel" "roster"; grid-template-columns: minmax(0px, 1fr); grid-template-rows: var(--stage-height) auto auto; }
  .product-stage__panel { height: auto; min-height: 0px; overflow: visible; }
  .stage-loadout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(13rem, 0.75fr); gap: 1rem; }
  .stage-loadout__finish { margin-top: 0px; border-top: 0px; }
  .family-browser__head { display: flex; }
  .family-browser__head p { max-width: 46%; }
  .material-backdrop img { width: 58vw; opacity: 0.16; }
}
@media (max-width: 620px) {
  :root { --stage-height: 29rem; --roster-skew: -2.5deg; --roster-counter-skew: 2.5deg; }
  .chapter { --scene-opacity: 0.3; }
  .product-stage { border-radius: 0.65rem; }
  .product-stage__visual { height: var(--stage-height); min-height: var(--stage-height); }
  .product-stage__image-wrap { width: calc(100% - 0.8rem); height: calc(100% - 0.8rem); border-radius: 0.15rem; }
  .product-stage__code { font-size: 6.8rem; }
  .product-stage__telemetry { inset: 0.65rem auto auto 0.65rem; }
  .stage-colour-rail { max-height: 74%; }
  .stage-colour-rail .selector-group__head { bottom: calc(100% + 0.2rem); padding: 0.25rem 0.4rem; }
  .stage-colour-rail .selector-group__head output { display: none; }
  .stage-colour-rail .colour-options { max-height: 18rem; }
  .stage-colour-rail .colour-option, .stage-colour-rail .colour-more { width: 2.7rem; min-width: 2.7rem; height: 2.35rem; flex-basis: 2.35rem; }
  .stage-colour-rail .colour-option.is-active { width: 4.8rem; }
  .product-stage__panel { padding: 1.15rem; }
  .stage-loadout { display: block; }
  .stage-loadout__finish { margin-top: 0.75rem; border-top: 1px solid var(--chapter-line); }
  .family-browser__head { min-height: 3.9rem; padding: 0.52rem 0.78rem; }
  .family-browser__head > div { gap: 0.48rem; }
  .family-browser__head > div > span { font-size: 0.8rem; }
  .family-browser__head h3 { font-size: 1.08rem; }
  .family-browser__head p { display: none; }
  .family-card { width: 10.7rem; height: 17.8rem; min-height: 17.8rem; }
  .family-card__body { padding: 2.8rem 0.72rem 0.78rem; }
  .family-card__body strong { font-size: 1.02rem; }
  .family-card__body small { display: block; font-size: 0.8rem; }
  .rail-arrow { width: 3.2rem; height: 4rem; }
  .material-backdrop { background-position: 58% center; }
  .material-backdrop img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-atmosphere__scene, .family-card, .family-card img, .material-backdrop { transition-duration: 1ms !important; }
}
:root { --roster-skew: -2.2deg; --roster-counter-skew: 2.2deg; }
.catalogue-intro { position: relative; isolation: isolate; display: block; width: 100%; min-height: 100svh; margin: 0px; padding: clamp(6.5rem, 10vh, 9rem) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)) 3rem; overflow: hidden; border: 0px; background: radial-gradient(circle at 20% 42%, rgba(170, 83, 66, 0.13), transparent 30rem), linear-gradient(118deg, rgb(232, 227, 217) 0px, rgb(232, 227, 217) 48%, rgb(244, 240, 232) 48%, rgb(244, 240, 232) 100%); box-shadow: none; }
.catalogue-intro::before, .catalogue-intro::after { content: none !important; }
.catalogue-intro__grid { position: relative; z-index: 2; display: grid; width: min(92vw, 1480px); min-height: calc(100svh - clamp(9.5rem, 16vh, 13rem)); grid-template: "art copy" minmax(0px, 1fr) "route route" / minmax(31rem, 1.15fr) minmax(25rem, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); margin-inline: auto; }
.catalogue-intro__copy { grid-area: copy; align-self: center; padding-inline-start: clamp(1rem, 3vw, 3rem); }
.catalogue-intro__copy .eyebrow { display: flex; align-items: center; gap: 0.75rem; color: rgb(123, 74, 61); font-size: 1.02rem; }
.catalogue-intro__copy .eyebrow::after { width: clamp(4rem, 8vw, 8rem); height: 1px; background: currentcolor; content: ""; opacity: 0.48; }
.catalogue-intro__copy h2 { max-width: 11ch; margin: 1.1rem 0px 0px; padding: 0px; border: 0px; color: rgb(32, 35, 31); font-size: clamp(3.35rem, 5.2vw, 6.4rem); font-weight: 570; letter-spacing: -0.055em; line-height: 1.14; text-shadow: none; }
.catalogue-intro__copy h2 em { color: rgb(181, 83, 61); font-style: normal; }
.catalogue-intro__copy > p:last-of-type { max-width: 35rem; margin-top: 1.5rem; padding: 0px; border: 0px; background: none; box-shadow: none; color: rgb(90, 85, 77); font-size: clamp(1.08rem, 0.98rem + 0.2vw, 1.28rem); line-height: 1.95; backdrop-filter: none; }
.catalogue-intro__action { display: inline-flex; min-height: 3.3rem; align-items: center; gap: 1.3rem; margin-top: 1.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid rgb(129, 120, 107); color: rgb(32, 35, 31); font-weight: 720; }
.catalogue-intro__action span { font-size: 1.35rem; transition: transform 240ms; }
.catalogue-intro__action:hover span { transform: translate(-0.25rem, 0.25rem); }
.catalogue-intro__art { position: relative; grid-area: art; align-self: stretch; min-height: 38rem; }
.catalogue-intro__art::before { position: absolute; inset: 12% 7% 9%; border: 1px solid rgba(48, 53, 47, 0.14); border-radius: 50%; content: ""; }
.catalogue-intro__serial { position: absolute; inset: 2% auto auto 0px; color: rgba(40, 44, 39, 0.07); font-family: var(--font-code); font-size: clamp(15rem, 26vw, 28rem); font-weight: 700; letter-spacing: -0.12em; line-height: 0.8; }
.catalogue-intro__orbit { position: absolute; inset: 17% 8% auto auto; width: 33%; aspect-ratio: 1 / 1; border: 1px solid rgba(181, 83, 61, 0.28); border-radius: 50%; }
.catalogue-intro__art figure { position: absolute; z-index: 2; inset: 1% 4% 0px 5%; margin: 0px; }
.catalogue-intro__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(rgba(36, 30, 25, 0.24) 0px 2.6rem 2.1rem); }
.catalogue-intro__legend { position: absolute; z-index: 4; inset: auto auto 8% 3%; display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; border: 1px solid rgba(42, 46, 40, 0.14); background: rgba(246, 241, 232, 0.62); box-shadow: rgba(35, 31, 27, 0.08) 0px 1rem 3rem; backdrop-filter: blur(16px) saturate(1.12); }
.catalogue-intro__legend b { color: rgb(181, 83, 61); font-family: var(--font-code); font-size: 2.25rem; }
.catalogue-intro__legend span { color: rgb(79, 75, 68); font-size: 0.9rem; line-height: 1.55; }
.catalogue-intro__route { display: grid; grid-area: route; grid-template-columns: repeat(11, minmax(5.5rem, 1fr)); overflow-x: auto; margin: 0px; padding: 1rem 0px 0px; border-top: 1px solid rgba(42, 46, 40, 0.17); list-style: none; }
.catalogue-intro__route li { display: flex; min-height: 3.3rem; align-items: center; gap: 0.55rem; padding-inline: 0.75rem; border-inline-start: 1px solid rgba(42, 46, 40, 0.1); color: rgb(116, 110, 100); }
.catalogue-intro__route li:last-child { border-inline-start: 0px; }
.catalogue-intro__route b { color: rgb(32, 35, 31); font-family: var(--font-code); }
.catalogue-intro__route span { font-size: 0.88rem; }
.scrolly-story.material-story, .scrolly-story.spatial-story { position: relative; isolation: isolate; display: block; min-height: 100svh; padding: 0px; overflow: clip; background: rgb(36, 40, 37); color: rgb(247, 241, 232); transition: background 500ms; }
.scrolly-story.spatial-story::before { content: none; }
.scrolly-story__backdrops { position: absolute; z-index: 0; inset: 0px; overflow: hidden; pointer-events: none; }
.story-backdrop { position: absolute; inset: -4%; margin: 0px; background-image: var(--story-background); background-position: center center; background-size: cover; filter: saturate(1.06) contrast(1.04); opacity: 0; transform: scale(1.02); transition: opacity 650ms, filter 800ms, transform 1.2s; }
.story-backdrop::after { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(19, 22, 20, 0.44), rgba(19, 22, 20, 0.1) 45%, rgba(19, 22, 20, 0.52)), linear-gradient(rgba(17, 20, 18, 0.25), rgba(17, 20, 18, 0.52)); content: ""; }
.story-backdrop.is-active { opacity: 0.84; }
.scrolly-story--spatial .story-backdrop::after { background: linear-gradient(90deg, rgba(25, 31, 29, 0.42), rgba(24, 29, 27, 0.12) 52%, rgba(25, 31, 29, 0.5)), linear-gradient(rgba(18, 22, 20, 0.15), rgba(18, 22, 20, 0.48)); }
.scrolly-story__pin { position: relative; z-index: 2; width: 100%; min-height: 100svh; padding: clamp(5.5rem, 9vh, 8rem) max(var(--gutter), calc((100vw - min(92vw, 1480px)) / 2)) 3rem clamp(8.4rem, 11vw, 12rem); }
.scrolly-story__stage { position: relative; width: 100%; min-height: calc(100svh - clamp(8.5rem, 15vh, 12rem)); direction: ltr; }
.story-strip { position: absolute; z-index: 8; top: 50%; left: max(1.1rem, 0.5 * (100vw - min(92vw, 1480px))); display: grid; width: clamp(7.2rem, 8vw, 8.6rem); gap: 0.25rem; direction: ltr; transform: translateY(-50%); }
.story-strip__line { position: absolute; z-index: -1; top: 1.1rem; bottom: 1.1rem; left: 1.05rem; width: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.story-strip__line i { display: block; width: 100%; height: 100%; background: rgb(242, 179, 95); transform: scaleY(var(--story-progress, 0)); transform-origin: center top; }
.story-strip__step { position: relative; display: grid; min-height: 4.4rem; grid-template-columns: 3.15rem minmax(0px, 1fr); align-items: center; gap: 0.45rem; padding: 0.35rem 0px; border: 0px; background: transparent; color: rgba(255, 255, 255, 0.5); cursor: pointer; text-align: left; transition: color 220ms, transform 260ms; }
.story-strip__step::before { position: absolute; left: 0.7rem; width: 0.7rem; aspect-ratio: 1 / 1; border: 1px solid; border-radius: 50%; background: rgb(37, 41, 37); content: ""; }
.story-strip__step b { padding-left: 1.55rem; font-family: var(--font-code); font-size: 0.82rem; text-align: center; }
.story-strip__step span { direction: rtl; font-size: 0.9rem; font-weight: 700; text-align: left; white-space: nowrap; }
.story-strip__step.is-active { color: rgb(255, 255, 255); transform: translateX(0.3rem); }
.story-strip__step.is-active::before { border-color: rgb(242, 179, 95); background: rgb(242, 179, 95); box-shadow: rgba(242, 179, 95, 0.72) 0px 0px 1.3rem; }
.story-scene { position: absolute; inset: 0px; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: repeat(10, minmax(0px, 1fr)); opacity: 0; visibility: hidden; transition: opacity 440ms, visibility 440ms; }
.story-scene.is-active { z-index: 3; opacity: 1; visibility: visible; }
.story-scene__copy { position: relative; z-index: 5; align-self: center; padding: clamp(1.2rem, 2vw, 2rem); border-inline-start: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(90deg, rgba(22, 25, 23, 0.05), rgba(22, 25, 23, 0.38)); direction: rtl; text-align: right; backdrop-filter: blur(10px); }
.story-scene__copy .eyebrow { color: rgb(242, 179, 95); font-size: 0.98rem; }
.story-scene__copy h2 { max-width: 11ch; margin: 0.8rem 0px 0px; color: rgb(255, 249, 239); font-size: clamp(3.2rem, 5.6vw, 6.7rem); font-weight: 570; letter-spacing: -0.055em; line-height: 1.12; text-shadow: rgba(0, 0, 0, 0.4) 0px 0.16em 1.2em; }
.story-scene__copy h2 em { color: rgb(242, 179, 95); font-style: normal; }
.story-scene__copy > p:last-of-type { max-width: 35rem; margin-top: 1.2rem; color: rgba(255, 249, 239, 0.82); font-size: clamp(1.05rem, 0.96rem + 0.18vw, 1.24rem); line-height: 1.9; text-shadow: rgba(0, 0, 0, 0.5) 0px 0.1em 0.8em; }
.story-scene__meta { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.72); }
.story-scene__meta b { color: rgb(255, 255, 255); font-family: var(--font-code); direction: ltr; }
.story-scene__meta span { font-size: 0.92rem; }
.story-scene__product { position: relative; z-index: 3; align-self: stretch; margin: 0px; pointer-events: none; }
.story-scene__product i { position: absolute; z-index: -1; inset: 22% 12% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(240, 166, 93, 0.38), rgba(187, 84, 63, 0.14) 42%, transparent 70%); filter: blur(22px); }
.story-scene__product::after { position: absolute; z-index: -1; inset: auto 14% 6%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.38); content: ""; filter: blur(24px); transform: scaleX(0.78); }
.story-scene__product img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2.3rem 1.8rem); }
.story-scene--left .story-scene__product { grid-area: 1 / 1 / 11 / 8; }
.story-scene--left .story-scene__copy { grid-area: 2 / 8 / 10 / 13; }
.story-scene--right .story-scene__product { grid-area: 1 / 6 / 11 / 13; }
.story-scene--right .story-scene__copy { grid-area: 2 / 1 / 10 / 6; border-inline-start: 0px; border-inline-end: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(270deg, rgba(22, 25, 23, 0.05), rgba(22, 25, 23, 0.38)); }
.story-scene--center .story-scene__product { grid-area: 1 / 3 / 9 / 11; }
.story-scene--center .story-scene__copy { grid-area: 6 / 1 / 11 / 6; align-self: end; }
.scrolly-story--spatial .story-scene--center .story-scene__product { grid-area: 2 / 2 / 10 / 12; }
.scrolly-story--spatial .story-scene--center .story-scene__copy { grid-area: 1 / 8 / 6 / 13; align-self: start; }
.chapter { --scene-opacity: 0.54; }
.chapter[data-prefix="B"], .chapter[data-prefix="F"], .chapter[data-prefix="G"], .chapter[data-prefix="H"], .chapter[data-prefix="R"] { --scene-opacity: 0.62; }
.chapter[data-prefix="K"], .chapter[data-prefix="W"], .chapter[data-prefix="C"] { --scene-opacity: 0.58; }
.chapter-atmosphere__scene { filter: saturate(1.18) contrast(1.08); }
.chapter-atmosphere__wash, .chapter[data-prefix="B"] .chapter-atmosphere__wash, .chapter[data-prefix="F"] .chapter-atmosphere__wash, .chapter[data-prefix="G"] .chapter-atmosphere__wash, .chapter[data-prefix="H"] .chapter-atmosphere__wash, .chapter[data-prefix="R"] .chapter-atmosphere__wash { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-bg) 38%, transparent), transparent 24% 76%, color-mix(in srgb, var(--chapter-bg) 44%, transparent)),
    linear-gradient(180deg, var(--chapter-bg) 0, transparent 12% 88%, var(--chapter-bg) 100%); }
.product-stage { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); background: color-mix(in srgb, var(--chapter-surface) 52%, transparent); box-shadow: rgba(10, 12, 10, 0.22) 0px 3rem 8rem, rgba(255, 255, 255, 0.22) 0px 1px inset; backdrop-filter: blur(22px) saturate(1.16); }
.product-stage__backdrop::after { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-surface) 52%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--chapter-surface) 18%, transparent), color-mix(in srgb, var(--chapter-surface) 44%, transparent)); }
.product-stage__panel { border-inline-start: 1px solid rgba(255, 255, 255, 0.18); background: color-mix(in srgb, var(--chapter-surface-strong) 56%, transparent); backdrop-filter: blur(18px) saturate(1.1); }
.product-stage__visual { padding: 0.7rem; background: linear-gradient(105deg, color-mix(in srgb, var(--chapter-surface-strong) 27%, transparent), color-mix(in srgb, var(--chapter-surface-strong) 11%, transparent)),
    radial-gradient(circle at 51% 48%, color-mix(in srgb, var(--selection-color) 18%, transparent), transparent 51%); backdrop-filter: blur(10px); }
.product-stage__image-wrap { width: calc(100% - 1.4rem); height: calc(100% - 1.4rem); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0.7rem; background: rgba(245, 241, 233, 0.58); box-shadow: rgba(8, 10, 8, 0.18) 0px 2rem 5rem, rgba(255, 255, 255, 0.34) 0px 1px inset; clip-path: none; backdrop-filter: blur(14px) saturate(1.08); transform: none !important; }
.product-stage__image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center center; filter: saturate(1.03) contrast(1.02); mix-blend-mode: normal; transform: scale(1.01) !important; transition: opacity 240ms ease, transform 460ms var(--ambient-ease) !important; }
.product-stage__image.is-changing { opacity: 0 !important; transform: scale(1.01) !important; }
.family-browser { border-top: 1px solid rgba(255, 255, 255, 0.2); background: color-mix(in srgb, var(--chapter-surface-strong) 54%, transparent); backdrop-filter: blur(18px) saturate(1.1); }
.family-browser__head { background: color-mix(in srgb, var(--chapter-surface-strong) 30%, transparent); }
.family-browser__rail-shell { --roster-edge-buffer: 104px; position: relative; background: color-mix(in srgb, var(--chapter-surface) 18%, transparent); }
.family-rail { z-index: 3; padding: 0.75rem 0px 1.15rem; }
.family-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.35rem; box-shadow: rgba(7, 9, 7, 0.14) 0px 1.25rem 2.7rem; transition: border-color 260ms ease, box-shadow 300ms ease, transform 340ms var(--ambient-ease); }
.family-card__visual, .family-card img { border-radius: inherit; }
.family-card.is-active { transform: skewX(var(--roster-skew)); }
.rail-arrow { border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0.4rem; background: color-mix(in srgb, var(--chapter-surface-strong) 68%, transparent); box-shadow: rgba(8, 10, 8, 0.18) 0px 1rem 2.5rem; backdrop-filter: blur(16px); transition: opacity 200ms, transform 220ms, background 220ms; }
@media (hover: hover) and (pointer: fine) {
  .product-stage__visual:hover .product-stage__image:not(.is-changing) { transform: scale(1.045) !important; }
  .family-card:hover, .family-card.is-active:hover { border-color: color-mix(in srgb, var(--chapter-accent) 72%, white); box-shadow: rgba(7, 9, 7, 0.23) 0px 1.8rem 3.4rem; transform: skewX(var(--roster-skew)) translateY(-0.38rem); }
  .family-card:not(.is-active):hover img { filter: grayscale(0.55) saturate(0.55) brightness(0.87) contrast(1.1); transform: skewX(var(--roster-counter-skew)) scale(1.1); }
  .rail-arrow:hover { background: color-mix(in srgb, var(--chapter-accent) 18%, var(--chapter-surface-strong)); transform: translateY(-0.15rem); }
}
@media (max-width: 900px) {
  .catalogue-intro { min-height: auto; padding-block: 7rem 2rem; }
  .catalogue-intro__grid { min-height: 0px; grid-template: "copy" "art" 30rem "route" / minmax(0px, 1fr); gap: 2rem; }
  .catalogue-intro__copy { padding: 0px; }
  .catalogue-intro__copy h2 { font-size: clamp(3rem, 10vw, 5rem); }
  .catalogue-intro__art { min-height: 30rem; }
  .catalogue-intro__route { display: flex; overflow-x: auto; }
  .catalogue-intro__route li { min-width: 8.5rem; }
  .scrolly-story.material-story, .scrolly-story.spatial-story, .scrolly-story__pin { min-height: 48rem; }
  .scrolly-story__pin { padding: 5rem var(--gutter) 6.5rem; }
  .scrolly-story__stage { min-height: 37rem; }
  .story-strip { top: auto; right: var(--gutter); bottom: 1rem; left: var(--gutter); display: flex; width: auto; justify-content: center; transform: none; }
  .story-strip__line { display: none; }
  .story-strip__step { min-height: 3.2rem; grid-template-columns: auto auto; padding-inline: 0.6rem; }
  .story-strip__step::before { display: none; }
  .story-strip__step b { padding: 0px; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product { grid-area: 4 / 1 / 11 / 13; }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy { grid-area: 1 / 1 / 6 / 13; align-self: start; padding: 1rem; border-inline: 0px; }
  .story-scene__copy h2 { font-size: clamp(2.55rem, 9vw, 4.2rem); }
  .product-stage__image { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .story-scene, .story-backdrop, .product-stage__image, .family-card, .rail-arrow { transition: none !important; }
}
.scrolly-story.material-story, .scrolly-story.spatial-story { min-height: 100svh; overflow: hidden; scroll-margin-top: 0px; }
.scrolly-story__pin { height: 100svh; min-height: 100svh; padding-left: clamp(11.5rem, 13vw, 14rem); contain: layout paint; transform: translateZ(0px); }
.scrolly-story__stage { height: calc(100svh - clamp(8.5rem, 15vh, 12rem)); min-height: 0px; }
.story-strip { left: max(1.25rem, 0.5 * (100vw - min(94vw, 1540px))); width: clamp(8.8rem, 10vw, 10.8rem); gap: 0.45rem; }
.story-strip__line { top: 1.65rem; bottom: 1.65rem; left: 1.3rem; width: 2px; }
.story-strip__step { min-height: 5.15rem; grid-template-columns: 3.55rem minmax(0px, 1fr); gap: 0.6rem; color: rgba(255, 255, 255, 0.55); transform: none; }
.story-strip__step::before { left: 0.82rem; width: 0.92rem; background: rgb(37, 41, 37); box-shadow: rgba(242, 179, 95, 0) 0px 0px 0px 0px; transform: scale(0.78); transition: border-color 220ms ease, background 220ms ease, box-shadow 260ms ease, transform 260ms var(--ambient-ease); }
.story-strip__step b { padding-left: 1.8rem; font-size: 0.88rem; transition: color 220ms ease, transform 240ms var(--ambient-ease); }
.story-strip__step span { font-size: 0.98rem; transition: color 220ms ease, transform 240ms var(--ambient-ease); transform-origin: left center; }
.story-strip__step.is-active { color: rgb(255, 255, 255); transform: none; }
.story-strip__step.is-active::before { box-shadow: rgba(242, 179, 95, 0.72) 0px 0px 1.5rem; transform: scale(1.42); }
.story-strip__step.is-active b, .story-strip__step.is-active span { transform: scale(1.06); }
.story-scene { contain: layout paint; transition: opacity 480ms, visibility 480ms; }
.story-scene__copy { box-shadow: rgba(0, 0, 0, 0.14) 0px 1.8rem 5rem; }
.story-scene__copy h2 { font-size: clamp(2.9rem, 4.75vw, 5.7rem); line-height: 1.1; }
.story-scene__product img { transform: translateZ(0px); }
.story-scene--material-palette .story-scene__product { grid-area: 1 / 1 / 11 / 7; }
.story-scene--material-palette .story-scene__copy { grid-area: 2 / 8 / 10 / 13; }
.story-scene--material-blueprint .story-scene__product { grid-area: 1 / 6 / 11 / 13; }
.story-scene--material-blueprint .story-scene__copy { grid-area: 2 / 1 / 10 / 6; }
.story-scene--material-transform-wide .story-scene__product { grid-area: 1 / 3 / 8 / 13; }
.story-scene--material-transform-wide .story-scene__copy { grid-area: 6 / 1 / 11 / 13; display: grid; grid-template-areas: "eyebrow eyebrow" "body title" "meta title"; grid-template-columns: minmax(19rem, 0.78fr) minmax(28rem, 1.22fr); align-content: center; column-gap: clamp(2rem, 5vw, 6rem); padding: clamp(1.3rem, 2.2vw, 2.2rem) clamp(1.5rem, 3vw, 3.2rem); border-inline: 0px; border-top: 1px solid rgba(255, 255, 255, 0.24); background: linear-gradient(rgba(24, 27, 25, 0.68), rgba(22, 25, 23, 0.9)); backdrop-filter: blur(18px) saturate(1.08); }
.story-scene--material-transform-wide .story-scene__copy .eyebrow { grid-area: eyebrow; }
.story-scene--material-transform-wide .story-scene__copy h2 { grid-area: title; align-self: center; max-width: 10ch; margin: 0px; font-size: clamp(3.1rem, 4.6vw, 5.6rem); }
.story-scene--material-transform-wide .story-scene__copy > p:last-of-type { grid-area: body; align-self: end; margin-top: 0.5rem; }
.story-scene--material-transform-wide .story-scene__meta { grid-area: meta; }
.scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 5 / 1 / 11 / 13; }
.scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 4 / 5 / 13; align-self: start; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(19rem, 0.85fr); column-gap: 2rem; padding: 1.3rem 1.7rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.22); }
.story-scene--spatial-waiting-wide .story-scene__copy .eyebrow, .story-scene--spatial-waiting-wide .story-scene__copy h2 { grid-column: 1; }
.story-scene--spatial-waiting-wide .story-scene__copy > p:last-of-type, .story-scene--spatial-waiting-wide .story-scene__meta { grid-column: 2; }
.story-scene--spatial-waiting-wide .story-scene__copy > p:last-of-type { grid-row: 1 / 3; align-self: center; margin: 0px; }
.story-scene--spatial-waiting-wide .story-scene__meta { grid-row: 3; }
.story-scene--spatial-waiting-wide .story-scene__copy h2 { margin-top: 0.45rem; font-size: clamp(2.8rem, 4.25vw, 5rem); }
.story-scene--spatial-lounge .story-scene__product { grid-area: 1 / 6 / 11 / 13; }
.story-scene--spatial-lounge .story-scene__copy { grid-area: 2 / 1 / 10 / 6; }
.story-scene--spatial-conference .story-scene__product { grid-area: 1 / 1 / 11 / 8; }
.story-scene--spatial-conference .story-scene__copy { grid-area: 2 / 8 / 10 / 13; }
.chapter__mast { min-height: 10.5rem; grid-template-columns: minmax(10rem, 0.42fr) minmax(20rem, 0.92fr) minmax(21rem, 0.78fr); align-items: center; gap: clamp(1.5rem, 3vw, 3.2rem); margin-bottom: clamp(1.6rem, 3vw, 2.8rem); }
.chapter__index strong { font-size: clamp(3.6rem, 6vw, 5.8rem); }
.chapter__mast h2 { position: relative; color: var(--chapter-ink); font-size: clamp(3rem, 4.8vw, 5.5rem); line-height: 1; filter: drop-shadow(0 0.2rem 1rem color-mix(in srgb, var(--chapter-bg) 88%, transparent)); text-shadow: 0 1px 0 color-mix(in srgb, white 45%, transparent),
    0 0 2.2rem color-mix(in srgb, var(--chapter-surface-strong) 88%, transparent); opacity: 1 !important; }
.chapter__mast h2::after { position: absolute; z-index: -1; inset: -35% -10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--chapter-surface-strong) 70%, transparent), transparent 68%); content: ""; filter: blur(18px); pointer-events: none; }
.chapter__statement { color: color-mix(in srgb, var(--chapter-ink) 68%, var(--chapter-soft)); font-size: clamp(1.02rem, 0.96rem + 0.15vw, 1.16rem); font-weight: 580; opacity: 0.92; text-shadow: 0 0.12rem 1.1rem color-mix(in srgb, var(--chapter-bg) 96%, transparent); }
.product-stage__visual { padding: 0px; }
.product-stage__image-wrap { width: 100%; height: 100%; border: 0px; border-radius: 0px; box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; }
.product-stage__image { object-fit: cover; transform: scale(1.08) !important; }
.product-stage__image.is-changing { transform: scale(1.08) !important; }
.product-stage__panel h3 { color: var(--chapter-ink); font-size: clamp(1.58rem, 1.36rem + 0.46vw, 2.08rem); line-height: 1.32; text-shadow: 0 0.12rem 1.35rem color-mix(in srgb, var(--chapter-surface-strong) 92%, transparent); }
.spec-chip { position: relative; overflow: hidden; isolation: isolate; transition: color 220ms ease, background 240ms ease, box-shadow 260ms ease, transform 260ms var(--ambient-ease); }
.spec-chip::after { position: absolute; z-index: -1; inset: auto 0px 0px; height: 3px; background: var(--chapter-accent); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 280ms var(--ambient-ease); }
@media (hover: hover) and (pointer: fine) {
  .spec-chip:hover { background: color-mix(in srgb, var(--chapter-accent) 10%, transparent); box-shadow: inset 0 0 2rem color-mix(in srgb, var(--chapter-accent) 8%, transparent); color: var(--chapter-ink); transform: translateY(-0.12rem); }
  .spec-chip:hover::after { transform: scaleX(1); }
  .model-option:hover, .material-option:hover, .base-option:hover { color: var(--chapter-accent); text-shadow: 0 0 1rem color-mix(in srgb, var(--chapter-accent) 35%, transparent); }
  .product-stage__visual:hover .product-stage__image:not(.is-changing) { transform: scale(1.12) !important; }
}
.spec-chip:hover { background: color-mix(in srgb, var(--chapter-accent) 10%, transparent); box-shadow: inset 0 0 2rem color-mix(in srgb, var(--chapter-accent) 8%, transparent); color: var(--chapter-ink); transform: translateY(-0.12rem); }
.spec-chip:hover::after { transform: scaleX(1); }
.product-stage__visual:hover .product-stage__image:not(.is-changing) { transform: scale(1.12) !important; }
.stage-colour-rail { right: 0px; width: 7.4rem; max-height: 86%; }
.stage-colour-rail .selector-group__head { right: 0px; min-width: 11.5rem; padding: 0.48rem 0.75rem; border-width: 1px 0px 1px 1px; border-style: solid none solid solid; border-color: rgba(255, 255, 255, 0.24) currentcolor rgba(255, 255, 255, 0.24) rgba(255, 255, 255, 0.24); border-image: initial; border-radius: 0.6rem 0px 0px 0.6rem; }
.stage-colour-rail .colour-options { width: 100%; align-items: flex-end; }
.stage-colour-rail .colour-option, .stage-colour-rail .colour-more { width: 4.8rem; min-width: 4.8rem; height: 3.25rem; flex-basis: 3.25rem; border-radius: 0px; clip-path: polygon(14% 0px, 100% 0px, 100% 100%, 0px 100%); }
.stage-colour-rail .colour-option.is-active { width: 7.35rem; box-shadow: -1.2rem 0 2.2rem color-mix(in srgb, var(--selection-color) 38%, transparent); }
.stage-colour-rail .colour-option::after { right: 0.65rem; }
.family-card.is-active, .family-card.is-active:hover { transform: skewX(var(--roster-skew)); }
.rail-arrow, .rail-arrow:hover { transform: translateY(-50%) !important; }
.rail-arrow--prev { right: auto; left: 0.45rem; }
.rail-arrow--next { right: 0.45rem; left: auto; }
.rail-arrow.swiper-button-disabled, .rail-arrow[disabled] { transform: translateY(-50%) scale(0.9) !important; }
.finder-section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 9vw, 9rem); }
.finder-section::before { opacity: 0.25; }
.finder-section__head h2 { max-width: 9ch; font-size: clamp(3.4rem, 5.6vw, 6.4rem); line-height: 1; text-shadow: rgba(255, 255, 255, 0.86) 0px 0.18rem 2rem; }
.finder-toolbar { border-radius: 0.7rem; background: rgba(248, 244, 237, 0.62); box-shadow: rgba(33, 36, 31, 0.09) 0px 1.6rem 4rem; }
.finder-results-shell { position: relative; width: var(--content-width); min-height: 37rem; margin: 1rem auto 0px; padding: 3.6rem 1rem 4.7rem; overflow: hidden; border: 1px solid rgba(55, 61, 54, 0.14); border-radius: 0.7rem; background: linear-gradient(120deg, rgb(255 253 248 / 0.72), rgb(235 239 231 / 0.58)),
    var(--section-scene) center / cover; box-shadow: rgba(33, 36, 31, 0.12) 0px 2.4rem 6rem, rgba(255, 255, 255, 0.65) 0px 1px inset; backdrop-filter: blur(18px) saturate(1.08); }
.finder-results-shell::before { position: absolute; z-index: 0; inset: -1rem auto auto 2rem; color: rgba(65, 72, 63, 0.055); content: "S"; direction: ltr; font-family: var(--font-code); font-size: 18rem; font-weight: 800; line-height: 0.8; pointer-events: none; }
.finder-results-status { position: absolute; z-index: 3; inset: 0px 0px auto; display: flex; min-height: 2.8rem; align-items: center; gap: 0.8rem; padding: 0.5rem 1rem; border-bottom: 1px solid rgba(55, 61, 54, 0.12); background: rgba(248, 244, 237, 0.58); color: var(--color-ink-soft); font-size: 0.9rem; backdrop-filter: blur(12px); }
.finder-results-status i { width: 0.35rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--color-brand); box-shadow: rgba(151, 51, 54, 0.45) 0px 0px 1rem; }
.finder-results-status b { margin-inline-start: auto; color: var(--color-brand); font-family: var(--font-code); font-size: 0.76rem; letter-spacing: 0.08em; }
.finder-results-shell .finder-grid { position: relative; z-index: 2; width: 100%; min-height: 26.25rem; grid-auto-rows: 8.25rem; align-content: start; margin: 0px; }
.finder-card { position: relative; min-height: 8.25rem; overflow: hidden; border-radius: 0.45rem; background: rgba(255, 253, 248, 0.74); box-shadow: rgba(35, 39, 34, 0.06) 0px 0.8rem 2rem; }
.finder-card::after { position: absolute; inset: auto 0px 0px; height: 3px; background: var(--color-brand); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 260ms var(--ambient-ease); }
.finder-card:hover::after { transform: scaleX(1); }
.finder-results-shell .finder-more { position: absolute; z-index: 4; bottom: 1rem; left: 50%; margin: 0px; transform: translateX(-50%); }
.finder-results-shell .finder-more:hover { transform: translateX(-50%); }
.finder-results-shell .finder-empty { position: absolute; z-index: 4; inset: 50% 1rem auto; width: auto; margin: 0px; transform: translateY(-50%); }
@media (max-width: 900px) {
  .scrolly-story__pin { height: auto; padding-left: var(--gutter); contain: none; }
  .scrolly-story__stage { height: auto; }
  .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { display: block; }
  .finder-results-shell { width: min(100% - 2 * var(--gutter), var(--content-width)); min-height: 36rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-strip__step::before, .story-strip__step b, .story-strip__step span, .spec-chip, .spec-chip::after, .finder-card::after { transition: none !important; }
}
:root { --roster-skew: -1.55deg; --roster-counter-skew: 1.55deg; }
.scrolly-story.material-story, .scrolly-story.spatial-story, .scrolly-story > .pin-spacer { max-width: 100%; width: 100% !important; margin-inline: 0px !important; }
.scrolly-story__pin { max-width: none; contain: none; will-change: transform; left: 0px !important; width: 100% !important; margin: 0px !important; }
.story-backdrop { inset: -1.5%; background-position: center center; filter: saturate(1.04) contrast(1.025) blur(0.7px); transform: scale(1.005); }
.scrolly-story--material .story-scene__product { background: transparent; }
.scrolly-story--material .story-scene__product img { object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.28) 0px 1.8rem 1.65rem); }
.story-scene--material-palette .story-scene__product { grid-area: 2 / 2 / 10 / 7; }
.story-scene--material-palette .story-scene__copy { grid-area: 2 / 8 / 10 / 13; max-width: 34rem; justify-self: end; }
.story-scene--material-blueprint .story-scene__product { grid-area: 1 / 6 / 11 / 13; }
.story-scene--material-blueprint .story-scene__copy { grid-area: 3 / 1 / 9 / 6; max-width: 34rem; justify-self: start; }
.story-scene--material-transform-wide .story-scene__product { grid-area: 1 / 3 / 7 / 11; translate: -4rem; }
.story-scene--material-transform-wide .story-scene__copy { grid-area: 6 / 3 / 11 / 11; display: block; width: min(100%, 58rem); max-width: 58rem; place-self: end center; padding: clamp(1.2rem, 1.9vw, 1.8rem) clamp(1.45rem, 2.5vw, 2.5rem); border-top: 0px; border-inline-start: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(90deg, rgba(22, 25, 23, 0.08), rgba(22, 25, 23, 0.56)); text-align: right; translate: -4rem; backdrop-filter: blur(13px) saturate(1.06); }
.story-scene--material-transform-wide .story-scene__copy .eyebrow, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy > p:last-of-type, .story-scene--material-transform-wide .story-scene__meta { display: flex; max-width: 100%; }
.story-scene--material-transform-wide .story-scene__copy h2 { display: block; max-width: 11ch; margin-top: 0.55rem; font-size: clamp(2.7rem, 4vw, 4.75rem); }
.story-scene--material-transform-wide .story-scene__copy > p:last-of-type { display: block; max-width: 35rem; margin-top: 0.85rem; }
.scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 4 / 3 / 11 / 11; translate: -4rem; }
.scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 3 / 5 / 11; width: min(100%, 58rem); max-width: 58rem; justify-self: center; padding-inline: clamp(1.3rem, 2.4vw, 2.3rem); translate: -4rem; }
.stage-colour-rail { right: auto; left: 0px; }
.stage-colour-rail .selector-group__head { right: auto; left: 0px; border-right: 1px solid rgba(255, 255, 255, 0.24); border-left: 0px; border-radius: 0px 0.6rem 0.6rem 0px; }
.stage-colour-rail .colour-options { align-items: flex-start; direction: ltr; }
.stage-colour-rail .colour-option, .stage-colour-rail .colour-more { clip-path: polygon(0px 0px, 86% 0px, 100% 100%, 0px 100%); direction: rtl; }
.stage-colour-rail .colour-option.is-active { box-shadow: 1.2rem 0 2.2rem color-mix(in srgb, var(--selection-color) 38%, transparent); }
.stage-colour-rail .colour-option::after { right: auto; left: 0.65rem; }
.family-card { overflow: clip; border-color: transparent; outline: transparent solid 1px; clip-path: inset(0.5px round 0.3rem); transform: skewX(var(--roster-skew)) translate3d(0, 0, 0); backface-visibility: hidden; }
.family-card { box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset, rgba(7, 9, 7, 0.14) 0px 1.25rem 2.7rem; }
.family-card__visual, .family-card__body, .family-card img { backface-visibility: hidden; }
.family-card img { image-rendering: auto; object-fit: contain; padding: 0.45rem; transform: skewX(var(--roster-counter-skew)) translate3d(0, 0, 0) scale(0.94); }
.family-card__body, .family-card__number { transform: skewX(var(--roster-counter-skew)) translate3d(0, 0, 0); }
.family-card.is-active, .family-card.is-active:hover { box-shadow: inset 0 0 0 2px var(--chapter-accent),
    0 1.35rem 3rem color-mix(in srgb, var(--chapter-accent) 25%, transparent); transform: skewX(var(--roster-skew)) translate3d(0, 0, 0); }
.family-card.is-active img { transform: skewX(var(--roster-counter-skew)) translate3d(0, 0, 0) scale(0.98); }
.product-stage__image { inset: 0px; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; padding: clamp(0.6rem, 1.25vw, 1.15rem); position: absolute !important; transform: none !important; }
.product-stage__image.is-changing, .product-stage__visual:hover .product-stage__image:not(.is-changing) { transform: none !important; }
.product-stage__backdrop img { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .family-card:not(.is-active):hover { transform: skewX(var(--roster-skew)) translate3d(0, -0.3rem, 0); }
}
.family-browser__rail-shell.is-short-roster .rail-controls { display: none; }
.family-browser__rail-shell.is-short-roster .family-rail .swiper-wrapper { justify-content: center; transform: none !important; }
.family-browser__rail-shell.is-short-roster .family-rail .swiper-slide:last-child { margin-inline-end: 0px !important; margin-left: 0px !important; margin-right: 0px !important; }
.family-browser__rail-shell.is-short-roster .family-rail, .family-browser__rail-shell.is-short-roster .family-card { cursor: pointer; }
.chapter-atmosphere__scene { inset: -2%; filter: saturate(1.1) contrast(1.035) blur(1px); transform: scale(1.01); }
.product-stage__backdrop { filter: blur(0.8px) saturate(1.04); }
.finder-results-shell { height: 37rem; min-height: 37rem; background-position: center center; background-size: cover; }
.finder-results-shell .finder-grid { height: 26.25rem; min-height: 0px; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(151, 51, 54, 0.55) transparent; scrollbar-width: thin; }
.finder-results-shell .finder-grid::-webkit-scrollbar { width: 0.42rem; }
.finder-results-shell .finder-grid::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(151, 51, 54, 0.48); }
@media (max-width: 900px) {
  .scrolly-story__pin { width: auto !important; will-change: auto; }
  .finder-results-shell { height: 36rem; }
}
:root { --toy-ease: cubic-bezier(0.2, 0.82, 0.24, 1); --toy-spring: cubic-bezier(0.18, 1.18, 0.3, 1); --toy-line: rgb(255 255 255 / 0.22); }
.brand { padding: 0.36rem 0.72rem; background: rgba(247, 243, 235, 0.94); box-shadow: rgba(255, 255, 255, 0.72) 0px 1px inset, rgba(0, 0, 0, 0.12) 0px 0.55rem 1.2rem; }
.brand__logo { display: block; width: clamp(5.8rem, 7.4vw, 6.9rem); max-height: 2.55rem; object-fit: contain; }
@media (max-width: 900px) {
  .brand { padding: 0.32rem 0.58rem; }
  .brand__logo { width: 5.25rem; max-height: 2.35rem; }
}
@media (max-width: 360px) {
  .brand__logo { width: 4.7rem; }
}
.deferred-image:not([src]) { visibility: hidden; }
body { font-kerning: normal; font-synthesis: none; text-rendering: optimizelegibility; }
.loading-screen { transition: opacity 320ms var(--toy-ease),
    visibility 320ms var(--toy-ease); }
h1, h2, h3 { font-variation-settings: "wght" 670; text-wrap: balance; }
p { text-wrap: pretty; }
.site-header { border-color: rgba(255, 255, 255, 0.25); background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), transparent 35%), rgba(24, 27, 24, 0.84); box-shadow: rgba(11, 13, 11, 0.2) 0px 1.2rem 3.8rem, rgba(255, 255, 255, 0.08) 0px 1px inset; backdrop-filter: blur(22px) saturate(142%); }
.brand__name { font-size: 0.88rem; letter-spacing: 0.28em; }
.category-nav__item { position: relative; transition: color 240ms ease,
    background 300ms ease,
    transform 320ms var(--toy-spring); }
.category-nav__item::after { position: absolute; right: 24%; bottom: 0.32rem; left: 24%; height: 1px; background: currentcolor; content: ""; opacity: 0; transform: scaleX(0.2); transition: opacity 240ms ease, transform 360ms var(--toy-ease); }
.category-nav__item.is-active::after { opacity: 0.7; transform: scaleX(1); }
.header-finder { box-shadow: rgba(0, 0, 0, 0.14) 0px 0.65rem 1.8rem; transition: transform 300ms var(--toy-spring), box-shadow 260ms ease; }
.header-finder:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 0.9rem 2.2rem; transform: translateY(-0.12rem) scale(1.015); }
.hero { isolation: isolate; }
.hero::after { position: absolute; z-index: 0; inset: 0px; background: repeating-linear-gradient(90deg, transparent 0px, transparent calc(8.333% - 1px), rgba(255, 255, 255, 0.027) calc(8.333% - 1px), rgba(255, 255, 255, 0.027) 8.333%), repeating-linear-gradient(0deg, transparent 0px, transparent calc(12.5% - 1px), rgba(255, 255, 255, 0.02) calc(12.5% - 1px), rgba(255, 255, 255, 0.02) 12.5%); content: ""; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 18%, rgb(0, 0, 0) 82%, transparent); pointer-events: none; }
.hero__copy, .hero__visual, .hero__footer { position: relative; z-index: 2; }
.hero h1 { max-width: 10.5ch; letter-spacing: normal; line-height: 1.08; }
.hero h1 em { filter: none; text-shadow: color-mix(in srgb, currentcolor 23%, transparent) 0px 0px 2.8rem; }
.hero h1 em::after { animation: auto ease 0s 1 normal none running none; }
.ambient-ready .hero h1 em::after { animation: text-glint 5.5s var(--ambient-ease) infinite alternate; }
.hero__lead { max-width: 33rem; line-height: 1.92; }
.hero__visual { border: 1px solid rgba(255, 255, 255, 0.07); filter: none; box-shadow: rgba(0, 0, 0, 0.18) 0px 3rem 7rem, rgba(255, 255, 255, 0.04) 0px 1px inset; }
.hero-slide::before { background: radial-gradient(ellipse at center, var(--hero-glow) 0%, color-mix(in srgb, var(--hero-glow) 68%, transparent) 38%, transparent 72%); filter: none; will-change: transform, opacity; }
.hero__orbit { animation: 22s linear 0s infinite normal none running toy-orbit; }
.hero__orbit--inner { animation-direction: reverse; animation-duration: 17s; }
.hero-slide img { border-radius: 0px; box-shadow: none; filter: drop-shadow(rgba(0, 0, 0, 0.34) 0px 2.6rem 2.2rem); transition: opacity 420ms ease, translate 620ms var(--toy-ease), scale 720ms var(--toy-ease); }
.hero__visual-meta { border-color: rgba(255, 255, 255, 0.2); box-shadow: rgba(0, 0, 0, 0.18) 0px 1rem 2.8rem; backdrop-filter: blur(18px) saturate(125%); }
.hero-beat { transition: color 240ms ease,
    border-color 240ms ease,
    background 300ms ease,
    transform 320ms var(--toy-spring); }
.hero-beat:hover { transform: translateY(-0.18rem); }
.hero-beat.is-active { box-shadow: inset 0 -1px color-mix(in srgb, var(--color-brand-soft) 75%, transparent); }
.button { transition: color 220ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 300ms ease,
    transform 340ms var(--toy-spring); }
.button:hover { box-shadow: rgba(0, 0, 0, 0.16) 0px 1rem 2.4rem; transform: translateY(-0.2rem) scale(1.012); }
.catalogue-intro__copy h2 { letter-spacing: normal; line-height: 1.1; }
.catalogue-intro__copy > p:last-of-type { max-width: 38rem; line-height: 1.95; }
.catalogue-intro__art { box-shadow: rgba(29, 24, 21, 0.12) 0px 2.8rem 6.5rem, rgba(255, 255, 255, 0.45) 0px 1px inset; }
.catalogue-intro__orbit { animation: 26s linear 0s infinite reverse none running toy-orbit; }
.catalogue-intro__art img { filter: drop-shadow(rgba(34, 28, 24, 0.22) 0px 2.2rem 1.8rem); }
.catalogue-intro__legend span em { display: block; margin-top: 0.3rem; color: var(--color-brand); font-size: 0.78rem; font-style: normal; font-weight: 720; line-height: 1.45; }
.catalogue-intro__legend span em strong { margin-inline-end: 0.2rem; font-family: var(--font-code); font-size: 0.88rem; }
.catalogue-intro__route li { transition: color 220ms ease, background 260ms ease, transform 320ms var(--toy-spring); }
.catalogue-intro__route li:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-0.14rem); }
.chapter-atmosphere__scene { filter: saturate(0.9) contrast(0.96) brightness(0.92) blur(3.2px) !important; }
.chapter-atmosphere__wash { opacity: 0.88; }
.chapter-atmosphere__product { filter: blur(9px) saturate(1.08) contrast(1.02); }
.chapter-atmosphere__halo { animation: 8s ease-in-out 0s infinite alternate none running toy-halo-drift; }
.chapter-atmosphere__halo--b { animation-direction: alternate-reverse; animation-duration: 10s; }
.chapter__mast h2 { letter-spacing: normal; line-height: 1.04; }
.chapter__statement { max-width: 40rem; line-height: 1.92; }
.chapter__index strong { font-variant-numeric: tabular-nums; }
.product-stage { border-color: rgba(255, 255, 255, 0.31); box-shadow: rgba(9, 11, 9, 0.23) 0px 3.2rem 8.5rem, rgba(0, 0, 0, 0.035) 0px 0px 0px 1px, rgba(255, 255, 255, 0.34) 0px 1px inset; backdrop-filter: blur(24px) saturate(1.2); }
.product-stage::after { position: absolute; z-index: 10; inset: 0px; border-radius: inherit; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.16) 43%, transparent 57%); content: ""; opacity: 0; pointer-events: none; transform: translateX(-70%); }
.product-stage:hover::after { animation: toy-sheen 1.25s var(--toy-ease) both; }
.product-stage__panel { background: linear-gradient(155deg, rgb(255 255 255 / 0.09), transparent 36%),
    color-mix(in srgb, var(--chapter-surface-strong) 60%, transparent); backdrop-filter: blur(20px) saturate(1.12); }
.stage-family-label { padding-bottom: 0.65rem; border-bottom: 1px solid color-mix(in srgb, var(--chapter-line) 82%, transparent); }
.stage-data-status { display: inline-flex; min-height: 1.75rem; align-items: center; gap: 0.4rem; margin-inline: auto 0.5rem; padding: 0.25rem 0.55rem; border: 1px solid color-mix(in srgb, var(--chapter-line) 82%, transparent); border-radius: 99px; color: var(--chapter-soft); font-size: 0.72rem; font-weight: 720; line-height: 1; white-space: nowrap; }
.stage-data-status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--chapter-accent); box-shadow: 0 0 0.7rem color-mix(in srgb, var(--chapter-accent) 65%, transparent); }
.stage-data-status[data-confidence="catalogue-only"] { border-style: dashed; opacity: 0.78; }
.stage-data-status[data-confidence="catalogue-finish"] i, .stage-data-status[data-confidence="catalogue-family"] i { background: rgb(208, 157, 82); }
.product-stage__panel h3 { max-width: 21ch; letter-spacing: normal; line-height: 1.32; }
.stage-summary { color: color-mix(in srgb, var(--chapter-soft) 92%, var(--chapter-ink)); line-height: 1.86; }
.selector-group__head { min-height: 2rem; }
.model-option, .material-option, .base-option { transition: color 200ms ease,
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 280ms ease,
    transform 300ms var(--toy-spring); }
.model-option:hover, .material-option:hover, .base-option:hover { border-color: color-mix(in srgb, var(--chapter-accent) 70%, var(--chapter-line)); transform: translateY(-0.14rem); }
.model-option.is-active, .material-option.is-active, .base-option.is-active { box-shadow: 0 0.65rem 1.5rem color-mix(in srgb, var(--chapter-accent) 24%, transparent); }
.spec-chip { transition: color 220ms ease, background 260ms ease, transform 300ms var(--toy-spring); }
.spec-chip:hover { transform: translateY(-0.1rem); }
.selection-note { min-height: 3rem; line-height: 1.65; }
.product-stage__visual { isolation: isolate; }
.product-stage__image-wrap { box-shadow: rgba(8, 10, 8, 0.2) 0px 2.3rem 5.5rem, rgba(255, 255, 255, 0.4) 0px 1px inset; }
.product-stage__image { filter: saturate(1.035) contrast(1.025) drop-shadow(rgba(0, 0, 0, 0.14) 0px 1.8rem 1.35rem); transition: opacity 280ms ease, transform 620ms var(--toy-ease) !important; }
.product-stage__telemetry b { font-variant-numeric: tabular-nums; }
.product-stage__telemetry::before { display: inline-block; width: 0.42rem; height: 0.42rem; margin-inline-end: 0.45rem; border-radius: 50%; background: var(--chapter-accent); box-shadow: 0 0 0.9rem var(--chapter-accent); content: ""; animation: 1.8s ease-in-out 0s infinite normal none running toy-status; }
.product-stage__drag-hint, .stage-details { backdrop-filter: blur(14px) saturate(120%); transition: transform 320ms var(--toy-spring), background 240ms ease, box-shadow 260ms ease; }
.stage-details:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 1rem 2.4rem; transform: translateY(-0.18rem); }
.stage-colour-rail .selector-group__head { border-color: rgba(255, 255, 255, 0.3); background: color-mix(in srgb, var(--chapter-surface-strong) 92%, transparent); box-shadow: rgba(8, 10, 8, 0.16) 0px 0.9rem 2.2rem; backdrop-filter: blur(16px) saturate(118%); }
.stage-colour-rail .colour-option, .stage-colour-rail .colour-more { transition: width 300ms var(--toy-spring),
    filter 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--toy-spring); }
.stage-colour-rail .colour-option:hover { filter: brightness(1.08) saturate(1.08); transform: translateX(0.14rem); }
.stage-colour-rail .colour-option.is-active { box-shadow: 1rem 0 2.4rem color-mix(in srgb, var(--selection-color) 42%, transparent),
    inset 0 0 0 1px rgb(255 255 255 / 0.45); }
.family-browser { border-top-color: rgba(255, 255, 255, 0.27); }
.family-browser__head { min-height: 5rem; padding-inline: 1.4rem; }
.family-browser__head h3 { letter-spacing: normal; }
.family-browser__head p { color: color-mix(in srgb, var(--chapter-soft) 88%, var(--chapter-ink)); }
.family-card { border-color: rgba(255, 255, 255, 0.18); box-shadow: rgba(7, 9, 7, 0.18) 0px 1.4rem 3rem, rgba(255, 255, 255, 0.06) 0px 1px inset; transition: border-color 260ms ease,
    box-shadow 340ms ease,
    transform 420ms var(--toy-spring); }
.family-card__visual::before { background: linear-gradient(rgba(11, 13, 11, 0.01) 20%, rgba(11, 13, 11, 0.15) 55%, rgba(11, 13, 11, 0.96) 100%), linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.12) 50%, transparent 65%); }
.family-card img { filter: grayscale(0.88) saturate(0.2) brightness(0.76) contrast(1.08); transition: filter 420ms ease, transform 760ms var(--toy-ease); }
.family-card__body strong { font-size: 1.14rem; letter-spacing: normal; }
.family-card__body small { line-height: 1.5; }
.family-card__body em { display: block; margin-top: 0.24rem; color: color-mix(in srgb, var(--chapter-accent) 80%, white); font-family: var(--font-code); font-size: 0.74rem; font-style: normal; font-weight: 760; line-height: 1.35; text-shadow: rgba(0, 0, 0, 0.78) 0px 1px 0.6rem; }
.family-card__number { font-variant-numeric: tabular-nums; }
.family-card__selected { box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--chapter-accent) 24%, transparent); }
.family-card.is-active { box-shadow: inset 0 0 0 2px var(--chapter-accent),
    0 1.8rem 3.8rem color-mix(in srgb, var(--chapter-accent) 30%, transparent); }
.family-card.is-active img { filter: grayscale(0) saturate(1.08) brightness(1.03) contrast(1.03); }
.rail-arrow { transition: opacity 200ms ease, transform 320ms var(--toy-spring), background 240ms ease, box-shadow 260ms ease; }
.rail-arrow:hover { box-shadow: rgba(8, 10, 8, 0.2) 0px 1rem 2.4rem; transform: translateY(-0.18rem) scale(1.035); }
.story-strip__step { transition: color 240ms ease, opacity 240ms ease, transform 320ms var(--toy-spring); }
.story-strip__step:hover { transform: translateX(-0.18rem); }
.story-scene__copy { text-shadow: rgba(0, 0, 0, 0.14) 0px 0.5rem 2rem; }
.story-scene__copy h2 { letter-spacing: normal; line-height: 1.07; }
.story-scene__copy > p:last-of-type { line-height: 1.92; }
.story-scene__product img { filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2.2rem 1.8rem); }
.finder-card, .dialog-thumb, .dialog-variant { transition: border-color 240ms ease, box-shadow 300ms ease, transform 340ms var(--toy-spring); }
.finder-card:hover, .dialog-thumb:hover, .dialog-variant:hover { transform: translateY(-0.18rem); }
.finder-card span em, .finder-card span i { display: block; margin-top: 0.25rem; font-style: normal; line-height: 1.45; }
.finder-card span em { color: var(--color-brand); font-family: var(--font-code); font-size: 0.82rem; font-weight: 780; }
.finder-card span i { color: var(--color-ink-soft); font-size: 0.74rem; font-weight: 630; }
.dialog-image-stage { position: relative; }
.dialog-image-stage img { position: absolute; inset: 0px; width: 100%; height: 100%; padding: clamp(0.65rem, 1.6vw, 1.35rem); object-fit: contain; }
@keyframes toy-orbit { 
  100% { rotate: 360deg; }
}
@keyframes toy-halo-drift { 
  0% { translate: -2% -1%; scale: 0.96; }
  100% { translate: 3% 2%; scale: 1.08; }
}
@keyframes toy-status { 
  0%, 100% { opacity: 0.45; scale: 0.8; }
  50% { opacity: 1; scale: 1; }
}
@keyframes toy-sheen { 
  0% { opacity: 0; transform: translateX(-70%); }
  28% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(70%); }
}
@media (max-width: 900px) {
  .site-header { backdrop-filter: blur(18px) saturate(132%); }
  .hero__pin { padding-top: 6.6rem; }
  .hero__copy { max-width: 46rem; }
  .hero h1 { max-width: 10ch; font-size: clamp(3.55rem, 8.7vw, 4.4rem); }
  .hero__visual { min-height: clamp(30rem, 76vw, 38rem); }
  .chapter__mast { direction: ltr; display: grid; min-height: 12rem; grid-template-columns: clamp(7.5rem, 19vw, 9.5rem) minmax(0px, 1fr); grid-template-rows: auto auto; align-items: start; gap: 0.7rem 1.1rem; padding: 1.5rem clamp(0.5rem, 2vw, 1rem) 1.35rem; }
  .chapter__index { grid-area: 1 / 1; place-self: start; direction: rtl; }
  .chapter__mast h2 { width: 100%; max-width: none; grid-area: 1 / 2; place-self: center stretch; direction: rtl; text-align: right; transform: none !important; }
  .chapter__statement { width: min(100%, 43rem); max-width: none; grid-area: 2 / 1 / auto / -1; justify-self: end; direction: rtl; text-align: right; transform: none !important; }
  .chapter__mast h2 { font-size: clamp(2.9rem, 6.5vw, 3.25rem); }
  .product-stage { grid-template-rows: clamp(32rem, 78vw, 40rem) auto auto; }
  .product-stage__panel h3 { font-size: clamp(2rem, 5vw, 2.9rem); }
  .stage-data-status { margin-inline-start: 0px; }
  .family-card { width: clamp(11.8rem, 28vw, 14.2rem); }
  .scrolly-story.material-story, .scrolly-story.spatial-story { min-height: 100svh; }
  .scrolly-story__pin { width: 100%; height: 100svh; min-height: 44rem; max-height: 54rem; padding: 4.8rem var(--gutter) 5.6rem; contain: layout paint; }
  .scrolly-story__stage { position: relative; width: 100%; height: 100%; min-height: 0px; overflow: hidden; }
  .story-scene { inset: 0px; grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: repeat(12, minmax(0px, 1fr)); }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 7 / 7 / 13; place-self: stretch; width: auto; max-width: none; padding: clamp(0.9rem, 2.4vw, 1.45rem); border-inline-start: 1px solid rgba(255, 255, 255, 0.22); border-inline-end: 0px; background: linear-gradient(90deg, rgba(22, 25, 23, 0.05), rgba(22, 25, 23, 0.42)); translate: 0px; text-align: right; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 2 / 1 / 12 / 7; width: auto; min-height: 0px; translate: 0px; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { max-width: 10ch; font-size: clamp(2.5rem, 7vw, 4.15rem); line-height: 1.08; }
  .story-scene__copy > p:last-of-type { margin-top: 0.8rem; font-size: clamp(0.94rem, 1.8vw, 1.08rem); line-height: 1.72; }
  .story-scene__meta { margin-top: 0.75rem; }
  .story-strip { right: var(--gutter); bottom: 0.75rem; left: var(--gutter); width: auto; min-height: 3.4rem; align-items: center; }
  .story-strip__step { min-width: 0px; min-height: 3.25rem; flex: 1 1 0px; justify-content: center; touch-action: manipulation; }
}
@media (max-width: 620px) {
  :root { --gutter: 0.85rem; }
  .site-header { inset: 0.55rem 0.6rem auto; }
  .hero__pin { padding-top: 6.2rem; }
  .hero h1 { max-width: 9.5ch; font-size: clamp(3rem, 13vw, 4.4rem); line-height: 1.08; }
  .hero__lead { max-width: 31rem; font-size: 1rem; }
  .hero__visual { min-height: 29rem; }
  .hero__slides { inset: 4% 0px 13%; }
  .hero-slide img { width: min(94%, 25rem); }
  .hero__footer { gap: 0.75rem; }
  .catalogue-intro__copy h2 { font-size: clamp(2.7rem, 11vw, 4rem); }
  .chapter { padding-inline: 0.55rem; }
  .chapter__mast { min-height: 10.8rem; grid-template-columns: 6.4rem minmax(0px, 1fr); gap: 0.55rem 0.7rem; padding: 1.15rem 0.3rem 1rem; }
  .chapter__mast h2 { font-size: clamp(2.45rem, 11vw, 3.8rem); }
  .chapter__statement { font-size: 0.98rem; line-height: 1.78; }
  .chapter__index strong { font-size: 3.1rem; }
  .product-stage { grid-template-rows: min(124vw, 31rem) auto auto; border-radius: 0.85rem; }
  .product-stage__visual { min-height: 0px; }
  .product-stage__image-wrap { width: calc(100% - 0.7rem); height: calc(100% - 0.7rem); }
  .product-stage__image { padding: 0.55rem; }
  .product-stage__panel { padding: 1.15rem; }
  .product-stage__panel h3 { max-width: 18ch; font-size: clamp(1.8rem, 7.4vw, 2.45rem); line-height: 1.34; }
  .stage-summary { font-size: 0.96rem; line-height: 1.78; }
  .stage-family-label { flex-wrap: wrap; }
  .stage-data-status { order: 3; width: max-content; margin: 0.35rem 0px 0px auto; }
  .stage-specs { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .spec-chip { min-height: 5.7rem; padding: 0.72rem; }
  .stage-colour-rail { inset: 50% auto auto 0px; width: auto; max-height: 66%; padding: 0px; border: 0px; border-radius: 0px; background: transparent; transform: translateY(-50%); backdrop-filter: none; }
  .stage-colour-rail .selector-group__head { position: absolute; bottom: calc(100% + 0.2rem); left: 0px; width: 6.4rem; max-width: 6.4rem; justify-content: center; margin: 0px; padding: 0.28rem 0.45rem; font-size: 0.78rem; }
  .stage-colour-rail .selector-group__head output { display: none; }
  .stage-colour-rail .colour-options { max-height: 17rem; flex-direction: column; align-items: flex-start; gap: 0px; overflow-y: auto; }
  .stage-colour-rail .colour-option, .stage-colour-rail .colour-more, .stage-colour-rail .colour-option.is-active { width: 2.6rem; min-width: 2.6rem; height: 2.3rem; flex: 0 0 2.3rem; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.3); border-image: initial; border-radius: 0px; clip-path: polygon(0px 0px, 86% 0px, 100% 100%, 0px 100%); outline: 0px; }
  .stage-colour-rail .colour-option.is-active { width: 4.5rem; box-shadow: 0.8rem 0 1.8rem color-mix(in srgb, var(--selection-color) 38%, transparent); }
  .stage-colour-rail .colour-option span { font-size: 0.68rem; }
  .product-stage__drag-hint { display: inline-flex; max-width: 8.8rem; font-size: 0.76rem; }
  .stage-details { min-height: 3rem; }
  .family-browser__head { min-height: 4.4rem; padding: 0.7rem 0.85rem; }
  .family-browser__head h3 { font-size: 1.12rem; }
  .family-card { width: min(66vw, 15rem); height: 21rem; min-height: 21rem; }
  .family-card__body strong { font-size: 1.08rem; }
  .story-scene__copy h2 { font-size: clamp(2.25rem, 9.3vw, 3.25rem); }
  .scrolly-story__pin { min-height: 42rem; padding: 4.25rem 0.75rem 5.35rem; }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 1 / 7 / 13; padding: 0.8rem; border-inline: 0px; background: linear-gradient(rgba(22, 25, 23, 0.48), rgba(22, 25, 23, 0.12)); }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 6 / 2 / 13 / 12; }
  .story-scene__copy > p:last-of-type { font-size: 0.9rem; line-height: 1.65; }
  .story-scene__meta { margin-top: 0.55rem; padding-top: 0.55rem; }
  .story-strip { right: 0.65rem; bottom: 0.55rem; left: 0.65rem; gap: 0.2rem; }
  .story-strip__step { min-height: 3.15rem; grid-template-columns: auto; gap: 0.2rem; padding-inline: 0.35rem; }
  .story-strip__step b { font-size: 0.72rem; }
  .story-strip__step span { overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; }
}
@media (max-width: 620px) and (max-height: 700px) and (orientation: portrait) {
  .scrolly-story__pin { height: 100svh; min-height: 100svh; max-height: none; padding: 4.25rem 0.75rem 4.2rem; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .story-scene__copy > p:last-of-type { margin-top: 0.45rem; font-size: 0.84rem; line-height: 1.55; }
  .story-scene__meta { margin-top: 0.4rem; padding-top: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__orbit, .chapter-atmosphere__halo, .product-stage__telemetry::before { animation: auto ease 0s 1 normal none running none !important; }
}
@media (max-width: 620px) and (orientation: portrait) {
  .hero__grid { grid-template-columns: minmax(0px, 1fr); }
  .hero__pin { padding-top: 5.85rem; }
  .hero h1 { width: 100%; max-width: none; font-size: clamp(2.35rem, 9vw, 3.55rem); line-height: 1.03; }
  .hero h1 br { display: block; }
  .hero h1 em { display: block; white-space: nowrap; }
  .hero__lead { margin-top: 0.9rem; }
  .hero__actions { margin-top: 1rem; }
  .hero__selector { margin-top: 0.9rem; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(2rem, 10.5vw, 2.2rem); }
}
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  :root { --gutter: 1.15rem; }
  .site-header { inset: 0.45rem 0.75rem auto; min-height: 3.65rem; }
  .hero__pin { min-height: auto; padding: 4.9rem 2rem 0.9rem; }
  .hero__grid { min-height: calc(-5.8rem + 100svh); grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1.05fr); align-items: start; gap: 1.35rem; }
  .hero__copy { width: 100%; max-width: none; }
  .hero h1 { max-width: none; font-size: clamp(2rem, 4.6vw, 2.6rem); line-height: 1.03; }
  .hero h1 br, .hero h1 em { display: block; }
  .hero h1 em { white-space: nowrap; }
  .hero__lead { max-width: 30rem; margin-top: 0.65rem; font-size: 0.92rem; line-height: 1.55; }
  .hero__actions { margin-top: 0.8rem; }
  .hero__actions .button { min-height: 2.8rem; }
  .hero__selector { margin-top: 0.7rem; }
  .hero-beat { min-height: 2.5rem; }
  .hero__visual { min-height: calc(-6.4rem + 100svh); max-height: 21rem; }
  .hero__slides { inset: 1% 3% 8%; }
  .hero-slide img { width: min(76%, 25rem); max-height: calc(-7rem + 100svh); }
  .hero__footer { margin-top: 0.55rem; }
  .chapter__mast { min-height: 9rem; grid-template-columns: 8rem minmax(0px, 1fr); padding-block: 1rem; }
  .chapter__mast h2 { font-size: clamp(2.8rem, 5.6vw, 3.15rem); }
  .chapter__statement { font-size: 0.94rem; line-height: 1.62; }
  .product-stage { grid-template: "visual panel" 28rem "roster roster" / minmax(0px, 1.35fr) minmax(19rem, 0.85fr); }
  .product-stage__visual, .product-stage__panel { height: 28rem; min-height: 28rem; }
  .product-stage__panel { overflow-y: auto; border-top: 0px; border-inline-start: 1px solid var(--chapter-line); }
  .product-stage__panel h3 { font-size: clamp(1.75rem, 3.3vw, 2.1rem); }
  .stage-summary { font-size: 0.9rem; line-height: 1.62; }
  .stage-loadout { display: block; }
  .family-card { width: 12.4rem; height: 18rem; min-height: 18rem; }
  .scrolly-story__pin { height: 100svh; min-height: 100svh; max-height: none; padding: 4.2rem 1.5rem 3.45rem; }
  .scrolly-story__stage { height: 100%; }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 7 / 13 / 13; align-self: stretch; padding: 0.7rem 1rem; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 1 / 1 / 13 / 7; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { max-width: 10ch; font-size: clamp(2.1rem, 4.4vw, 2.6rem); }
  .story-scene__copy > p:last-of-type { margin-top: 0.45rem; font-size: 0.78rem; line-height: 1.52; }
  .story-scene__meta { margin-top: 0.4rem; padding-top: 0.4rem; }
  .story-strip { right: 1.5rem; bottom: 0.25rem; left: 1.5rem; min-height: 3rem; }
  .story-strip__step { min-height: 2.8rem; }
}
@media (min-width: 901px) {
  .story-scene--material-transform-wide .story-scene__product { grid-area: 1 / 2 / 6 / 12; translate: 0px; align-self: stretch; }
  .story-scene--material-transform-wide .story-scene__copy { grid-area: 6 / 2 / 11 / 12; width: min(100%, 58rem); max-width: 58rem; min-height: 0px; place-self: stretch center; display: block; translate: 0px; padding: clamp(1rem, 1.55vw, 1.6rem) clamp(1.35rem, 2.4vw, 2.4rem); border-inline-start: 1px solid rgba(255, 255, 255, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(rgba(24, 27, 25, 0.48), rgba(22, 25, 23, 0.9)); }
  .story-scene--material-transform-wide .story-scene__copy h2 { max-width: 12ch; margin-top: 0.35rem; font-size: clamp(2.55rem, 3.25vw, 4rem); line-height: 1.04; }
  .story-scene--material-transform-wide .story-scene__copy .eyebrow { margin-bottom: 0.35rem; line-height: 1.35; }
  .story-scene--material-transform-wide .story-scene__copy > p:last-of-type { max-width: 38rem; margin-top: 0.4rem; margin-bottom: 0px; font-size: clamp(0.92rem, 0.84rem + 0.12vw, 1.02rem); line-height: 1.55; }
  .story-scene--material-transform-wide .story-scene__meta { margin-top: 0.45rem; padding-top: 0.45rem; font-size: 0.9rem; }
  .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 6 / 3 / 11 / 11; translate: 0px; }
  .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 3 / 5 / 11; translate: 0px; }
  .stage-colour-rail { position: absolute; z-index: 8; top: calc(var(--stage-height) / 2); right: auto; left: clamp(23.5rem, 28vw, 29rem); width: 7.4rem; max-height: 86%; margin: 0px; transform: translateY(-50%); }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .product-stage { overflow: visible; grid-template: "visual" clamp(26rem, 52vw, 34rem) "colours" "roster" "panel" / minmax(0px, 1fr); }
  .product-stage__visual { position: sticky; top: 5.25rem; z-index: 8; height: clamp(26rem, 52vw, 34rem); min-height: clamp(26rem, 52vw, 34rem); }
  .product-stage__image-wrap { width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); }
  .stage-colour-rail { position: relative; z-index: 7; grid-area: colours; display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 1rem; width: auto; max-height: none; margin: 0px; top: auto; right: auto; left: auto; padding: 0.72rem 1rem; border-block: 1px solid var(--chapter-line); background: color-mix(in srgb, var(--chapter-surface-strong) 74%, transparent); transform: none; backdrop-filter: blur(16px) saturate(1.08); }
  .stage-colour-rail .selector-group__head { position: static; min-width: 5rem; width: auto; max-width: none; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: none; box-shadow: none; backdrop-filter: none; }
  .stage-colour-rail .selector-group__head output { display: none; }
  .stage-colour-rail .colour-options { display: flex; width: 100%; max-height: none; flex-direction: row; align-items: center; gap: 0.45rem; overflow: auto hidden; padding: 0.15rem 0.1rem 0.25rem; scrollbar-width: thin; }
  .stage-colour-rail .colour-option, .stage-colour-rail .colour-more, .stage-colour-rail .colour-option.is-active { width: 3.15rem; min-width: 3.15rem; height: 2.65rem; flex: 0 0 3.15rem; border: 1px solid var(--chapter-line); border-radius: 0.42rem; clip-path: none; box-shadow: none; }
  .stage-colour-rail .colour-option.is-active { width: 4.7rem; min-width: 4.7rem; flex-basis: 4.7rem; border-color: var(--chapter-accent); box-shadow: 0 0 0 2px var(--chapter-bg), 0 0 0 4px var(--chapter-accent); }
  .stage-colour-rail .colour-option span { inset: auto 0px 0px; padding: 0.18rem 0.2rem; background: rgba(18, 20, 18, 0.72); font-size: 0.68rem; text-align: center; transform: none; }
  .stage-colour-rail .colour-option::after { inset: 0.3rem 0.4rem auto auto; }
  .family-browser { grid-area: roster; }
  .product-stage__panel { grid-area: panel; }
  .stage-loadout { display: grid; grid-template-columns: minmax(0px, 1.12fr) minmax(13rem, 0.88fr); gap: 1rem; }
  .stage-loadout__finish { margin-top: 0px; border-top: 0px; }
  .scrolly-story__pin { height: calc(-5rem + 100svh); min-height: calc(-5rem + 100svh); max-height: none; padding: 4.8rem 1.4rem 4.25rem; }
  .scrolly-story__stage { height: calc(-14.6rem + 100svh); min-height: 0px; }
  .story-scene { grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: repeat(12, minmax(0px, 1fr)); }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 8 / 13 / 13; place-self: stretch; width: auto; max-width: none; min-height: 0px; padding: 1.05rem 1rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.22); border-inline-end: 0px; background: linear-gradient(90deg, rgba(22, 25, 23, 0.08), rgba(22, 25, 23, 0.5)); translate: 0px; display: flex; flex-direction: column; justify-content: center; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 2 / 1 / 13 / 8; align-self: stretch; min-height: 0px; translate: 0px; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { max-width: 9ch; font-size: clamp(2.35rem, 5.1vw, 3.8rem); line-height: 1.07; }
  .story-scene__copy > p:last-of-type { max-width: 30ch; margin-top: 0.8rem; font-size: clamp(0.88rem, 1.55vw, 1.02rem); line-height: 1.68; }
  .story-scene__meta { margin-top: 0.85rem; padding-top: 0.65rem; }
  .story-strip { right: 1.4rem; bottom: 0.35rem; left: 1.4rem; width: auto; }
}
@media (max-width: 620px) {
  .product-stage { overflow: visible; grid-template: "visual" clamp(19.5rem, 72vw, 23rem) "colours" "roster" "panel" / minmax(0px, 1fr); }
  .product-stage__visual { position: sticky; top: 4.85rem; z-index: 8; height: clamp(19.5rem, 72vw, 23rem); min-height: clamp(19.5rem, 72vw, 23rem); padding: 0px; }
  .product-stage__image-wrap { width: calc(100% - 0.55rem); height: calc(100% - 0.55rem); border-radius: 0.35rem; }
  .product-stage__image { padding: 0.35rem; object-fit: contain; }
  .stage-colour-rail { position: relative; z-index: 7; grid-area: colours; display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 0.55rem; width: auto; max-height: none; margin: 0px; inset: auto; padding: 0.58rem 0.7rem 0.68rem; border-block: 1px solid var(--chapter-line); background: color-mix(in srgb, var(--chapter-surface-strong) 82%, transparent); transform: none; backdrop-filter: blur(14px) saturate(1.08); }
  .stage-colour-rail .selector-group__head { position: static; min-width: 2.7rem; width: auto; max-width: none; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: none; box-shadow: none; backdrop-filter: none; }
  .stage-colour-rail .selector-group__head output { display: none; }
  .stage-colour-rail .colour-options { display: flex; width: 100%; max-height: none; flex-direction: row; align-items: center; gap: 0.3rem; overflow: auto hidden; padding: 0.18rem 0.15rem 0.25rem; scrollbar-width: none; }
  .stage-colour-rail .colour-options::-webkit-scrollbar { display: none; }
  .stage-colour-rail .colour-option, .stage-colour-rail .colour-more, .stage-colour-rail .colour-option.is-active { width: 2.25rem; min-width: 2.25rem; height: 2.35rem; flex: 0 0 2.25rem; border: 1px solid var(--chapter-line); border-radius: 0.3rem; clip-path: none; box-shadow: none; }
  .stage-colour-rail .colour-option.is-active { width: 3.65rem; min-width: 3.65rem; flex-basis: 3.65rem; border-color: var(--chapter-accent); box-shadow: 0 0 0 2px var(--chapter-bg), 0 0 0 3px var(--chapter-accent); }
  .stage-colour-rail .colour-option span { inset: auto 0px 0px; padding: 0.12rem 0.15rem; background: rgba(18, 20, 18, 0.76); font-size: 0.59rem; text-align: center; transform: none; }
  .stage-colour-rail .colour-option::after { inset: 0.28rem 0.3rem auto auto; }
  .family-browser { grid-area: roster; padding: 0.7rem 0.65rem 0.85rem; }
  .family-browser__head { min-height: 3.25rem; padding: 0.42rem 0.15rem 0.55rem; }
  .family-browser__head h3 { font-size: 1rem; }
  .family-rail { padding: 0.42rem 0px 0.65rem; }
  .family-card { width: 8.7rem; height: 13.8rem; min-height: 13.8rem; }
  .family-card__body { padding: 2.1rem 0.58rem 0.62rem; }
  .family-card__body strong { font-size: 0.92rem; }
  .family-card__body small { display: none; }
  .family-card__number { inset: 0.5rem 0.58rem auto auto; }
  .product-stage__panel { grid-area: panel; min-height: 0px; padding: 0.95rem; }
  .product-stage__panel h3 { max-width: 20ch; margin-top: 0.7rem; font-size: clamp(1.62rem, 7.2vw, 2.25rem); line-height: 1.25; }
  .stage-summary { max-width: 42ch; margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.62; }
  .stage-loadout { display: grid; grid-template-columns: minmax(0px, 1.12fr) minmax(8.4rem, 0.88fr); gap: 0.65rem; margin-top: 0.8rem; }
  .stage-loadout__choices, .stage-loadout__finish { min-width: 0px; }
  .stage-loadout__finish { margin-top: 0px; border-top: 0px; }
  .selector-group { margin-top: 0.6rem; }
  .selector-group__head { min-height: 1.65rem; margin-bottom: 0.28rem; font-size: 0.78rem; }
  .selector-group__head output { max-width: 58%; font-size: 0.76rem; }
  .model-options { display: flex; flex-wrap: nowrap; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.18rem; scrollbar-width: none; }
  .model-options::-webkit-scrollbar { display: none; }
  .model-option { min-width: 5.65rem; min-height: 2.65rem; flex: 0 0 auto; padding: 0.32rem 0.45rem; border-radius: 0.55rem; }
  .model-option strong { font-size: 0.82rem; }
  .material-options { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .material-option { min-height: 2.2rem; padding: 0.25rem 0.45rem; border-radius: 0.45rem; font-size: 0.75rem; }
  .base-options { gap: 0px; }
  .base-option { min-height: 2.25rem; padding: 0.25rem 0.1rem; font-size: 0.76rem; }
  .stage-specs { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.3rem; margin-top: 0.15rem; }
  .spec-chip { min-height: 4.35rem; padding: 0.5rem; }
  .spec-chip small { font-size: 0.7rem; }
  .spec-chip strong { margin-top: 0.22rem; font-size: 0.78rem; line-height: 1.35; }
  .selection-note { min-height: 2.25rem; margin-top: 0.65rem; padding-top: 0.55rem; font-size: 0.76rem; line-height: 1.5; }
  .scrolly-story.material-story, .scrolly-story.spatial-story { min-height: 100svh; }
  .scrolly-story__pin { height: 100svh; min-height: 100svh; max-height: none; padding: 4.25rem 0.75rem 4.3rem; }
  .scrolly-story__stage { height: calc(-8.55rem + 100svh); min-height: 0px; }
  .story-scene { grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: repeat(12, minmax(0px, 1fr)); }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { grid-area: 1 / 1 / 7 / 13; place-self: stretch; width: auto; max-width: none; min-height: 0px; padding: 0.7rem 0.65rem; border-inline: 0px; background: linear-gradient(rgba(22, 25, 23, 0.5), rgba(22, 25, 23, 0.1)); translate: 0px; display: block; text-align: right; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { grid-area: 7 / 2 / 13 / 12; align-self: stretch; min-height: 0px; translate: 0px; }
  .story-scene__copy .eyebrow { font-size: 0.78rem; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { max-width: 100%; margin-top: 0.38rem; font-size: clamp(2rem, 8.8vw, 3rem); line-height: 1.05; overflow-wrap: anywhere; }
  .story-scene__copy > p:last-of-type { max-width: 42ch; margin-top: 0.45rem; font-size: clamp(0.78rem, 2.25vw, 0.9rem); line-height: 1.55; }
  .story-scene__meta { flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; padding-top: 0.42rem; font-size: 0.74rem; }
  .story-strip { right: 0.55rem; bottom: 0.35rem; left: 0.55rem; min-height: 3rem; }
  .story-strip__step { min-height: 2.9rem; }
}
@media (max-width: 620px) and (max-height: 700px) and (orientation: portrait) {
  .scrolly-story__pin { padding: 3.55rem 0.6rem 3.35rem; }
  .scrolly-story__stage { height: calc(-6.9rem + 100svh); }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { padding: 0.46rem 0.5rem; }
  .story-scene__copy .eyebrow { font-size: 0.68rem; line-height: 1.2; }
  .story-scene__copy h2, .story-scene--material-transform-wide .story-scene__copy h2, .story-scene--spatial-waiting-wide .story-scene__copy h2 { margin-top: 0.25rem; font-size: clamp(1.8rem, 8.6vw, 2.28rem); line-height: 1; }
  .story-scene__copy > p:last-of-type { margin-top: 0.28rem; font-size: 0.72rem; line-height: 1.42; }
  .story-scene__meta { gap: 0.35rem; margin-top: 0.26rem; padding-top: 0.28rem; font-size: 0.68rem; line-height: 1.35; }
  .story-strip { bottom: 0.2rem; }
  .story-strip__step { min-height: 2.55rem; }
  .story-strip__step b, .story-strip__step span { font-size: 0.66rem; }
}
@media (max-width: 620px) {
  .product-stage__panel { padding: 1.25rem 1rem 1.45rem; }
  .product-stage__panel h3 { margin-top: 0.8rem; font-size: clamp(1.9rem, 7.6vw, 2.45rem); line-height: 1.28; }
  .stage-summary { margin-top: 0.72rem; font-size: 0.98rem; line-height: 1.82; }
  .stage-loadout { grid-template-columns: minmax(0px, 1fr); gap: 0.9rem; margin-top: 1rem; }
  .stage-loadout__choices, .stage-loadout__finish { width: 100%; }
  .stage-loadout__finish { margin-top: 0.15rem; padding-top: 0.85rem; border-top: 1px solid var(--chapter-line); }
  .selector-group__head { min-height: 1.8rem; margin-bottom: 0.38rem; font-size: 0.84rem; }
  .selector-group__head output { font-size: 0.8rem; }
  .model-option { min-width: 6rem; min-height: 2.8rem; }
  .material-option, .base-option { min-height: 2.45rem; font-size: 0.8rem; }
  .stage-specs { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.45rem; margin-top: 0.08rem; }
  .spec-chip { min-height: 5.15rem; padding: 0.68rem; }
  .spec-chip small { font-size: 0.76rem; }
  .spec-chip strong { margin-top: 0.28rem; font-size: 0.86rem; line-height: 1.45; -webkit-line-clamp: 3; }
  .story-scene { display: flex; grid-template-columns: none; grid-template-rows: none; flex-direction: column; justify-content: flex-start; }
  .story-scene__copy, .story-scene--left .story-scene__copy, .story-scene--right .story-scene__copy, .story-scene--center .story-scene__copy, .scrolly-story--spatial .story-scene--center .story-scene__copy, .story-scene--material-transform-wide .story-scene__copy, .story-scene--spatial-waiting-wide .story-scene__copy { display: block; flex: 0 0 auto; align-self: stretch; width: auto; height: auto; min-height: 0px; max-height: none; margin: 0px; padding: 0.7rem 0.65rem; border-inline: 0px; background: linear-gradient(rgba(22, 25, 23, 0.66), rgba(22, 25, 23, 0.2)); backdrop-filter: blur(8px); overflow: visible; grid-area: auto !important; }
  .story-scene__product, .story-scene--left .story-scene__product, .story-scene--right .story-scene__product, .story-scene--center .story-scene__product, .scrolly-story--spatial .story-scene--center .story-scene__product, .story-scene--material-transform-wide .story-scene__product, .scrolly-story--spatial .story-scene--spatial-waiting-wide .story-scene__product { flex: 1 1 auto; align-self: stretch; width: auto; height: auto; min-height: 0px; margin: 0.45rem 0px 0px; translate: 0px; grid-area: auto !important; }
  .story-scene__product img { width: 100%; height: 100%; object-fit: contain; transform: translateY(-3%); }
}
@media (max-width: 620px) and (orientation: portrait) {
  .hero { min-height: 100svh; }
  .hero__pin { height: 100svh; min-height: 100svh; max-height: none; justify-content: flex-start; overflow: hidden; padding: 5.45rem 0.8rem 0.45rem; }
  .hero__grid { width: 100%; height: calc(-5.9rem + 100svh); min-height: 0px; grid-template-columns: minmax(0px, 1fr); grid-template-rows: auto minmax(0px, 1fr); align-items: stretch; gap: 0.45rem; margin: 0px; }
  .hero__copy { width: 100%; max-width: none; align-self: start; }
  .hero__copy .eyebrow { margin: 0px; font-size: 0.78rem; line-height: 1.45; }
  .hero h1 { max-width: none; margin-top: 0.35rem; font-size: clamp(2rem, 8.6vw, 2.8rem); line-height: 1.02; }
  .hero__lead { max-width: 35rem; margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.58; }
  .hero__actions { flex-wrap: nowrap; gap: 0.45rem; margin-top: 0.62rem; }
  .hero__actions .button { min-height: 2.65rem; flex: 1 1 0px; padding: 0.35rem 0.65rem; font-size: 0.8rem; white-space: nowrap; }
  .hero__selector { flex-wrap: nowrap; gap: 0.35rem; margin-top: 0.55rem; padding-bottom: 0px; }
  .hero-beat { min-height: 2.35rem; flex: 1 1 0px; justify-content: center; gap: 0.35rem; padding: 0.3rem 0.5rem; }
  .hero-beat b, .hero-beat span { font-size: 0.72rem; }
  .hero__visual { width: 100%; height: auto; min-height: 0px; align-self: stretch; overflow: hidden; }
  .hero__slides { inset: 0px 2% 2%; }
  .hero-slide img { width: auto; height: 100%; max-width: 82%; max-height: 100%; object-fit: contain; }
  .hero__visual-meta { inset: auto 0.55rem 0.45rem auto; gap: 0.45rem; padding: 0.42rem 0.65rem; }
  .hero__visual-meta span, .hero__visual-meta strong { font-size: 0.76rem; }
  .hero__footer { display: none; }
}
@media (max-width: 620px) and (max-height: 700px) and (orientation: portrait) {
  .hero__pin { padding: 4.55rem 0.55rem 0.3rem; }
  .hero__grid { height: calc(-4.85rem + 100svh); gap: 0.2rem; }
  .hero__copy .eyebrow { font-size: 0.64rem; line-height: 1.3; }
  .hero h1 { margin-top: 0.2rem; font-size: clamp(1.72rem, 8.8vw, 2.08rem); line-height: 1; }
  .hero__lead { margin-top: 0.28rem; font-size: 0.74rem; line-height: 1.4; }
  .hero__actions { gap: 0.3rem; margin-top: 0.38rem; }
  .hero__actions .button { min-height: 2.2rem; padding: 0.22rem 0.42rem; font-size: 0.68rem; }
  .hero__selector { gap: 0.25rem; margin-top: 0.32rem; }
  .hero-beat { min-height: 2rem; padding: 0.2rem 0.32rem; }
  .hero-beat b, .hero-beat span { font-size: 0.64rem; }
  .hero__visual-meta { inset: auto 0.35rem 0.3rem auto; padding: 0.3rem 0.5rem; }
}
@media (max-width: 620px) {
  .chapter-atmosphere__halo, .chapter-atmosphere__orbit, .catalogue-intro__orbit, .product-stage__telemetry::before { animation: auto ease 0s 1 normal none running none !important; }
  .chapter-atmosphere__scene { filter: saturate(0.92) contrast(0.98) brightness(0.94) !important; }
  .chapter-atmosphere__product { filter: blur(4px) saturate(1.02); }
  .product-stage { backdrop-filter: blur(12px) saturate(1.08); }
  .family-card, .finder-card { contain: layout style; }
}
.product-stage__visual-shell { display: contents; }
.scrolly-story.material-story, .scrolly-story.spatial-story { height: var(--story-scroll-height, 400svh); min-height: var(--story-scroll-height, 400svh); overflow: visible !important; }
.scrolly-story__pin { position: sticky !important; top: 0px !important; right: auto !important; left: auto !important; width: 100% !important; height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; transform: none !important; overflow: clip !important; }
.scrolly-story__backdrops { position: absolute; inset: 0px; }
.product-stage__image { transition: opacity 160ms !important; }
.product-stage__image.is-changing { opacity: 0.72; }
.story-scene { transition: opacity 180ms, visibility 180ms !important; }
.story-backdrop { transition: opacity 180ms !important; }
.story-scene__copy, .story-scene__product { will-change: auto !important; }
.family-card { transition: border-color 160ms, box-shadow 160ms, background 160ms !important; }
.family-card img { transition: filter 160ms, opacity 160ms !important; }
@media (max-width: 1100px) {
  .scrolly-story__pin { box-sizing: border-box; right: 0px !important; left: 0px !important; width: 100vw !important; max-width: none !important; }
  .family-rail { overscroll-behavior-inline: contain; touch-action: pan-x; }
  .story-scene__copy { backdrop-filter: blur(6px); }
  .product-stage__visual { transition: top 180ms; }
  .site-header.is-hidden + main .product-stage__visual { top: 0.5rem; }
  .product-stage__visual { z-index: 1; }
  .stage-colour-rail, .family-browser { position: relative; z-index: 1; }
  .product-stage__panel { position: relative; z-index: 1; }
  .family-browser, .product-stage__panel { background: color-mix(in srgb, var(--chapter-surface-strong) 60%, transparent); }
  .product-stage { grid-template-areas: "visual" "panel"; grid-template-rows: auto auto; }
  .product-stage__visual-shell { position: relative; z-index: 1; display: block; grid-area: visual; height: auto; }
  .product-stage__visual { grid-area: auto; z-index: 2; height: var(--showcase-visual-height); min-height: var(--showcase-visual-height); position: sticky !important; top: var(--showcase-sticky-top) !important; }
  .product-stage__drag-hint, .stage-details { bottom: 1.3rem; }
}
@media (max-width: 620px) {
  .product-stage { --showcase-visual-height: clamp(19.5rem, 72vw, 23rem); --showcase-sticky-top: 4.85rem; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .product-stage { --showcase-visual-height: clamp(26rem, 52vw, 34rem); --showcase-sticky-top: 5.25rem; }
}
@media (max-width: 1100px) {
  .site-header.is-hidden + main .product-stage__visual { top: 0.5rem !important; }
}

@media (max-width: 1100px) {
  .product-stage__visual { z-index: 4; }
  .stage-colour-rail, .family-browser, .product-stage__panel { z-index: 3; }
}
@media (max-width: 900px) {
  .category-nav__item { flex: 0 0 auto; overflow: hidden; }
  .category-nav__track { scroll-padding-inline: 0.4rem; }
}
.hero { height: var(--hero-scroll-height, 400svh); min-height: var(--hero-scroll-height, 400svh); overflow: visible; }
.hero__pin { position: sticky; top: 0px; height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden; }
@media (max-width: 1100px) {
  .product-stage { grid-template-areas: "visual" "colours" "roster" "panel"; grid-template-rows: var(--showcase-visual-height) auto auto auto; }
  .product-stage__visual-shell { display: contents; }
  .product-stage__visual { grid-area: visual; }
  .stage-colour-rail { grid-area: colours; }
  .family-browser { grid-area: roster; }
  .product-stage__panel { grid-area: panel; }
  .family-browser__rail-shell { overflow: hidden; }
  .family-rail:not(.swiper-initialized) { overflow: visible; }
  .family-rail:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 0.45rem; overflow: auto hidden; padding: 0.65rem 0.75rem 1rem; overscroll-behavior-inline: contain; scroll-padding-inline: 0.75rem; scroll-snap-type: inline; scrollbar-width: none; }
  .family-rail:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
  .family-rail:not(.swiper-initialized) .swiper-slide { width: auto; flex: 0 0 auto; margin-inline: 0px; scroll-snap-align: center; }
  .rail-controls { display: none; }
}
@media (max-width: 620px) {
  .site-header, .product-stage, .product-stage__visual, .product-stage__image-wrap, .product-stage__panel, .stage-colour-rail, .family-browser, .story-scene__copy, .product-stage__drag-hint, .stage-details, .hero__visual-meta { backdrop-filter: none !important; }
  .site-header { background: color-mix(in srgb, rgb(32, 35, 31) 96%, transparent); }
  .product-stage { background: linear-gradient(145deg, color-mix(in srgb, var(--chapter-surface-strong) 94%, var(--chapter-bg)), color-mix(in srgb, var(--chapter-surface) 92%, var(--chapter-bg))); box-shadow: none !important; }
  .product-stage__visual { perspective: none; background: radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--selection-color) 21%, transparent), transparent 35%),
      linear-gradient(145deg, color-mix(in srgb, var(--chapter-surface-strong) 96%, var(--chapter-bg)), color-mix(in srgb, var(--chapter-surface) 91%, var(--chapter-bg))); transition: none !important; }
  .product-stage__visual::before, .product-stage__visual::after { animation: auto ease 0s 1 normal none running none !important; }
  .product-stage__image-wrap { background: radial-gradient(ellipse at 50% 82%, rgb(8 10 8 / 0.16), transparent 32%),
      color-mix(in srgb, #eee7dc 94%, var(--selection-color)); transform-style: flat; box-shadow: rgba(255, 255, 255, 0.24) 0px 0px 0px 1px inset !important; transform: none !important; transition: none !important; }
  .product-stage__image { mix-blend-mode: normal; filter: none !important; transform: none !important; transition: opacity 160ms !important; }
  .product-stage__image.is-changing { opacity: 0.78 !important; transform: none !important; }
  .product-stage__panel, .family-browser { background: linear-gradient(155deg, rgb(255 255 255 / 0.08), transparent 32%),
      color-mix(in srgb, var(--chapter-surface-strong) 95%, var(--chapter-bg)); }
  .stage-colour-rail { background: color-mix(in srgb, var(--chapter-surface-strong) 97%, var(--chapter-bg)); }
  .story-scene__copy { background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-surface-strong) 94%, transparent), color-mix(in srgb, var(--chapter-surface-strong) 98%, var(--chapter-bg))); }
  .chapter-atmosphere__scene, .chapter-atmosphere__product, .story-backdrop, .story-scene__product img { filter: none !important; }
  .chapter-atmosphere__product { mix-blend-mode: normal; opacity: calc(var(--atmosphere-opacity) * 0.72); }
  .chapter-atmosphere__halo { background: radial-gradient(circle, color-mix(in srgb, var(--chapter-accent) 28%, transparent), transparent 68%); filter: none !important; }
  .family-card, .finder-card { contain: layout style paint; }
  .site-header.is-hidden + main .product-stage__visual { top: 0.5rem !important; }
}

/* Final visual alignment: keep the hero on the orbit axis, restore RTL story order,
   and soften only the environmental photography behind showcase content. */
.hero__visual {
  border: 0;
  box-shadow: none;
}
.hero-slide picture {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.hero-slide picture > img {
  grid-area: 1 / 1;
}
.chapter-atmosphere__scene {
  inset: -10%;
  filter: blur(28px) saturate(0.94) contrast(1.02) !important;
}
.product-stage__backdrop {
  inset: -1.5rem;
  filter: blur(20px) saturate(0.94);
}
@media (max-width: 900px) {
  .story-strip {
    direction: rtl;
  }
}