/* RaSiKe prototype · "Atelier" direction: oat linen, ink, contrast-stitch red. Bricolage Grotesque + Commissioner. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Commissioner"; src: url("/fonts/commissioner-flar-volm-slnt-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --oat: #EBE6DC; --oat-2: #E3DBCE; --oat-3: #D6CCBB; --paper: #F4F0E9;
  --ink: #1A1815; --ink-2: #48433C; --mute: #7A7268; --line: rgba(26, 24, 21, .16);
  --thread: #B3311E; --thread-2: #8E2617;
  --night: #141312; --night-2: #1D1B19; --on-night: #EDE7DD; --on-night-2: #A69E93; --line-night: rgba(237, 231, 221, .16);
  --f-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4.2vw, 64px);
  --maxw: 1520px;
  --hd: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
[data-thema="nacht"] { --oat: #171614; --oat-2: #201E1B; --oat-3: #2B2824; --paper: #1D1B19; --ink: #EDE7DD; --ink-2: #C9C1B5; --mute: #9A9286; --line: rgba(237, 231, 221, .16); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--oat); color: var(--ink); font: 400 17px/1.55 var(--f-body); font-variation-settings: "FLAR" 0, "VOLM" 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
[hidden] { display: none !important; }
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px dashed var(--thread); outline-offset: 3px; }
::selection { background: var(--thread); color: #fff; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--oat); padding: 10px 14px; }
.skip:focus { top: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
main { display: block; }

/* type */
.h1, .h2, .h3, .ph__h, .ana__h1, .final__h { font-family: var(--f-display); font-weight: 760; font-stretch: 82%; font-variation-settings: "opsz" 96; letter-spacing: -.02em; line-height: .98; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(44px, 6.4vw, 104px); }
.h2 { font-size: clamp(32px, 4.1vw, 64px); line-height: 1.02; }
.h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.08; letter-spacing: -.01em; font-stretch: 90%; }
.big { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: var(--ink-2); margin: 0 0 28px; max-width: 38em; text-wrap: pretty; }
.label { margin: 0 0 18px; font: 600 14px/1.2 var(--f-body); color: var(--thread); letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); }
.night .label, .ft .label { color: #E26C55; }
.lnk { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px) left bottom / 100% 1.5px no-repeat; padding-bottom: 2px; transition: color .2s; }
.lnk:hover { color: var(--thread); }
.ms__note { color: var(--mute); font-size: 15px; margin: 14px 0 0; max-width: 46em; }
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 980px; }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: var(--maxw); flex-wrap: wrap; }
.sec-cta { margin: 40px 0 0; }

/* stitch: the contrast-seam motif. Sews in from the left when it enters the viewport. */
.stitch { display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px); clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease); }
.stitch.is-in { clip-path: inset(0 0 0 0); }
.stitch--full { margin-bottom: clamp(36px, 5vw, 72px); }

/* buttons */
.btn { --bg: var(--ink); --fg: var(--oat); position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 24px; background: var(--bg); color: var(--fg); border: 1.5px solid var(--bg); border-radius: 2px; font: 600 16px/1 var(--f-body); letter-spacing: .005em; transition: background .25s var(--ease), color .25s, border-color .25s; white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed currentColor; border-radius: 1px; opacity: 0; transform: scale(1.04); transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.btn:hover::after, .btn:focus-visible::after { opacity: .55; transform: none; }
.btn:focus-visible { outline: none; }
.btn__ar { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease); flex: none; }
.btn:hover .btn__ar { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--oat); }
.btn--light { --bg: var(--on-night); --fg: var(--night); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 15px; }
.btn--xl { min-height: 64px; padding: 0 32px; font-size: 18px; }
button.btn[hidden] { display: none; }

/* header */
.hd { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--hd); display: flex; align-items: center; gap: 24px; padding-inline: var(--gut); transition: transform .45s var(--ease), background .3s, box-shadow .3s; }
.hd.is-solid { background: color-mix(in srgb, var(--oat) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.hd.is-hidden { transform: translateY(-100%); }
.mark { flex: none; }
.mark__w { position: relative; display: block; font: 780 27px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.03em; padding-bottom: 6px; }
.mark__w::after { content: ""; position: absolute; left: 1px; right: 2px; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--thread) 0 4px, transparent 4px 7px); }
.hd__nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.hd__nav a { position: relative; font-size: 15px; font-weight: 500; padding: 8px 0; }
.hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); }
.hd__end { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 2px; font-size: 13px; font-weight: 600; }
.langs a { padding: 6px 6px; color: var(--mute); border-radius: 2px; }
.langs a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--thread); }
.langs a:hover { color: var(--ink); }
.hd__menu { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 0 8px 8px; font-weight: 600; font-size: 15px; }
.hd__burger { display: grid; gap: 6px; width: 22px; }
.hd__burger i { display: block; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
.hd__menu[aria-expanded="true"] .hd__burger i:first-child { transform: translateY(4px) rotate(45deg); }
.hd__menu[aria-expanded="true"] .hd__burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
.is-darkhead .hd:not(.is-solid) { color: var(--on-night); }
.is-darkhead .hd:not(.is-solid) .langs a { color: var(--on-night-2); }
.is-darkhead .hd:not(.is-solid) .langs a[aria-current] { color: var(--on-night); }
.is-darkhead .hd:not(.is-solid) .btn { --bg: var(--on-night); --fg: var(--night); }
.sheet { position: fixed; inset: 0; z-index: 45; background: var(--oat); padding: calc(var(--hd) + 24px) var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet__nav { display: grid; gap: 4px; }
.sheet__nav a { font: 760 clamp(34px, 9vw, 56px)/1.05 var(--f-display); font-stretch: 82%; letter-spacing: -.02em; padding: 6px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); animation: sheetIn .6s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + 60ms); }
@keyframes sheetIn { to { opacity: 1; transform: none; } }
.sheet__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding-top: 28px; }
.sheet__ct { flex-basis: 100%; display: grid; gap: 4px; margin: 0 0 6px; font: 700 22px/1.25 var(--f-display); font-stretch: 86%; }
body.menu-open { overflow: hidden; }
body.menu-open .hd { color: var(--ink) !important; background: transparent; box-shadow: none; backdrop-filter: none; }
.fallback { margin: calc(var(--hd) + 8px) auto -40px; max-width: var(--maxw); padding: 10px var(--gut); font-size: 14px; color: var(--mute); }

/* ---------------------------------------------------------------- anatomy (home hero) */
.ana { position: relative; height: 560vh; }
.ana__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 2vw; padding: var(--hd) var(--gut) 0; max-width: 1680px; margin-inline: auto; overflow: hidden; }
.ana__copy { position: relative; align-self: center; min-height: 360px; display: grid; }
.ana__state { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .7s var(--ease); pointer-events: none; }
.ana__state.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ana__state.is-past { transform: translateY(-26px); }
.ana__h1 { font-size: clamp(52px, 7.4vw, 128px); line-height: .9; font-stretch: 78%; margin-bottom: 26px; }
.ana__lead { font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); max-width: 26em; margin: 0 0 30px; }
.ana__hint { display: inline-flex; gap: 10px; align-items: center; margin: 44px 0 0; font-size: 14px; color: var(--mute); }
.ana__hint svg { width: 12px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; animation: hint 2.2s var(--ease-io) infinite; }
@keyframes hint { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
.ana__n { font: 780 clamp(96px, 12vw, 200px)/.8 var(--f-display); font-stretch: 75%; letter-spacing: -.04em; margin: 0 0 18px; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.ana__h2 { font: 760 clamp(40px, 4.6vw, 76px)/.95 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; margin: 0 0 18px; }
.ana__txt { font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-2); max-width: 25em; margin: 0; }
.ana__stage { position: relative; justify-self: center; width: min(100%, calc(100svh - var(--hd) - 40px)); aspect-ratio: 1; }
.ana__poster, .ana__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.ana__cv { opacity: 0; transition: opacity .3s; }
.ana.is-ready .ana__cv { opacity: 1; }
.ana.is-ready .ana__poster { visibility: hidden; }
.ana__note { position: absolute; right: 0; bottom: 6px; margin: 0; font-size: 12px; color: var(--mute); }
.ana__call { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.ana__call.is-on { opacity: 1; }
.ana__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 0 5px color-mix(in srgb, var(--thread) 22%, transparent); }
.ana__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--thread); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.ana__ln { position: absolute; left: 0; top: 0; width: 64px; height: 1.5px; transform-origin: 0 0; transform: rotate(-30deg); background: repeating-linear-gradient(90deg, var(--thread) 0 4px, transparent 4px 7px); }
.ana__lb { position: absolute; left: 56px; top: -48px; white-space: nowrap; background: var(--ink); color: var(--oat); font: 600 13px/1 var(--f-body); padding: 8px 10px; border-radius: 2px; }
.ana__call.is-flip .ana__ln { transform: rotate(-150deg); }
.ana__call.is-flip .ana__lb { left: auto; right: 56px; }
.ana__rail { position: absolute; left: var(--gut); bottom: 22px; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.ana__rail button { position: relative; display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 14px 8px 6px 0; margin-right: 10px; font-size: 13px; color: var(--mute); cursor: pointer; transition: color .3s; }
.ana__rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.ana__rail button::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--thread) 0 4px, transparent 4px 7px); transform: scaleX(var(--p, 0)); transform-origin: left; }
.ana__rail button:hover, .ana__rail button.is-on { color: var(--ink); }
.ana__rail button:focus-visible { outline: 2px dashed var(--thread); outline-offset: 2px; }
.ana__rn { font-weight: 700; }
.ana__stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ana__stage.is-drag { cursor: grabbing; }
.ana__load { position: absolute; left: 0; bottom: 6px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mute); transition: opacity .6s .3s; pointer-events: none; }
.ana__load.is-done { opacity: 0; }
.ana__loadbar { position: relative; width: 72px; height: 2px; background: var(--line); overflow: hidden; }
.ana__loadbar i { position: absolute; inset: 0; background: var(--thread); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.ana__still { display: none; list-style: none; margin: 0; padding: calc(var(--hd) + 24px) var(--gut) 40px; max-width: var(--maxw); margin-inline: auto; }
.ana__still li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding-block: 24px; border-bottom: 1px solid var(--line); }
.ana__still img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .ana { height: auto; }
  .ana__stick { display: none; }
  .ana__still { display: block; }
}

/* intro */
.intro { padding-block: clamp(80px, 10vw, 150px) clamp(60px, 7vw, 110px); }
.intro__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 40px 0 0; }
.facts div { padding: 18px 18px 18px 0; border-top: 1.5px solid var(--ink); }
.facts dt { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.facts dd { margin: 0; font: 700 clamp(19px, 1.6vw, 24px)/1.15 var(--f-display); font-stretch: 88%; }

/* collection index */
.coll { padding-block: clamp(60px, 8vw, 120px); position: relative; }
.idx { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.idx__it a { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr) 0; align-items: center; gap: 16px; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line); transition: color .3s, padding .45s var(--ease); }
.idx__n { font-size: 13px; color: var(--mute); font-weight: 600; }
.idx__name { font: 780 clamp(38px, 5.4vw, 92px)/.92 var(--f-display); font-stretch: 76%; letter-spacing: -.025em; transition: transform .5s var(--ease), color .3s; }
.idx__line { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); }
.idx__cat { font-size: 14px; color: var(--mute); text-align: right; }
.idx__thumb { display: none; }
.idx__it a:hover .idx__name { transform: translateX(14px); color: var(--thread); }
.idx__float { position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; z-index: 30; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9) rotate(-2deg); transition: opacity .3s, transform .5s var(--ease); overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px -20px rgba(26, 24, 21, .45); }
.idx__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.idx__float img { width: 100%; height: 100%; object-fit: cover; }

/* mechanisms: motion study (drawn by /js/motion.js) */
.mot { padding-block: clamp(70px, 8vw, 130px); }
.mot--one { padding-block: clamp(40px, 5vw, 80px); }
.mot__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.mot__tabs { display: grid; border-bottom: 1px solid var(--line); }
.mot__tab { position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: 6px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 20px 0; color: var(--mute); transition: color .3s; }
.mot__tab::before { content: ""; position: absolute; left: -14px; top: 22px; bottom: 22px; width: 2px; background: repeating-linear-gradient(180deg, var(--thread) 0 5px, transparent 5px 9px); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.mot__tab[aria-selected="true"] { color: var(--ink); }
.mot__tab[aria-selected="true"]::before { transform: none; }
.mot__tab:hover { color: var(--ink); }
.mot__no { font: 700 14px/1.9 var(--f-body); grid-row: 1 / span 3; }
.mot__tab .mot__nm, .mot__solo .mot__nm { font: 760 clamp(26px, 2.3vw, 36px)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.015em; margin: 0; }
.mot__ln { grid-column: 2; margin-top: 10px; font-size: 16px; color: var(--ink-2); display: none; }
.mot__mv { grid-column: 2; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--thread); display: none; }
.mot__tab[aria-selected="true"] .mot__ln, .mot__tab[aria-selected="true"] .mot__mv { display: block; }
.mot__solo .big { margin: 16px 0 10px; }
.mot__solo .mot__mv { display: block; margin: 0; }
.mot__sheet { position: relative; background-color: var(--paper); background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; border: 1.5px solid var(--ink); border-radius: 2px; padding: clamp(10px, 2vw, 26px) clamp(10px, 2vw, 26px) 0; }
.mot__sheet::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); pointer-events: none; }
.ms { width: 100%; height: auto; overflow: visible; font-family: var(--f-body); }
.mot__tb { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px calc(-1 * clamp(10px, 2vw, 26px)) 0; padding: 10px clamp(14px, 2vw, 26px); border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); font-size: 12.5px; color: var(--mute); background: color-mix(in srgb, var(--paper) 85%, transparent); }
.mot__tb b { color: var(--ink); font-weight: 700; margin-left: 6px; }
.mot__film { margin: 0; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; background: #0b0b0b; }
.mot__film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mot__film .mot__tb { margin: 0; }
.mot__ctl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.mot__lbl { font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.mot__play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 2px; background: var(--ink); color: var(--oat); }
.mot__play svg { width: 18px; height: 18px; fill: currentColor; }
.mot__play .i-pause { display: none; }
.mot__play.is-playing .i-pause { display: block; }
.mot__play.is-playing .i-play { display: none; }
.mot__range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 30px; background: transparent; cursor: pointer; }
.mot__range::-webkit-slider-runnable-track { height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.mot__range::-moz-range-track { height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.mot__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 9px var(--thread); }
.mot__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 9px var(--thread); }
.mot__range:focus-visible { outline: 2px dashed var(--thread); outline-offset: 4px; }
.mot__desc { display: none; margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }
.mot__descmv { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--thread); }
.mot__models { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--mute); }
.mot__models a { color: var(--ink); margin-left: 4px; }
/* drawing */
.ms-floor { stroke: var(--ink); stroke-width: 2; }
.ms-hatch { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.2; }
.ms-wall { stroke: var(--ink); stroke-width: 2; }
.ms-part { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill .35s, stroke .35s; }
.ms-cush { fill: #DCD3C3; }
.ms-part.is-act { fill: color-mix(in srgb, var(--thread) 22%, var(--paper)); stroke: var(--thread-2); }
.ms-opt { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ms-arm { fill: var(--oat-2); fill-opacity: .55; stroke: var(--ink); stroke-width: 2; }
.ms-base { fill: var(--ink); }
.ms-ghost rect { fill: none; stroke: var(--mute); stroke-width: 1.2; stroke-dasharray: 5 5; }
.ms-ghost { transition: opacity .3s; }
.ms-trace { fill: none; stroke: var(--thread); stroke-width: 1.8; stroke-dasharray: .1 7; stroke-linecap: round; }
.ms-dot { fill: var(--thread); stroke: var(--paper); stroke-width: 2; }
.ms-fig { fill: none; stroke: var(--ink-2); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .62; }
.ms-fighead { fill: var(--paper); stroke: var(--ink-2); stroke-width: 3; opacity: .7; }
.ms-dim { fill: none; stroke: var(--thread); stroke-width: 1.5; }
.ms-arrow { fill: none; stroke: var(--thread); stroke-width: 1.6; }
.ms-guide { stroke: var(--thread); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.ms-lead { stroke: var(--ink); stroke-width: 1.2; }
.ms-t { font-size: 14px; font-weight: 600; fill: var(--ink); }
.ms-t--red { fill: var(--thread-2); }
.ms-pivot { fill: var(--paper); stroke: var(--thread); stroke-width: 2; }
.ms-tilt { transition: opacity .3s; }
.ms-pill rect { fill: var(--ink); }
.ms-pill text { font-size: 13px; font-weight: 600; fill: var(--oat); }
.ms-pill, .ms-lead { transition: opacity .25s; }
.ms-steps text { font-size: 13px; font-weight: 600; fill: var(--mute); transition: fill .3s; }
.ms-steps text.is-act { fill: var(--thread); }

/* materials */
.mat { padding-block: clamp(60px, 8vw, 120px); }
.mat__head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.mat__head .big { margin: 0; }
.sw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.sw__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--oat-2); }
.sw__img picture { height: 100%; }
.sw__img img { transition: transform 1.2s var(--ease); }
.sw__img::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(255, 255, 255, .8); opacity: 0; transition: opacity .35s; }
.sw__it:hover .sw__img img { transform: scale(1.06); }
.sw__it:hover .sw__img::after { opacity: 1; }
.sw__name { margin: 14px 0 2px; font: 700 20px/1.1 var(--f-display); font-stretch: 88%; }
.sw__note { margin: 0; font-size: 14px; color: var(--mute); }

/* dark bands */
.night { background: var(--night); color: var(--on-night); }
.night .big { color: var(--on-night-2); }
.rooms { padding-block: clamp(70px, 9vw, 140px); overflow: hidden; }
.rooms__track { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.rooms__track::-webkit-scrollbar { display: none; }
.rooms__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rooms__it { flex: 0 0 min(62vw, 980px); scroll-snap-align: start; }
.rooms__it picture { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
.rooms__it img { pointer-events: none; }
.rooms__cap { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 0; font-size: 15px; }
.rooms__tags { color: var(--on-night-2); }
.ac { padding-block: 0 clamp(70px, 9vw, 140px); }
.ac__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.ac__img picture { aspect-ratio: 1; overflow: hidden; border-radius: 2px; }

/* sit first */
.sf { padding-block: clamp(80px, 10vw, 150px); }
.sf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.sf__txt .h1 { margin-bottom: 26px; }
.sf__img { position: relative; }
.sf__img picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.sf__tag { position: absolute; left: 14px; bottom: 14px; margin: 0; background: var(--oat); padding: 8px 12px; font-size: 13px; font-weight: 600; border-radius: 2px; }

/* trade */
.trade { padding-block: 0 clamp(80px, 10vw, 150px); }
.trade__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 90px); }
.ticks { list-style: none; margin: 0; padding: 0; align-self: end; }
.ticks li { position: relative; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--line); font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px); }

/* final */
.final { background: var(--oat-2); padding-block: clamp(90px, 12vw, 180px); text-align: left; }
.final__h { font-size: clamp(56px, 9vw, 160px); line-height: .88; font-stretch: 76%; margin-bottom: 26px; max-width: 12ch; }
.final--sm .final__h { font-size: clamp(44px, 6vw, 96px); }

/* footer */
.ft { background: var(--night); color: var(--on-night); padding: clamp(60px, 7vw, 100px) var(--gut) 28px; }
.ft > * { max-width: var(--maxw); margin-inline: auto; }
.ft__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 48px; border-bottom: 1px solid var(--line-night); }
.ft__line { margin: 0; font: 700 clamp(26px, 3vw, 44px)/1.05 var(--f-display); font-stretch: 84%; letter-spacing: -.015em; max-width: 18em; }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 44px; }
.ft__h { margin: 0 0 14px; font-size: 13px; color: var(--on-night-2); font-weight: 600; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.ft__models { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 28px !important; }
.ft a:hover { color: #E26C55; }
.ft__base { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: end; padding-top: 28px; border-top: 1px solid var(--line-night); font-size: 13px; color: var(--on-night-2); }
.ft__mark { font: 780 clamp(64px, 11vw, 190px)/.78 var(--f-display); font-stretch: 78%; letter-spacing: -.04em; color: var(--on-night); }
.ft__family, .ft__small { margin: 0; }
.ft__family a { color: var(--on-night); }

/* page header */
.ph { padding-top: calc(var(--hd) + clamp(48px, 7vw, 110px)); padding-bottom: clamp(40px, 5vw, 80px); }
.ph--tight { padding-bottom: 24px; }
.ph__h { font-size: clamp(56px, 9vw, 150px); line-height: .88; font-stretch: 76%; margin-bottom: 22px; }
.ph__lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; color: var(--ink-2); max-width: 34em; margin: 0; text-wrap: pretty; }
.ph__jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.ph__jump a { border: 1.5px solid var(--ink); padding: 9px 14px; border-radius: 2px; font-size: 14px; font-weight: 600; transition: background .25s, color .25s; }
.ph__jump a:hover { background: var(--ink); color: var(--oat); }
.ph--img { position: relative; min-height: 86svh; display: flex; align-items: flex-end; color: var(--on-night); padding-top: 0; }
.ph--img .ph__lead { color: var(--on-night); }
.ph__bg { position: absolute; inset: 0; }
.ph__bg picture { height: 100%; }
.ph__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 19, 18, .55), rgba(20, 19, 18, .15) 40%, rgba(20, 19, 18, .8)); }
.ph__in { position: relative; padding-bottom: clamp(40px, 6vw, 90px); }

/* collection page */
.cg { padding-block: clamp(40px, 5vw, 80px); }
.cg__head { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(28px, 5vw, 90px); align-items: end; margin-bottom: clamp(28px, 3vw, 48px); }
.cg__head .stitch { grid-column: 1 / -1; }
.cg__head .big { margin: 0; }
.cg__grid { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px) clamp(14px, 2vw, 32px); }
.mc a { display: block; }
.mc__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--oat-2); }
.mc__img picture { height: 100%; }
.mc__img img { transition: transform 1.1s var(--ease); }
.mc a:hover .mc__img img { transform: scale(1.045); }
.mc__txt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; }
.mc__name { margin: 0; font: 780 clamp(32px, 3.6vw, 58px)/.95 var(--f-display); font-stretch: 78%; letter-spacing: -.02em; transition: color .3s; }
.mc a:hover .mc__name { color: var(--thread); }
.mc__line { margin: 0; color: var(--ink-2); text-align: right; }
.mc--sm .mc__name { font-size: clamp(26px, 2.4vw, 38px); }
.matl { padding-block: clamp(60px, 8vw, 120px); }
.matl__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); }
.matl__img { margin-top: 28px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; max-width: 460px; }
.matl__groups { display: grid; gap: 28px; align-content: start; }
.matl__g { border-top: 1.5px solid var(--ink); padding-top: 16px; }
.matl__g h3 { margin: 0 0 10px; font: 700 22px/1.1 var(--f-display); font-stretch: 88%; }
.matl__g ul { margin: 0; padding: 0; list-style: none; color: var(--ink-2); display: grid; gap: 4px; }

/* model page */
.mh { padding-top: calc(var(--hd) + clamp(30px, 4vw, 60px)); }
.mh__txt { position: relative; z-index: 2; }
.crumbs { display: flex; gap: 10px; font-size: 14px; color: var(--mute); margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }
.mh__name { font: 800 clamp(96px, 22vw, 380px)/.78 var(--f-display); font-stretch: 75%; letter-spacing: -.045em; margin: 0 0 22px -.04em; }
.mh__sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.mh__sub .mh__intro { margin-bottom: 0; }
.mh__line { margin: 0 0 18px; font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--f-display); font-stretch: 86%; color: var(--thread); }
.mh__intro { font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); max-width: 30em; margin: 0 0 28px; }
.mh__img { margin-top: clamp(36px, 5vw, 70px); height: min(86svh, 960px); overflow: hidden; }
.mh__img picture { height: 100%; }
.mh__img img { transform: scale(1.06); transition: transform 1.8s var(--ease); }
.mh__img.is-in img { transform: none; }
.ms { padding-block: clamp(70px, 8vw, 130px) clamp(40px, 5vw, 70px); }
.ms__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); }
.spec { margin: 0; border-top: 1.5px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: minmax(120px, 2fr) 5fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--mute); font-size: 15px; }
.spec dd { margin: 0; font-weight: 500; }
.spec--wide > div { grid-template-columns: minmax(160px, 1fr) 2fr; }
.mg { padding-block: clamp(20px, 3vw, 50px); }
.mg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.mg__it picture { height: 100%; overflow: hidden; border-radius: 2px; }
.mg__it { grid-column: span 6; aspect-ratio: 4 / 3; }
.mg__it--0 { grid-column: span 7; aspect-ratio: auto; height: clamp(280px, 34vw, 600px); }
.mg__it--1 { grid-column: span 5; aspect-ratio: auto; height: clamp(280px, 34vw, 600px); }
.mg__it--2 { grid-column: span 12; aspect-ratio: 21 / 9; }
.mg__grid--1 .mg__it { grid-column: span 12; aspect-ratio: 16 / 9; }
.mg__grid--4 .mg__it:nth-child(4) { grid-column: span 12; aspect-ratio: 21 / 9; }
.mcfg { padding-block: clamp(40px, 6vw, 90px); }
.mcfg__box { background: var(--oat-2); padding: clamp(28px, 5vw, 72px); border-radius: 2px; position: relative; }
.mcfg__box::before { content: ""; position: absolute; inset: 12px; border: 1.5px dashed color-mix(in srgb, var(--thread) 55%, transparent); pointer-events: none; border-radius: 1px; }
.mcfg__box .h2 { margin-bottom: 18px; }
.also { padding-block: clamp(40px, 5vw, 80px); }
.also .h3 { margin-bottom: 24px; }
.also__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 30px clamp(60px, 7vw, 110px); }
.pn__a { display: flex; align-items: baseline; gap: 16px; padding: 26px 0; border-top: 1.5px solid var(--ink); }
.pn__a--next { justify-content: flex-end; text-align: right; }
.pn__k { font-size: 22px; color: var(--thread); }
.pn__n { font: 780 clamp(36px, 5vw, 84px)/.9 var(--f-display); font-stretch: 76%; letter-spacing: -.03em; transition: color .3s, transform .45s var(--ease); }
.pn__a:hover .pn__n { color: var(--thread); }

/* acoustics */
.as { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 90px); align-items: center; padding-block: clamp(60px, 7vw, 110px) 0; }
.as--flip { grid-template-columns: 5fr 7fr; }
.as--flip .as__img { order: 2; }
.as__img picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.as__n { margin: 0 0 14px; font: 780 72px/.8 var(--f-display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.as__txt .h2 { margin-bottom: 20px; }
.abs { padding-block: clamp(80px, 9vw, 140px); }
.abs .h2 { margin-bottom: 32px; }
.lt { padding-block: clamp(80px, 9vw, 140px); }
.lt__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.lt__txt .label { color: #E26C55; }
.lt__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lt__imgs picture { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; }
.lt__imgs > div:nth-child(2) { margin-top: 18%; }
.dsg { padding-block: clamp(60px, 8vw, 120px); }

/* projects */
.pjs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(30px, 4vw, 60px) clamp(14px, 2vw, 32px); }
.pj { grid-column: span 6; }
.pj--0 { grid-column: span 7; }
.pj--1 { grid-column: span 5; margin-top: 18%; }
.pj--2 { grid-column: 2 / span 5; }
.pj--3 { grid-column: span 6; margin-top: -8%; }
.pj--4 { grid-column: span 12; }
.pj--4 .pj__img { aspect-ratio: 21 / 9; }
.pj__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.pj__img picture { height: 100%; }
.pj__t { margin: 16px 0 4px; font: 700 clamp(22px, 2vw, 30px)/1.05 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; }
.pj__tags { margin: 0; color: var(--mute); font-size: 14px; }
.tl { padding-block: clamp(80px, 9vw, 140px) clamp(40px, 5vw, 70px); }
.tl .h2 { margin-bottom: 30px; }
.tl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.tl__list li { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.tl__y { display: block; font: 800 clamp(56px, 6vw, 96px)/.85 var(--f-display); font-stretch: 75%; letter-spacing: -.03em; margin-bottom: 14px; }
.tl__list p { margin: 0; color: var(--ink-2); max-width: 22em; }

/* dealers */
.dl { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); padding-bottom: clamp(60px, 8vw, 120px); }
.dl__login { background: var(--ink); color: var(--oat); padding: clamp(24px, 3vw, 44px); border-radius: 2px; align-self: start; position: relative; }
.dl__login::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(236, 230, 220, .25); pointer-events: none; }
.dl__login .h3 { margin-bottom: 24px; }
.dl__login .fld input { background: transparent; color: var(--oat); border-color: rgba(236, 230, 220, .4); }
.dl__login .fld label { color: rgba(236, 230, 220, .7); }
.dl__login .btn { --bg: var(--oat); --fg: var(--ink); }
.dl__login .frm__note, .dl__login .frm__ok { color: rgba(236, 230, 220, .7); }
.dl__dl .h3 { margin-bottom: 18px; }
.dls { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.dls li { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.dls__n { margin: 0; font: 700 21px/1.1 var(--f-display); font-stretch: 88%; }
.dls__t { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.dls__s { flex: none; font-size: 13px; font-weight: 600; color: var(--mute); border: 1.5px dashed var(--oat-3); padding: 6px 10px; border-radius: 2px; }
.become { padding-block: 0 clamp(80px, 9vw, 140px); }
.become__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); }

/* forms */
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; align-content: start; }
.frm--stack { grid-template-columns: 1fr; }
.frm--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld { display: grid; gap: 7px; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fld label i { color: var(--thread); font-style: normal; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--oat-3); border-radius: 2px; font: 400 16px/1.4 var(--f-body); transition: border-color .2s, box-shadow .2s; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--thread) 20%, transparent); }
.fld input[aria-invalid="true"] { border-color: var(--thread); }
.frm__note { margin: 4px 0 0; font-size: 14px; color: var(--mute); }
.frm__ok { margin: 0; font-weight: 600; color: var(--thread); }
.chips { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--mute); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--oat-3); background: var(--paper); border-radius: 2px; font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
.chip span::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 1px; opacity: .45; transition: background .2s, opacity .2s; }
.chip--seg span::before { border-radius: 50%; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--oat); border-color: var(--ink); }
.chip input:checked + span::before { background: var(--thread); border-color: var(--thread); opacity: 1; }
.chip input:focus-visible + span { outline: 2px dashed var(--thread); outline-offset: 3px; }
.chip--alt span { border-style: dashed; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.check input { width: 22px; height: 22px; accent-color: var(--thread); flex: none; margin: 1px 0 0; }
.step { display: inline-flex; align-items: center; border: 1.5px solid var(--oat-3); background: var(--paper); border-radius: 2px; }
.step button { width: 48px; height: 48px; border: 0; background: none; font-size: 20px; }
.step button:hover { color: var(--thread); }
.step input { width: 64px; height: 48px; border: 0; background: none; text-align: center; font: 700 18px var(--f-body); -moz-appearance: textfield; color: var(--ink); }
.step input::-webkit-outer-spin-button, .step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* quote */
.qt { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "steps steps" "form aside"; gap: 28px clamp(28px, 5vw, 90px); padding-bottom: clamp(70px, 9vw, 140px); }
.qt__steps { grid-area: steps; list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qt__steps li { display: flex; gap: 10px; align-items: center; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--mute); position: relative; }
.qt__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--oat-3); }
.qt__steps li.is-done::before, .qt__steps li[aria-current]::before { background: repeating-linear-gradient(90deg, var(--thread) 0 5px, transparent 5px 9px); }
.qt__steps li[aria-current], .qt__steps li.is-done { color: var(--ink); }
.qt__sn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; }
.qt__form { grid-area: form; min-width: 0; }
.qt__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.qt__step[hidden] { display: none; }
.qt__step.is-on { animation: stepIn .55s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.qt__step > legend { margin-bottom: 10px; padding: 0; }
.qt__hint { color: var(--mute); margin: 0 0 24px; font-size: 15px; }
.qt__q { margin-bottom: 28px; }
.qt__q--row { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.qt__ql { margin: 0 0 10px; font-weight: 600; font-size: 15px; }
.qt__err { margin: 6px 0 0; color: var(--thread); font-weight: 600; }
.qt__nav { display: flex; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.qt__nav [data-next], .qt__nav [data-send] { margin-left: auto; }
.qt__sum > div { grid-template-columns: minmax(120px, 2fr) 5fr; }
.qt__done { padding: 20px 0; }
.qt__done .h1 { margin-bottom: 20px; }
.qt__aside { grid-area: aside; align-self: start; position: sticky; top: calc(var(--hd) + 24px); }
.qt__aside picture { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }

/* sit first */
.sfh { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; align-items: stretch; padding-top: var(--hd); }
.sfh__txt { padding-top: clamp(40px, 6vw, 90px); padding-bottom: 60px; display: flex; flex-direction: column; justify-content: center; max-width: none; margin: 0; }
.sfh__h { font: 800 clamp(56px, 7.6vw, 132px)/.86 var(--f-display); font-stretch: 76%; letter-spacing: -.035em; margin: 0 0 28px; }
.sfh__sub { display: block; color: var(--thread); }
.sfh__img picture { height: 100%; min-height: 60svh; }
.steps { padding-block: clamp(70px, 8vw, 120px); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.steps__n { display: block; font: 800 88px/.8 var(--f-display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); margin-bottom: 18px; }
.steps__list .h3 { margin-bottom: 10px; }
.steps__list p { margin: 0; color: var(--ink-2); }
.where { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 90px); align-items: end; padding-bottom: clamp(80px, 9vw, 140px); }
.where__img picture { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
.where__adr { font-style: normal; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; }
.where__adr p { margin: 0; }
.where__n { font: 780 clamp(40px, 4vw, 64px)/.95 var(--f-display) !important; font-stretch: 80% !important; letter-spacing: -.02em; margin-bottom: 10px !important; }

/* contact */
.ct { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 90px); padding-bottom: clamp(80px, 9vw, 140px); }
.ct__line { display: block; font: 780 clamp(32px, 4.6vw, 78px)/1 var(--f-display); font-stretch: 78%; letter-spacing: -.025em; padding: 18px 0 22px; border-top: 1.5px solid var(--ink); transition: color .3s; overflow-wrap: anywhere; }
.ct__line .label { margin-bottom: 10px; }
.ct__line:hover { color: var(--thread); }
.ct__show { border-top: 1.5px solid var(--ink); padding-top: 18px; margin-top: 8px; }
.ct__show .h3 { margin-bottom: 8px; }
.ct__show p { margin: 0; }
.ct__soc { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 30px; }
.ct__soc .label { margin: 0; }

/* contact image band */
.ctb { position: relative; color: var(--on-night); }
.ctb picture { height: min(70svh, 640px); }
.ctb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 19, 18, .7), rgba(20, 19, 18, .1) 70%); }
.ctb__in { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(28px, 5vw, 70px); }
.ctb__t { margin: 0 0 20px; font: 780 clamp(40px, 5.6vw, 92px)/.92 var(--f-display); font-stretch: 78%; letter-spacing: -.025em; max-width: 11ch; }

/* legal */
.legal { padding-top: calc(var(--hd) + clamp(40px, 6vw, 90px)); padding-bottom: clamp(80px, 9vw, 140px); max-width: 980px; }
.legal .ph__h { font-size: clamp(48px, 7vw, 110px); margin-bottom: 40px; }
.legal__b { border-top: 1px solid var(--line); padding: 22px 0; display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.legal__b .h3 { font-size: 20px; }
.legal__b p { margin: 0; color: var(--ink-2); }
.legal em { font-style: normal; background: color-mix(in srgb, var(--thread) 12%, transparent); color: var(--thread-2); padding: 0 3px; border-radius: 2px; }
.draft { display: inline-block; margin: 0 0 28px; padding: 10px 14px; border: 1.5px dashed var(--thread); color: var(--thread-2); font-size: 14px; font-weight: 600; border-radius: 2px; max-width: 60em; }
.legal-list { list-style: none; margin: 0 0 clamp(80px, 9vw, 140px); padding: 0; border-top: 1.5px solid var(--ink); }
.legal-list a { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); font: 760 clamp(26px, 3vw, 44px)/1 var(--f-display); font-stretch: 82%; }
.legal-list a:hover { color: var(--thread); }
.nf { padding-top: calc(var(--hd) + 8vh); padding-bottom: 12vh; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.nf__q { margin: 40px 0 12px; font-size: 14px; font-weight: 600; color: var(--mute); }
.nf__models { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nf__models a { font: 780 clamp(26px, 2.4vw, 38px)/1.1 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; transition: color .25s; }
.nf__models a:hover { color: var(--thread); }
.nf__img picture { aspect-ratio: 4 / 5; overflow: hidden; }
.nf__code { font: 800 clamp(120px, 22vw, 340px)/.8 var(--f-display); font-stretch: 75%; color: transparent; -webkit-text-stroke: 2px var(--ink); margin: 0 0 20px; }
.nf .h1 { margin-bottom: 20px; }

/* cut-out product shots on white blend into the oat ground */
.is-cut img { mix-blend-mode: multiply; }
.mc__img .is-cut img, .mh__img .is-cut img { object-fit: contain; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
  .hd__end { margin-left: auto; }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --hd: 64px; }
  .ana { height: 620vh; }
  .ana__stick { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-items: start; gap: 0; padding-top: calc(var(--hd) + 4px); }
  .ana__stage { order: -1; width: min(calc(100% + 2 * var(--gut)), 54svh); margin-inline: calc(-1 * var(--gut)); justify-self: center; }
  .ana__copy { min-height: 0; align-self: start; padding-top: 10px; }
  .ana__state { align-self: start; }
  .ana__h1 { font-size: clamp(44px, 12.4vw, 76px); margin-bottom: 16px; }
  .ana__lead { margin-bottom: 20px; font-size: 17px; }
  .ana__hint { margin-top: 18px; }
  .ana__n { font-size: 74px; margin-bottom: 8px; -webkit-text-stroke-width: 1.2px; }
  .ana__h2 { font-size: 40px; margin-bottom: 10px; }
  .ana__txt { font-size: 16px; }
  .ana__rail { position: static; order: 0; justify-content: space-between; gap: 4px; margin: 4px 0 0; }
  .ana__rail li { flex: 1; }
  .ana__rail button { width: 100%; margin: 0; padding: 12px 0 4px; justify-content: flex-start; font-size: 12px; }
  .ana__rail .ana__rt { display: none; }
  .ana__rail button.is-on { color: var(--thread); }
  .ana__copy { order: 1; }
  .ana__still li { grid-template-columns: 1fr; }
  .ana__load { left: var(--gut); }
  .ana__note { font-size: 11px; bottom: 2px; right: var(--gut); }
  .ana__lb { font-size: 12px; padding: 6px 8px; left: 44px; top: -40px; }
  .ana__ln { width: 50px; }
  .mot__grid { grid-template-columns: 1fr; gap: 18px; }
  .mot__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border: 0; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .mot__tabs::-webkit-scrollbar { display: none; }
  .mot__tab { flex: none; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--oat-3); border-radius: 2px; padding: 10px 14px; }
  .mot__tab::before { display: none; }
  .mot__tab[aria-selected="true"] { background: var(--ink); color: var(--oat); border-color: var(--ink); }
  .mot__tab .mot__nm { font-size: 20px; }
  .mot__no { font-size: 12px; line-height: 1; }
  .mot__tab[aria-selected="true"] .mot__ln, .mot__tab[aria-selected="true"] .mot__mv { display: none; }
  .mot__desc { display: block; }
  .mot--one .mot__desc { display: none; }
  .mot__tb span:last-child { display: none; }
  .mot__lbl { font-size: 12px; }
  .ms-t { font-size: 21px; }
  .ms-pill text { font-size: 19px; }
  .ms-pillr { height: 32px; }
  .ms-steps text { font-size: 19px; }
  .ms-fig { stroke-width: 3.6; }
  .intro__grid, .mat__head, .ac__grid, .sf__grid, .trade__grid, .cg__head, .matl__grid, .ms__grid, .as, .as--flip, .lt__grid, .dl, .become__grid, .sfh, .where, .ct { grid-template-columns: 1fr; }
  .as--flip .as__img { order: 0; }
  .sw { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .idx__it a { grid-template-columns: 30px minmax(0, 1fr) 84px; grid-template-areas: "n name thumb" "n line thumb"; row-gap: 4px; column-gap: 12px; }
  .idx__n { grid-area: n; align-self: start; padding-top: 8px; }
  .idx__name { grid-area: name; font-size: clamp(36px, 11vw, 56px); }
  .idx__line { grid-area: line; font-size: 15px; }
  .idx__cat { display: none; }
  .idx__thumb { display: block; grid-area: thumb; width: 84px; aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
  .idx__thumb picture { height: 100%; }
  .idx__float { display: none; }
  .rooms__it { flex-basis: 84vw; }
  .rooms__cap { flex-direction: column; gap: 2px; }
  .cg__grid, .also__grid { grid-template-columns: 1fr; }
  .mc__txt { flex-direction: column; gap: 4px; }
  .mc__line { text-align: left; }
  .mh__img { height: 62svh; margin-top: 30px; }
  .mh__sub { grid-template-columns: 1fr; }
  .mg__grid .mg__it { height: auto !important; }
  .mg__grid .mg__it { grid-column: span 12 !important; aspect-ratio: 4 / 3 !important; }
  .pn__n { font-size: 34px; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
  .pjs .pj { grid-column: span 12 !important; margin-top: 0 !important; }
  .tl__list, .steps__list { grid-template-columns: 1fr; row-gap: 32px; }
  .qt { grid-template-columns: 1fr; grid-template-areas: "steps" "form"; }
  .qt__aside { display: none; }
  .qt__steps li span:last-child { display: none; }
  .qt__steps li[aria-current] span:last-child { display: inline; }
  .frm, .frm--3 { grid-template-columns: 1fr; }
  .frm--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sfh__txt { padding-bottom: 36px; }
  .sfh__img picture { min-height: 46svh; }
  .legal__b { grid-template-columns: 1fr; gap: 8px; }
  .ft__base { grid-template-columns: 1fr; }
  .nf { grid-template-columns: 1fr; }
  .nf__img { max-width: 360px; }
  .ft__top .btn { width: 100%; justify-content: space-between; }
  .final__h { font-size: clamp(52px, 15vw, 96px); }
  .lt__imgs > div:nth-child(2) { margin-top: 0; }
  .hd__cta { display: none; }
}
@media (max-width: 520px) {
  .ft__cols { grid-template-columns: 1fr; }
  .langs a { padding: 6px 4px; }
  .hd__end { gap: 10px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .row .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .ana__h1 { font-size: clamp(44px, 6vw, 84px); }
  .ana__n { font-size: 90px; }
}
/* touch screens: no sticky hover states after a tap */
@media (hover: none) {
  .btn--ghost:hover { --bg: transparent; --fg: var(--ink); }
  .btn:hover::after { opacity: 0; }
  .btn:hover .btn__ar { transform: none; }
  .ph__jump a:hover { background: none; color: inherit; }
  .chip:hover span { border-color: var(--oat-3); }
  .mc a:hover .mc__img img, .sw__it:hover .sw__img img { transform: none; }
  .mc a:hover .mc__name, .idx__it a:hover .idx__name { color: inherit; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .stitch { clip-path: none; }
}

/* real forms (4 Nov 2026): honeypot, Turnstile slot, server error */
.frm__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.frm__ts:empty { display: none; }
.frm__err { margin: 0; padding: 12px 14px; border: 1.5px dashed var(--thread); color: var(--thread); font-weight: 600; font-size: 15px; }
.dl__login .frm__err { color: #F2B8AC; border-color: #F2B8AC; }
.fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--thread); }
button[aria-busy="true"] { opacity: .6; cursor: progress; }

/* dealer zone */
.dz { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); padding-bottom: clamp(60px, 8vw, 120px); }
.dz--in { display: block; padding-block: clamp(120px, 16vw, 200px) clamp(80px, 10vw, 140px); max-width: 760px; }
.dz--in .big { margin: 18px 0; }
.dz { padding-top: clamp(40px, 5vw, 72px); }
.dz__prijs { border: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); padding: clamp(24px, 3vw, 44px); border-radius: 2px; align-self: start; }
.dz__prijs .h3 { margin-bottom: 16px; }
.dz__prijs .btn { margin-top: 6px; }
.dz__prijs p { opacity: .85; }
.dz__info { display: block; margin-top: 12px; opacity: .7; }
.dz__t { color: var(--ink-2); margin: 0 0 18px; }
.dz__specs .h3 { margin-bottom: 8px; }
.dz__more { grid-column: 1 / -1; }
.dz__who { margin: 18px 0 0; font-size: 15px; }
.dz__out { margin-left: 10px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: inherit; cursor: pointer; }
.dls__s--dl { color: inherit; border-style: solid; border-color: currentColor; text-decoration: none; }
.dls__s--dl:hover { opacity: .7; }
@media (max-width: 900px) { .dz { grid-template-columns: 1fr; } }