/* Fenora Frames. Layout and type follow the reference (Hubot Sans Condensed Bold + Fragment Mono).
   Colour is black and white plus the logo's own navy-black and gold, sampled from the brochure. */
:root {
  --mist: #ffffff;   /* light surfaces and light text */
  --steel: #6d7378;  /* secondary text, rules */
  --ink: #0d1b25;    /* logo navy-black */
  --lime: #c8a96b;   /* logo gold: the only accent */
  --pale: #e4e5e6;
  --mid: #9a9ea2;
  --m: 20px;
  --line: rgba(13, 27, 37, .22);
  --idx: var(--steel);
  --idx-cur: var(--lime);
  --f-d: 'Hubot Sans', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-m: 'Fragment Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-w: 'Saira Extra Condensed', 'Hubot Sans', 'Arial Narrow', sans-serif;
  --f-h: 'Anek Devanagari', 'Kohinoor Devanagari', 'Noto Sans Devanagari', sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.js:not(.entered) { overflow: hidden; }
body {
  background: #fff; color: var(--ink);
  font: 400 14px/20px var(--f-m); letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Type roles */
.d { font-family: var(--f-d); font-stretch: 75%; font-weight: 700; letter-spacing: 0; }
.d88 { font-size: clamp(46px, 6.1vw, 110px); line-height: 1; font-weight: 700; }
.d40 { font-size: clamp(28px, 2.78vw, 50px); line-height: 1; }
.d16 { font-size: 16px; line-height: 16px; }
.m24 { font: 400 clamp(17px, 1.67vw, 26px)/1.33 var(--f-m); letter-spacing: .02em; text-transform: uppercase; }
.m12 { font-size: 12px; line-height: 16px; }
.svg-m { font: 400 10px var(--f-m); letter-spacing: .04em; fill: var(--ink); }
body, .dir { color: var(--ink); }
.flick { white-space: pre; }

/* Pictograms */
.pic { width: 100%; height: auto; overflow: visible; }
.pic .g { fill: currentColor; fill-opacity: .14; stroke: none; }

/* ---------- Entry screen ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: #a9adb0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 20px; cursor: pointer;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1);
}
html:not(.js) .splash, .entered .splash { display: none; }
.splash.leaving { transform: translateY(-100%); }
.splash-top { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.stamp { display: flex; flex-direction: column; font: 700 16px/16px var(--f-d); font-stretch: 75%; letter-spacing: 0; }
.stamp i { width: 11px; height: 11px; background: var(--lime); margin-bottom: 11px; }
.stamp-m { font: 400 16px/18px var(--f-m); letter-spacing: .02em; }
.stamp-m b { font-weight: 400; }
.stamp--c { align-items: center; text-align: center; }
.stamp--r { align-items: flex-end; text-align: right; }

.plaque {
  container-type: inline-size;
  width: min(640px, 100%); aspect-ratio: 640 / 300; padding: 2.6% 3%;
  display: flex; flex-direction: column; justify-content: space-between;
  color: rgba(236, 239, 241, .92);
  background:
    var(--noise),
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 60%),
    linear-gradient(115deg, #3b3e41 0%, #a2a8ad 16%, #54585c 32%, #c4c9cd 50%, #63686c 66%, #303336 84%, #8e9499 100%);
  border: 3px solid #d6dadd;
  box-shadow: inset 0 0 0 2px #26282a, inset 0 0 50px rgba(0, 0, 0, .65);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .28);
  font: 700 12px/1.15 var(--f-d); font-stretch: 75%; letter-spacing: 0;
}
.plaque > * { font-size: 1.9cqw; }
.plaque-row { display: grid; grid-template-columns: 2fr 2fr 2fr 1fr; }
.plaque > .plaque-row--b { grid-template-columns: 3fr 2fr 2fr; font-size: 2.6cqw; align-items: start; }
.plaque-row--b span:last-child { font-size: 1.6cqw; }
.plaque-row i { display: inline-block; width: 1.2cqw; height: 1.2cqw; background: currentColor; margin-right: 1.6cqw; vertical-align: .1em; }
.plaque-row i.o { background: none; border: 1px solid currentColor; }
.plaque > .plaque-mark { font: 900 22.2cqw/.8 var(--f-w); letter-spacing: -.005em; white-space: nowrap; margin: 1cqw 0 0 -.4cqw; text-shadow: 0 2px 1px rgba(0, 0, 0, .75), 0 -1px 0 rgba(255, 255, 255, .4); }
.plaque-rule { height: .9cqw; background: rgba(236, 239, 241, .8); box-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.plaque-foot { display: grid; grid-template-columns: 3fr 2fr 2fr; align-items: end; }
.plaque-hi { font: 800 8.6cqw/1.05 var(--f-h); font-stretch: 75%; white-space: nowrap; }
.plaque-sm { font-size: 2.9cqw; line-height: 1.05; color: rgba(28, 28, 28, .85); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
.plaque-xs { font-size: 1.6cqw; color: rgba(28, 28, 28, .85); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }

.splash-enter { font-size: clamp(34px, 3.2vw, 46px); line-height: 1; color: #3a4046; transition: color .25s; animation: pulse 2.4s ease-in-out infinite; }
.splash:hover .splash-enter, .splash-enter:focus-visible { color: #fff; animation: none; }
@keyframes pulse { 50% { color: #fff; } }
.splash-legal { text-align: center; font-size: 16px; line-height: 17px; color: #fff; }
.splash-legal span { color: #a9adb0; }

/* ---------- Section index + directory ---------- */
.idx { position: fixed; top: 9px; right: calc(var(--m) - 10px); z-index: 60; display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; }
.idx i { width: 8px; height: 8px; border: 1px solid var(--idx); transition: background .2s, border-color .2s; }
.idx i.past { background: var(--idx); }
.idx i.cur { background: var(--idx-cur); border-color: var(--idx-cur); }
body[data-tone="dark"] { --idx: #fff; }
html.js:not(.entered) .idx { visibility: hidden; }

.dir { position: fixed; inset: 0; z-index: 70; background: #fff; color: var(--steel); padding: 14px var(--m) 20px; display: flex; flex-direction: column; overflow: auto; }
.dir-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.dir-close { font-size: 14px; color: var(--ink); }
.dir-list { margin: auto 0; padding: 30px 0; }
.dir-list a { display: grid; grid-template-columns: 3.2em 1fr; font: 400 clamp(20px, 2.6vw, 38px)/1.5 var(--f-m); letter-spacing: .02em; }
.dir-list a:hover, .dir-list a:focus-visible { color: var(--ink); text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 0 50% / 9px 9px no-repeat; padding-left: 22px; }
.dir-foot a { color: var(--ink); }


/* ---------- 01 Intro ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; background: var(--mist); padding: 13px var(--m) 0; overflow: hidden; }
.hero-grid { height: calc(100% - 15.6vw); display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.cell, .hero-side { position: relative; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cell { grid-column: var(--c); grid-row: var(--r); display: grid; place-items: center; color: var(--ink); }
.cell::before, .hero-side::before, .cell.last::after, .hero-side--3::after {
  content: "+"; position: absolute; left: -4.5px; top: -10px; font: 400 12px/20px var(--f-m); letter-spacing: 0; color: var(--ink); pointer-events: none;
}
.cell.last::after, .hero-side--3::after { top: auto; bottom: -11px; }
.cell:hover { text-decoration: none; }
.cell-n { position: absolute; left: 7px; top: 6px; font-size: 12px; line-height: 16px; }
/* The windows. Frame colour is --fc (white profile by default, gold for coloured profiles). */
.win { --fw: clamp(3px, .46vw, 7px); --fc: #fff; position: relative; display: block; height: 50%; max-width: 70%; aspect-ratio: 4 / 3; border: var(--fw) solid var(--fc); box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--ink); perspective: 460px; }
.win--door { height: 64%; aspect-ratio: 9 / 19; }
.win--vent { height: 50%; aspect-ratio: 4 / 5; }
.win--col { --fc: var(--lime); }
.win--hole { border: 1px dashed var(--ink); box-shadow: none; transition: border-color .3s; }
.win canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: var(--ink); }
.sash { position: absolute; top: 0; bottom: 0; border: calc(var(--fw) * .8) solid var(--fc); box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--ink); transition: transform .65s cubic-bezier(.3, .7, .2, 1), background-position .9s; }
.g { background: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .08) 53%, rgba(255, 255, 255, 0) 60%) 28% 0 / 260% 100%, rgba(255, 255, 255, .07); }
.mesh { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .4) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 1px, transparent 1px 3px), rgba(13, 27, 37, .45); }
.leaf { background: var(--fc); }
.leaf--glass { background: linear-gradient(var(--ink), var(--ink)) 0 64% / 100% 1px no-repeat, linear-gradient(var(--fc), var(--fc)) bottom / 100% 36% no-repeat, rgba(255, 255, 255, .07); }
.leaf--vent { background: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 4px) 50% 8% / 62% 17% no-repeat, var(--fc); }
.leaf--panel::before, .leaf--panel::after { content: ""; position: absolute; left: 12%; right: 12%; border: 1px solid var(--ink); }
.leaf--panel::before { top: 6%; height: 40%; }
.leaf--panel::after { bottom: 6%; height: 40%; }
.m-swing-l { transform-origin: 0 50%; }
.m-swing-r { transform-origin: 100% 50%; }
.slats, .panes { position: absolute; inset: 0; display: grid; }
.slats { grid-template-rows: repeat(6, 1fr); }
.slats b { background: var(--fc); box-shadow: 0 0 0 1px var(--ink); transform: scaleY(.8); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.panes { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.panes b { border: calc(var(--fw) * .45) solid var(--fc); box-shadow: inset 0 0 0 1px var(--ink); transition: background-position .9s; }
.cell:is(:hover, :focus-visible, .open) .m-slide { transform: translateX(var(--dx)); }
.cell:is(:hover, :focus-visible, .open) .m-swing-l { transform: rotateY(-64deg); }
.cell:is(:hover, :focus-visible, .open) .m-swing-r { transform: rotateY(64deg); }
.cell:is(:hover, :focus-visible, .open) .slats b { transform: scaleY(.2); }
.cell:is(:hover, :focus-visible, .open) .g { background-position: 78% 0, 0 0; }
.cell:is(:hover, :focus-visible) .win--hole { border-color: var(--lime); border-style: solid; }
.cell-l { position: absolute; left: 7px; right: 7px; bottom: 6px; font-size: 11px; line-height: 13px; color: var(--steel); text-transform: uppercase; }
.cell:hover .cell-l, .cell:focus-visible .cell-l { color: var(--ink); }
.cell:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
.hero-side { grid-column: 6; padding: 4px 0 0 0; color: var(--ink); }
.hero-side--1 { grid-row: 1; } .hero-side--2 { grid-row: 2; } .hero-side--3 { grid-row: 3; }
.hero-mark { position: absolute; left: calc(var(--m) - .4vw); bottom: 1.3vw; font: 900 18vw/.76 var(--f-w); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.hero-scroll { position: absolute; left: calc(var(--m) + 76.2vw); bottom: 1.6vw; font-size: 12px; }
.hero-side a { color: var(--ink); font-size: 12px; line-height: 18px; display: block; padding-left: 2px; }
.hero-side a:first-child { margin-top: 2px; }

/* ---------- 02 Product log ---------- */
.range { display: grid; grid-template-columns: 5fr 1fr; height: 100svh; min-height: 700px; background: var(--mist); }
.board { position: relative; background: var(--ink); overflow: hidden; }
.board-hint { position: absolute; left: 0; right: 0; top: 9.5%; text-align: center; color: var(--lime); font-size: 12px; pointer-events: none; }
.card {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); min-width: 270px;
  display: grid; grid-template-columns: 36% 1fr; gap: 6px 16px; padding: 10px 14px 12px;
  color: var(--ink); font-size: 12px; line-height: 16px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background-image: var(--noise);
}
.card.drag { cursor: grabbing; }
.card--mist { background-color: #fff; }
.card--pale { background-color: var(--pale); }
.card--lime { background-color: var(--lime); }
.card--steel { background-color: var(--mid); }
.card--deep { background-color: var(--ink); color: #fff; outline: 1px solid rgba(255, 255, 255, .55); outline-offset: -1px; }
.card header { grid-column: 1 / -1; display: grid; grid-template-columns: 36% 1fr; gap: 16px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.card header span, .card h3 { font: 400 clamp(17px, 1.67vw, 26px)/1.33 var(--f-m); letter-spacing: .02em; text-transform: uppercase; }
.card-sub { grid-column: 2; }
.card-fig { grid-column: 1; grid-row: 2 / span 2; align-self: end; padding: 8px 0 4px; }
.card-fig .pic { stroke-width: 1; }
.card-body { grid-column: 2; padding: 14px 0 22px; display: grid; gap: 12px; }
.card footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; }
.card footer span:last-child { text-align: right; }
.board-tl { position: absolute; left: var(--m); right: 0; bottom: 12px; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.board-tl button { pointer-events: auto; text-align: left; font-size: 12px; line-height: 16px; color: var(--lime); mix-blend-mode: difference; }
.board-tl li:nth-child(n+2) button { color: #fff; }
.board-tl button:hover { text-decoration: underline; text-underline-offset: 3px; }
.range-side { padding: 20px 14px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.range-side .m12 { max-width: 24ch; }

/* ---------- 03 Made to measure ---------- */
.chain { height: 400vh; background: #fff; }
.chain-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0 var(--m);
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto 1fr;
  background:
    linear-gradient(var(--line), var(--line)) var(--m) 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) calc(var(--m) + (100% - 2 * var(--m)) * 4 / 6) 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) calc(100% - var(--m)) 0 / 1px 100% no-repeat,
    #fff;
}
.chain-title { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--ink); border-bottom: 1px solid var(--line); padding: 14px 0 8px; margin: 0 calc(var(--m) * -1); padding-left: var(--m); padding-right: var(--m); }
.chain-phases { grid-column: 1; align-self: center; font-size: 12px; line-height: 28px; color: #b9bcbf; padding-left: 14px; position: relative; }
.chain-phases li { transition: color .3s, padding .3s; position: relative; }
.chain-phases li.on { color: var(--ink); padding-left: 12px; }
.chain-phases li.on::before { content: ""; position: absolute; left: -18px; top: 10px; width: 8px; height: 8px; background: var(--lime); }
.chain-stage { grid-column: 2 / 5; display: grid; place-items: center; padding: 3vh 0; min-height: 0; }
.chain-stage svg { width: auto; height: min(66vh, 620px); max-width: 100%; overflow: visible; }
.chain-copy { grid-column: 5 / 7; position: relative; color: var(--ink); }
.chain-step p { color: var(--steel); }
.chain-step { position: absolute; left: 0; right: 14px; top: 26%; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; pointer-events: none; }
.chain-step.on { opacity: 1; transform: none; pointer-events: auto; }
.chain-step p { margin-top: 14px; max-width: 44ch; }
.chain-thumb { position: absolute; left: 2px; top: 56%; width: clamp(110px, 8.8vw, 150px); aspect-ratio: 1; display: grid; place-items: center; color: var(--ink); }
.chain-thumb b { position: absolute; width: 5px; height: 5px; border: solid var(--ink); border-width: 1px 0 0 1px; }
.chain-thumb b:nth-child(1) { left: 0; top: 0; }
.chain-thumb b:nth-child(2) { right: 0; top: 0; transform: rotate(90deg); }
.chain-thumb b:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); }
.chain-thumb b:nth-child(4) { left: 0; bottom: 0; transform: rotate(270deg); }
.chain-thumb span { grid-area: 1 / 1; width: 62%; opacity: 0; transition: opacity .3s; }
.chain-thumb span.on { opacity: 1; }
.chain-scroll { position: absolute; left: 0; bottom: 18px; font-size: 12px; }
#aDimW path, #aDimH path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- 04 The profile, tested (with the lab reports as small thumbnails) ---------- */
.tested { position: relative; min-height: 100svh; background: var(--ink); color: #fff; overflow: hidden; padding: 0 var(--m) 20px; display: flex; flex-direction: column; }
#smoke { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; filter: blur(3px) contrast(1.1); }
.tested::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, rgba(8, 14, 18, 0), rgba(8, 14, 18, .72)); pointer-events: none; }
.tested > :not(canvas) { position: relative; z-index: 1; }
.tested-title { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 14px; }
.tested-cols { margin-top: auto; padding-top: 12vh; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
.tested-cols h3 { margin-bottom: 26px; }
.tested-cols h3 span { display: block; color: var(--lime); }
.tested-cols p { max-width: 42ch; margin-bottom: 14px; }
.proof { margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, .5); padding-top: 14px; }
.proof-h { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; font-size: 12px; line-height: 16px; }
.proof-h h3 { color: var(--lime); }
.proof-h p:last-child { margin-left: auto; }
.proof-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 20px; margin-top: 16px; }
.proof-b { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; text-align: left; width: 100%; font-size: 12px; line-height: 16px; }
.proof-b img { width: 112px; height: 146px; object-fit: cover; object-position: 50% 0; background: #fff; filter: grayscale(1) contrast(1.08); outline: 1px solid rgba(255, 255, 255, .7); transition: outline-color .2s, transform .25s; }
.proof-b span { display: grid; gap: 4px; padding-top: 2px; }
.proof-b b { font-weight: 400; color: var(--lime); }
.proof-b strong { font: 400 14px/18px var(--f-m); text-transform: uppercase; }
.proof-b em { font-style: normal; color: #fff; }
.proof-b small { font-size: 11px; color: #b9bdc0; }
.proof-b:hover img, .proof-b:focus-visible img { outline: 2px solid var(--lime); transform: translateY(-3px); }
.proof-b:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tested-note { margin-top: 18px; color: #b9bdc0; max-width: 150ch; }
.tested-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Report viewer: opens only when a thumbnail is clicked */
.lb { border: 0; padding: 0; width: min(1100px, 94vw); height: min(92svh, 900px); max-width: none; max-height: none; background: var(--ink); color: #fff; outline: 1px solid rgba(255, 255, 255, .35); }
.lb::backdrop { background: rgba(0, 0, 0, .78); }
.lb[open] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.lb-img { background: #fff; overflow: auto; }
.lb-img img { width: 100%; height: auto; }
.lb-side { padding: 18px 20px 20px; display: flex; flex-direction: column; overflow: auto; }
.lb-count { color: var(--lime); }
.lb-info { margin: auto 0; padding: 24px 0; display: grid; gap: 12px; }
.lb-info h3 { margin: 6px 0 2px; }
.lb-info a { text-decoration: underline; text-underline-offset: 3px; color: var(--lime); }
.lb-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.lb-nav button:hover { color: var(--lime); }
.lb-nav button:last-child { margin-left: auto; }

/* ---------- 06 Standard specification ---------- */
.spec { display: grid; grid-template-columns: 5fr 1fr; min-height: 100svh; background: var(--ink); }
.spec-stage { position: relative; background: linear-gradient(180deg, #a3a6a9 0%, #c6c8ca 52%, #e2e3e4 100%); padding: 18px var(--m) 40px; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.spec-hint { text-align: center; font-size: 12px; margin: 22px 0 6px; }
.spec-fig { position: relative; width: min(100%, 122vh); margin: auto; }
.spec-fig svg { width: 100%; height: auto; }
.tag { position: absolute; left: calc(var(--tx) * 1%); top: calc(var(--ty) * 1%); display: inline-flex; font-size: 12px; line-height: 14px; text-transform: uppercase; white-space: nowrap; }
.tag b { font-weight: 400; background: var(--ink); color: #fff; padding: 6px 8px; transition: background .2s, color .2s; }
.tag span { background: rgba(255, 255, 255, .9); border: 1px solid var(--ink); color: var(--ink); padding: 5px 18px; }
.tag:hover b, .tag:focus-visible b, .tag.on b { background: var(--lime); color: var(--ink); }
.spec-side { color: #c9ccce; padding: 18px 14px 26px; display: flex; flex-direction: column; }
.spec-side h2 { color: #fff; }
.spec-info { margin-top: auto; min-height: 112px; padding-bottom: 16px; color: #fff; }
.spec-list { font-size: 12px; line-height: 17px; }
.spec-list li { cursor: default; transition: color .2s; }
.spec-list li.on { color: var(--lime); }

/* ---------- 07 Before you order ---------- */
.notes { position: relative; background: var(--ink); color: #fff; min-height: 100svh; padding: 18px var(--m) 60px; overflow: hidden; display: flex; flex-direction: column; --fx: 50%; --fy: 50%; }
.notes h2, .notes-hint { position: relative; z-index: 2; }
.notes-hint { text-align: center; font-size: 12px; margin-top: 16vh; color: #fff; transition: opacity .3s; }
.notes.lit .notes-hint { opacity: 0; }
.notes-list { margin: auto 0; padding: 40px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
.notes-list span, .notes-list h3 { display: block; font: 400 clamp(15px, 1.25vw, 20px)/1.5 var(--f-m); letter-spacing: .08em; text-transform: uppercase; }
.notes-list p { font-size: 12px; line-height: 16px; margin: 14px auto 0; max-width: 30ch; }
@media (hover: hover) and (pointer: fine) {
  .notes::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(circle 250px at var(--fx) var(--fy), rgba(255, 255, 255, .06) 0, rgba(13, 27, 37, .22) 55%, rgba(13, 27, 37, .82) 100%);
  }
}

/* ---------- 08 The catalogue ---------- */
.vault { position: relative; min-height: 100svh; background: linear-gradient(180deg, #d4d6d8 0%, #e6e7e8 42%, #f7f7f7 88%, #fff 100%); padding: 0 var(--m) 70px; overflow: hidden; }
.vault-title { display: grid; grid-template-columns: repeat(6, 1fr); color: var(--ink); padding-top: 14px; }
.vault-title span:last-child { grid-column: 5 / 7; }
.vault-wrap { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; margin-top: -3vw; }
.case { grid-column: 2 / 5; grid-row: 1; }
.case-lid, .case-tray {
  border: 9px solid transparent; border-radius: 12px;
  background: linear-gradient(#151515, #151515) padding-box,
    linear-gradient(120deg, #f3f3f3, #9d9fa1 22%, #ececec 45%, #909294 70%, #e2e2e2) border-box;
}
.case-lid { height: 0; padding-bottom: 30%; position: relative; transform-origin: 50% 100%; transform: perspective(1400px) rotateX(24deg) scaleX(.992); border-radius: 12px 12px 5px 5px; margin-bottom: -2px;
  background: var(--noise) padding-box, linear-gradient(#1b1b1b, #121212) padding-box, linear-gradient(120deg, #f3f3f3, #9d9fa1 22%, #ececec 45%, #909294 70%, #e2e2e2) border-box; }
.case-lid span, .case-lid em { position: absolute; left: 0; right: 0; text-align: center; color: #060606; text-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 0 #000; font-style: normal; }
.case-lid span { top: 24%; font: 900 clamp(34px, 6.4vw, 110px)/.8 var(--f-w); }
.case-lid em { top: 64%; font: 800 clamp(13px, 1.9vw, 30px)/1 var(--f-h); font-stretch: 75%; }
.case-tray { position: relative; aspect-ratio: 7 / 4.3; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; padding: 14px; box-shadow: 0 34px 44px -26px rgba(28, 28, 28, .55); }
.slot { position: relative; display: grid; place-items: center; background: #0a0a0a; border-radius: 6px; color: #fff; box-shadow: inset 0 4px 10px #000, inset 0 -1px 0 rgba(255, 255, 255, .07); transition: background .2s; }
.slot i { width: 58%; }
.slot .pic { stroke-width: 1.3; }
.slot--col { color: var(--lime); }
.slot b { position: absolute; left: 8px; bottom: 8px; font: 400 12px/14px var(--f-m); background: #fff; color: var(--ink); padding: 5px 7px; transition: background .2s, color .2s; }
.slot:hover, .slot.on { background: #1d1f20; }
.slot:hover b, .slot.on b { background: var(--lime); color: var(--ink); }
.case-handle { width: 16%; height: 24px; margin: 0 auto; border: 6px solid var(--ink); border-top: 0; border-radius: 0 0 7px 7px; }
.vault-hint { grid-column: 2 / 5; grid-row: 2; text-align: center; font-size: 12px; margin-top: 26px; color: var(--ink); }
.vault-info { grid-column: 5 / 7; grid-row: 1; padding-left: 20px; margin-bottom: 24px; }
.vi { display: none; background: #fff var(--noise); color: var(--ink); outline: 1px solid var(--ink); padding: 10px 14px 14px; font-size: 12px; line-height: 16px; }
.vi.on { display: block; }
.vi header { display: flex; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.vi header span, .vi h3 { font: 400 clamp(17px, 1.67vw, 26px)/1.33 var(--f-m); letter-spacing: .02em; }
.vi ul { padding: 14px 0 26px; display: grid; gap: 4px; }
.vi li::before { content: "+ "; color: var(--steel); }
.vi-rate { font: 700 clamp(48px, 4.6vw, 78px)/.95 'Mona Sans', var(--f-d); font-stretch: 75%; letter-spacing: 0; }
.vi-rate small { display: block; font: 400 12px/16px var(--f-m); letter-spacing: .02em; margin-bottom: 6px; }
.vi-rate em { font-style: normal; font-size: .42em; color: var(--steel); }
.vi-cta { display: inline-block; margin-top: 16px; text-decoration: underline; text-underline-offset: 3px; }
.vi-cta:hover { background: var(--ink); color: #fff; text-decoration: none; }

/* ---------- 09 Send a query ---------- */
.ask { background: #fff; padding: 0 var(--m) 90px; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.ask-head { grid-column: 1 / 3; padding: 14px 20px 0 0; }
.ask-head h2 { color: var(--ink); }
.ask-head h2 span { display: block; }
.ask-head .m12 { margin-top: 26px; max-width: 40ch; }
.ask-tel { margin-top: 22px; }
.ask-form { grid-column: 3 / 7; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-top: 28px; align-content: start; }
.f { display: block; position: relative; }
.f--w { grid-column: 1 / -1; }
.f > span { display: block; font-size: 12px; line-height: 16px; color: var(--steel); }
.f input, .f select, .f textarea {
  width: 100%; display: block; font: 400 16px/22px var(--f-m); letter-spacing: .02em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 9px 0 10px; outline: 0; appearance: none; -webkit-appearance: none; resize: vertical;
}
.f select { background: linear-gradient(var(--ink), var(--ink)) right 2px center / 8px 8px no-repeat; padding-right: 20px; }
.f input::placeholder { color: #a3a7aa; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { box-shadow: 0 2px 0 var(--lime); border-bottom-color: var(--ink); }
.f em { display: none; font-style: normal; font-size: 12px; line-height: 16px; margin-top: 6px; }
.f.bad em { display: inline-block; background: var(--ink); color: #fff; padding: 2px 7px; }
.f.bad em::before { content: attr(data-err); }
.send { width: 100%; background: var(--ink); color: #fff; padding: 22px 20px; font-size: clamp(30px, 2.78vw, 46px); line-height: 1; display: flex; align-items: center; gap: 16px; text-align: left; transition: background .2s, color .2s; }
.send i { width: 14px; height: 14px; background: var(--lime); transition: background .2s; }
.send:hover, .send:focus-visible { background: var(--lime); color: var(--ink); }
.send:hover i, .send:focus-visible i { background: var(--ink); }
.ask-status { margin-top: 10px; color: var(--steel); }
.ask-status.ok { color: var(--ink); }

/* ---------- Footer ---------- */
.foot { --fl: rgba(255, 255, 255, .32); position: relative; background: var(--ink); color: #fff; padding: 0 var(--m) 16px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 5fr 1fr; border-left: 1px solid var(--fl); padding: 22px 0 9vw; }
.foot-mark { font: 900 19vw/.78 var(--f-w); letter-spacing: -.005em; white-space: nowrap; margin-left: -.3vw; }
.foot-legal { border-left: 1px solid var(--fl); padding: 5vw 0 0 3px; }
.foot-hi { grid-column: 1; font: 800 5.6vw/1.2 var(--f-h); font-stretch: 75%; margin-top: .6vw; color: var(--lime); }
.foot-cols { display: grid; grid-template-columns: 2fr 3fr 1fr; border-left: 1px solid var(--fl); }
.foot-col { font-size: 12px; line-height: 16px; padding-bottom: 6px; }
.foot-col + .foot-col { border-left: 1px solid var(--fl); }
.foot-col h3 { border-bottom: 1px solid var(--fl); padding: 0 2px; margin-bottom: 20px; font-size: clamp(15px, 1.25vw, 19px); color: var(--lime); }
.foot-col p { padding: 0 14px 0 2px; margin-bottom: 14px; max-width: 54ch; }
.foot-people { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-left: 2px; align-items: start; }
.foot-people img { width: 96px; height: 120px; object-fit: cover; object-position: 50% 30%; outline: 1px solid var(--lime); }
.foot-people p { padding-left: 0; margin-top: 14px; }
.foot-names { font: 400 clamp(15px, 1.25vw, 19px)/1.5 var(--f-m); letter-spacing: .02em; text-transform: uppercase; padding-top: 0; }

.foot-col a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.foot-power { border-top: 1px solid var(--fl); margin-top: 26px; padding-top: 12px; font-size: 12px; line-height: 16px; text-align: center; color: #b9bdc0; }
.foot-power a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-power a:hover { color: var(--lime); }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  :root { --m: 14px; }
  .stamp, .stamp-m { font-size: 12px; line-height: 14px; }
  .stamp i { width: 9px; height: 9px; margin-bottom: 8px; }
  .splash-legal { font-size: 12px; line-height: 13px; }

  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 14px; }
  .hero-grid { height: auto; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: 27vw; }
  .cell { grid-column: var(--mc); grid-row: var(--mr); }
  .cell-l { display: none; }
  .cell.last::after { display: none; }
  .hero-side { grid-column: 1 / -1; border-left: 0; padding: 10px 0 14px; }
  .hero-side::before, .hero-side--3::after { display: none; }
  .hero-side--1 { grid-row: 6; } .hero-side--2 { grid-row: 8; display: flex; gap: 18px; } .hero-side--3 { grid-row: 7; }
  .hero-side a { font-size: 14px; }
  .hero-mark { position: static; margin: auto 0 0 -.4vw; font-size: 21.6vw; padding-top: 26px; }
  .hero-scroll { position: static; margin-top: 12px; }

  .range { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .range-side { order: -1; gap: 16px; padding: 18px var(--m) 22px; }
  .range-side .m12 { max-width: 46ch; }
  .board { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 52px var(--m) 30px; align-items: stretch; }
  .board-hint { top: 18px; }
  .card { position: static; flex: 0 0 84%; width: auto; scroll-snap-align: center; touch-action: auto; cursor: default; }
  .board-tl { display: none; }

  .chain-pin { display: flex; flex-direction: column; background: #fff; }
  .chain-title { display: block; margin: 0; padding: 14px 0 8px; }
  .chain-title span + span::before { content: " "; }
  .chain-phases { display: flex; gap: 14px; padding: 8px 0 0; line-height: 20px; font-size: 11px; }
  .chain-phases li.on { padding-left: 14px; }
  .chain-phases li.on::before { left: 0; top: 6px; }
  .chain-stage { flex: 1; padding: 0; }
  .chain-stage svg { height: min(44vh, 100%); }
  .chain-copy { height: 31vh; flex: none; }
  .chain-step { top: 0; right: 0; }
  .chain-thumb, .chain-scroll { display: none; }

  .tested-title { display: block; }
  .tested-title span + span::before { content: " "; }
  .tested-cols { grid-template-columns: 1fr; padding-top: 22vh; row-gap: 22px; }
  .tested-cols h3 { margin-bottom: 10px; }
  .tested-cols h3 span { display: inline; margin-right: 12px; }

.proof-list { grid-template-columns: 1fr; }
  .proof-b { grid-template-columns: 84px 1fr; }
  .proof-b img { width: 84px; height: 110px; }
  .proof-h p:last-child { margin-left: 0; }
  .lb[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .lb-info { padding: 14px 0; }
  .lb-side { padding-bottom: 0; }
  .lb-nav { position: sticky; bottom: 0; background: var(--ink); padding: 12px 0 14px; border-top: 1px solid rgba(255, 255, 255, .3); }

  .spec { grid-template-columns: 1fr; }
  .spec-stage { padding-bottom: 30px; }
  .spec-fig { margin: 24px auto 8px; }
  .tag span { display: none; }
  .tag { transform: translate(-30%, -30%); }
  .spec-info { margin-top: 22px; min-height: 84px; }

  .notes { min-height: 0; }
  .notes-hint { display: none; }
  .notes-list { grid-template-columns: 1fr; text-align: left; gap: 30px; padding: 34px 0 10px; }
  .notes-list p { margin-left: 0; max-width: 44ch; }

  .vault { padding-bottom: 46px; }
  .vault-title { display: block; }
  .vault-title span + span::before { content: " "; }
  .vault-wrap { grid-template-columns: 1fr; margin-top: 10px; }
  .case, .vault-hint, .vault-info { grid-column: 1; grid-row: auto; }
  .case-tray { gap: 6px; padding: 8px; }
  .slot b { left: 4px; bottom: 4px; padding: 3px 5px; }
  .vault-info { padding: 0; margin: 22px 0 0; }

  .ask { grid-template-columns: 1fr; padding-bottom: 80px; }
  .ask-head, .ask-form { grid-column: 1; }
  .ask-head h2 span { display: inline; }
  .ask-form { grid-template-columns: 1fr; gap: 24px; }

  .foot-top { grid-template-columns: 1fr; border-left: 0; padding-bottom: 40px; }
  .foot-legal { border-left: 0; padding: 18px 0 0; grid-row: 3; }
  .foot-hi { font-size: 9vw; }
  .foot-cols { grid-template-columns: 1fr; border-left: 0; row-gap: 22px; }
  .foot-col + .foot-col { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash, .chain-step, .splash-enter { transition: none; animation: none; }
}