/* heavydutystoragecabinet.com
   One stylesheet for the whole site. Studios 76 LLC, 2026.
   "Showroom": a dark stage, Laurin green for actions, and the cabinet lit in the paint the visitor picks.
   --paint and --on-paint change when a colour is picked (see site.js). */

@font-face { font-family: "Anybody"; src: url("/assets/fonts/anybody-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  --night: #0a0e0c;        /* deepest background */
  --coal: #121814;         /* page background */
  --slate: #1b231e;        /* raised panels */
  --snow: #f4f6f2;         /* text on dark, light sections */
  --ink: #141a16;          /* text on light */
  --laurin: #82b640;       /* Laurin green, from the logo: buttons and marks */
  --laurin-hi: #9fd45a;    /* the same green, lighter, for text on dark */
  --paint: #f7b500;        /* RAL 1023 Traffic yellow by default */
  --on-paint: #18201b;     /* text colour that reads on --paint */

  /* tokens that sections override */
  --bg: var(--coal); --fg: var(--snow); --muted: #b3bdb6; --line: rgba(255, 255, 255, 0.16); --panel: var(--slate);
  --btn-bg: var(--laurin); --btn-fg: #0d130f; --focus: #fff;

  --display: "Anybody", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --text: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1360px;
  --gutter: clamp(18px, 4vw, 48px);
}
.light { --bg: #f3f5ee; --fg: var(--ink); --muted: #4b554f; --line: rgba(20, 26, 22, 0.2); --panel: #fff; --btn-bg: var(--ink); --btn-fg: #fff; --focus: var(--ink); }
.green { --bg: var(--laurin); --fg: #10160f; --muted: #1f2a1a; --line: rgba(16, 22, 15, 0.35); --panel: #fff; --btn-bg: #10160f; --btn-fg: #fff; --focus: #10160f; }
.painted { --bg: var(--paint); --fg: var(--on-paint); --muted: var(--on-paint); --line: color-mix(in srgb, var(--on-paint) 32%, transparent); --panel: #fff; --btn-bg: #10160f; --btn-fg: #fff; --focus: var(--on-paint); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--night); }
body { margin: 0; background: var(--coal); color: var(--snow); font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--laurin); color: #0d130f; padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.display { font-family: var(--display); font-weight: 900; font-stretch: 114%; line-height: 0.96; letter-spacing: -0.014em; text-wrap: balance; }
.h1 { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5rem); }
.h2 { font-size: clamp(1.75rem, 1rem + 3.3vw, 3.5rem); }
.h3 { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1.3rem; line-height: 1.15; }
.lead { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.38rem); line-height: 1.5; max-width: 32em; }
.note { font-size: 0.92rem; color: var(--muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nb { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 54px; padding: 0.7em 1.6em; border: 0; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.02rem; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform 0.14s ease, filter 0.14s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; }
.btn-line:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); filter: none; }
.btn-small { min-height: 46px; padding: 0.5em 1.2em; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--night) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand img { width: 124px; height: auto; }
.brand-name { font-family: var(--display); font-weight: 800; font-stretch: 105%; font-size: 0.95rem; line-height: 1.1; padding-left: 14px; border-left: 1px solid var(--line); max-width: 10em; }
.nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav a { text-decoration: none; font-weight: 500; padding: 8px 0; display: block; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--laurin); }
.top-tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; background: transparent; border: 0; box-shadow: inset 0 0 0 2px var(--snow); font-weight: 600; cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 1120px) { .top-tel { display: none; } }
@media (max-width: 920px) {
  .menu-btn { display: inline-flex; }
  .top .btn-small { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--night); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.12rem; }
  .nav .nav-quote { display: flex; margin-top: 20px; border: 0; }
}
@media (min-width: 921px) { .nav .nav-quote { display: none; } }
@media (max-width: 440px) { .brand-name { display: none; } }

/* ---------- Sections ---------- */
.band { background: var(--bg); color: var(--fg); padding-block: clamp(64px, 9vw, 128px); position: relative; }
.band-night { --bg: var(--night); }
.band-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4.5vw, 60px); max-width: 48em; }
.band-head p { color: var(--muted); font-size: 1.14rem; max-width: 38em; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 78% at 72% 40%, #3d4b44 0%, #1b231e 46%, var(--night) 100%); }
.hero-word { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 900; font-stretch: 150%; font-size: 23vw; line-height: 0.8; letter-spacing: -0.02em; white-space: nowrap; color: rgba(255, 255, 255, 0.04); pointer-events: none; user-select: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(8px, 2vw, 32px); padding-block: clamp(20px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.hero-copy { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; }
.hero-copy .h1 { font-size: clamp(2.4rem, 1rem + 3.3vw, 3.85rem); text-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.98rem; padding: 7px 14px; background: rgba(255, 255, 255, 0.09); }
.tag i { width: 9px; height: 9px; background: var(--laurin); border-radius: 50%; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-show { position: relative; display: grid; justify-items: center; min-width: 0; }
.hero-show .stage { overflow: visible; }
.hero-hint { position: absolute; right: 0; top: 0; font-size: 0.9rem; color: var(--muted); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.hero-hint svg { width: 22px; height: 22px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding: 10px 14px; background: rgba(10, 14, 12, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: 100%; }
.tool-btn { min-height: 44px; padding: 0 18px; border: 0; background: var(--snow); color: var(--ink); font-weight: 700; font-size: 0.97rem; cursor: pointer; white-space: nowrap; }
.tool-btn:hover { background: #fff; }
.tools-name { font-size: 0.95rem; white-space: nowrap; }
.hero-show .tools-name { flex-basis: 100%; text-align: center; margin-top: -4px; }
.tools-name strong { font-weight: 700; }
.tools-name span { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { width: 28px; height: 28px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: var(--c); cursor: pointer; transition: transform 0.12s ease; }
.chip:hover { transform: scale(1.18); }
.chip[aria-checked="true"] { outline: 2px solid var(--snow); outline-offset: 3px; }
.stats { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats div { padding: 20px clamp(12px, 1.8vw, 28px) 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stats div:first-child { border-left: 0; }
.stats dd { font-family: var(--display); font-weight: 900; font-stretch: 116%; font-size: clamp(1.05rem, 0.3rem + 1.5vw, 1.9rem); line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums; }
.stats dt { font-size: 0.93rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 920px) {
  .hero { background: radial-gradient(ellipse 110% 50% at 50% 62%, #3d4b44 0%, #1b231e 50%, var(--night) 100%); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-word { top: 58%; font-size: 34vw; }
  .hero-hint { position: static; margin-bottom: -6px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats dd { font-size: clamp(1.15rem, 4vw, 1.8rem); }
  .stats div:nth-child(4) { border-left: 0; }
  .stats div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(4) { border-left: 1px solid var(--line); }
  .stats div:nth-child(odd) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- The 3D cabinet ----------
   Built from flat boxes. 1 unit (--u) is 1 inch: body 72 x 72 x 80, legs 6, roof peak 5 (91 high), roof 76 x 77. */
.stage { --u: clamp(2.6px, 0.31vw, 4.9px); --ry: -32deg; --rx: -12deg; --open: 0; width: 100%; height: calc(var(--u) * 124); perspective: calc(var(--u) * 620); perspective-origin: 50% 30%; display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage.is-drag { cursor: grabbing; }
.stage:focus-visible { outline-offset: -3px; }
.cab, .cab * { transform-style: preserve-3d; }
.cab { position: relative; width: calc(var(--u) * 72); height: calc(var(--u) * 80); margin-top: calc(var(--u) * 6); transform: rotateX(var(--rx)) rotateY(var(--ry));
  --front: color-mix(in srgb, var(--paint) 94%, #fff); --right: color-mix(in srgb, var(--paint) 72%, #000); --left: color-mix(in srgb, var(--paint) 84%, #000);
  --roof: color-mix(in srgb, var(--paint) 80%, #fff); --in: color-mix(in srgb, var(--paint) 38%, #000); --in2: color-mix(in srgb, var(--paint) 50%, #000); --edge: color-mix(in srgb, var(--paint) 55%, #000); }
.cab > * { position: absolute; left: 0; top: 0; }
.cab .f { backface-visibility: hidden; }
.cab .back { width: 100%; height: 100%; background: var(--right); transform: translateZ(calc(var(--u) * -36)) rotateY(180deg); }
.cab .side { width: 100%; height: calc(var(--u) * 85); top: calc(var(--u) * -5); clip-path: polygon(0 5.88%, 50% 0, 100% 5.88%, 100% 100%, 0 100%); }
.cab .side.r { background: linear-gradient(90deg, var(--right), color-mix(in srgb, var(--right) 86%, #000)); transform: rotateY(90deg) translateZ(calc(var(--u) * 36)); }
.cab .side.l { background: linear-gradient(270deg, var(--left), color-mix(in srgb, var(--left) 86%, #000)); transform: rotateY(-90deg) translateZ(calc(var(--u) * 36)); }
.cab .vent { position: absolute; left: 38%; top: 12%; width: 22%; height: 17%; background: color-mix(in srgb, var(--paint) 62%, #000); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.8) 0 rgba(0, 0, 0, 0.28); }
.cab .inb { width: 100%; height: 100%; background: linear-gradient(180deg, var(--in), var(--in2)); transform: translateZ(calc(var(--u) * -35.6)); }
.cab .inl { width: 100%; height: 100%; background: var(--in); transform: rotateY(90deg) translateZ(calc(var(--u) * -35.6)); }
.cab .inr { width: 100%; height: 100%; background: var(--in2); transform: rotateY(-90deg) translateZ(calc(var(--u) * -35.6)); }
.cab .infloor { width: 100%; height: calc(var(--u) * 72); top: calc(var(--u) * 4); background: linear-gradient(0deg, var(--in2), var(--in)); transform: translate3d(0, calc(var(--u) * 39.5), 0) rotateX(90deg); }
.cab .shelf { width: 99%; left: 0.5%; height: calc(var(--u) * 26); top: calc(var(--u) * 27); background: color-mix(in srgb, var(--paint) 60%, #000); }
.cab .shelf.s1 { transform: translate3d(0, calc(var(--u) * 12), calc(var(--u) * -22.5)) rotateX(90deg); }
.cab .shelf.s2 { transform: translate3d(0, calc(var(--u) * -12), calc(var(--u) * -22.5)) rotateX(90deg); }
.cab .lip { width: 99%; left: 0.5%; height: calc(var(--u) * 1.6); background: color-mix(in srgb, var(--paint) 78%, #000); }
.cab .lip.s1 { top: calc(var(--u) * 51.2); transform: translateZ(calc(var(--u) * -9.5)); }
.cab .lip.s2 { top: calc(var(--u) * 27.2); transform: translateZ(calc(var(--u) * -9.5)); }
.cab .frame { width: 100%; height: 100%; border-style: solid; border-color: var(--front); border-width: calc(var(--u) * 6) calc(var(--u) * 6.75) calc(var(--u) * 2); transform: translateZ(calc(var(--u) * 36)); }
.cab .door { width: calc(var(--u) * 29.25); height: calc(var(--u) * 72); top: calc(var(--u) * 6); transition: transform 1.1s cubic-bezier(0.6, 0.05, 0.2, 1); }
.cab .door.dl { left: calc(var(--u) * 6.75); transform-origin: 0 50%; transform: translateZ(calc(var(--u) * 36.3)) rotateY(calc(var(--open) * -108deg)); }
.cab .door.dr { left: calc(var(--u) * 36); transform-origin: 100% 50%; transform: translateZ(calc(var(--u) * 36.3)) rotateY(calc(var(--open) * 108deg)); transition-delay: 0.12s; }
.cab .door > i { position: absolute; inset: 0; backface-visibility: hidden; }
.cab .door .o { background: linear-gradient(100deg, color-mix(in srgb, var(--front) 90%, #fff), var(--front) 45%, color-mix(in srgb, var(--front) 90%, #000)); box-shadow: inset 0 0 0 calc(var(--u) * 0.35) var(--edge); }
.cab .door .i { background: var(--in2); transform: rotateY(180deg); box-shadow: inset 0 0 0 calc(var(--u) * 0.35) var(--in); }
.cab .lock { position: absolute; left: calc(var(--u) * -6.5); top: 44%; width: calc(var(--u) * 13); height: calc(var(--u) * 6); background: color-mix(in srgb, var(--paint) 76%, #000); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.9) 0 rgba(0, 0, 0, 0.3), inset 0 0 0 calc(var(--u) * 0.3) var(--edge); transform: translateZ(calc(var(--u) * 1.2)); }
.cab .plate { position: absolute; left: 10%; top: 4%; width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.8); background: #f2f3ef; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.cab .hinge { position: absolute; width: calc(var(--u) * 0.9); height: calc(var(--u) * 4); background: var(--edge); }
.cab .dl .hinge { left: calc(var(--u) * -0.9); }
.cab .dr .hinge { right: calc(var(--u) * -0.9); }
.cab .hinge.h1 { top: 8%; } .cab .hinge.h2 { top: 47%; } .cab .hinge.h3 { top: 86%; }
.cab .roof { width: calc(var(--u) * 76); left: calc(var(--u) * -2); height: calc(var(--u) * 38.83); top: calc(var(--u) * -5); transform-origin: 50% 0; }
.cab .roof.rf { background: linear-gradient(180deg, color-mix(in srgb, var(--roof) 92%, #fff), var(--roof)); transform: rotateX(82.6deg); }
.cab .roof.rb { background: color-mix(in srgb, var(--roof) 80%, #000); transform: rotateX(-82.6deg); }
.cab .fascia { width: calc(var(--u) * 76); left: calc(var(--u) * -2); height: calc(var(--u) * 3); top: 0; background: color-mix(in srgb, var(--paint) 68%, #000); transform: translateZ(calc(var(--u) * 38.5)); }
.cab .leg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 6); top: 100%; background: color-mix(in srgb, var(--paint) 58%, #000); transform: translateZ(calc(var(--u) * 36)); }
.cab .leg.g1 { left: 0; } .cab .leg.g2 { left: calc(var(--u) * 34.3); } .cab .leg.g3 { left: calc(var(--u) * 68.6); }
.cab .rail { width: 100%; height: calc(var(--u) * 6); top: 100%; background: color-mix(in srgb, var(--paint) 46%, #000); }
.cab .rail.r { transform: rotateY(90deg) translateZ(calc(var(--u) * 36)); }
.cab .rail.l { transform: rotateY(-90deg) translateZ(calc(var(--u) * 36)); }
.cab .ground { width: calc(var(--u) * 150); height: calc(var(--u) * 150); left: calc(var(--u) * -39); top: calc(var(--u) * -35); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75) 0 38%, transparent 66%); transform: translate3d(0, calc(var(--u) * 46), 0) rotateX(90deg); pointer-events: none; }
.cab .disc { width: calc(var(--u) * 170); height: calc(var(--u) * 170); left: calc(var(--u) * -49); top: calc(var(--u) * -45); border-radius: 50%; border: 1.5px solid rgba(159, 212, 90, 0.45); transform: translate3d(0, calc(var(--u) * 46.2), 0) rotateX(90deg); pointer-events: none; }
.cab .dim { color: #cfe9a8; font: 600 calc(var(--u) * 3.6) / 1 var(--text); font-stretch: 88%; white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 1.5); pointer-events: none; }
.cab .dim::before, .cab .dim::after { content: ""; flex: 1; height: 0; border-top: 1.5px solid currentColor; }
.cab .dim.w { width: calc(var(--u) * 76); left: calc(var(--u) * -2); top: 100%; transform: translate3d(0, calc(var(--u) * 4), calc(var(--u) * 52)) rotateX(90deg); }
.cab .dim.d { width: calc(var(--u) * 77); left: calc(var(--u) * -2.5); top: 100%; transform: translate3d(calc(var(--u) * 50), calc(var(--u) * 4), 0) rotateY(90deg) rotateX(90deg); }
.cab .dim.h { width: calc(var(--u) * 91); left: calc(var(--u) * -9.5); top: calc(var(--u) * 38.7); transform: translate3d(calc(var(--u) * 44), 0, calc(var(--u) * 38)) rotateZ(-90deg); }
.no-dims .dim { display: none; }
.stage-open { --u: clamp(2.3px, 0.27vw, 4.2px); }
@media (max-width: 920px) { .stage { --u: clamp(2.2px, 0.74vw, 4.6px); } .stage-open { --u: clamp(2.1px, 0.68vw, 4.2px); } }
.js .stage[data-intro] { opacity: 0; }
.js .stage[data-intro].is-in { opacity: 1; transition: opacity 0.9s ease; }

/* ---------- Uses ---------- */
.uses { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.uses-show { position: relative; display: grid; justify-items: center; overflow: clip; background: radial-gradient(ellipse 60% 55% at 50% 48%, #36433c 0%, transparent 70%); }
.uses-photo { position: absolute; left: 10px; top: 2%; width: clamp(120px, 15vw, 190px); background: #fff; padding: 6px 6px 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); transform: rotate(-3deg); color: var(--ink); }
.uses-photo img { width: 100%; }
.uses-photo figcaption { font-size: 0.8rem; line-height: 1.3; padding: 7px 4px 8px; }
.ticks { display: grid; border-top: 1px solid var(--line); }
.ticks li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 6px 24px; }
.ticks strong { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1.06rem; line-height: 1.25; color: var(--laurin-hi); }
.ticks span { color: var(--muted); }
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.places li { box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, 0.05); padding: 7px 15px; font-weight: 500; }
@media (max-width: 920px) { .uses { grid-template-columns: minmax(0, 1fr); } .uses-show { order: 2; } }
@media (max-width: 560px) { .ticks li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Built: the keyed drawings ---------- */
.build { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.build-draw { display: grid; grid-template-columns: 1fr 1fr; background-color: #0e1310; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 26px 26px; box-shadow: inset 0 0 0 1px var(--line); }
.build-draw figure { padding: clamp(10px, 2vw, 24px) clamp(8px, 1.6vw, 20px) 0; }
.build-draw figure + figure { border-left: 1px solid var(--line); }
.build-draw figcaption { border-top: 1px solid var(--line); margin-inline: calc(-1 * clamp(8px, 1.6vw, 20px)); padding: 10px 14px 11px; font-size: 0.9rem; color: var(--muted); background: var(--night); }
.pinbox { position: relative; }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--laurin); color: #0d130f; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; font-variant-numeric: lining-nums; box-shadow: 0 0 0 3px #0e1310; }
.key { counter-reset: key; border-top: 1px solid var(--line); }
.key li { counter-increment: key; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.key li::before { content: counter(key); width: 30px; height: 30px; border-radius: 50%; background: var(--laurin); color: #0d130f; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.key p { color: var(--muted); margin-top: 4px; }
.build-photos { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; background: #fff; color: var(--ink); }
.build-photos figure + figure { border-left: 1px solid #cfd5cf; }
.build-photos img { width: 100%; height: clamp(200px, 24vw, 300px); object-fit: contain; padding: 14px; }
.build-photos .is-cover img { object-fit: cover; padding: 0; }
.build-photos figcaption { border-top: 1px solid #cfd5cf; padding: 9px 14px 10px; font-size: 0.9rem; }
@media (max-width: 980px) { .build { grid-template-columns: minmax(0, 1fr); } }

/* The elevation drawings */
.elev { overflow: visible; }
.elev-paint rect, .elev-paint path { fill: var(--paint); transition: fill 0.35s ease; }
.elev-paint .elev-shade { fill: color-mix(in srgb, var(--paint) 78%, #000); }
.elev-paint .elev-light { fill: color-mix(in srgb, var(--paint) 92%, #fff); }
.elev-lines rect, .elev-lines line, .elev-lines path, .elev-lines circle { fill: none; stroke: var(--on-paint); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: stroke 0.35s ease; }
.elev-plate { fill: #f4f5f2; stroke: #18201b; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.elev-plate-mark { stroke: #18201b; stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.elev-ground { stroke: #cfe9a8; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 5; }
.elev-dims path { fill: none; stroke: #cfe9a8; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.elev-dims .elev-arrow { fill: #cfe9a8; stroke: none; }
.elev-dims text { font-family: var(--text); font-stretch: 85%; font-weight: 600; font-size: 38px; fill: #cfe9a8; font-variant-numeric: tabular-nums; }
.elev-dimbg { fill: #0e1310; }

/* ---------- Colours: the page takes the paint ---------- */
.colours-band { background: radial-gradient(ellipse 60% 80% at 76% 45%, color-mix(in srgb, var(--paint) 74%, #fff) 0%, var(--paint) 55%, color-mix(in srgb, var(--paint) 80%, #000) 100%); transition: color 0.4s ease; }
.colours { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.swatch { display: block; width: 100%; text-align: left; padding: 0; border: 0; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transition: transform 0.14s ease; }
.swatch:hover { transform: translateY(-5px); }
.swatch-c { display: block; height: 78px; background: var(--c); position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.swatch-t { display: block; padding: 9px 10px 11px; font-size: 0.9rem; line-height: 1.25; }
.swatch-t b { display: block; font-weight: 600; }
.swatch-t span { color: #4b554f; font-variant-numeric: tabular-nums; }
.swatch[aria-checked="true"] { outline: 3px solid var(--fg); outline-offset: 3px; }
.swatch[aria-checked="true"] .swatch-c::after { content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 12px; border-left: 4px solid var(--k); border-bottom: 4px solid var(--k); transform: rotate(-45deg); }
.shots { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); }
.shots figure + figure { border-left: 1px solid #cfd5cf; }
.shots img { width: 100%; aspect-ratio: 460 / 585; object-fit: cover; }
.shots figcaption { border-top: 1px solid #cfd5cf; padding: 9px 14px 10px; font-size: 0.9rem; }
.cap { font-size: 0.9rem; color: var(--muted); padding: 12px 2px 4px; }
.colours-now { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
.colours-now p { margin-right: auto; }
.colours-now strong { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 1.4rem; display: block; line-height: 1.2; }
@media (max-width: 920px) { .colours { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Specifications ---------- */
.specs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--fg); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec-table th { font-weight: 500; color: var(--muted); width: 42%; padding-right: 16px; }
.spec-table td { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.plan { display: block; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 36px rgba(20, 26, 22, 0.14); }
.plan img { width: 100%; }
.opts { margin-top: 30px; }
.opts ul { margin-top: 12px; display: grid; border-top: 2px solid var(--fg); }
.opts li { padding: 11px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 920px) { .specs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; }
.video-play span { display: inline-flex; align-items: center; gap: 14px; background: var(--laurin); color: #0d130f; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1rem, 0.8rem + 0.8vw, 1.35rem); padding: 18px 30px; transition: transform 0.14s ease; }
.video-play:hover span { transform: scale(1.06); }
.video-play svg { width: 22px; height: 22px; }
.video-note { margin-top: 14px; font-size: 0.9rem; color: var(--muted); }

/* ---------- Laurin ---------- */
.maker { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.maker-photo { box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.5); }
.maker-photo img { width: 100%; }
.maker-copy { display: grid; gap: 22px; justify-items: start; }
.maker-copy p { color: var(--muted); }
@media (max-width: 920px) { .maker { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(40px, 6.5vw, 104px); align-items: start; }
.faq-split .h2 { font-size: clamp(1.75rem, 0.9rem + 2.1vw, 2.7rem); }
.faq-split .band-head { margin-bottom: 0; position: sticky; top: 110px; }
@media (max-width: 920px) { .faq-split { grid-template-columns: minmax(0, 1fr); } .faq-split .band-head { position: static; } }
.faq { border-top: 1px solid var(--line); max-width: 56em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 18px; align-items: center; padding: 22px 0; font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.22rem); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#0d130f, #0d130f) center / 14px 3px no-repeat, linear-gradient(#0d130f, #0d130f) center / 3px 14px no-repeat, var(--laurin); transition: transform 0.2s ease; }
.faq details[open] summary::after { background: linear-gradient(#0d130f, #0d130f) center / 14px 3px no-repeat, var(--laurin); transform: rotate(180deg); }
.faq-a { padding: 0 46px 26px 0; max-width: 44em; color: var(--muted); }

/* ---------- Quote ---------- */
.quote-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.quote-copy { display: grid; gap: 22px; position: sticky; top: 110px; }
.quote-copy a { font-weight: 600; }
.quote-ways { display: grid; gap: 4px; font-size: 1.1rem; }
.form { background: #fff; color: var(--ink); padding: clamp(20px, 3vw, 44px); box-shadow: 0 30px 70px rgba(16, 22, 15, 0.35); --focus: var(--ink); --muted: #4b554f; --btn-bg: var(--ink); --btn-fg: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field label i { font-style: normal; font-weight: 400; color: #4b554f; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--laurin); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #a3131f; box-shadow: inset 0 0 0 1.5px #a3131f; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.form-status { flex: 1 1 14em; font-weight: 600; min-height: 1.5em; }
.form-status.is-error { color: #a3131f; }
.form-status.is-success { color: #1d5c2b; }
.s76-turnstile { margin-top: 18px; min-height: 65px; }
.checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 8px; }
.checks label { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 1rem; padding: 6px 0; }
.checks input { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--ink); flex: none; }
@media (max-width: 920px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } .quote-copy { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.foot { background: var(--night); color: #d7ddd8; font-size: 0.98rem; --focus: #fff; }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.8fr); border-inline: 1px solid var(--line); }
.foot-cell { padding: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.foot-cell:first-child { border-left: 0; }
.foot-cell h2 { font-family: var(--text); font-size: 0.85rem; font-weight: 600; color: var(--laurin-hi); }
.foot-cell img { width: 160px; }
.foot-cell li + li { margin-top: 6px; }
.foot-base { border-top: 1px solid var(--line); }
.foot-base .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-block: 20px; font-size: 0.9rem; color: #a9b3ad; }
.foot-base .wrap > :first-child { margin-right: auto; }
.linkbtn { background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font: inherit; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-cell:nth-child(3) { border-left: 0; } .foot-cell:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-cell { border-left: 0; } .foot-cell + .foot-cell { border-top: 1px solid var(--line); } }

/* ---------- Inner pages ---------- */
.page-head { position: relative; overflow: hidden; padding-block: clamp(44px, 7vw, 96px) clamp(36px, 5vw, 64px); background: radial-gradient(ellipse 70% 120% at 85% 30%, #36433c 0%, #1b231e 45%, var(--night) 100%); }
.page-head .lead { margin-top: 20px; color: var(--muted); }
.page-head .lead a { color: var(--snow); }
.crumbs { font-size: 0.92rem; margin-bottom: 18px; color: var(--muted); }
.page-body { background: var(--bg); color: var(--fg); padding-block: clamp(40px, 6vw, 88px); }
.doc { max-width: 46em; }
.doc > * + * { margin-top: 1.05em; }
.doc h2 { font-family: var(--display); font-weight: 850; font-stretch: 112%; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.15; margin-top: 2.1em; }
.doc h3 { font-family: var(--display); font-weight: 780; font-stretch: 108%; font-size: 1.15rem; margin-top: 1.7em; }
.doc ul { list-style: square; padding-left: 1.2em; }
.doc li + li { margin-top: 0.4em; }
.doc .summary { font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.doc thead th { border-bottom: 2px solid var(--fg); font-weight: 600; }
.doc .table-scroll { overflow-x: auto; }
.doc .form { margin-top: 1.6em; box-shadow: 0 0 0 1.5px var(--ink), 10px 10px 0 var(--ink); }
.callout { background: var(--ink); color: var(--snow); padding: 20px 24px; border-left: 6px solid var(--laurin); }
.callout a { color: #fff; }
.callout, .quote-ways { overflow-wrap: anywhere; }
.foot-cell p { overflow-wrap: break-word; min-width: 0; }
.timeline { border-top: 2px solid var(--fg); margin-top: 1.4em; }
.doc ul.timeline { padding-left: 0; }
.timeline li { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); list-style: none; margin: 0; }
.timeline b { font-family: var(--display); font-weight: 900; font-stretch: 114%; font-size: 1.3rem; font-variant-numeric: lining-nums; }
.doc figure { margin-block: 1.8em; }
.doc figure img { width: 100%; box-shadow: 0 14px 36px rgba(20, 26, 22, 0.18); }
.doc .cap { color: var(--muted); }
.cta-strip { background: var(--bg); color: var(--fg); padding-block: clamp(36px, 5vw, 64px); }
.cta-strip .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.notfound { padding-block: clamp(60px, 12vw, 150px); display: grid; gap: 22px; justify-items: start; }
.notfound-code { font-size: clamp(5rem, 2rem + 16vw, 13rem); color: var(--paint); line-height: 0.85; }
.notfound .lead { color: var(--muted); }

/* ---------- Cookie banner: a bar along the bottom ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; color: var(--ink); border-top: 4px solid var(--laurin); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); padding: 14px var(--gutter); font-size: 0.92rem; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; --focus: var(--ink); --fg: var(--ink); }
.consent[hidden] { display: none; }
.consent-text { flex: 1 1 28em; }
.consent h2 { font-family: var(--display); font-weight: 850; font-stretch: 110%; font-size: 1.02rem; display: inline; margin-right: 8px; }
.consent-text p { display: inline; }
.consent-links { display: inline-flex; gap: 16px; margin-left: 10px; }
.consent-actions { display: flex; gap: 10px; flex: 0 1 340px; }
.consent-actions .btn { flex: 1; min-height: 46px; font-size: 0.95rem; white-space: nowrap; }
.consent-actions .btn:hover { transform: none; }
.consent-actions .btn:not(.btn-line) { background: var(--ink); color: #fff; }
@media (max-width: 700px) { .consent-links { display: flex; margin: 8px 0 0; } .consent-actions { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media print { .top, .consent, .video, .stage, .tools { display: none; } }