/* =========================================================
   Base theme
   Swap these tokens to rebrand the whole site.
   ========================================================= */
:root {
  --ink: #101115;
  --white: #fdfeff;
  --blue: #3861db;
  --lime: #dcf343;
  --dot: #87c600;
  --sky: #dde8fb;
  --line: #e4e5e6;
  --muted: rgba(16, 17, 21, 0.4);
  --muted-2: rgba(16, 17, 21, 0.7);

  --font: "Hanken Grotesk", Arial, sans-serif;
  --font-wide: "Archivo", "Hanken Grotesk", Arial, sans-serif;
  --wide: 118%;

  --pad: 40px;
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
body.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* =========================================================
   Layout helpers
   ========================================================= */
.wrap { padding: 0 var(--pad); }
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--pad);
}
.c1 { grid-column: 1 / span 1; }
.c1-2 { grid-column: 1 / span 2; }
.c1-3 { grid-column: 1 / span 3; }
.c2 { grid-column: 2 / span 1; }
.c2-3 { grid-column: 2 / span 2; }
.c2-4 { grid-column: 2 / span 3; }
.c3 { grid-column: 3 / span 1; }
.c3-4 { grid-column: 3 / span 2; }
.c4 { grid-column: 4 / span 1; }
.relative { position: relative; }

/* dashed column guides that run through dark sections */
.lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 7px);
  opacity: 0.16;
}
.lines span:nth-child(1) { left: calc(var(--pad) + (100% - 2 * var(--pad)) * 0.25); }
.lines span:nth-child(2) { left: 50%; }
.lines span:nth-child(3) { left: calc(var(--pad) + (100% - 2 * var(--pad)) * 0.75); }
.lines--light { color: var(--white); }
.lines--dark { color: var(--ink); opacity: 0.6; }

/* =========================================================
   Typography
   ========================================================= */
.coords {
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--muted);
}
.sup {
  margin-top: 10px;
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
.on-dark .coords { color: rgba(253, 254, 255, 0.5); }
.on-dark .sup { color: var(--white); }
.on-lime .coords { color: var(--muted-2); }
.on-lime .sup { color: var(--ink); }

.display {
  font-size: clamp(56px, 8.34vw, 120px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.title-xl {
  font-size: clamp(32px, 4.17vw, 60px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.title-l {
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.caps {
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.caps-24 { font-size: 24px; line-height: 29px; }
.caps-18 { font-size: 18px; line-height: 22px; }
.caps-14 { font-size: 14px; line-height: 17px; font-weight: 500; letter-spacing: 0; }
.caps-12 { font-size: 12px; line-height: 16px; letter-spacing: 0.03em; }
.role { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 14px; line-height: 17px; font-weight: 500; color: var(--blue); }
.text { font-size: 14px; line-height: 20px; }
.text p + p { margin-top: 20px; }
.muted { color: var(--muted); }

/* scroll-driven letter reveal */
.rt-char { opacity: 0.4; transition: opacity 0.25s linear; }
.rt-char.on { opacity: 1; }
.rt-word { display: inline-block; white-space: nowrap; }

/* fade-up on enter */
.fade { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.fade.in { opacity: 1; transform: none; }
.fade.d1 { transition-delay: 0.1s; }
.fade.d2 { transition-delay: 0.2s; }
.fade.d3 { transition-delay: 0.3s; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 36px;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: 40px;
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn .dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25);
  transition: transform 0.3s;
  animation: dot-glow 2s ease-in-out infinite;
}
/* "live" signal: a ring keeps rippling out of the dot and fading */
.btn .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: dot-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes dot-ping {
  0% { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(3.2); opacity: 0; }
}
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(135, 198, 0, 0.12); }
}
.btn:hover .dot { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .btn .dot, .btn .dot::after { animation: none; }
  .btn .dot::after { display: none; }
}
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--blue); border-color: var(--blue); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--lime); border-color: var(--lime); }
.btn--outline { color: var(--ink); border-color: rgba(16, 17, 21, 0.2); }
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-dark .btn--outline, .btn--outline-light { color: var(--white); border-color: rgba(253, 254, 255, 0.3); }
.on-dark .btn--outline:hover, .btn--outline-light:hover { background: var(--white); color: var(--ink); }
.btn--wide { width: 100%; height: 64px; font-size: 14px; }

.circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(16, 17, 21, 0.15);
  background: var(--white);
  display: inline-grid;
  place-items: center;
  transition: background 0.3s, color 0.3s;
}
.circle-btn:hover { background: var(--ink); color: var(--white); }
.circle-btn svg { width: 16px; height: 16px; }

/* =========================================================
   Header
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  color: var(--ink);
  transition: background 0.4s, color 0.4s, transform 0.45s var(--ease), box-shadow 0.4s;
}
.header--over-dark { color: var(--white); }
.header.is-solid { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
}

.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo__word {
  font-family: var(--font-wide);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.14em;
  font-style: italic;
}
.logo__word i { font-style: normal; color: var(--lime); font-size: 0.6em; vertical-align: top; margin: 0 1px; }
.logo__sub {
  margin-top: 3px;
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav__list { display: flex; align-items: center; gap: 44px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--header-h);
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav__link svg { width: 9px; height: 9px; transition: transform 0.3s; }
.nav__link:hover, .nav__link.is-current { color: var(--blue); }
.header--over-dark:not(.is-solid) .nav__link:hover,
.header--over-dark:not(.is-solid) .nav__link.is-current { color: var(--lime); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute;
  top: calc(var(--header-h) - 14px);
  left: -24px;
  min-width: 230px;
  padding: 18px 24px;
  background: var(--white);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(16, 17, 21, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.nav__item:hover .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
  display: block;
  padding: 9px 0;
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.2s, padding 0.3s;
}
.nav__sub a:hover { color: var(--blue); padding-left: 6px; }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform 0.3s, top 0.3s; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--header-h) + 30px) var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.menu-open .header { color: var(--white); background: transparent; box-shadow: none; }
.mobile-menu a { font-size: 34px; line-height: 1.3; letter-spacing: -0.02em; }
.mobile-menu .mobile-menu__sub a { font-size: 18px; opacity: 0.6; padding-left: 16px; display: block; }
.mobile-menu .btn { margin-top: 30px; font-size: 12px; align-self: flex-start; letter-spacing: 0.03em; }

/* fixed helm — scroll progress + back to top */
.helm {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  color: var(--ink);
  mix-blend-mode: difference;
  filter: invert(1);
}
.helm svg { width: 100%; height: 100%; }

/* =========================================================
   Hero (home)
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowzoom 24s ease-in-out infinite alternate;
}
@keyframes slowzoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 17, 21, 0.35) 0%, rgba(16, 17, 21, 0) 25%, rgba(16, 17, 21, 0) 55%, rgba(16, 17, 21, 0.55) 100%),
    rgba(10, 30, 60, 0.18);
}
.hero__topo, .topo { position: absolute; inset: 0; background: url(../img/topo-lines.svg) center/cover no-repeat; z-index: 1; pointer-events: none; }
/* home hero: live contour lines (hero-topo.js) fade in and replace the static ones */
.hero__topo { transition: opacity 1.6s var(--ease); }
.hero__topo-live { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 1.6s var(--ease); }
.hero--live-topo .hero__topo { opacity: 0; }
.hero--live-topo .hero__topo-live { opacity: 0.2; } /* overall strength of the moving lines */
.hero__content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: 70px;
  align-items: end;
}
.hero__title { font-size: clamp(30px, 2.92vw, 42px); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; max-width: 380px; }
.hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 260px; }
/* where we are: a small glassy tag above the intro */
.hero__loc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding: 7px 13px 7px 11px; border: 1px solid rgba(253, 254, 255, 0.28); border-radius: 0 12px 0 12px; background: rgba(16, 17, 21, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; line-height: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.hero__loc span { white-space: nowrap; }   /* break between the two phrases, never inside one */
.hero__loc svg { width: 14px; height: 14px; flex: none; color: var(--lime); }
.hero__loc i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }

/* decorative chart strip */
.map-strip { height: 90px; background: url(../img/map-strip.svg) center/cover no-repeat; }

/* highlights ticker: thin strip that scrolls forever, pauses on hover */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 55s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; flex: none; }
.ticker__list li {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 19px 30px 19px 0;
  font-family: var(--font-wide);
  font-stretch: var(--wide);
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 800px) {
  .ticker__list li { gap: 20px; padding: 14px 20px 14px 0; font-size: 12px; line-height: 15px; }
}
/* no motion: the strip becomes a row you can swipe or scroll */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .ticker__track { animation: none; }
  .ticker__list[aria-hidden] { display: none; }
  .ticker__list { padding-left: var(--pad); }
}

/* =========================================================
   Anatomy of a drawer unit (under the hero; the 3D unit and
   leader lines are drawn by anatomy.js)
   ========================================================= */
.anatomy { position: relative; height: 190vh; background: var(--white); }
.anatomy__pin { position: sticky; top: 0; height: 100vh; min-height: 680px; overflow: hidden; }
/* Grey disc behind the unit. The unit is near-white on a white section, so it
   had no edge to read against. The gradient deliberately holds its strength out
   to 62% before falling away: the peak sits BEHIND the unit, so a profile that
   fades early leaves the silhouette itself with nothing behind it.
   --anatomy-haze is the one number to turn. */
.anatomy__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 57%;
  width: min(104vh, 68vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
              rgba(16, 17, 21, var(--anatomy-haze, 0.32)) 0%,
              rgba(16, 17, 21, calc(var(--anatomy-haze, 0.32) * 0.94)) 62%,
              rgba(16, 17, 21, calc(var(--anatomy-haze, 0.32) * 0.56)) 82%,
              rgba(16, 17, 21, 0) 100%);
  pointer-events: none;
}
.anatomy__ring { position: absolute; left: 50%; top: 57%; width: min(76vh, 48vw); transform: translate(-50%, -50%); color: rgba(16, 17, 21, 0.13); pointer-events: none; }
.anatomy__stage { position: absolute; left: 24%; right: 24%; top: 13%; bottom: 2%; z-index: 1; }
.anatomy__canvas { display: block; width: 100%; height: 100%; }
.anatomy__top { position: absolute; left: 50%; top: calc(var(--header-h) + 6px); transform: translateX(-50%); width: min(44vw, 620px); text-align: center; z-index: 2; }
.anatomy__top .sup { margin: 0; }
.anatomy__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.anatomy__chips li { padding: 7px 14px; border: 1px solid rgba(16, 17, 21, 0.22); border-radius: 40px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.anatomy__cta { display: none; }
.anatomy__aside { position: absolute; right: var(--pad); top: calc(var(--header-h) + 6px); max-width: 290px; text-align: right; z-index: 2; }
.anatomy__aside .text { color: var(--muted-2); }
.anatomy__aside .btn { margin-top: 16px; }
.anatomy__title { position: absolute; left: var(--pad); right: var(--pad); bottom: 7%; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; font-size: clamp(44px, 6.2vw, 116px); line-height: 0.95; font-weight: 400; letter-spacing: -0.035em; }
.anatomy__title span:last-child { text-align: right; }
.anatomy__plate { position: absolute; left: var(--pad); bottom: 2.5%; white-space: nowrap; z-index: 2; font-size: 12px; } /* bottom-left, clear of the back-to-top helm */

.anote { position: absolute; width: min(22vw, 300px); z-index: 2; }
.anote--l { left: var(--pad); }
.anote--r { right: var(--pad); text-align: right; }
.anote__k { display: flex; align-items: center; gap: 12px; }
.anote__h { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 14px; line-height: 17px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.anote__h b { margin-right: 8px; font-weight: 600; color: var(--blue); }
.anote__br { display: none; } /* where a heading breaks on phones */
.anote__pin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(56, 97, 219, 0.18); }
.anote--l .anote__pin { margin-left: auto; }
.anote--r .anote__pin { margin-right: auto; }
.anote--r .anote__k { justify-content: flex-end; } /* a heading wider than the note runs in towards the unit, never off the page */
.anote__t { margin-top: 8px; color: var(--muted-2); }
/* small "optional" tag at the start of a note (the outer flange) */
.anote__opt { display: inline-block; margin-right: 8px; padding: 3px 8px 2px; border: 1px solid var(--line); border-radius: 0 8px 0 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; line-height: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); vertical-align: 2px; }
/* once the 3D unit is up, each note fades in as its line draws */
.anatomy.is-3d .anote { opacity: var(--r, 1); transform: translateY(calc((1 - var(--r, 1)) * 14px)); }

.anatomy__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 0.4s; }
.anatomy.is-3d .anatomy__lines { opacity: 1; }
.anatomy__path { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; stroke-dasharray: 4 5; }
.anatomy__dot, .anatomy__pulse { opacity: 0; transition: opacity 0.35s; }
.anatomy__dot { fill: var(--blue); stroke: var(--white); stroke-width: 2; }
.anatomy__pulse { fill: none; stroke: var(--blue); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.anatomy__lines .is-on { opacity: 1; }
.anatomy__pulse.is-on { animation: anatomy-pulse 2.2s ease-out infinite; }
@keyframes anatomy-pulse { 0% { transform: scale(0.45); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* phones and tablets: the desktop's pinned scene, fitted to the width. The
   notes keep only their headings, in a row over the unit and a row under it,
   and the top-right blurb and the headline go; the unit's framing is NARROW
   in anatomy.js */
@media (max-width: 900px) {
  .anatomy__pin { height: 100vh; height: 100svh; min-height: 560px; }
  .anatomy__pin::before { top: var(--ring-y, 53%); width: min(150vw, 104svh); }
  .anatomy__ring { top: var(--ring-y, 53%); width: min(108vw, 76svh); }
  .anatomy__stage { left: 0; right: 0; top: 33%; bottom: 26%; } /* anatomy.js fits it between the rows */
  .anatomy__top { top: calc(var(--header-h) + 2px); width: calc(100% - 2 * var(--pad)); }
  .anatomy__chips { gap: 5px; margin-top: 10px; }
  .anatomy__chips li { padding: 6px 10px; font-size: 9.5px; }
  .anatomy__aside { display: none; }
  .anatomy__cta { display: inline-flex; height: 32px; margin-top: 12px; padding: 0 16px; gap: 9px; font-size: 10.5px; }
  .anatomy__title { display: none; } /* room for the row of notes under the unit */
  .anatomy__plate { display: none; }
  /* 01–03 in a row over the unit, 04–06 in a row under it (anatomy.js sets the
     rows' heights; these are the fallback), left / middle / right; each heading
     on two lines (the <br>s in index.html) so a line can leave its middle */
  .anote { width: max-content; }
  .anote__br { display: inline; }
  .anote__h { font-size: 10px; line-height: 13px; }
  .anote__h b { display: block; margin: 0 0 2px; }
  .anote__pin { display: none; } /* the lines leave the headings themselves */
  .anote__t { display: none; }
  .anote--l { top: 26% !important; }
  .anote--r { top: 76% !important; }
  .anote[data-anchor^="size"], .anote[data-anchor^="board"] { left: var(--pad); right: auto; text-align: left; }
  .anote[data-anchor^="engrave"], .anote[data-anchor^="latch"] { left: 0; right: 0; margin-inline: auto; text-align: center; }
  .anote[data-anchor^="sheet"], .anote[data-anchor^="slides"] { left: auto; right: var(--pad); text-align: right; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .anote__h { font-size: 12px; line-height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .anatomy { height: auto; }
  .anatomy__pin { position: relative; }
}

/* =========================================================
   Section heads
   ========================================================= */
.section { position: relative; padding: 160px 0; }
.section--tight { padding: 120px 0; }
.shead { align-items: start; margin-bottom: 80px; }
.shead__labels { padding-top: 24px; max-width: 220px; }
.shead__aside { justify-self: end; align-self: center; display: flex; gap: 10px; }

/* =========================================================
   Benefits
   ========================================================= */
/* benefits list: icon + heading only; the detail slides open on hover, keyboard focus or tap */
.section--benefits { padding: 48px 0 90px; }
.benefits { column-gap: 30px; row-gap: 22px; }
.benefit { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-items: start; outline: none; cursor: default; }
.benefit__icon { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; transition: background 0.3s, color 0.3s; }
.benefit__icon svg { width: 24px; height: 24px; }
.benefit .caps-24 { display: flex; align-items: center; min-height: 52px; font-size: 16px; line-height: 20px; }
.benefit__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease); }
.benefit__more > .text { overflow: hidden; min-height: 0; max-width: 300px; color: var(--muted-2); }
.benefit:focus-within .benefit__more { grid-template-rows: 1fr; opacity: 1; }
.benefit:focus-within .benefit__icon { background: var(--ink); color: var(--lime); }
.benefit:focus-visible .benefit__icon { box-shadow: 0 0 0 3px var(--blue); }
@media (hover: hover) {
  .benefit:hover .benefit__more { grid-template-rows: 1fr; opacity: 1; }
  .benefit:hover .benefit__icon { background: var(--ink); color: var(--lime); }
}

@keyframes fadein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.meta-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 14px 0 24px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.meta-list li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 12px; background: var(--muted); vertical-align: -1px; }

/* =========================================================
   FAQ accordion
   ========================================================= */
/* the whole question list stays folded away until "Show questions" or the FAQs heading is clicked */
.section--faq { padding: 40px 0 90px; }
.section--faq .shead { margin-bottom: 0; }
.section--faq .shead h2 { cursor: pointer; }
.faq-toggle svg { width: 10px; height: 6px; transition: transform 0.4s var(--ease); }
.faq-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.6s var(--ease); }
.faq-panel.is-collapsible:not(.is-open) { grid-template-rows: 0fr; }
.faq-panel__inner { overflow: hidden; min-height: 0; }
.faq-panel .faq { margin-top: 60px; }
.faq { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); transition: background 0.45s var(--ease); }
.faq__item.is-open { background: var(--sky); }
.faq__q { width: 100%; text-align: left; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px var(--pad); align-items: center; }
.faq__num { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; color: var(--muted); transition: font-size 0.4s var(--ease), color 0.3s; }
.faq__title { grid-column: 2 / span 2; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; padding-right: 20px; }
.faq__icon { grid-column: 4; justify-self: end; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(16, 17, 21, 0.2); display: grid; place-items: center; transition: transform 0.4s var(--ease), background 0.3s; }
.faq__icon svg { width: 12px; height: 12px; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); background: var(--white); }
.faq__item.is-open .faq__num { opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 var(--pad) 36px; }
.faq__a-inner .text { grid-column: 2 / span 2; max-width: 620px; color: var(--muted-2); }
.faq__item.is-open .faq__q { padding-bottom: 14px; }
.faq__big { grid-column: 1; grid-row: 1; align-self: end; font-size: 60px; line-height: 1; letter-spacing: -0.02em; }

/* compact FAQ: two columns of slim rows (home page) */
.faq--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; padding: 0 var(--pad); border-bottom: 0; }
.faq--compact .faq__item { border-top: 1px solid var(--line); }
.faq--compact .faq__item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
.faq--compact .faq__item.is-open { background: none; }
.faq--compact .faq__q { grid-template-columns: 34px minmax(0, 1fr) 28px; column-gap: 12px; padding: 17px 0; }
.faq--compact .faq__item.is-open .faq__q { padding-bottom: 8px; }
.faq--compact .faq__num { grid-column: 1; font-size: 11px; }
.faq--compact .faq__item.is-open .faq__num { opacity: 1; color: var(--blue); }
.faq--compact .faq__title { grid-column: 2; padding-right: 0; font-size: 14px; line-height: 18px; transition: color 0.3s; }
.faq--compact .faq__q:hover .faq__title, .faq--compact .faq__item.is-open .faq__title { color: var(--blue); }
.faq--compact .faq__icon { grid-column: 3; width: 28px; height: 28px; }
.faq--compact .faq__icon svg { width: 10px; height: 10px; }
.faq--compact .faq__item.is-open .faq__icon { background: var(--ink); border-color: var(--ink); color: var(--white); }
.faq--compact .faq__a-inner { grid-template-columns: 34px minmax(0, 1fr) 28px; column-gap: 12px; align-items: start; padding: 0 0 20px; }
.faq--compact .faq__a-inner .text { grid-column: 2; max-width: none; margin: 0; font-size: 14px; line-height: 21px; }
@media (max-width: 800px) {
  .faq--compact { grid-template-columns: minmax(0, 1fr); }
  .faq--compact .faq__item:nth-last-child(-n + 2) { border-bottom: 0; }
  .faq--compact .faq__item:last-child { border-bottom: 1px solid var(--line); }
  .faq--compact .faq__q { grid-template-columns: 30px minmax(0, 1fr) 28px !important; padding: 15px 0; }
  .faq--compact .faq__title, .faq--compact .faq__icon, .faq--compact .faq__num { grid-column: auto !important; }
  .faq--compact .faq__title { font-size: 13px; }
  .faq--compact .faq__a-inner { grid-template-columns: 30px minmax(0, 1fr) 28px !important; }
  .faq--compact .faq__a-inner .text { grid-column: 2 !important; }
}

/* =========================================================
   Shipping & pickup
   Everything leaves one shed, so the map is the anchor: a pin on
   Coolum Beach with freight routes running out of it, and the three
   ways it can travel numbered alongside.
   ========================================================= */
.section--shipping { padding: 20px 0 44px; }
/* this section carries less weight than the hero sections, so it runs tighter:
   smaller heading, a shorter gap under the header and a trimmed lede */
.section--shipping .shead { margin-bottom: 22px; }
.section--shipping .hw__lede { margin-top: 14px; font-size: clamp(15px, 1.15vw, 17px); max-width: 560px; }
/* The map's height follows its 664×470 viewBox, so at an even 50/50 split it ran
   556px tall against 223px of text beside it — 333px of dead space, with the map
   setting the row height on its own. A narrower map column fixes the height at
   source and gives the three options the width they were short of. */
.ship { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: 34px; padding: 0 var(--pad); align-items: center; }

/* the map panel */
.shipmap { position: relative; padding: 13px 13px 11px; border: 1px solid var(--line); border-radius: 0 28px 0 28px; background: radial-gradient(70% 60% at 58% 42%, #fff, rgba(255, 255, 255, 0) 72%), linear-gradient(160deg, #eff1f3, #dfe2e6); }
.shipmap__status { display: flex; align-items: center; gap: 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.shipmap__status .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25); }
.shipmap__svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.shipmap__grid { fill: none; stroke: rgba(16, 17, 21, 0.14); stroke-width: 1; stroke-dasharray: 2 6; }
.shipmap__mass { filter: drop-shadow(0 8px 16px rgba(16, 17, 21, 0.13)); }
.shipmap__land { fill: url(#shipLand); stroke: rgba(16, 17, 21, 0.45); stroke-width: 1.5; stroke-linejoin: round; }
.shipmap__isle { fill: url(#shipLand); stroke: rgba(16, 17, 21, 0.4); stroke-width: 1.2; stroke-linejoin: round; }
.shipmap__route { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 4 7; opacity: 0.55; }
.shipmap__ring { fill: none; stroke: var(--blue); stroke-width: 1.3; opacity: 0.5; }
.shipmap__city { fill: var(--blue); opacity: 0.85; }
.shipmap__ping { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.shipmap__pin { fill: var(--lime); stroke: var(--ink); stroke-width: 1.6; }
.shipmap__lead { stroke: var(--ink); stroke-width: 1.2; opacity: 0.4; }
.shipmap__name { font-family: var(--font-wide); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--ink); }
.shipmap__sub { font-family: var(--font-wide); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: rgba(16, 17, 21, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .shipmap__route { animation: ship-flow 2.2s linear infinite; }
  .shipmap__ping { animation: ship-ping 2.8s var(--ease) infinite; }
}
@keyframes ship-flow { to { stroke-dashoffset: -22; } }
@keyframes ship-ping { 0% { opacity: 0.5; transform: scale(0.45); } 70%, 100% { opacity: 0; transform: scale(2.6); } }

/* the three ways, as numbered rows */
.shipway { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); transition: background 0.4s var(--ease), padding 0.4s var(--ease); }
.shipway:last-child { border-bottom: 1px solid var(--line); }
.shipway__n { font-size: 30px; line-height: 0.95; letter-spacing: -0.02em; color: rgba(16, 17, 21, 0.25); font-variant-numeric: tabular-nums; transition: color 0.35s; }
.shipway__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; }
.shipway__price { flex: none; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.shipway--free .shipway__price { padding: 5px 11px; border-radius: 20px; background: var(--lime); color: var(--ink); }
.shipway__text { margin-top: 10px; color: var(--muted-2); }
.shipway .meta-list { margin: 12px 0 0; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
/* each way sits collapsed to its heading and opens on hover; focus does the
   same so a tap still opens it on touch, where there's no hover at all */
.shipway__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease); }
.shipway__more > div { overflow: hidden; min-height: 0; }
.shipway:focus-within .shipway__more { grid-template-rows: 1fr; opacity: 1; }
.shipway:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) {
  .shipway:hover .shipway__more { grid-template-rows: 1fr; opacity: 1; }
}
@media (hover: hover) {
  .shipway:hover { background: var(--sky); padding-left: 14px; padding-right: 14px; }
  .shipway:hover .shipway__n { color: var(--ink); }
}

/* the pickup band: the one option with no freight on it */
.shippick { margin-top: 20px; padding: 0 var(--pad); }
.shippick__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 24px; background: var(--lime); border-radius: 0 28px 0 28px; }
.shippick__label { display: flex; align-items: center; gap: 9px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.shippick__label svg { width: 15px; height: 15px; }
.shippick__addr { margin-top: 6px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; letter-spacing: -0.01em; }

@media (max-width: 1100px) {
  .ship { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .shipmap { max-width: 560px; }
}
@media (max-width: 800px) {
  .section--shipping { padding: 20px 0 70px; }
  .shipmap { padding: 18px 16px 16px; }
  .shipway { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .shipway__n { font-size: 32px; }
  .shippick { margin-top: 30px; }
  .shippick__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px; }
}

/* =========================================================
   Contact CTA (dark, mad-libs form)
   ========================================================= */
.cta { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.cta__hero { position: relative; height: 760px; }
.cta__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 17, 21, 0.25) 0%, rgba(16, 17, 21, 0) 40%, rgba(16, 17, 21, 0.7) 85%, var(--ink) 100%); }
.cta__head { position: absolute; inset: 0; z-index: 2; padding-top: 150px; padding-bottom: 60px; grid-template-rows: auto 1fr; }
.cta__head .display { grid-column: 1 / span 2; align-self: end; }
.cta__contacts { grid-column: 4; align-self: end; display: grid; gap: 14px; padding-bottom: 20px; }
.cta__contacts div { display: flex; gap: 24px; }
.cta__contacts dt { width: 60px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.cta__contacts a:hover { color: var(--lime); }

.madlib { position: relative; z-index: 2; padding: 20px var(--pad) 120px; }
.madlib__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 6px; font-size: clamp(30px, 4.17vw, 60px); line-height: 1.2; letter-spacing: -0.02em; }
.madlib__line + .madlib__line { margin-top: 10px; }
.ml-input {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 260px;
  height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(253, 254, 255, 0.3);
  background: transparent;
  font-size: 20px;
  color: var(--white);
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.ml-input--grow { max-width: none; }
.ml-input::placeholder { color: rgba(253, 254, 255, 0.45); }
.ml-input:focus { border-color: var(--lime); }
.madlib__line--message { margin-bottom: 50px; }
/* message: a plain line like the other blanks until it's used, then a full box */
.ml-textarea {
  flex: 1 1 140px;
  max-width: none;
  height: auto;
  min-height: 44px;
  padding: 7px 0;
  border-radius: 0;
  font-family: var(--font);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  overflow: hidden;
  resize: none;
  transition: border-color 0.3s, min-height 0.45s var(--ease), padding 0.45s var(--ease), border-radius 0.45s var(--ease);
}
.madlib__line--message.is-open { flex-direction: column; align-items: stretch; row-gap: 20px; margin-top: 30px; }
.madlib__line--message.is-open .ml-textarea {
  flex: none;
  width: 100%;
  min-height: 220px;
  padding: 18px 22px;
  border: 1px solid rgba(253, 254, 255, 0.3);
  border-radius: 14px;
  text-align: left;
  overflow: auto;
  resize: vertical;
}
.madlib__line--message.is-open .ml-textarea:focus { border-color: var(--lime); }
.ml-select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23fdfeff' stroke-opacity='.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") right 6px center no-repeat; padding-right: 22px; }
.ml-select option { color: var(--ink); }
.madlib__legal { margin: 50px 0 34px; text-align: center; font-size: 12px; color: rgba(253, 254, 255, 0.6); }
.madlib__legal a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.madlib .btn--wide { color: var(--white); border-color: rgba(253, 254, 255, 0.3); }
.madlib .btn--wide:hover { background: var(--white); color: var(--ink); }
/* "Contact us" glows green, on and off, so the one thing to press can't be missed */
.on-dark .madlib .btn--wide { animation: send-glow 2.2s ease-in-out infinite; }
.on-dark .madlib .btn--wide:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: 0 0 34px rgba(220, 243, 67, 0.5); animation: none; }
.on-dark .madlib .btn--wide:hover .dot { background: var(--ink); box-shadow: 0 0 0 3px rgba(16, 17, 21, 0.15); }
@keyframes send-glow {
  0%, 100% { background-color: rgba(135, 198, 0, 0.05); border-color: rgba(135, 198, 0, 0.6); box-shadow: 0 0 0 0 rgba(135, 198, 0, 0), inset 0 0 0 0 rgba(181, 236, 44, 0); }
  50% { background-color: rgba(135, 198, 0, 0.26); border-color: #b5ec2c; box-shadow: 0 0 30px 3px rgba(135, 198, 0, 0.55), inset 0 0 22px 0 rgba(181, 236, 44, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .on-dark .madlib .btn--wide { animation: none; background-color: rgba(135, 198, 0, 0.16); border-color: #b5ec2c; box-shadow: 0 0 24px rgba(135, 198, 0, 0.4); }
}
.form-note { margin-top: 18px; text-align: center; color: var(--lime); min-height: 20px; }
/* "My design": the design from the builder, attached as a card (main.js, "the design card").
   The line sits in the big madlib type, so everything inside sets its own size. */
.madlib [hidden] { display: none !important; }
.madlib__line--design { align-items: center; }
.design-pick, .design-paste { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.design-paste { flex: 1 1 420px; }
.design-paste__input { flex: 1 1 220px; max-width: none; font-size: 16px; text-align: left; }
.design-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 18px;
  border: 1px solid rgba(253, 254, 255, 0.3); border-radius: 40px;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 1; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.design-btn:hover { border-color: var(--lime); }
.design-btn:disabled { opacity: 0.5; cursor: progress; }
.design-btn--main { background: var(--white); border-color: var(--white); color: var(--ink); }
.design-btn--main:hover { background: var(--lime); border-color: var(--lime); }
.design-btn--quiet { border-color: transparent; color: rgba(253, 254, 255, 0.6); }
.design-btn--quiet:hover { border-color: transparent; color: var(--white); }
.design-btn .dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25); }
.design-optional { margin-left: 4px; font-size: 14px; line-height: 1; letter-spacing: 0; color: rgba(253, 254, 255, 0.45); }
.design-note { flex: 1 1 100%; font-size: 15px; line-height: 22px; letter-spacing: 0; color: var(--lime); }
.design-note:empty { display: none; }
.design-inline { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.design-card {
  flex: 1 1 100%; display: flex; align-items: flex-start; gap: 22px; margin-top: 6px; padding: 16px;
  border: 1px solid rgba(253, 254, 255, 0.18); border-radius: 0 20px 0 20px; background: rgba(253, 254, 255, 0.04);
  font-size: 15px; line-height: 21px; letter-spacing: 0; transition: border-color 0.3s;
}
.design-card.is-stale { border-color: var(--lime); }
.design-card__img { display: block; flex: none; width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 12px 0 12px; background: #b4b8be; }
.design-card__body { flex: 1 1 auto; min-width: 0; }
.design-card__tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lime); }
.design-card__tag::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23101115' stroke-width='2.4'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.design-card.is-stale .design-card__tag::before { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23101115' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 4v5M8 12v.01'/%3E%3C/svg%3E") center / 10px no-repeat; }
.design-card__title { margin-top: 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.design-card__facts { margin-top: 4px; color: rgba(253, 254, 255, 0.7); }
.design-card__price { margin-top: 6px; color: rgba(253, 254, 255, 0.55); font-size: 13px; }
.design-card__price b { margin-right: 4px; font-size: 18px; font-weight: 600; color: var(--white); }
.design-card__what { margin-top: 6px; font-size: 13px; line-height: 18px; color: rgba(253, 254, 255, 0.55); }
.design-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 800px) {
  .design-card { flex-direction: column; gap: 14px; }
  .design-card__img { width: 100%; }
  .design-optional { flex-basis: 100%; margin: 4px 0 0; }
}

/* =========================================================
   Pay now (deposits and invoices). Settings in data.js → payments.
   Lime copy on the left; the card floats on the map half, styled
   as a docket with a tear-off receipt stub.
   ========================================================= */
.pay { position: relative; background: var(--lime); overflow: hidden; }
.pay__art { position: absolute; top: 0; right: 0; bottom: 0; left: calc(var(--pad) + (100% - 2 * var(--pad)) * 0.4); background: url(../img/map-b.svg) center/cover; }
.pay__grid { position: relative; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start; padding-top: 100px; padding-bottom: 100px; }

.pay__intro { grid-column: 1; padding-right: clamp(24px, 4vw, 64px); }
.pay__intro .display { margin-top: 28px; }
.pay__lede { margin-top: 20px; max-width: 420px; font-size: 18px; line-height: 27px; color: var(--muted-2); }
/* interactive steps: follow the card, tick when done, open for detail */
.pay__steps { margin-top: 34px; max-width: 450px; }
.pay__step { position: relative; }
.pay__step + .pay__step { margin-top: 10px; }
.pay__step:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 46px; bottom: -8px; width: 1px; background: rgba(16, 17, 21, 0.25); transition: background 0.4s var(--ease), width 0.4s var(--ease); }
.pay__step.is-done:not(:last-child)::after { width: 2px; left: 17px; background: var(--ink); }
.pay__step-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; column-gap: 18px; align-items: center; width: 100%; padding: 4px 0; text-align: left; cursor: pointer; }
.pay__step-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.pay__step-num { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.pay__step-num em { font-style: normal; transition: opacity 0.2s; }
.pay__step-num svg { position: absolute; width: 15px; height: 15px; opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.pay__step.is-current .pay__step-num,
.pay__step.is-done .pay__step-num { background: var(--ink); color: var(--lime); }
.pay__step.is-current .pay__step-num { box-shadow: 0 0 0 5px rgba(16, 17, 21, 0.12); }
.pay__step.is-done .pay__step-num em { opacity: 0; }
.pay__step.is-done .pay__step-num svg { opacity: 1; transform: none; }
.pay__step-head:hover .pay__step-num { transform: scale(1.08); }
.pay__step-title { min-width: 0; }
.pay__step-title b { display: block; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.pay__step-title small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--muted-2); overflow-wrap: anywhere; transition: color 0.3s; }
.pay__step.is-done .pay__step-title small { color: var(--ink); font-weight: 500; }
.pay__step-toggle { position: relative; width: 22px; height: 22px; border: 1px solid rgba(16, 17, 21, 0.3); border-radius: 50%; transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s; }
.pay__step-toggle::before,
.pay__step-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.pay__step-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.35s var(--ease); }
.pay__step-head:hover .pay__step-toggle { border-color: var(--ink); }
.pay__step.is-open .pay__step-toggle { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.pay__step.is-open .pay__step-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.pay__step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.pay__step.is-open .pay__step-body { grid-template-rows: 1fr; }
.pay__step-inner { min-height: 0; overflow: hidden; padding-left: 54px; opacity: 0; transition: opacity 0.3s var(--ease); }
.pay__step.is-open .pay__step-inner { opacity: 1; transition-delay: 0.1s; }
.pay__step-inner > :first-child { margin-top: 8px; }
.pay__step-inner > :last-child { margin-bottom: 8px; }
.pay__step-inner p { max-width: 370px; font-size: 14px; line-height: 21px; color: var(--muted-2); }
.pay__step-inner p + p { margin-top: 6px; }
.pay__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pay__chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid rgba(16, 17, 21, 0.3); border-radius: 20px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pay__chip svg { width: 16px; height: 16px; }
.pay__chip:hover { border-color: var(--ink); }
.pay__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.pay__facts { display: grid; gap: 6px; max-width: 370px; margin-top: 12px; }
.pay__facts li { position: relative; padding-left: 16px; font-size: 14px; line-height: 20px; color: var(--muted-2); }
.pay__facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.pay__facts b { color: var(--ink); font-weight: 600; }
.pay__go { display: inline-flex; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--ink); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.pay__go::after { content: "→"; margin-left: 8px; transition: transform 0.25s var(--ease); }
.pay__go:hover::after { transform: translateX(3px); }
.pay__go:focus-visible, .pay__chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* hovering a step points at the matching part of the card */
.pay .is-hint { box-shadow: 0 0 0 2px var(--lime), 0 0 0 7px rgba(220, 243, 67, 0.22); transition: box-shadow 0.3s var(--ease); }
.pay__fields:has(.is-hint) { overflow: visible; }
.pay__field.is-hint { border-radius: 16px; }
.pay__help { margin-top: 40px; padding-top: 20px; max-width: 420px; border-top: 1px solid rgba(16, 17, 21, 0.2); font-size: 14px; color: var(--muted-2); }
.pay__help a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the docket */
.pay__card { grid-column: 2; justify-self: center; width: min(580px, calc(100% - 2 * clamp(24px, 4vw, 64px))); max-width: 580px; color: var(--white); filter: drop-shadow(0 34px 44px rgba(16, 17, 21, 0.38)); }
.pay__main,
.pay__stub { position: relative; background: var(--ink); }
.pay__main {
  padding: 34px 34px 28px;
  border-radius: 28px 28px 0 0;
  -webkit-mask: radial-gradient(circle 12px at 0 100%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 100%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 100%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 100%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat;
}
.pay__stub {
  padding: 28px 34px 32px;
  border-radius: 0 0 28px 28px;
  background: #17181d;
  -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, transparent 11.5px, #000 12px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 0, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, transparent 11.5px, #000 12px) right / 51% 100% no-repeat;
}
.pay__stub::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; border-top: 1.5px dashed rgba(253, 254, 255, 0.2); }

.pay__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(253, 254, 255, 0.7); }
.pay__lock { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(220, 243, 67, 0.14); color: var(--lime); }
.pay__lock svg { width: 15px; height: 15px; }
.pay__aud { margin-left: auto; padding: 3px 9px; border: 1px solid rgba(253, 254, 255, 0.2); border-radius: 20px; }

.pay__fields { overflow: hidden; border: 1px solid rgba(253, 254, 255, 0.14); border-radius: 16px; background: #1a1b20; transition: border-color 0.25s var(--ease); }
.pay__fields:focus-within { border-color: rgba(220, 243, 67, 0.65); }
.pay__field { position: relative; display: block; padding: 14px 20px 10px; cursor: text; transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.pay__field + .pay__field { border-top: 1px solid rgba(253, 254, 255, 0.1); }
.pay__field:focus-within { background: #1f2026; }
.pay__field:has(input[aria-invalid="true"]) { box-shadow: inset 3px 0 #ff8a7a; }
.pay__field > span { display: block; font-size: 12px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(253, 254, 255, 0.55); }
.pay__field input { display: block; width: 100%; height: 36px; margin-top: 2px; padding: 0; border: 0; background: transparent; outline: none; color: var(--white); font-size: 19px; }
.pay__field input::placeholder { color: rgba(253, 254, 255, 0.28); }
.pay__field--amount input { height: 58px; padding-left: 36px; font-family: var(--font-wide); font-stretch: 125%; font-size: 42px; font-weight: 600; letter-spacing: -0.01em; }
.pay__field--amount b { position: absolute; left: 20px; bottom: 22px; font-family: var(--font-wide); font-stretch: 125%; font-size: 30px; line-height: 1; font-weight: 600; color: var(--lime); }

.pay__methods { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.pay__label { margin-bottom: 10px; padding: 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(253, 254, 255, 0.55); }
.pay__method-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.pay__method { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid rgba(253, 254, 255, 0.14); border-radius: 14px; cursor: pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.pay__method:hover { border-color: rgba(253, 254, 255, 0.32); }
.pay__method:has(input:checked) { border-color: var(--lime); background: rgba(220, 243, 67, 0.07); }
.pay__method:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.pay__method input { position: absolute; opacity: 0; pointer-events: none; }
/* each method's logo is its own little app-style tile (the art is in main.js, PAY_LOGO);
   the picked one tips up with a lime ring, and a sheen runs across it */
.pay__method-icon { flex: none; position: relative; overflow: hidden; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.1), 0 8px 16px -10px rgba(0, 0, 0, 0.9); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.pay__method-icon svg { display: block; width: 100%; height: 100%; }
.pay__method-icon--card { background: radial-gradient(120% 95% at 18% 0%, #3b404d, #121418 72%); }
.pay__method-icon--paypal { background: linear-gradient(160deg, #ffffff 30%, #dde8f7); }
.pay__method-icon--bank { background: radial-gradient(120% 95% at 18% 0%, #7196ff, #2340b0 74%); }
.pay__method-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 66%); transform: translateX(-130%); pointer-events: none; }
.pay__method:hover .pay__method-icon { transform: translateY(-2px); }
.pay__method:has(input:checked) .pay__method-icon { transform: translateY(-2px) rotate(-5deg); box-shadow: 0 0 0 2px #1b1d22, 0 0 0 3.5px var(--lime), 0 10px 22px -8px rgba(220, 243, 67, 0.5); }
.pay__method:has(input:checked) .pay__method-icon::after { animation: pm-sheen 0.9s var(--ease) 0.1s; }
@keyframes pm-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .pay__method-icon { transition: none; }
  .pay__method:has(input:checked) .pay__method-icon::after { animation: none; }
}
.pay__method-text { min-width: 0; }
/* three ways to pay: the icon goes above the name so each name has the tile's width */
.pay__method-grid:has(> :nth-child(3)) .pay__method { flex-direction: column; align-items: flex-start; gap: 10px; }
.pay__method b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.pay__method small { display: block; font-size: 13px; line-height: 16px; color: rgba(253, 254, 255, 0.5); }

.pay__detail { margin-top: 16px; }
.pay__accepts { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(253, 254, 255, 0.45); }
.pay__small { margin-top: 6px; font-size: 14px; line-height: 19px; color: rgba(253, 254, 255, 0.6); }
.pay__rows { margin: 0; }
.pay__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px dashed rgba(253, 254, 255, 0.14); }
.pay__row:last-child { border-bottom: 0; }
.pay__row dt { flex: none; font-size: 12px; color: rgba(253, 254, 255, 0.55); }
.pay__row dd { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.pay__row dd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay__copy { flex: none; padding: 3px 9px; border: 1px solid rgba(253, 254, 255, 0.2); border-radius: 20px; font-size: 11px; color: rgba(253, 254, 255, 0.8); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pay__copy:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pay__copy:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.pay__summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.pay__summary div { min-width: 0; }
.pay__summary dt { font-size: 12px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(253, 254, 255, 0.5); }
.pay__summary dd { margin: 4px 0 0; overflow: hidden; font-size: 16px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay__summary .pay__summary-total { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(253, 254, 255, 0.1); }
.pay__summary-total dd { margin: 0; font-family: var(--font-wide); font-stretch: 125%; font-size: 38px; line-height: 42px; font-weight: 600; }
.pay .pay__submit { height: 66px; margin-top: 20px; background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pay .pay__submit:hover { background: var(--white); border-color: var(--white); }
.pay__submit .dot { background: var(--ink); }
.pay__note { margin-top: 12px; font-size: 13px; line-height: 19px; text-align: center; color: var(--lime); }
.pay__note:empty { display: none; }

@media (max-width: 900px) {
  .pay__grid { padding-top: 70px; padding-bottom: 60px; row-gap: 44px; }
  .pay__grid { grid-template-columns: minmax(0, 1fr); }
  .pay__intro, .pay__card { grid-column: 1 / -1; }
  .pay__card { width: 100%; max-width: 560px; }
  .pay__field--amount input { height: 50px; padding-left: 30px; font-size: 34px; }
  .pay__field--amount b { left: 18px; bottom: 19px; font-size: 26px; }
  .pay__summary-total dd { font-size: 30px; line-height: 34px; }
  .pay__intro { padding-right: 0; }
  .pay__art { top: auto; left: 0; height: 440px; }
  .pay__main { padding: 20px 18px 18px; }
  .pay__stub { padding: 20px 18px 20px; }
  .pay__method { gap: 8px; padding: 9px; }
  .pay__method-icon { width: 38px; height: 38px; border-radius: 11px; }
}

.field { position: relative; display: flex; align-items: center; border-bottom: 1px solid rgba(16, 17, 21, 0.25); }
.field + .field { margin-top: 18px; }
.field input { flex: 1; height: 56px; border: 0; background: transparent; outline: none; font-size: 16px; }
.field input::placeholder { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--muted-2); }
.field:focus-within { border-color: var(--ink); }
.link-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.link-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(16, 17, 21, 0.15); transition: transform 0.3s; }
.link-btn:hover .dot { transform: scale(1.4); }

/* =========================================================
   Footer
   ========================================================= */
.footer { position: relative; background: var(--ink); color: var(--white); padding: 52px 0 20px; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; background: url(../img/topo-lines.svg) center/cover; opacity: 0.5; }
.footer .grid { position: relative; z-index: 2; }
.footer__main { align-items: start; row-gap: 30px; }
.footer__brand { grid-column: 1 / span 1; }
.footer__brand .logo__word { font-size: 21px; letter-spacing: 0.12em; }
.footer__brand .logo__sub { font-size: 7px; letter-spacing: 0.3em; }
.footer__tag { margin-top: 12px; max-width: 260px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(253, 254, 255, 0.55); }
.footer__col h2 { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(253, 254, 255, 0.35); margin-bottom: 10px; }
.footer__col a { font-size: 13px; line-height: 17px; transition: color 0.2s; }
.footer__col a:hover { color: var(--lime); }
.footer__col--contact { grid-column: 4; }
.footer__col--contact ul { display: grid; gap: 5px; }
.socials { display: flex; gap: 7px; margin-top: 16px; }
.socials a { width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; transition: background 0.3s; }
.socials a:hover { background: var(--lime); }
.socials svg { width: 12px; height: 12px; }
.socials--bottom { display: none; } /* phones only */
.footer__bottom { margin-top: 34px; padding-top: 14px; align-items: center; }
.footer__bottom::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 14px; background: rgba(253, 254, 255, 0.12); }
.copyright { grid-column: 1 / span 2; font-size: 12px; color: rgba(253, 254, 255, 0.45); }
.footer__legal { grid-column: 3 / span 2; justify-self: end; display: flex; gap: 18px; font-size: 12px; color: rgba(253, 254, 255, 0.45); }
.footer__legal a:hover { color: var(--white); }

/* =========================================================
   Sub-page heroes
   ========================================================= */
.crumbs { display: flex; gap: 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.crumbs a { color: var(--lime); }
.crumbs span { opacity: 0.5; }
.crumbs--dark a { color: var(--blue); }

.page-hero { position: relative; height: 100vh; min-height: 640px; color: var(--white); background: var(--ink); overflow: hidden; }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 17, 21, 0.45) 0%, rgba(16, 17, 21, 0) 35%, rgba(16, 17, 21, 0) 60%, rgba(16, 17, 21, 0.55) 100%); }
.page-hero__top { position: absolute; top: calc(var(--header-h) + 40px); left: var(--pad); right: var(--pad); z-index: 2; }
.page-hero__top .display { margin-top: 6px; }
.page-hero__bottom { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 2; align-items: end; }
.page-hero__bottom .text { max-width: 290px; }

.page-intro { padding: calc(var(--header-h) + 60px) 0 120px; position: relative; }
.page-intro__crumbs { margin-bottom: 80px; }
.page-intro__statement { max-width: 700px; }
.page-intro__text { margin-top: 40px; max-width: 380px; color: var(--muted-2); }

/* three big words */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 var(--pad); }
.pillar { border-top: 1px solid var(--line); padding-top: 30px; text-align: center; }
.pillar .display { font-size: clamp(56px, 7vw, 100px); }
.pillar .text { margin: 20px auto 0; max-width: 300px; color: var(--muted-2); }

/* process steps */
.steps { counter-reset: step; border-bottom: 1px solid var(--line); }
.step { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 40px var(--pad); border-top: 1px solid var(--line); align-items: start; transition: background 0.4s; }
.step:hover { background: var(--sky); }
.step__num { font-size: 60px; line-height: 1; letter-spacing: -0.02em; }
.step h3 { grid-column: 2; }
.step .text { grid-column: 3 / span 2; max-width: 520px; color: var(--muted-2); }

/* timeline (about) */
.timeline__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 60px var(--pad); border-top: 1px solid var(--line); gap: 0; align-items: end; }
.timeline__row:last-child { border-bottom: 1px solid var(--line); }
.timeline__year { font-size: clamp(64px, 11vw, 160px); line-height: 0.85; letter-spacing: -0.03em; }
.timeline__img { grid-column: 2 / span 2; width: 78%; aspect-ratio: 4 / 3; overflow: hidden; }
.timeline__img img { width: 100%; height: 100%; object-fit: cover; }
.timeline__body { grid-column: 4; align-self: start; }
.timeline__body h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; margin-bottom: 18px; }
.timeline__body .text { color: var(--muted-2); }

/* team */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0 var(--pad); }
.member figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: url(../img/map-a.svg) center/cover; }
.member figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.member:hover figure img { transform: scale(1.04); }
.member h3 { margin-top: 20px; }
.member .role { margin-top: 6px; }
.member .text { margin-top: 14px; color: var(--muted-2); }

/* yachts listing */
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.5fr; gap: 20px; padding: 0 var(--pad); margin-bottom: 40px; }
.filters select, .filters input { height: 48px; width: 100%; border: 0; border-bottom: 1px solid rgba(16, 17, 21, 0.2); background: transparent; outline: none; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--ink); appearance: none; -webkit-appearance: none; }
.filters select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23101115'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") right 4px center no-repeat; }
.filters input::placeholder { color: var(--muted); }
.yacht-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 20px; padding: 0 var(--pad); }
.ycard__img { aspect-ratio: 680 / 420; overflow: hidden; background: var(--sky); position: relative; }
.ycard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ycard:hover .ycard__img img { transform: scale(1.05); }
.ycard__badge { position: absolute; top: 16px; left: 16px; background: var(--lime); color: var(--ink); padding: 6px 12px; border-radius: 30px; }
.ycard__name { margin-top: 24px; transition: color 0.3s; }
.ycard:hover .ycard__name { color: var(--blue); }
.ycard__specs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 12px; }
.ycard__specs li { display: inline-flex; gap: 6px; }
.ycard__specs li + li::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--muted); align-self: center; }
.ycard__specs b { font-family: var(--font-wide); font-stretch: var(--wide); font-weight: 600; text-transform: uppercase; }
.empty-note { padding: 40px var(--pad); color: var(--muted); display: none; }

/* yacht detail */
.ydetail__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 var(--pad); border-top: 1px solid var(--line); }
.ydetail__specs div { padding: 30px 0; border-bottom: 1px solid var(--line); }
.ydetail__specs dt { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.ydetail__specs dd { margin-top: 10px; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 320px; gap: 20px; padding: 0 var(--pad); }
.gallery figure { overflow: hidden; }
.gallery figure:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* article */
.article { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.article p { font-size: 18px; line-height: 30px; margin-bottom: 24px; color: rgba(16, 17, 21, 0.85); }
.article h2 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; margin: 50px 0 20px; }
.article figure { margin: 40px 0; }
.article figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.article__meta { display: flex; gap: 20px; align-items: center; margin-top: 30px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--pad); margin-bottom: 50px; }
.tabs button { height: 36px; padding: 0 20px; border-radius: 40px; border: 1px solid rgba(16, 17, 21, 0.2); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.tabs button.is-active, .tabs button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.res-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 20px; padding: 0 var(--pad); }

/* full-width image band */
.band { position: relative; height: 85vh; min-height: 520px; overflow: hidden; color: var(--white); background: var(--ink); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 17, 21, 0.1) 40%, rgba(16, 17, 21, 0.6)); }
.band__content { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 2; align-items: end; }
.band__content .text { max-width: 300px; }

/* reviews page grid */
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rcard { padding: 60px var(--pad); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; transition: background 0.4s; }
.rcard:nth-child(odd) { border-right: 1px dashed #cfd1d4; }
.rcard:hover { background: var(--sky); }
.rcard .title-l { font-size: clamp(24px, 2.2vw, 32px); }
.rcard .text { color: var(--muted-2); max-width: 520px; }
.rcard footer { margin-top: auto; }

/* faq page groups */
.faq-group + .faq-group { margin-top: 110px; }
.faq-group__label { padding: 0 var(--pad) 24px; }

/* offices */
.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 var(--pad); }
.office { border-top: 1px solid var(--line); padding-top: 30px; }
.office .title-xl { margin-bottom: 20px; }
.office .text { color: var(--muted-2); }
.office a { display: block; margin-top: 6px; font-size: 16px; }
.office a:hover { color: var(--blue); }

/* legal pages */
.legal { max-width: 760px; }
.legal h2 { font-size: 28px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; margin: 44px 0 14px; }
.legal p { font-size: 16px; line-height: 26px; color: rgba(16, 17, 21, 0.8); margin-bottom: 16px; }
.legal .note { padding: 18px 22px; background: var(--sky); border-radius: 8px; font-size: 14px; }

@media (max-width: 800px) {
  .review-grid, .offices { grid-template-columns: 1fr; }
  .rcard:nth-child(odd) { border-right: 0; }
  .band__content { row-gap: 20px; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .nav { display: none; }
  .burger { display: block; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  :root { --pad: 20px; --header-h: 72px; }
  .grid, .faq__q, .faq__a-inner, .step, .timeline__row, .ydetail__specs { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .c1, .c1-2, .c1-3, .c2, .c2-3, .c2-4, .c3, .c3-4, .c4 { grid-column: 1 / -1 !important; }
  .lines span:nth-child(1), .lines span:nth-child(3) { display: none; }
  .section { padding: 90px 0; }
  .section--tight { padding: 70px 0; }
  .shead { margin-bottom: 44px; row-gap: 20px; }
  .shead__labels { padding-top: 0; }
  .shead__aside { justify-self: start; flex-wrap: wrap; }
  .section--faq { padding-bottom: 60px; }
  .faq-panel .faq { margin-top: 36px; }
  .hero__content { row-gap: 24px; padding-bottom: 60px; }
  .section--benefits { padding: 32px 0 60px; }
  .benefits { row-gap: 12px; }
  .benefit { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .benefit__icon { width: 44px; height: 44px; }
  .benefit__icon svg { width: 20px; height: 20px; }
  .benefit .caps-24 { min-height: 44px; font-size: 15px; }
  .benefit__more > .text { max-width: none; padding-bottom: 6px; }
              .faq__q { grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: 10px; padding: 24px var(--pad); }
  .faq__title { grid-column: 2 !important; font-size: 15px; line-height: 20px; }
  .faq__icon { grid-column: 3 !important; }
  .faq__num { grid-column: 1 !important; }
  .faq__big { display: none; }
  .faq__a-inner .text { margin-top: 0; }
  .cta__hero { height: 620px; }
  .cta__head { padding-top: 120px; }
  .madlib__line { column-gap: 12px; }
  .ml-input { max-width: none; font-size: 18px; }
  .footer__main { row-gap: 26px; }
  .socials { justify-self: start; margin-top: 14px; }
  .footer__bottom { margin-top: 26px; row-gap: 10px; }
  .footer__legal { justify-self: start; }
  .pillars, .team, .yacht-grid, .filters { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .timeline__row { row-gap: 30px; }
  .timeline__img { width: 100%; }
  .step { row-gap: 14px; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery figure:first-child { grid-row: auto; }
  .page-hero__bottom { row-gap: 24px; }
}

/* =========================================================
   Preloader (first load). The count runs inline in index.html.
   ========================================================= */
html.is-loading,
html.is-loading body { overflow: hidden; }
.preloader {
  --p: 0%;
  --k: 0;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader::before {
  /* faint contour lines, as on the hero */
  content: "";
  position: absolute;
  inset: -10%;
  background: url("../img/topo-lines.svg") center / cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.preloader.is-done { transform: translateY(-101%); pointer-events: none; }
.preloader__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.4vw, 40px);
  transition: opacity 0.6s var(--ease), transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader.is-done .preloader__inner { opacity: 0; transform: translateY(-70px); }

.preloader__mark { position: relative; }
.preloader__logo { padding: 0 0.3em 0 0.1em; align-items: center; }
.preloader__logo .logo__word { font-size: clamp(34px, 5vw, 64px); letter-spacing: 0.08em; }
.preloader__logo .logo__sub { margin-top: 8px; font-size: clamp(9px, 0.95vw, 13px); letter-spacing: 0.4em; }
.preloader__mark > .preloader__logo:first-child { opacity: 0.14; }
.preloader__mark > .preloader__logo:first-child i { color: inherit; }
.preloader__logo--fill {
  position: absolute;
  inset: 0;
  clip-path: inset(-20% calc(100% - var(--p)) -20% 0);
}

.preloader__count {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-wide);
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pl-roll { display: inline-block; height: 1em; overflow: hidden; line-height: 1; text-align: center; }
.pl-roll__strip { display: block; line-height: 1; will-change: transform; }
.pl-roll--h { width: 0; }
.preloader__pct { margin: 0 0 0.1em 0.18em; font-size: 0.32em; color: var(--lime); }

/* the loading bar wears the downloads' rainbow: a colour-cycling line that fills
   as the page loads, with a soft underglow that grows along with it */
.preloader__bar {
  --rainbow: linear-gradient(90deg, hsl(0 100% 63%), hsl(90 100% 63%), hsl(210 100% 63%), hsl(195 100% 63%), hsl(270 100% 63%), hsl(0 100% 63%));
  position: relative; width: clamp(170px, 18vw, 260px); height: 2px; border-radius: 2px; background: rgba(253, 254, 255, 0.12);
}
.preloader__bar span {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--rainbow); background-size: 200% 100%;
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
  animation: rainbow-glow 2.4s linear infinite;
}
.preloader__bar::after {
  content: ""; position: absolute; left: 0; top: 3px; width: var(--p); height: 20px;
  background: var(--rainbow); background-size: 200% 100%; filter: blur(13px); opacity: 0.85;
  animation: rainbow-glow 2.4s linear infinite; pointer-events: none;
}
.preloader__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade { opacity: 1; transform: none; }
  .rt-char { opacity: 1; }
}

/* =========================================================
   Refinements
   ========================================================= */
/* listing card specs wrap cleanly, no orphan separators */
.ycard__specs { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 28px; }
.ycard__specs li + li::before { display: none; }

@media (max-width: 800px) {
  .ml-input { flex-basis: 100%; max-width: none; }
  .ycard__specs { grid-template-columns: repeat(2, max-content); }
  .meta-list li + li::before { margin: 0 8px; }
}

/* =========================================================
   Closer match to the reference layout
   ========================================================= */
/* oversized wordmark across the top of the home hero */
.hero__logo { position: absolute; top: 24px; left: var(--pad); z-index: 3; color: var(--white); }
.logo--xl .logo__word { font-size: clamp(32px, 4.3vw, 62px); letter-spacing: 0.06em; }
.logo--xl .logo__sub { margin-top: 6px; font-size: clamp(10px, 1vw, 15px); letter-spacing: 0.36em; }
/* home: the oversized wordmark sits in the hero; the small one fades into the
   header corner once you scroll past it */
.header--nologo .logo { opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; }
.header--nologo.is-past-hero .logo { opacity: 1; visibility: visible; }

/* header sits flush over the page, no bar or hairline */
.header.is-solid { box-shadow: none; }


@media (max-width: 1100px) {
  .header--nologo .logo { opacity: 1; visibility: visible; }
  .hero__logo { display: none; }
}


/* =========================================================
   Sub-page structures matching the reference
   ========================================================= */
/* specification list inside a yacht hero */
.hero-specs { display: grid; grid-template-columns: 120px 1fr; gap: 8px 24px; max-width: 420px; }
.hero-specs dt { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: 0.75; }
.hero-specs dd { font-size: 13px; }

/* contact page info rows */
.info-rows { border-top: 1px solid var(--line); }
.info-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px var(--pad); border-bottom: 1px solid var(--line); }
.info-row dt { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.info-row dd { grid-column: 2 / span 3; font-size: 16px; line-height: 26px; }
.info-row a:hover { color: var(--blue); }

/* lime contact block */
.cta--lime { background: var(--lime); color: var(--ink); }
.cta__head--lime { padding-top: 110px; }
.cta--lime .madlib { padding-top: 40px; }
.cta--lime .ml-input { color: var(--ink); border-bottom-color: rgba(16, 17, 21, 0.3); }
.cta--lime .madlib__line--message.is-open .ml-textarea { border-color: rgba(16, 17, 21, 0.3); }
.cta--lime .madlib__line--message.is-open .ml-textarea:focus { border-color: var(--ink); }
.cta--lime .ml-input::placeholder { color: rgba(16, 17, 21, 0.45); }
.cta--lime .ml-input:focus { border-color: var(--ink); }
.cta--lime .ml-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23101115'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.cta--lime .madlib__legal { color: var(--muted-2); }
.cta--lime .madlib__legal a { color: var(--ink); }
.cta--lime .btn--wide { color: var(--ink); border-color: rgba(16, 17, 21, 0.35); }
.cta--lime .btn--wide:hover { background: var(--ink); color: var(--lime); }
.cta--lime .btn--wide .dot { background: var(--ink); box-shadow: 0 0 0 3px rgba(16, 17, 21, 0.15); }
.cta--lime .form-note { color: var(--ink); }
.cta--lime .design-btn { border-color: rgba(16, 17, 21, 0.35); }
.cta--lime .design-btn:hover { border-color: var(--ink); }
.cta--lime .design-btn--main { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.cta--lime .design-btn--quiet { border-color: transparent; color: rgba(16, 17, 21, 0.6); }
.cta--lime .design-optional, .cta--lime .design-card__facts, .cta--lime .design-card__price, .cta--lime .design-card__what { color: rgba(16, 17, 21, 0.65); }
.cta--lime .design-note, .cta--lime .design-card__tag, .cta--lime .design-inline, .cta--lime .design-card__price b { color: var(--ink); }
.cta--lime .design-card { border-color: rgba(16, 17, 21, 0.25); background: rgba(16, 17, 21, 0.04); }
.cta--lime .design-card.is-stale { border-color: var(--ink); }

/* centred FAQ head with category chips */
.faq-head { text-align: center; padding: 0 var(--pad) 70px; }
.faq-head .text { max-width: 420px; margin: 18px auto 0; color: var(--muted-2); }
.tabs--center { justify-content: center; margin-top: 34px; }
.faq-group__head { padding: 0 var(--pad) 22px; font-size: 28px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }

/* testimonial accordion */
.faq--reviews .faq__q { align-items: start; padding: 28px var(--pad); }
.rev-who { display: flex; flex-direction: column; gap: 6px; }
.rev-quote { grid-column: 2 / span 2; }
.faq--reviews .faq__a-inner .text { grid-column: 2 / span 2; }

@media (max-width: 800px) {
  .info-row { grid-template-columns: 1fr; row-gap: 8px; }
  .info-row dd { grid-column: 1 !important; }
  .hero-specs { grid-template-columns: 110px 1fr; }
  .rev-quote, .faq--reviews .faq__a-inner .text { grid-column: 1 !important; }
  .faq--reviews .faq__q { grid-template-columns: 1fr 40px; row-gap: 10px; }
  .faq--reviews .faq__icon { grid-column: 2 !important; }
}

/* final alignment pass against the reference */
.page-hero__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 330px; }

/* active filter chip is lime, as in the reference */
.tabs button.is-active { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.tabs button.is-active:hover { background: var(--lime); color: var(--ink); }

/* the oversized number sits inside the open answer block */
.faq__a-inner { align-items: end; padding-bottom: 40px; }
.faq__big { font-size: 52px; line-height: 0.9; align-self: end; }

/* open testimonial rows pick up the lime highlight */
.faq--reviews .faq__item.is-open { background: var(--lime); }
.faq--reviews .faq__item.is-open .faq__icon { background: transparent; border-color: rgba(16, 17, 21, 0.3); }

/* faint chart lines behind the lime contact panel */
.cta--lime { position: relative; }
.cta--lime::before { content: ""; position: absolute; inset: 0; background: url(../img/map-b.svg) center/cover; opacity: 0.09; pointer-events: none; }
.cta--lime > * { position: relative; z-index: 1; }

/* =========================================================
   Custom work: the cut list (cut.js)
   One workbench. On the left, the sheet on show drawn to scale with the
   pieces nested on it (the one being edited has lime edges to drag), and
   a thumbnail of every sheet the order needs. On the right, the cut list,
   the material of the piece being edited and the instant quote. Under it,
   a line for anything a rectangle can't describe and the four King
   StarBoard strengths.
   ========================================================= */
.sheet { position: relative; padding: 80px 0 64px; background: var(--ink); color: var(--white); overflow: hidden; overflow: clip; }
.sheet::before { content: ""; position: absolute; inset: 0; background: url(../img/topo-lines.svg) center/cover no-repeat; opacity: 0.07; pointer-events: none; }
.sheet > * { position: relative; }
.sheet__head { align-items: start; margin-bottom: 32px; }
.sheet__n { font-size: 12px; color: var(--lime); }
.cut__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sheet button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.bench { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0 var(--pad); border: 1px solid rgba(253, 254, 255, 0.1); border-radius: 0 28px 0 28px; background: #16171b; } /* solid: the chart lines behind the section stop at its edge */
.bench[hidden] { display: none; }
.bench__mat, .bench__h, .bench__all, .cl__head, .cl__add, .mat__tag, .mat__name, .quote__label, .quote__total small, .sheet__custom button, .sheet__facts h3, .quote__break summary {
  font-family: var(--font-wide); font-stretch: var(--wide); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---------- the sheet ---------- */
/* The stage: the material sample and the cut layout share the one space and
   cross-fade (.bench[data-view]). On a wide screen it stays in view while a
   long cut list scrolls past it. */
.bench__stage { min-width: 0; padding: 20px 22px 20px 16px; background: radial-gradient(60% 55% at 50% 45%, rgba(220, 243, 67, 0.07), rgba(220, 243, 67, 0) 70%); }
/* as tall as the tools beside it, up to a screenful: past that it sticks */
.stage__in { position: sticky; top: calc(var(--header-h) + 12px); display: grid; min-height: min(100%, calc(100vh - var(--header-h) - 24px)); }
.stage__slab, .stage__layout { grid-area: 1 / 1; min-width: 0; transition: opacity 0.4s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.4s; }
.bench[data-view="material"] .stage__slab, .bench[data-view="layout"] .stage__layout { transition: opacity 0.45s var(--ease) 0.08s, transform 0.6s var(--ease) 0.08s, visibility 0s linear 0s; }
.bench[data-view="material"] .stage__layout, .bench[data-view="layout"] .stage__slab { opacity: 0; visibility: hidden; pointer-events: none; }
.bench[data-view="material"] .stage__layout { transform: translateY(14px) scale(0.985); }
.bench[data-view="layout"] .stage__slab { transform: scale(1.04); }
.stage__layout { display: flex; flex-direction: column; gap: 14px; }

/* the switch between them */
.stage__tabs { grid-area: 1 / 1; z-index: 3; justify-self: end; align-self: start; display: inline-flex; padding: 3px; border: 1px solid rgba(253, 254, 255, 0.16); border-radius: 40px; background: rgba(16, 17, 21, 0.7); }
.stage__tabs button { padding: 7px 12px; border-radius: 40px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(253, 254, 255, 0.65); transition: background-color 0.3s, color 0.3s; }
.stage__tabs button:hover { color: var(--white); }
.stage__tabs button[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.stage__tabs button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* the material: a sample slab, its edge drawn at the thickness (exaggerated
   the same for every one, so they compare), the colour through all three
   faces, a grip texture for anti-slip, and the thickness large behind it */
.stage__slab { position: relative; display: grid; place-items: center; min-height: 360px; perspective: 1400px; overflow: hidden; }
.sheet__big { position: absolute; left: 4px; top: -4px; margin: 0; font-size: clamp(76px, 8vw, 150px); line-height: 0.85; font-weight: 400; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(253, 254, 255, 0.24); pointer-events: none; font-variant-numeric: tabular-nums; }
.sheet__big small { margin-left: 8px; font-size: 0.2em; letter-spacing: 0; color: rgba(253, 254, 255, 0.45); -webkit-text-stroke: 0; }
.sheet__caption { position: absolute; left: 4px; bottom: 0; margin: 0; font-size: 12px; }
.sheet__float { transform-style: preserve-3d; animation: sheet-float 7s ease-in-out infinite; }
.sheet__shadow { position: absolute; left: 50%; top: 62%; width: 56%; height: 70px; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); filter: blur(8px); transform: translateX(-50%); animation: sheet-shadow 7s ease-in-out infinite; pointer-events: none; }
@keyframes sheet-float { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(8px); } }
@keyframes sheet-shadow { 0%, 100% { transform: translateX(-50%) scale(0.92); opacity: 0.65; } 50% { transform: translateX(-50%) scale(1.04); opacity: 0.9; } }
.slab { --mm: 12.7; --c: #f6f6f4; --h: calc(var(--mm) * 3.4px); --fit: clamp(220px, 21vw, 400px); position: relative; width: calc(var(--fit) * 0.82); height: calc(var(--fit) * 0.63); transform-style: preserve-3d; transform: rotateX(calc(58deg + var(--tx, 0deg))) rotateZ(calc(-36deg + var(--tz, 0deg))); transition: transform 0.9s var(--ease); }
.slab > div { position: absolute; background-color: var(--c); transition: background-color 0.6s var(--ease), height 0.6s var(--ease), width 0.6s var(--ease), transform 0.6s var(--ease); }
.slab__top { inset: 0; border-radius: 3px; transform: translateZ(var(--h)); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.07)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.slab__front { left: 0; right: 0; top: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.3)); }
.slab__side { top: 0; bottom: 0; right: 100%; width: var(--h); transform-origin: right; transform: rotateY(90deg); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.slab.is-grip .slab__top { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.22) 1.3px, rgba(0, 0, 0, 0) 1.9px), linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.07)); background-size: 10px 10px, auto; }
.slab.is-dark .slab__top { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 50%); }
.slab.is-dark.is-grip .slab__top { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.3px, rgba(255, 255, 255, 0) 1.9px), linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 50%); background-size: 10px 10px, auto; }
.slab.is-dark .slab__front, .slab.is-dark .slab__side { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* the cut layout */
.bench__bar { display: flex; align-items: center; min-width: 0; min-height: 32px; padding: 0 210px 0 34px; }
.bench__mat { min-width: 0; overflow: hidden; font-size: 10.5px; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }

/* the rulers: a tick every 100 mm, a longer one and a figure every 600 */
.bench__board { position: relative; padding: 18px 0 12px 34px; }
.bench__ruler { position: absolute; font-size: 10px; line-height: 1; color: rgba(253, 254, 255, 0.4); font-variant-numeric: tabular-nums; pointer-events: none; }
.bench__ruler span { position: absolute; }
.bench__ruler--x { left: 34px; right: 0; top: 0; height: 14px; background: linear-gradient(90deg, rgba(253, 254, 255, 0.22) 1px, rgba(0, 0, 0, 0) 1px) 0 100% / calc(100% / 24) 4px repeat-x, linear-gradient(90deg, rgba(253, 254, 255, 0.4) 1px, rgba(0, 0, 0, 0) 1px) 0 100% / calc(100% / 4) 8px repeat-x; }
.bench__ruler--x span { top: 0; transform: translateX(-50%); }
.bench__ruler--x span:nth-child(1) { left: 0; transform: none; }
.bench__ruler--x span:nth-child(2) { left: 25%; }
.bench__ruler--x span:nth-child(3) { left: 50%; }
.bench__ruler--x span:nth-child(4) { left: 75%; }
.bench__ruler--x span:nth-child(5) { right: 0; transform: none; }
.bench__ruler--y { left: 0; top: 18px; bottom: 12px; width: 30px; background: linear-gradient(rgba(253, 254, 255, 0.22) 1px, rgba(0, 0, 0, 0) 1px) 100% 0 / 4px calc(100% / 12) repeat-y, linear-gradient(rgba(253, 254, 255, 0.4) 1px, rgba(0, 0, 0, 0) 1px) 100% 0 / 8px 50% repeat-y; }
.bench__ruler--y span { right: 12px; transform: translateY(-50%); }
.bench__ruler--y span:nth-child(1) { top: 0; transform: none; }
.bench__ruler--y span:nth-child(2) { top: 50%; }
.bench__ruler--y span:nth-child(3) { bottom: 0; transform: none; }

/* the board itself: a dim wash of the colour, hatched where it's offcut, and
   its edge showing underneath at the thickness picked */
.bench__sheet { --c: #f6f6f4; --mm: 12.7; position: relative; aspect-ratio: 2 / 1; border-radius: 3px; background: #1d1f1c; background: color-mix(in srgb, var(--c) 13%, #121411); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.3); }
.bench__sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(253, 254, 255, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px 11px); pointer-events: none; }
.bench__sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--mm) * 0.55px); border-radius: 0 0 3px 3px; background: #6c6e6b; background: color-mix(in srgb, var(--c) 52%, #000); transition: height 0.4s var(--ease), background-color 0.4s; }
.bench__sheet.is-dark { background: #0b0c0b; }
.bench__sheet.is-dark::after { background: #2a2f33; }

/* a piece: the colour itself, cut round by a fine dark line */
.pc { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background-color: var(--c); box-shadow: inset 0 0 0 1px rgba(16, 17, 21, 0.4); color: rgba(16, 17, 21, 0.78); cursor: pointer; line-height: 1; text-align: center; transition: left 0.55s var(--ease), top 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease), box-shadow 0.25s; animation: pc-in 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 16ms); }
.pc b { display: none; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.8; }
.pc.is-named b { display: block; }
.pc:hover { box-shadow: inset 0 0 0 2px rgba(16, 17, 21, 0.55); }
.bench__sheet.is-grip .pc { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.16) 1px, rgba(0, 0, 0, 0) 1.5px); background-size: 6px 6px; }
.bench__sheet.is-dark .pc { background-color: #3a4046; background-color: color-mix(in srgb, var(--c), #fff 18%); color: rgba(253, 254, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.28); }
.pc.is-sel { z-index: 2; background-image: linear-gradient(rgba(220, 243, 67, 0.3), rgba(220, 243, 67, 0.3)); outline: 2px solid var(--lime); outline-offset: -1px; }
.pc.is-over { outline-color: #ff7a66; background-image: linear-gradient(rgba(255, 122, 102, 0.35), rgba(255, 122, 102, 0.35)); }
.bench__sheet.is-drag .pc, .bench__sheet.is-many .pc { transition: none; }
.bench__sheet.is-many .pc { animation: none; box-shadow: inset 0 0 0 0.5px rgba(16, 17, 21, 0.4); }
.bench__sheet.is-many .pc > * { display: none; }
@keyframes pc-in { from { opacity: 0; transform: scale(0.94); } }

/* the lime edges on the piece being edited */
.pc__grip { position: absolute; inset: 0; pointer-events: none; }
.pc__h { position: absolute; pointer-events: auto; touch-action: none; }
.pc__h::before { content: ""; position: absolute; border-radius: 4px; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); transition: transform 0.2s var(--ease); }
.pc__h--x { top: 0; bottom: 0; right: -8px; width: 16px; cursor: ew-resize; }
.pc__h--x::before { left: 6px; top: 50%; width: 4px; height: min(30px, 56%); transform: translateY(-50%); }
.pc__h--y { left: 0; right: 0; bottom: -8px; height: 16px; cursor: ns-resize; }
.pc__h--y::before { top: 6px; left: 50%; height: 4px; width: min(30px, 56%); transform: translateX(-50%); }
.pc__h--xy { right: -10px; bottom: -10px; width: 20px; height: 20px; cursor: nwse-resize; }
.pc__h--xy::before { inset: 5px; border-radius: 50%; }
.pc__h--x:hover::before { transform: translateY(-50%) scaleX(1.5); }
.pc__h--y:hover::before { transform: translateX(-50%) scaleY(1.5); }
.pc__h--xy:hover::before { transform: scale(1.3); }
@media (pointer: coarse) {
  .pc__h--x { right: -14px; width: 28px; }
  .pc__h--x::before { left: 12px; }
  .pc__h--y { bottom: -14px; height: 28px; }
  .pc__h--y::before { top: 12px; }
  .pc__h--xy { right: -16px; bottom: -16px; width: 32px; height: 32px; }
  .pc__h--xy::before { inset: 9px; }
}

.bench__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-left: 34px; font-size: 13px; line-height: 18px; color: rgba(253, 254, 255, 0.62); font-variant-numeric: tabular-nums; }
.bench__stats b { font-weight: 500; color: var(--white); }
.bench__stats span::before { content: "·"; margin: 0 8px; color: rgba(253, 254, 255, 0.35); }
.bench__hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(253, 254, 255, 0.45); }
.bench__hint::before { content: ""; width: 4px; height: 14px; border-radius: 4px; background: var(--lime); }
.bench__hint[hidden] { display: none; }

/* every sheet in the order */
.bench__thumbs { display: flex; gap: 10px; margin: 0; padding: 4px 4px 6px 34px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.bench__thumbs[hidden] { display: none; }
.thumb { display: grid; gap: 5px; width: 76px; flex: none; padding: 0; font-size: 10px; line-height: 12px; color: rgba(253, 254, 255, 0.55); text-align: left; font-variant-numeric: tabular-nums; }
.thumb svg { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 2px; transition: outline-color 0.2s; outline: 2px solid rgba(0, 0, 0, 0); outline-offset: 2px; }
.thumb:hover svg { outline-color: rgba(253, 254, 255, 0.35); }
.thumb.is-on svg { outline-color: var(--lime); }
.thumb.is-on { color: var(--white); }
.thumb:focus-visible { outline: none; }
.thumb:focus-visible svg { outline-color: var(--lime); }
.t__board { fill: #1d1f1c; fill: color-mix(in srgb, var(--c) 13%, #121411); stroke: rgba(253, 254, 255, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t__pc { fill: var(--c); stroke: rgba(16, 17, 21, 0.5); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.thumb.is-dark .t__pc { fill: #3a4046; fill: color-mix(in srgb, var(--c), #fff 18%); }

/* ---------- the tools ---------- */
/* two columns: the material beside the cut list, the quote across the foot */
.bench__tools { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1fr) auto; gap: 22px 0; padding: 22px 26px; border-left: 1px solid rgba(253, 254, 255, 0.1); }
.bench__tools > .bench__block { min-width: 0; }
.bench__tools > .bench__block + .bench__block { margin-left: 22px; padding-left: 22px; border-left: 1px solid rgba(253, 254, 255, 0.08); }
.bench__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; min-height: 28px; }
.bench__h { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 13px; line-height: 16px; white-space: nowrap; }
.bench__h em { font-style: normal; font-weight: 500; letter-spacing: 0.03em; color: rgba(253, 254, 255, 0.55); }
.bench__all { flex: none; padding: 7px 12px; border: 1px solid rgba(253, 254, 255, 0.22); border-radius: 40px; font-size: 10px; line-height: 12px; color: var(--white); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.bench__all { border-style: dashed; color: rgba(253, 254, 255, 0.75); }
.bench__all:hover { border-style: solid; border-color: var(--lime); color: var(--lime); }
.bench__all[hidden] { display: none; }
.bench__all:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* the cut list: one row a size, every one edited where it sits. The rows
   fold onto two lines when the column is narrow (a container query, so it
   follows the column, not the window). */
.cl-wrap { container-type: inline-size; }
.cl__head, .cl { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 60px 26px; column-gap: 8px; align-items: center; }
.cl__head { grid-template-areas: ". dims qty price ."; padding: 0 11px 7px; font-size: 9px; line-height: 11px; letter-spacing: 0.07em; color: rgba(253, 254, 255, 0.42); }
.cl__head span:nth-child(1) { grid-area: dims; }
.cl__head span:nth-child(2) { grid-area: qty; text-align: center; }
.cl__head span:nth-child(3) { grid-area: price; text-align: right; }
.cutlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl { grid-template-areas: "mat dims qty price del" ". msg msg msg msg"; padding: 8px 10px 8px 11px; border: 1px solid rgba(253, 254, 255, 0.12); border-radius: 0 14px 0 14px; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.cl:hover { border-color: rgba(253, 254, 255, 0.3); }
.cl.is-on { border-color: var(--lime); background: rgba(220, 243, 67, 0.045); }
.cl.is-bad { border-color: #ff7a66; }
/* the dot: the sheet it's cut from, the thickness written in it */
.cl__mat { grid-area: mat; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background-color: var(--c); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); font-size: 8.5px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.cl__mat.is-dark { color: var(--white); }
.cl__mat.is-grip { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.22) 0.8px, rgba(0, 0, 0, 0) 1.2px); background-size: 4px 4px; }
.cl__mat:hover { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 2px var(--ink), 0 0 0 3px rgba(220, 243, 67, 0.7); }
.cl__mat:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cl__dims { grid-area: dims; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl__in { flex: 1 1 0; min-width: 0; max-width: 92px; height: 38px; padding: 0 6px; border: 1px solid rgba(253, 254, 255, 0.16); border-radius: 8px; background: rgba(253, 254, 255, 0.03); color: var(--white); font-size: 17px; text-align: center; font-variant-numeric: tabular-nums; outline: none; cursor: text; -moz-appearance: textfield; appearance: textfield; transition: border-color 0.25s, background-color 0.25s; }
.cl__in::placeholder { font-size: 12px; color: rgba(253, 254, 255, 0.35); }
.cl__in:hover { border-color: rgba(253, 254, 255, 0.4); }
.cl__in:focus { border-color: var(--lime); background: rgba(220, 243, 67, 0.06); }
.cl__in.is-bad { border-color: #ff7a66; color: #ff9d8d; background: rgba(255, 122, 102, 0.06); }
.cl__x { font-size: 14px; color: rgba(253, 254, 255, 0.35); }
/* the quantity: a big − and +, and the number to type straight into */
.cl__qty { grid-area: qty; display: inline-flex; align-items: center; height: 38px; padding: 2px; border: 1px solid rgba(253, 254, 255, 0.16); border-radius: 40px; }
.cl__qty button { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; font-size: 18px; line-height: 1; color: rgba(253, 254, 255, 0.85); touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 0.15s, color 0.15s; }
.cl__qty button:hover { background: rgba(220, 243, 67, 0.14); color: var(--lime); }
.cl__qty button:active { background: var(--lime); color: var(--ink); }
.cl__qty button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.sheet .cl__qty button:disabled { opacity: 0.25; }
.cl__qty input { width: 38px; padding: 0; border: 0; background: none; color: var(--white); text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.cl__qty input:focus { color: var(--lime); }
.cl input::-webkit-outer-spin-button, .cl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl__price { grid-area: price; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl__del { grid-area: del; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: rgba(253, 254, 255, 0.55); cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.cl__del svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cl__del:hover { color: #ff9d8d; background: rgba(255, 122, 102, 0.12); }
.cl__del:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.cl__msg { grid-area: msg; margin-top: 6px; font-size: 12px; line-height: 16px; color: #ff9d8d; }
.cl__msg:empty { display: none; }
.cl__add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px; border: 1px dashed rgba(253, 254, 255, 0.24); border-radius: 0 14px 0 14px; font-size: 11px; line-height: 14px; color: rgba(253, 254, 255, 0.75); transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.cl__add span { font-size: 16px; line-height: 0; }
.cl__add:hover { border-style: solid; border-color: var(--lime); color: var(--lime); background: rgba(220, 243, 67, 0.05); }
.cl__add:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* snug: everything a touch smaller so a row still fits on one line */
@container (max-width: 400px) {
  .cl__head, .cl { grid-template-columns: 24px minmax(0, 1fr) auto 48px 22px; column-gap: 6px; }
  .cl { padding: 7px 7px 7px 8px; }
  .cl__head { padding: 0 8px 6px; }
  .cl__mat { width: 24px; height: 24px; font-size: 8px; }
  .cl__dims { gap: 4px; }
  .cl__in { height: 34px; padding: 0 3px; font-size: 15px; }
  .cl__qty { height: 34px; }
  .cl__qty button { width: 27px; height: 27px; font-size: 16px; }
  .cl__qty input { width: 30px; font-size: 15px; }
  .cl__price { font-size: 14px; }
  .cl__del { width: 22px; height: 22px; }
}
/* too narrow for one line: the quantity and price drop under the size */
@container (max-width: 340px) {
  .cl__head { display: none; }
  .cl { grid-template-columns: 26px auto minmax(0, 1fr) 26px; grid-template-areas: "mat dims dims del" ". qty price price" ". msg msg msg"; }
  .cl__qty, .cl__price { margin-top: 8px; }
}

/* the material: each thickness shows its edge at the same scale */
.mat__thick { --c: #f6f6f4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mat__t { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 9px; border: 1px solid rgba(253, 254, 255, 0.14); border-radius: 0 12px 0 12px; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.mat__t:hover { border-color: rgba(253, 254, 255, 0.4); }
.mat__t.is-on { border-color: var(--lime); background: rgba(220, 243, 67, 0.07); }
.mat__t:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.mat__t input, .mat__sw input { position: absolute; opacity: 0; pointer-events: none; }
.mat__edge { display: block; height: 22px; opacity: 0.5; background: linear-gradient(var(--c), var(--c)) 0 100% / 100% calc(var(--mm) * 1.15px) no-repeat; transition: opacity 0.3s; }
.mat__edge.is-grip { background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 1px, rgba(0, 0, 0, 0) 1.5px) 0 100% / 5px 5px, linear-gradient(var(--c), var(--c)) 0 100% / 100% calc(var(--mm) * 1.15px) no-repeat; }
.mat__thick.is-dark .mat__edge { background: linear-gradient(#5b636b, #5b636b) 0 100% / 100% calc(var(--mm) * 1.15px) no-repeat; }
.mat__t.is-on .mat__edge { opacity: 1; }
.mat__mm { font-size: 18px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; transition: color 0.3s; }
.mat__mm small { margin-left: 2px; font-size: 11px; letter-spacing: 0; color: rgba(253, 254, 255, 0.5); }
.mat__t.is-on .mat__mm { color: var(--lime); }
.mat__tag { font-size: 8.5px; line-height: 11px; color: rgba(253, 254, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat__tag { color: var(--lime); }
.mat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.mat__colours { display: flex; flex-wrap: wrap; gap: 8px; }
.mat__sw { position: relative; display: block; cursor: pointer; }
.mat__chip { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.mat__sw:hover .mat__chip { transform: scale(1.08); }
.mat__sw.is-on .mat__chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px var(--ink), 0 0 0 4px var(--lime); }
.mat__sw:focus-within .mat__chip { outline: 2px solid var(--lime); outline-offset: 5px; }
.mat__name { margin-left: auto; font-size: 10px; line-height: 12px; color: rgba(253, 254, 255, 0.6); text-align: right; }
.mat__use { margin-top: 10px; font-size: 13px; line-height: 18px; color: rgba(253, 254, 255, 0.6); }

/* the instant quote */
.quote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 18px; border-top: 1px solid rgba(253, 254, 255, 0.1); }
.quote__fig { margin-right: auto; }
.quote__label { font-size: 10px; line-height: 12px; color: var(--lime); }
.quote__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font-size: clamp(34px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.quote__total small { font-size: 10px; line-height: 12px; letter-spacing: 0.05em; color: rgba(253, 254, 255, 0.5); }
.quote__sub { margin-top: 4px; font-size: 13px; line-height: 18px; color: rgba(253, 254, 255, 0.68); font-variant-numeric: tabular-nums; }
.quote__send { height: 46px; padding: 0 22px; }
.quote__fill { display: inline-flex; gap: 6px; padding: 6px 12px; border: 1px dashed rgba(220, 243, 67, 0.55); border-radius: 40px; font-size: 12px; line-height: 15px; text-align: left; color: var(--lime); transition: background-color 0.25s, border-color 0.25s; }
.quote__fill:hover { border-style: solid; background: rgba(220, 243, 67, 0.1); }
.quote__fill[hidden] { display: none; }
.quote__fill:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.quote__break { position: relative; }
.quote__break summary { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; line-height: 12px; color: rgba(253, 254, 255, 0.6); cursor: pointer; list-style: none; }
.quote__break summary::-webkit-details-marker { display: none; }
.quote__break summary:hover { color: var(--white); }
.quote__break summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.quote__break summary svg { width: 10px; height: 6px; transition: transform 0.3s var(--ease); }
.quote__break[open] summary svg { transform: rotate(180deg); }
.quote__break dl { position: absolute; right: -8px; bottom: calc(100% + 14px); z-index: 5; width: min(380px, 80vw); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px 18px; border: 1px solid rgba(253, 254, 255, 0.14); border-radius: 0 16px 0 16px; background: #17191d; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 17px; }
.quote__break dl:empty { display: none; }
.quote__break dt { color: rgba(253, 254, 255, 0.8); }
.quote__break dt small { display: block; font-size: 12px; color: rgba(253, 254, 255, 0.5); }
.quote__break dd { text-align: right; font-variant-numeric: tabular-nums; }
.quote__break .is-sum { padding-top: 8px; border-top: 1px solid rgba(253, 254, 255, 0.1); font-weight: 600; color: var(--white); }

/* ---------- under the bench ---------- */
.sheet__custom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px var(--pad) 0; font-size: 14px; line-height: 20px; color: rgba(253, 254, 255, 0.62); }
.sheet__custom button { padding: 0; font-size: 11px; color: var(--lime); }
.sheet__custom button span { display: inline-block; margin-left: 4px; transition: transform 0.3s var(--ease); }
.sheet__custom button:hover span, .sheet__custom button:focus-visible span { transform: translateX(4px); }
.sheet__custom button:focus-visible, .sheet__custom a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.sheet__custom a { color: rgba(253, 254, 255, 0.6); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(253, 254, 255, 0.3); transition: color 0.2s; }
.sheet__custom a:hover { color: var(--white); }

/* the stock range, photographed side by side */
.sheet__range { margin: 64px var(--pad) 0; }
.sheet__range img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42); }
.sheet__range figcaption { margin-top: 14px; color: rgba(253, 254, 255, 0.62); }

/* four reasons, set like a spec sheet: a hairline over each with a lime
   tick that runs the width on hover */
.sheet__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin: 40px var(--pad) 0; padding: 0; list-style: none; }
.sheet__facts li { position: relative; padding-top: 22px; }
.sheet__facts li::before, .sheet__facts li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(253, 254, 255, 0.14); }
.sheet__facts li::after { top: -1px; height: 3px; background: var(--lime); transform: scaleX(0.12); transform-origin: left; transition: transform 0.8s var(--ease); }
.sheet__facts li:hover::after { transform: scaleX(1); }
.fact__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fact__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(220, 243, 67, 0.32); border-radius: 0 11px 0 11px; background: rgba(220, 243, 67, 0.07); color: var(--lime); transition: background-color 0.35s, color 0.35s, border-color 0.35s; }
.sheet__facts li:hover .fact__ico { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.fact__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet__facts h3 { margin: 0; font-size: 14px; line-height: 17px; }
.sheet__facts p { max-width: 36ch; font-size: 14px; line-height: 21px; color: rgba(253, 254, 255, 0.6); }

/* a big screen: the controls grow into the room they have */
@media (min-width: 1600px) {
  .bench__tools { padding: 26px 32px; gap: 26px 0; }
  .bench__tools > .bench__block + .bench__block { margin-left: 32px; padding-left: 32px; }
  .bench__h { font-size: 14px; }
  .bench__all { padding: 8px 14px; font-size: 11px; }
  .mat__thick { gap: 8px; }
  .mat__t { padding: 12px 12px 11px; gap: 8px; }
  .mat__mm { font-size: 23px; }
  .mat__mm small { font-size: 12px; }
  .mat__tag { font-size: 9.5px; }
  .mat__chip { width: 34px; height: 34px; }
  .mat__colours { gap: 10px; }
  .mat__name { font-size: 11px; }
  .mat__use { font-size: 14px; line-height: 20px; }
  .cl__head, .cl { grid-template-columns: 30px minmax(0, 1fr) auto 72px 28px; column-gap: 12px; }
  .cl { padding: 10px 12px; }
  .cl__head { padding: 0 12px 8px; font-size: 10px; }
  .cl__mat { width: 30px; height: 30px; font-size: 9.5px; }
  .cl__in { height: 44px; max-width: 104px; font-size: 20px; }
  .cl__qty { height: 44px; }
  .cl__qty button { width: 38px; height: 38px; font-size: 20px; }
  .cl__qty input { width: 46px; font-size: 18px; }
  .cl__price { font-size: 17px; }
  .cl__add { padding: 12px; font-size: 12px; }
  .quote__total { font-size: 52px; }
  .quote__sub { font-size: 14px; }
  .quote__send { height: 52px; padding: 0 28px; font-size: 13px; }
}
/* side by side but snug: the material dots come out of the list rows (the
   material panel says it for the piece being edited) and the tiles tighten */
@media (min-width: 1280px) and (max-width: 1599px) {
  .mat__t { padding: 9px 7px 8px; }
  .mat__mm { font-size: 16px; }
  .mat__mm small { font-size: 10px; }
  .mat__tag { font-size: 7.5px; letter-spacing: 0.02em; }
}
@media (max-width: 1279px) {
  /* stacked: the stage across the top, kept short, the tools under it still in two columns */
  .bench { grid-template-columns: minmax(0, 1fr); }
  .stage__in { position: relative; top: auto; min-height: 0; }
  .stage__slab { min-height: 300px; }
  .stage__layout { width: 100%; max-width: 600px; justify-self: center; }
  .slab { --fit: clamp(220px, 34vw, 340px); }
  .bench__tools { border-left: 0; border-top: 1px solid rgba(253, 254, 255, 0.1); }
}
@media (max-width: 1100px) {
  .sheet__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 800px) {
  .sheet { padding: 64px 0 56px; }
  .sheet__head { margin-bottom: 28px; }
  .bench { border-radius: 0 20px 0 20px; }
  /* the switch gets a row of its own, over both views */
  .bench__stage { padding: 14px 16px 16px 10px; }
  .stage__in { grid-template-rows: auto minmax(0, 1fr); row-gap: 12px; }
  .stage__tabs { grid-area: 1 / 1; justify-self: start; margin-left: 6px; }
  .stage__slab, .stage__layout { grid-area: 2 / 1; }
  .stage__layout { gap: 10px; }
  .stage__slab { min-height: 300px; }
  .slab { --fit: 62vw; }
  .sheet__big { left: 6px; }
  .sheet__caption { left: 6px; font-size: 11px; }
  .bench__bar { padding: 0 0 0 26px; min-height: 0; }
  /* the tools in one column, the quote stacked */
  .bench__tools { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .bench__tools > .bench__block + .bench__block { margin-left: 0; padding-left: 0; border-left: 0; }
  .quote__fig { flex: 1 1 100%; }
  .quote__send { flex: 1 1 100%; }
  .quote__break dl { right: auto; left: -8px; }
  .bench__foot, .bench__thumbs { padding-left: 26px; }
  .bench__board { padding-left: 26px; }
  .bench__ruler--x { left: 26px; }
  .bench__ruler--y { width: 22px; }
  .bench__ruler--y span { right: 10px; }
  .bench__ruler { font-size: 9px; }
  .bench__tools { padding: 18px 16px; }
  .mat__thick { gap: 4px; }
  .mat__t { padding: 8px 7px 7px; }
  .mat__mm { font-size: 17px; }
  .mat__row { flex-wrap: wrap; }
  .mat__name { margin-left: 0; }
  .sheet__facts { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }
  .sheet__facts li { padding-top: 18px; }
  .fact__top { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc { transition: none; animation: none; }
  .bench__sheet::after { transition: none; }
  .sheet__float, .sheet__shadow { animation: none; }
  .slab, .slab > div, .stage__slab, .stage__layout { transition: none !important; }
  .sheet__facts li::after, .fact__ico { transition: none; }
}


/* =========================================================
   Hardware: the stainless latch and slide (#hardware)
   Two cards, each a light stage with a working CSS model of the part
   (latch paddle lifts, slide telescopes out) above the brand story.
   ========================================================= */
.hw { --steel: linear-gradient(115deg, #c6cacf 0%, #f5f6f7 20%, #aab0b6 38%, #eaecef 55%, #9aa0a7 74%, #e0e3e6 90%, #bcc1c6 100%); padding: 84px 0 84px; }
.hw .shead { margin-bottom: 36px; }
/* the shipping section overrides margin/size/width on its own copy of this, so
   tightening it here stays inside the hardware section */
.hw__lede { margin-top: 18px; max-width: 600px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--muted-2); }
.hw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 0 var(--pad); }

/* brushed stainless: gradient + hairline grain, and a sheen that sweeps across on hover */
.steel { position: relative; overflow: hidden; background: var(--steel); }
.steel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, rgba(255, 255, 255, 0) 2px 4px); mix-blend-mode: overlay; pointer-events: none; }
.steel::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hwcard:hover .steel::after { animation: hw-sheen 1.3s var(--ease); }
}
@keyframes hw-sheen { from { opacity: 1; transform: translateX(0) skewX(-20deg); } to { opacity: 1; transform: translateX(460%) skewX(-20deg); } }

/* card */
.hwcard { min-width: 0; display: flex; flex-direction: column; }
.hwcard__stage { position: relative; min-height: 400px; display: grid; place-items: center; padding: 84px 24px 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 0 28px 0 28px; background: radial-gradient(60% 55% at 50% 48%, #fff, rgba(255, 255, 255, 0) 72%), linear-gradient(160deg, #eff1f3, #dfe2e6); }
.hwcard__where { position: absolute; top: 22px; left: 24px; font-size: 11px; line-height: 15px; }
.hwcard__n { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; font-weight: 600; }
.hwcard__year { position: absolute; left: 16px; bottom: -8px; font-size: clamp(84px, 9.5vw, 156px); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(16, 17, 21, 0.14); pointer-events: none; font-variant-numeric: tabular-nums; }
.hwcard__status { position: absolute; top: 58px; left: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.hwcard__status .dot, .hw-pill .dot, .slide__stop .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px rgba(135, 198, 0, 0.25); }
.hwcard__ctl { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.hwcard__body { padding: 22px 2px 0; }
.hwcard__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.hwcard__brand sup { font-size: 0.6em; }
.hwcard__brand::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hwcard__name { margin-top: 8px; }
/* the write-up folds away: the drawing is the point of the card, so the name
   doubles as the toggle and the prose + data plate ride in a 0fr/1fr grid row,
   the same collapse the FAQ panel uses. The markup ships open and hardware.js
   adds .is-collapsible, so the copy is still there if the script never runs. */
.hwcard__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.hwcard__chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted-2); transition: transform 0.45s var(--ease), background 0.3s, border-color 0.3s, color 0.3s; }
.hwcard__chev svg { width: 11px; height: 7px; }
.hwcard__toggle:hover .hwcard__chev { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hwcard__toggle.is-open .hwcard__chev { transform: rotate(180deg); }
.hwcard__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease), opacity 0.35s var(--ease); }
.hwcard__more.is-collapsible:not(.is-open) { grid-template-rows: 0fr; opacity: 0; }
.hwcard__more > div { overflow: hidden; }
.hwcard__text { margin-top: 12px; max-width: 560px; color: var(--muted-2); }
/* a data plate, not three loose numbers: the 1px gap over a --line background
   draws the dividers, so they run the full height of the tallest cell and keep
   working when the columns stack at 760. Corner echoes the stage above. */
.hwcard__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 22px; border: 1px solid var(--line); border-radius: 0 14px 0 14px; background: var(--line); overflow: hidden; }
.hwcard__specs > div { padding: 15px 16px 17px; background: #f6f7f8; }
/* "7.5–13.5" is nowrap in a ~200px cell, so the ceiling stays low enough that
   the longest figure still reads as an instrument rather than a shout */
.hwcard__specs dt { font-size: clamp(23px, 1.9vw, 30px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hwcard__specs dt small { margin-left: 3px; font-size: 0.44em; letter-spacing: 0; color: var(--muted); }
.hwcard__specs dd { margin: 7px 0 0; font-size: 12.5px; line-height: 17px; color: var(--muted-2); }

/* controls */
.hw-pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px 0 15px; border-radius: 40px; background: var(--ink); color: var(--white); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.3s; }
.hw-pill:hover { background: var(--blue); }
.hw-seg { display: inline-flex; padding: 3px; border-radius: 40px; background: rgba(16, 17, 21, 0.07); }
.hw-seg button { height: 34px; padding: 0 13px; border-radius: 40px; font-size: 12px; color: var(--muted-2); transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.hw-seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 17, 21, 0.14); }
.hw-pill:focus-visible, .hw-seg button:focus-visible, .hw-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hw-range-wrap { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: 40px; background: var(--ink); color: var(--white); font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.hw-range { -webkit-appearance: none; appearance: none; width: clamp(120px, 16vw, 200px); height: 24px; background: transparent; cursor: grab; }
.hw-range:active { cursor: grabbing; }
.hw-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(253, 254, 255, 0.3); }
.hw-range::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(253, 254, 255, 0.3); }
.hw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(220, 243, 67, 0.25); }
.hw-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(220, 243, 67, 0.25); }

/* the latch: a StarBoard panel with the flush catch set into it, tilted in 3D */
.latch { width: min(330px, 82%); perspective: 1000px; cursor: pointer; }
/* King StarBoard is matte with a fine orange-peel texture, so the sheet must
   never read as glass. Two offset dot grids sit in the background stack rather
   than a pseudo-element: extra layers here would be coplanar with the panel in
   preserve-3d, where paint order is undefined — background layers are not. */
.latch__panel { display: grid; place-items: center; aspect-ratio: 1.55; border-radius: 6px; background: radial-gradient(rgba(16, 17, 21, 0.05) 0.6px, rgba(0, 0, 0, 0) 0.7px) 0 0 / 5px 5px, radial-gradient(rgba(255, 255, 255, 0.55) 0.6px, rgba(0, 0, 0, 0) 0.7px) 2px 3px / 7px 7px, linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05)), #f6f6f4; box-shadow: 5px 6px 0 #d2d4cf, 0 40px 50px -26px rgba(16, 17, 21, 0.5); transform: rotateX(9deg) rotateY(-13deg); transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.latch:hover .latch__panel { transform: rotateX(5deg) rotateY(-6deg); }
.latch.is-slam .latch__panel { animation: hw-slam 0.5s var(--ease); }
/* the rest angle is shallow on purpose: a steeper tilt foreshortens the round
   bezel into an oval and argues with the Ø44 printed beside it */
@keyframes hw-slam {
  0% { transform: rotateX(9deg) rotateY(-13deg) translateZ(0); }
  30% { transform: rotateX(9deg) rotateY(-13deg) translateZ(-22px); }
  65% { transform: rotateX(9deg) rotateY(-13deg) translateZ(5px); }
  100% { transform: rotateX(9deg) rotateY(-13deg) translateZ(0); }
}
/* the real latch in 3D (hardware3d.js) fades in over the drawing once it has loaded:
   the whole stage is its canvas, under the status and the buttons */
.latch__3d { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; animation: lat-in 0.9s var(--ease) both; }
.latch__3d.is-over { cursor: pointer; }
.latch__3d.is-drag { cursor: grabbing; }
.latch.is-3d { visibility: hidden; animation: lat-out 0.5s var(--ease); }
@keyframes lat-in { from { opacity: 0; } }
@keyframes lat-out { from { visibility: visible; opacity: 1; } to { visibility: visible; opacity: 0; } }
/* Marine Town flush pull (drawn in index.html): a Ø44 flange let into the door,
   the pull ring flush in its pocket until a finger in the hole lifts it */
.latch__catch { position: relative; width: 46%; aspect-ratio: 1; transform-style: preserve-3d; }
.latch__flange { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.latch__drop { fill: #0e1013; opacity: 0.3; }
/* the pull hinges up on its left edge, away from the finger hole. Opening is a lift
   that decelerates into its stop; closing is a spring, so it's quicker and lands
   harder — hence two transitions rather than one curve shared by both. It sits a
   hair proud of the flange: coplanar faces in preserve-3d have no paint order. */
.latch__pull { position: absolute; inset: 0; transform-origin: 18% 50%; transform: translateZ(0.6px); transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.45, 0, 0.25, 1); }
.latch.is-open .latch__pull { transform: translateZ(0.6px) rotateY(-42deg); transition: transform 0.52s cubic-bezier(0.12, 0.72, 0.28, 1); }
.latch__pull svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* its thickness: two darker copies just behind the face, hidden in the pocket until it tilts */
.latch__rim { fill: url(#latRimSteel); transform: translateZ(-1.3px); }
.latch__rim--far { fill: #4b5259; transform: translateZ(-2.6px); }
/* and its shadow, thrown across the pocket as it rises */
.latch__cast { opacity: 0; transform-box: view-box; transition: opacity 0.3s, transform 0.3s cubic-bezier(0.45, 0, 0.25, 1); }
.latch.is-open .latch__cast { opacity: 0.6; transform: translate(10px, 3px); transition: opacity 0.52s, transform 0.52s cubic-bezier(0.12, 0.72, 0.28, 1); }
/* the key cylinder seats itself in the pull's tail when key locking is picked */
.latch__key { transform-box: view-box; transform-origin: 71.2px 127.8px; opacity: 0; transform: scale(0.45) rotate(-28deg); transition: opacity 0.3s, transform 0.45s var(--ease); }
.latch.is-keyed .latch__key { opacity: 1; transform: none; }
/* the polish sweep, clipped to the pull so it runs across the steel only */
.latch__sweep { transform-box: view-box; fill: url(#latSheen); opacity: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hwcard:hover .latch__sweep { animation: lat-sheen 1.3s var(--ease); }
}
@keyframes lat-sheen { from { opacity: 1; transform: translateX(0) skewX(-18deg); } to { opacity: 1; transform: translateX(290px) skewX(-18deg); } }

/* the slide, side on: cabinet, drawer, three stainless members and a ruler for the travel */
.slide { --x: 0; --L: 46%; --left: 3%; position: relative; width: 100%; height: 170px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slide.is-drag { cursor: grabbing; }
.slide > * { position: absolute; }
.slide__cab { left: var(--left); width: var(--L); top: 14px; height: 116px; border: 1.5px dashed rgba(16, 17, 21, 0.24); border-right: 3px solid var(--ink); border-radius: 4px 0 0 4px; }
.slide__cab span, .slide__drawer span { position: absolute; top: 8px; left: 10px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.slide__drawer { left: var(--left); width: var(--L); top: 30px; height: 84px; border: 1px solid rgba(16, 17, 21, 0.1); border-radius: 3px; background: rgba(253, 254, 255, 0.92); transform: translateX(calc(var(--x) * 100%)); }
.slide__drawer span { top: auto; bottom: 7px; }
/* "drag" tag riding on the drawer; fades once someone has pulled it */
.slide__drawer .slide__hint { top: 8px; bottom: auto; left: auto; right: 12px; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 0 8px 0 8px; background: var(--ink); color: var(--white); transition: opacity 0.4s; }
.slide__hint svg { width: 14px; height: 10px; }
.slide.is-used .slide__hint { opacity: 0; }
.slide__rail { left: var(--left); width: var(--L); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 3px rgba(16, 17, 21, 0.3); }
.slide__outer { top: 59px; height: 26px; }
.slide__mid { top: 63px; height: 18px; transform: translateX(calc(var(--x) * 50%)); }
.slide__inner { top: 67px; height: 10px; transform: translateX(calc(var(--x) * 100%)); }
.slide__balls { position: absolute; left: 7%; right: 7%; top: 50%; z-index: 1; height: 7px; margin-top: -3.5px; background: radial-gradient(circle, #686e75 0 2.2px, rgba(0, 0, 0, 0) 2.8px) 0 50% / 12px 7px repeat-x; }
.slide__face { left: var(--left); width: var(--L); top: 20px; height: 104px; transform: translateX(calc(var(--x) * 100%)); pointer-events: none; }
.slide__face::after { content: ""; position: absolute; top: 0; bottom: 0; right: -7px; width: 13px; border-radius: 2px; background: #f6f6f4 linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.7)); box-shadow: 3px 4px 0 #d2d4cf, 0 12px 18px -8px rgba(16, 17, 21, 0.45); }
.slide__ruler { left: calc(var(--left) + var(--L)); width: var(--L); top: 144px; height: 8px; border-left: 1px solid rgba(16, 17, 21, 0.35); background: linear-gradient(90deg, rgba(16, 17, 21, 0.35) 0 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 11.111% 100% repeat-x; }
.slide__ruler::after { content: ""; position: absolute; left: 0; top: -4px; width: calc(var(--x) * 100%); height: 2px; background: var(--blue); }
.slide__ruler i { position: absolute; top: 12px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; font-style: normal; font-weight: 600; white-space: nowrap; color: var(--muted); }
.slide__ruler i:first-child { left: 0; transform: translateX(-50%); }
.slide__ruler i:last-child { right: 0; }
.slide__stop { right: 2%; top: 116px; display: flex; align-items: center; gap: 7px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.45s var(--ease); }
.slide.is-stop .slide__stop { opacity: 1; transform: none; }
/* the real slide in 3D (hardware3d.js) fades in over the drawing once it has loaded.
   The drawing only hides, so it is still what you drag (the canvas lets the pointer
   through). Its Drag hint and positive stop stay, over the canvas, and the script
   moves them to the front of the 3D slide */
.slide__3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: lat-in 0.9s var(--ease) both; }
.slide.is-3d > * { visibility: hidden; animation: lat-out 0.5s var(--ease); }
.slide.is-3d .slide__hint, .slide.is-3d > .slide__stop { visibility: visible; animation: none; }
.slide.is-3d > .slide__drawer, .slide.is-3d > .slide__stop { z-index: 1; }

@media (max-width: 900px) {
  .hw__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .hw { padding: 72px 0 80px; }
  .hw .shead { margin-bottom: 36px; }
  .hw .shead > * { grid-column: 1 / -1; }
  .hwcard__stage { min-height: 380px; padding: 84px 14px 128px; }   /* the latch controls wrap to two rows here */
  .hwcard__ctl { right: 14px; left: 14px; bottom: 14px; }
  .hwcard__specs > div { padding: 13px 14px 15px; }
  .hwcard__specs dd { font-size: 12px; line-height: 16px; }
  .slide { --left: 1%; --L: 47%; }
}
@media (prefers-reduced-motion: reduce) {
  .latch__panel, .latch__pull, .latch__key, .latch__cast, .slide__stop { transition: none; }
  .latch.is-slam .latch__panel { animation: none; }
  .latch__3d, .latch.is-3d, .slide__3d, .slide.is-3d > * { animation: none; }
}

/* space between specification columns so long values stay readable */
.ydetail__specs { column-gap: 28px; }

/* manufacturer literature: swipeable carousel of cards */
/* downloads: a slim strip of PDF links */
.downloads { padding: 60px 0 44px; }
.downloads__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--pad); margin-bottom: 16px; }
.downloads__title { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 16px; line-height: 19px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.downloads__nav { display: flex; gap: 8px; }
.downloads .circle-btn { width: 36px; height: 36px; }
.docs {
  display: flex;
  gap: 10px;
  padding: 2px var(--pad) 30px; /* room for the glow under each card */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  isolation: isolate; /* keeps each card's glow (z-index -1) behind the cards but above the page */
}
.docs::-webkit-scrollbar { display: none; }
.docs.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.doc {
  flex: 0 0 clamp(260px, 30vw, 420px);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 20px;
  /* rainbow glow: a colour-cycling edge that fades up from the bottom, plus a blurred underglow */
  --fill: var(--white);
  --rainbow: linear-gradient(90deg, hsl(0 100% 63%), hsl(90 100% 63%), hsl(210 100% 63%), hsl(195 100% 63%), hsl(270 100% 63%), hsl(0 100% 63%));
  position: relative;
  border: 1.5px solid transparent;
  border-radius: 40px;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--line) 45%, rgba(228, 229, 230, 0.55) 72%, rgba(228, 229, 230, 0)) border-box,
    var(--rainbow) border-box;
  background-size: 100% 100%, 100% 100%, 200% 100%;
  animation: rainbow 2.4s linear infinite;
}
.doc::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -20%;
  width: 60%;
  height: 20%;
  transform: translateX(-50%);
  background: var(--rainbow);
  background-size: 200% 100%;
  filter: blur(12.8px);
  animation: rainbow-glow 2.4s linear infinite;
  pointer-events: none;
}
.doc:hover { --fill: var(--sky); }
@keyframes rainbow { from { background-position: 0 0, 0 0, 0% 0; } to { background-position: 0 0, 0 0, 200% 0; } }
@keyframes rainbow-glow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.doc__num { flex: none; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; color: var(--muted); }
.doc__title { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(16, 17, 21, 0.2); display: grid; place-items: center; transition: background 0.3s, color 0.3s; }
.doc:hover .doc__icon { background: var(--ink); color: var(--white); border-color: var(--ink); }
.doc__icon svg { width: 13px; height: 13px; }
.circle-btn:disabled { opacity: 0.35; pointer-events: none; }
@media (max-width: 800px) {
  .downloads { padding: 44px 0 24px; }
  .doc { flex-basis: 80vw; }
}

/* =========================================================
   Build your own (configurator.html runs inside the frame;
   on narrow screens it reports its own height)
   ========================================================= */
/* compact one-row header: labels · title, then the builder */
.section--byo { padding: 44px 0 0; }
.byo-head { align-items: end; column-gap: 30px; margin-bottom: 22px; }
.byo-head__labels { grid-column: 1 / span 1; }
.byo-head__main { grid-column: 2 / span 3; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; row-gap: 10px; }
.byo-head__title { font-size: clamp(40px, 4.6vw, 68px); line-height: 1; white-space: nowrap; }
/* small "better on a computer" pill beside the title */
.byo-head__note { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border: 1px solid var(--line); border-radius: 0 12px 0 12px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.byo-head__note svg { width: 15px; height: 15px; flex: none; color: var(--blue); }
@media (max-width: 800px) {
  .section--byo { padding-top: 32px; }
  .byo-head { row-gap: 10px; margin-bottom: 18px; }
  .byo-head__title { font-size: 40px; white-space: normal; }
}
.byo { overflow: hidden; background: var(--ink); }   /* the full width of the screen, edge to edge */
.byo iframe { display: block; width: 100%; height: clamp(640px, 88vh, 900px); border: 0; }

/* Delivery, under the builder (freight.js): the builder's dark band carries on,
   where it's going on the left and the three ways out the door across the rest */
.freight { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 10px; padding: 18px var(--pad) 20px; background: var(--ink); color: var(--white); border-top: 1px solid rgba(253, 254, 255, 0.1); }
.freight[hidden] { display: none; }
#freight { scroll-margin-top: calc(var(--header-h) + 12px); }   /* "Get a shipping quote" lands here, clear of the header */
.freight__where { grid-column: 1 / span 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.freight__label { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); }
.freight__search { position: relative; z-index: 3; }
.freight__q { width: 100%; height: 44px; padding: 0 14px; border: 1px solid rgba(253, 254, 255, 0.22); border-radius: 0 12px 0 12px; background: rgba(253, 254, 255, 0.06); color: var(--white); font-size: 15px; outline: none; transition: border-color 0.2s; }
.freight__q::placeholder { color: rgba(253, 254, 255, 0.45); }
.freight__q:focus { border-color: var(--lime); }
.freight__places { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 288px; overflow-y: auto; padding: 6px; background: var(--white); color: var(--ink); border-radius: 0 12px 0 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); }
.freight__places li { padding: 9px 10px; border-radius: 6px; font-size: 14px; line-height: 18px; cursor: pointer; }
.freight__places li[aria-selected="true"], .freight__places li[data-i]:hover { background: var(--sky); }
.freight__places .freight__none { color: var(--muted-2); cursor: default; }
.freight__type { display: flex; padding: 3px; border: 1px solid rgba(253, 254, 255, 0.22); border-radius: 0 12px 0 12px; }
.freight__type label { position: relative; flex: 1; }
.freight__type input { position: absolute; opacity: 0; pointer-events: none; }
.freight__type span { display: block; padding: 7px 10px; border-radius: 0 9px 0 9px; text-align: center; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(253, 254, 255, 0.7); cursor: pointer; transition: background 0.2s, color 0.2s; }
.freight__type input:checked + span { background: var(--lime); color: var(--ink); }
.freight__type input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.freight__ways { grid-column: 2 / span 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }   /* three ways, or two for a hatch */
.fway { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 4px; min-height: 118px; padding: 14px 16px 13px; border: 1px solid rgba(253, 254, 255, 0.16); border-radius: 0 16px 0 16px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.fway:hover { border-color: rgba(253, 254, 255, 0.4); }
.fway input { position: absolute; opacity: 0; pointer-events: none; }
.fway.is-on { border-color: var(--lime); background: rgba(220, 243, 67, 0.07); }
.fway:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.fway__name { display: flex; align-items: center; gap: 9px; font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fway__name::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid rgba(253, 254, 255, 0.45); border-radius: 50%; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.fway.is-on .fway__name::before { border-color: var(--lime); background: var(--lime); box-shadow: inset 0 0 0 2.5px var(--ink); }
.fway__price { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fway--free .fway__price { color: var(--lime); }
.fway__what { grid-column: 1 / -1; align-self: end; font-size: 13px; line-height: 17px; color: rgba(253, 254, 255, 0.85); }
.fway__how { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: rgba(253, 254, 255, 0.5); }
.fway__wait { display: inline-block; width: 44px; height: 14px; border-radius: 7px; vertical-align: middle; background: linear-gradient(90deg, rgba(253, 254, 255, 0.08), rgba(253, 254, 255, 0.28), rgba(253, 254, 255, 0.08)); background-size: 200% 100%; animation: fway-wait 1.1s linear infinite; }
@keyframes fway-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fway__wait { animation: none; } }
.freight__note { grid-column: 2 / span 3; font-size: 12px; line-height: 16px; color: rgba(253, 254, 255, 0.5); }
.freight__note:empty { display: none; }
/* narrower screens: where it's going runs across the top, the ways under it */
@media (max-width: 1100px) {
  .freight { grid-template-columns: minmax(0, 1fr); }
  .freight__where { flex-direction: row; align-items: center; gap: 14px; }
  .freight__search { flex: 1; max-width: 360px; }
  .freight__type { flex: none; width: 210px; }
  .freight__where, .freight__ways, .freight__note { grid-column: 1; }
}

/* =========================================================
   Base layouts (layouts.js): two moving rows of ready-made
   designs under the builder, what a picked one is set up with,
   and all of them in a grid behind "Open for more layouts"
   ========================================================= */
/* clip, not hidden: a hidden box can still be scrolled, and focusing a card out at
   the end of a row would slide the whole section sideways to show it */
.section--layouts { padding: 64px 0 100px; overflow: hidden; overflow: clip; }
.layouts-intro { padding: 0 var(--pad); text-align: center; }
.layouts-intro .sup { margin: 0; }
.layouts-intro__text { max-width: 460px; margin: 10px auto 0; font-size: 16px; line-height: 24px; color: var(--muted-2); }

/* two rows that keep moving, in opposite directions (layouts.js runs them). Each row
   is the full width of the window and clips its track side to side only, so a card
   lifting on hover and its shadow still show; the padding is that room, and the
   second row tucks up into the first's so only a small gap shows between them.
   The ends fade out rather than cut off. */
.marquee { --mq-h: clamp(240px, 33vh, 340px); --mq-gap: 16px; margin-top: 40px; }
.marquee__row {
  overflow: hidden; overflow-x: clip; overflow-y: visible; padding: 12px 0 26px;
  touch-action: pan-y;   /* a swipe along a row drags it; up and down still scrolls the page */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee__row[hidden] { display: none; }
.marquee__row + .marquee__row { margin-top: calc(var(--mq-gap) - 38px); }
.marquee__track { display: flex; gap: var(--mq-gap); width: max-content; will-change: transform; }
.mq-card {
  position: relative; flex: none; height: var(--mq-h); aspect-ratio: 9 / 13;
  padding: 0; overflow: hidden; border-radius: 22px;
  background: linear-gradient(165deg, #f7f8f9 0%, #e7e9ec 100%);
  box-shadow: 0 14px 26px -12px rgba(16, 17, 21, 0.3), 0 0 0 1px rgba(16, 17, 21, 0.06);
  -webkit-user-select: none; user-select: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mq-card.is-live { cursor: pointer; }
.mq-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mq-card__title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1rem 1rem;
  background: linear-gradient(to top, rgba(16, 17, 21, 0.78), rgba(16, 17, 21, 0));
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 12px; line-height: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-align: left; color: var(--white);
}
.mq-card.no-img .mq-card__title { top: 50%; bottom: auto; padding: 0 1.2rem; background: none; transform: translateY(-50%); text-align: center; color: var(--ink); }
.mq-card.is-live:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(16, 17, 21, 0.38), 0 0 0 1px rgba(16, 17, 21, 0.06); }
.mq-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.marquee__row.is-dragging { cursor: grabbing; }
.marquee__row.is-dragging .mq-card { cursor: grabbing; transform: none; }
@media (max-width: 800px) {
  .marquee { --mq-h: 230px; --mq-gap: 12px; margin-top: 28px; }
  .mq-card { border-radius: 18px; }
  .mq-card__title { padding: 2.4rem 0.8rem 0.8rem; font-size: 11px; line-height: 14px; }
}
@media (max-width: 479px) {
  .marquee { --mq-h: 200px; }
}

/* "Open for more layouts" — always there, under the rows */
.layouts-more {
  display: flex; align-items: center; gap: 12px; margin: 48px auto 0;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: clamp(20px, 2.4vw, 32px); line-height: 1.15;
  font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
  transition: color 0.3s;
}
.layouts-more span { padding-bottom: 4px; border-bottom: 2px solid currentColor; }
.layouts-more svg { flex: none; width: 0.9em; height: 0.9em; transition: transform 0.35s var(--ease); }
.layouts-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.layouts-more:hover { color: var(--blue); }

/* every layout, as a plain grid */
.layouts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px 20px; margin-top: 40px; padding: 0 var(--pad); }
.layouts-grid[hidden] { display: none; }
/* the filters over the grid: drawer units, hatches, engraved… */
.layouts-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; padding: 0 var(--pad); }
.layouts-filter[hidden] { display: none; }
.layouts-filter button {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid rgba(16, 17, 21, 0.25); border-radius: 20px;
  font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.layouts-filter button:hover { border-color: var(--ink); }
.layouts-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.layouts-filter button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.layouts-filter + .layouts-grid { margin-top: 28px; }
.layout-tile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }
.layout-tile[hidden] { display: none; }
.layout-tile__img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0 18px 0 18px;
  background: linear-gradient(165deg, #f7f8f9 0%, #e7e9ec 100%); box-shadow: inset 0 0 0 1px rgba(16, 17, 21, 0.06);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.layout-tile__title { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.layout-tile__go { font-size: 13px; color: var(--blue); }
.layout-tile.is-blank .layout-tile__title { color: var(--muted); }
button.layout-tile:hover .layout-tile__img { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(16, 17, 21, 0.35), inset 0 0 0 1px rgba(16, 17, 21, 0.06); }
button.layout-tile:hover .layout-tile__go { text-decoration: underline; text-underline-offset: 3px; }
.layouts-pager { display: none; } /* phones only, below */
.perks { display: none; } /* phones only (Phone tidy-ups) */
@keyframes perks-run { from { transform: translateX(-50%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .perks { overflow-x: auto !important; }
  .perks__run { animation: none !important; }
  .perks__set[aria-hidden] { display: none !important; }
}
@media (max-width: 800px) {
  .section--layouts { padding: 48px 0 70px; }
  .layouts-more { margin-top: 36px; font-size: 18px; }
  .layouts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .layouts-filter { gap: 6px; margin-top: 28px; }
  .layouts-filter button { height: 32px; padding: 0 12px; font-size: 10px; }
  /* phones: the grid a page of 12 at a time (layouts.js), Previous / Next over and under it */
  .layouts-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 0; padding: 0 var(--pad); }
  .layouts-pager[hidden] { display: none; }
  .layouts-pager + .layouts-grid { margin-top: 18px; }
  .layouts-pager button {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border: 1px solid rgba(16, 17, 21, 0.25); border-radius: 20px;
    font-family: var(--font-wide); font-stretch: var(--wide); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .layouts-pager button svg { width: 13px; height: 13px; }
  .layouts-pager button:not(:disabled):active { background: var(--ink); border-color: var(--ink); color: var(--lime); }
  .layouts-pager button:disabled { opacity: 0.3; }
  .layouts-pager__at { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted-2); }
}

/* =========================================================
   Phone tidy-ups (up to 800 px). Desktop is untouched: every
   rule here is inside this query.
   ========================================================= */
@media (max-width: 800px) {
  /* the benefits: a third row under the layouts, running left to right, the
     other way to the row above it (main.js builds it from the list, which goes) */
  .section--layouts { padding-bottom: 36px; }
  .section--benefits { display: none; }
  .perks { display: block; overflow: hidden; margin-top: -8px; padding: 4px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
  .perks__run { display: flex; width: max-content; animation: perks-run var(--perks-dur, 90s) linear infinite; }
  .perks__set { display: flex; margin: 0; padding: 0; list-style: none; }
  .perk { flex: none; display: flex; align-items: center; gap: 10px; margin-right: 28px; }
  .perk__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); }
  .perk__icon svg { width: 16px; height: 16px; }
  .perk__name { font-family: var(--font-wide); font-stretch: var(--wide); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
  .layouts-more { margin-top: 30px; }

  /* "Made to get wet.": the heading says it, the paragraph goes */
  .hw__title + .hw__lede { display: none; }

  /* King StarBoard: no custom-work line, and the facts two across, just the
     headings until one is tapped (main.js) */
  .sheet__custom { display: none; }
  .sheet__range { margin-top: 44px; }
  .sheet__range img { border-radius: 10px; }
  .sheet__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  .sheet__facts li { padding-top: 0; }
  .sheet__facts .fact__top { gap: 8px; margin: 0; padding: 12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sheet__facts h3 { font-size: 11px; line-height: 14px; }
  .sheet__facts .fact__top::after {
    content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; margin-right: 3px;
    border-right: 1.5px solid var(--lime); border-bottom: 1.5px solid var(--lime);
    transform: translateY(-3px) rotate(45deg); transition: transform 0.35s var(--ease);
  }
  .sheet__facts li.is-open .fact__top::after { transform: translateY(2px) rotate(225deg); }
  .sheet__facts li > p { display: grid; max-height: 0; overflow: hidden; opacity: 0; font-size: 12.5px; line-height: 17px; transition: max-height 0.4s var(--ease), opacity 0.3s, padding 0.4s var(--ease); }
  .sheet__facts li.is-open > p { max-height: 160px; opacity: 1; padding-bottom: 14px; }
  .sheet__facts li.is-open::after { transform: scaleX(1); }
  .sheet__facts .fact__ico { width: 28px; height: 28px; }
  .sheet__facts .fact__ico svg { width: 15px; height: 15px; }

  /* the hardware cards, tight: no reference lines or status over the drawing
     (the status is still read out), a smaller latch, and its two controls on one
     row, the latch type left and the pull right. The number sits level with the
     model, which hardware3d.js frames from near the top down to the controls. */
  .hwcard__where, .hwcard__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hwcard__stage { min-height: 0; padding: 12px 14px 56px; }
  .hwcard__n { top: 12px; right: 12px; width: 34px; height: 34px; font-size: 11px; }
  .latch { width: min(180px, 56%); }
  .hwcard__ctl { flex-wrap: nowrap; gap: 6px; right: 12px; bottom: 12px; left: 12px; }
  .hw-seg { flex: none; margin-right: auto; padding: 2px; background: rgba(224, 227, 231, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* solid enough to hide the big outline number behind it */
  .hw-seg button { height: 32px; padding: 0 9px; font-size: 11px; }
  .hw-pill { flex: none; height: 36px; gap: 7px; padding: 0 12px 0 11px; font-size: 10px; letter-spacing: 0.03em; }
  .hwcard__stage--slide { padding-top: 12px; padding-bottom: 54px; }
  .slide { height: 118px; }
  .slide:not(.is-3d) { transform: scale(0.7); transform-origin: 50% 0; }   /* the flat drawing, until the 3D is in */
  .slide__stop { display: none; }   /* at full stretch it would sit under the Pull range */

  /* no double gap between the shipping box and the FAQs, and the pickup band is
     just the address (the quote form is right after the FAQs) */
  .section--shipping { padding-bottom: 28px; }
  .shippick .btn { display: none; }
  .shippick__inner { padding: 16px 20px; }
  .section--faq { padding-top: 28px; }

  /* footer: one band, the logo with the email and phone beside it, then the
     copyright (kept to the left of the back-to-top helm in the middle) */
  .footer { padding: 20px 0 12px; }
  .footer__main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .footer__brand .logo__word { font-size: 17px; }
  .footer__brand .logo__sub { font-size: 6px; }
  .footer__tag, .footer__col h2, .footer__col--contact > .socials { display: none; }
  .footer__col--contact { min-width: 0; text-align: right; }
  .footer__col--contact ul { gap: 3px; }
  .footer__col--contact a { font-size: 13px; line-height: 17px; }
  .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(253, 254, 255, 0.12); }
  .footer__bottom::before { display: none; }
  .copyright { max-width: 42%; font-size: 10px; line-height: 13px; }
  .copyright__rest { display: none; }
  .socials--bottom { display: flex; margin: 0; }

  /* Pay now: a tight heading, and the three steps as one row of progress over
     the card (a tap goes to that part of it: main.js) */
  .pay__grid { padding-top: 40px; padding-bottom: 32px; row-gap: 24px; }
  .pay__intro .coords, .pay__lede { display: none; }
  .pay__intro .display { margin-top: 8px; font-size: 48px; line-height: 1; }
  .pay__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; max-width: none; margin-top: 20px; }
  .pay__step + .pay__step { margin-top: 0; }
  .pay__step:not(:last-child)::after,
  .pay__step.is-done:not(:last-child)::after { top: 15px; bottom: auto; left: calc(50% + 21px); right: calc(-50% + 15px); width: auto; height: 1px; }
  .pay__step.is-done:not(:last-child)::after { height: 2px; }
  .pay__step-head { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 7px; padding: 0; text-align: center; }
  .pay__step-num { width: 30px; height: 30px; font-size: 10px; }
  .pay__step.is-current .pay__step-num { box-shadow: 0 0 0 4px rgba(16, 17, 21, 0.12); }
  .pay__step-title b { font-size: 9.5px; line-height: 12px; }
  .pay__step-title small, .pay__step-toggle, .pay__step-body { display: none; }
  .pay__help { margin-top: 18px; padding-top: 12px; font-size: 13px; }

  /* downloads: one thin row that drifts along (main.js), short names, no arrows */
  .downloads { padding: 28px 0 10px; }
  .downloads__bar { margin-bottom: 8px; }
  .downloads__title { font-size: 13px; }
  .downloads__nav { display: none; }
  .docs { gap: 8px; padding-bottom: 16px; scroll-snap-type: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
  .doc { flex: 0 0 auto; gap: 8px; padding: 3px 3px 3px 12px; }
  .doc::before { bottom: -34%; height: 26%; filter: blur(8px); }
  .doc__num { font-size: 10px; }
  .doc__title { font-size: 12.5px; line-height: 16px; }
  .doc__pre { display: none; }
  .doc__icon { width: 24px; height: 24px; }
  .doc__icon svg { width: 11px; height: 11px; }

  /* shipping: three short rows, each name with its tag beside it (a tap still opens one) */
  .shipway { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 0; }
  .shipway__n { font-size: 20px; }
  .shipway__head { flex-wrap: nowrap; align-items: center; }
  .shipway .caps-24 { font-size: 13px; line-height: 16px; }
  .shipway__price { font-size: 9.5px; }
  .shipway--free .shipway__price { padding: 4px 9px; }

  /* FAQs: "Ask a question" goes (the contact form is right under them) */
  .section--faq .shead__aside .btn--dark { display: none; }

  /* the contact form: no dead space under Contact us (just room for its glow) */
  .madlib { padding-bottom: 40px; }
  .form-note { margin-top: 12px; min-height: 0; }
  .form-note:empty { margin-top: 0; }

  /* the builder: until it reports its height (main.js) the frame holds about
     what it will need, so nothing jumps */
  .byo iframe { height: calc(clamp(380px, 118vw, 600px) + 1461px); }

  /* delivery under the builder: the place and home/business stacked, then the three ways as rows */
  .freight { padding: 16px 16px 18px; row-gap: 12px; }
  .freight__where { flex-direction: column; align-items: stretch; gap: 10px; }
  .freight__search { max-width: none; }
  .freight__type { width: auto; }
  .freight__q { font-size: 16px; }   /* 16 keeps iOS from zooming into the box */
  .freight__ways { grid-auto-flow: row; gap: 8px; }
  .fway { min-height: 0; padding: 12px 14px; }
  .fway__price { font-size: 22px; }

  /* the email and phone under "Get a quote": two big rows, each tappable end to end */
  .cta__contacts { gap: 8px; margin-top: 16px; padding-bottom: 0; }
  .cta__contacts div { position: relative; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(253, 254, 255, 0.24); border-radius: 0 16px 0 16px; background: rgba(16, 17, 21, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .cta__contacts div::after { content: "→"; flex: none; color: var(--lime); font-size: 18px; line-height: 1; }
  .cta__contacts dt { flex: none; width: 48px; font-size: 10px; letter-spacing: 0.08em; color: var(--lime); }
  .cta__contacts dd { flex: 1; min-width: 0; }
  .cta__contacts a { display: block; font-size: 18px; line-height: 23px; font-weight: 500; overflow-wrap: anywhere; }
  .cta__contacts a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
}