/* Miccor Flooring. Direction: "Material library" (70Materia lock), type after KARAK and Liron Moran (Boska serif). See work/miccor-flooring/08-website-planning/site-direction-2026-10-05.md */
@font-face { font-family: "Boska"; src: url("/assets/fonts/boska-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("/assets/fonts/boska-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("/assets/fonts/boska-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --canvas: #ffffff;
  --wall: #eeedea;
  --wall-2: #e4e2de;
  --concrete: #bababa;
  --ink: #111111;
  --off-black: #1e1e1e;
  --mute: #5c5b58;
  --rule: rgba(17, 17, 17, .16);
  --rule-dark: rgba(255, 255, 255, .16);

  /* Miccor's logo colours (sampled from miccor-logo.png): red from FLOORING for actions, blue from the roof for details */
  --red: #c8202f;
  --red-deep: #a51a26;
  --blue: #2f78a2;
  --blue-light: #86bddc;
  --blue-deep: #245f81;
  /* the filled-button colour; the preview switch swaps it (btn-black / btn-red / btn-blue on <html>) */
  --btn: var(--red);
  --btn-hover: var(--red-deep);

  --sans: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Boska", "Iowan Old Style", "Times New Roman", serif;

  --h1: clamp(38px, 2.2rem + 2.1vw, 70px);
  --h2: clamp(32px, 1.6rem + 1.7vw, 54px);
  --h3: clamp(20px, 1.15rem + .35vw, 24px);
  --body: clamp(16px, .95rem + .12vw, 17px);
  --label: 11.5px;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1400px;
  --section: clamp(72px, 4.5rem + 3vw, 132px);

  --r-btn: 3px;
  --r-board: 2px;

  --fast: 120ms;
  --default: 200ms;
  --slow: 320ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
i.sw, i.swatch, i.tile, i.chip, i.peek, i.slab__seam { display: block; font-style: normal; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-family: var(--serif); font-weight: 500; font-size: var(--h1); line-height: 1.0; letter-spacing: -.015em; }
h2 { font-family: var(--serif); font-weight: 500; font-size: var(--h2); line-height: 1.04; letter-spacing: -.01em; }
h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -.005em; font-weight: 500; }
.door h3, .rrow h3, .lstep h3, .product h3, .steps h3, .tilelink b, .faq summary, .cta h2, .qstep h2, .qdone h2, .prose h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible { outline-color: #fff; }
::selection { background: var(--blue); color: #fff; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; font-family: var(--mono); font-size: 12px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--wall { background: var(--wall); }
.dark { background: var(--off-black); color: #f2f1ee; }
.dark .mute, .dark .label { color: rgba(242, 241, 238, .62); }
.mute { color: var(--mute); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Labels and rules */
.label {
  font-family: var(--mono);
  font-size: var(--label);
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 18px;
}
.label::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--blue); vertical-align: middle; margin: 0 10px 2px 0; }
.dark .label::before, .statement .label::before { background: var(--blue-light); }
.label--ink { color: var(--ink); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-short { width: 48px; border: 0; border-top: 1px solid var(--ink); margin: 26px 0; }
.lede { font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.5; max-width: 34em; }

/* Buttons: mono, 3px radius, the logo red is the only filled action */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--r-btn); border: 1px solid var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform 90ms var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-black { --btn: var(--off-black); --btn-hover: #000; }
.btn-red { --btn: var(--red); --btn-hover: var(--red-deep); }
.btn-blue { --btn: var(--blue); --btn-hover: var(--blue-deep); }
.btn--solid { background: var(--btn); color: #fff; border-color: var(--btn); }
.btn--solid:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.dark .btn--line { border-color: rgba(255,255,255,.5); color: #fff; }
.dark .btn--line:hover { background: #fff; color: var(--ink); }
.dark .btn--solid { background: var(--btn); color: #fff; border-color: var(--btn); }
.dark .btn--solid:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn .arrow { width: 16px; height: 10px; transition: transform var(--default) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn svg.wa { width: 17px; height: 17px; }
.link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size var(--slow) var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  transition: transform var(--slow) var(--ease), background-color var(--default) var(--ease-out), box-shadow var(--default) var(--ease-out);
}
.site-header.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--rule); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  position: relative; padding: 6px 0;
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--slow) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-cta { margin-left: 8px; min-height: 42px; padding: 0 18px; }
.hours-note { margin: 8px 0 0; color: var(--mute); font-size: .92em; }
/* the Miccor team's way into the editing screen (Bianca, 8 October 2026): a quiet outline in the same ink and line
   weight as the menu button, full strength only when pointed at */
.hdr-signin { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -10px 0 -14px; border-radius: 50%; color: var(--ink); opacity: .5; transition: opacity var(--default) var(--ease-out), background-color var(--default) var(--ease-out); }
.hdr-signin:hover, .hdr-signin:focus-visible { opacity: 1; background: rgba(17, 17, 17, .05); }
.hdr-signin svg { display: block; width: 20px; height: 20px; }
.menu-btn { flex: none; }
/* the smallest phones have no room in the header, so the sign-in sits in the menu instead */
.menu-signin { display: none; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
@media (max-width: 480px) {
  .site-header .wrap { gap: 12px; }
  .site-header .menu-btn { margin-left: 0; }
  .hdr-signin { margin: 0 -6px; }
}
@media (max-width: 370px) { .header-cta { padding: 0 12px; } }
@media (max-width: 345px) { .hdr-signin { display: none; } .menu-signin { display: inline-flex; } }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; padding: 0; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform var(--slow) var(--ease), top var(--slow) var(--ease); }
.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 26px; }
.menu-open .menu-btn span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--canvas);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 28px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 520ms var(--ease), visibility 0s linear 520ms;
  overflow-y: auto;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 520ms var(--ease), visibility 0s; }
.menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.menu li { border-bottom: 1px solid var(--rule); }
.menu li a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-size: 24px; letter-spacing: -.01em; text-decoration: none; }
.menu li a span { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .06em; }
.menu .btns .btn { flex: 1; }
.menu-swatches { display: flex; gap: 8px; margin-top: auto; }
.menu-swatches i { flex: 1; height: 44px; background: var(--c) var(--tex) center / cover; border-radius: var(--r-board); }

/* Mobile quote bar */
.qbar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 70;
  display: none; gap: 8px; padding: 8px; background: rgba(255,255,255,.96);
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateY(140%); transition: transform 420ms var(--ease);
}
.qbar.is-on { transform: translateY(0); }
.qbar .btn { min-height: 46px; padding: 0 14px; }
.qbar .btn--solid { flex: 1; }
.qbar-tray { display: none; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 0 6px; }
.qbar-tray.has { display: flex; }

/* ---------- HERO: the sample wall ---------- */
.hero { position: relative; background: var(--wall); overflow: hidden; }
.hero.is-intro .board, .hero.is-intro .cast { transition: none; }
.hero__scene { position: relative; min-height: clamp(680px, 92svh, 960px); display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: end; padding-top: var(--header-h); }
.hero__wall { position: absolute; inset: 0; background-color: var(--wall); background-image: var(--wall-img, none); background-size: cover; background-position: center top; }
.hero__wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 10% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
.hero { --stage-bottom: clamp(72px, 10vh, 124px); }
.hero__floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--stage-bottom) + 48px); background-color: #dcdad5; background-image: var(--floor-img, linear-gradient(180deg, #cfcdc8, #e3e1dc 30%, #d9d7d1)); background-size: cover; background-position: center top; }
.hero__floor::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.06)); }
.hero__label { position: absolute; z-index: 3; top: calc(var(--header-h) + 3.2vh); left: var(--gutter); margin: 0; color: var(--ink); opacity: .75; }
.hero__copy { align-self: start; padding: calc(var(--header-h) + min(10vh, 92px) + var(--gfs) * .86 + 30px) 0 0 var(--gutter); max-width: 600px; margin-bottom: calc(var(--stage-bottom) + 6px); }
.hero__title { margin: 0; }
.hero { --gfs: min(12.6vw, 25vh); }
.hero__giant { position: absolute; z-index: 1; left: calc(var(--gutter) - .045em); top: calc(var(--header-h) + min(10vh, 92px)); font: 400 var(--gfs)/.82 var(--serif); letter-spacing: -.035em; color: #1d1b18; white-space: nowrap; pointer-events: none; overflow: hidden; padding: .04em .3em .34em .02em; margin: 0 -.3em -.34em 0; }
/* letters mounted on the wall: lit from the top left like the samples, so they cast down and to the right */
.hero__giant-in { display: block; text-shadow: -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(20,18,15,.35), 2px 3px 2px rgba(20,18,15,.22), 8px 12px 14px rgba(30,26,22,.20), 18px 28px 38px rgba(30,26,22,.12); }
.hero__line { position: relative; z-index: 3; display: block; font-weight: 500; font-size: clamp(28px, 1rem + 1.3vw, 40px); line-height: 1.08; letter-spacing: -.01em; max-width: 12.5em; margin-bottom: 22px; }
.hero__sub { position: relative; z-index: 3; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; max-width: 31em; margin: 0 0 26px; }
.hero__copy .btns { position: relative; z-index: 3; flex-wrap: nowrap; }
.hero__copy .btns .btn { padding: 0 18px; }
@media (max-width: 1300px) and (min-width: 961px) { .hero__copy .btns { flex-wrap: wrap; } .hero__sub { font-size: 13px; } }

.stage {
  --u: .1cqw;
  position: relative; z-index: 2; container-type: inline-size;
  width: calc(100% - var(--gutter)); aspect-ratio: 1000 / 600;
  margin-bottom: var(--stage-bottom);
  perspective: 1400px; perspective-origin: 40% 30%;
  --k: 1.04;
}
.stage__inner { position: absolute; inset: 0; transform: scale(var(--k, 1)); transform-origin: 30% 100%; }
.board-wrap { position: absolute; bottom: calc(var(--b, 0) * var(--u)); left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); z-index: var(--z, 1); perspective: 1300px; perspective-origin: 50% 20%; }
.board-wrap .cast {
  position: absolute; left: 6%; right: -22%; top: -2%; bottom: -2%;
  background: radial-gradient(52% 50% at 46% 52%, rgba(40, 38, 34, .30), rgba(40, 38, 34, .12) 55%, rgba(40, 38, 34, 0) 75%);
  transform: skewX(-10deg); transform-origin: bottom; z-index: -1; pointer-events: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.board-wrap .contact { position: absolute; left: -4%; right: -4%; bottom: calc(-10 * var(--u)); height: calc(22 * var(--u)); background: radial-gradient(50% 50% at 50% 50%, rgba(30,28,25,.42), rgba(30,28,25,0)); z-index: -1; pointer-events: none; }
.board {
  position: absolute; inset: 0; display: block; border-radius: var(--r-board);
  transform-origin: 50% 100%;
  transform: rotateX(var(--lean, 6deg)) translateY(0);
  transition: transform 520ms var(--ease);
  text-decoration: none;
}
.board__face { position: absolute; inset: 0; border-radius: inherit; background: var(--c, #ccc) var(--tex) center / cover no-repeat; overflow: hidden; }
.board__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,.12)), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0) 40%, rgba(0,0,0,.10)); }
.board::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: rgba(255,255,255,.45); border-radius: 2px 2px 0 0; z-index: 2; }
.board::after { content: ""; position: absolute; top: 0; bottom: 0; right: -4px; width: 4px; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.08)); border-radius: 0 2px 2px 0; }
.board--tile .board__face { -webkit-mask: var(--puzzle) center / 100% 100% no-repeat; mask: var(--puzzle) center / 100% 100% no-repeat; }
.board--tile::before, .board--tile::after { display: none; }
@media (hover: hover) {
  .board-wrap:hover .board { transform: rotateX(calc(var(--lean, 6deg) * .5)) translateY(calc(-10 * var(--u))); }
  .board-wrap:hover .cast { transform: skewX(-10deg) translateX(calc(10 * var(--u))); opacity: .75; }
}


.strip { position: relative; z-index: 4; background: var(--canvas); border-top: 1px solid var(--rule); }
.strip ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max); display: grid; grid-template-columns: repeat(5, 1fr); }
.strip li { border-left: 1px solid var(--rule); }
.strip li:first-child { border-left: 0; }
.strip a { display: grid; grid-template-columns: 34px 1fr; gap: 6px 16px; align-items: start; padding: 26px 22px 28px; text-decoration: none; height: 100%; transition: background-color var(--default) var(--ease-out); }
.strip li:first-child a { padding-left: 0; }
.strip a:hover { background: var(--wall); }
.strip .chip { grid-row: span 2; width: 34px; height: 34px; border-radius: var(--r-board); background: var(--c) var(--tex) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: transform var(--slow) var(--ease); }
.strip a:hover .chip { transform: rotate(-6deg) translateY(-2px); }
.strip b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.strip span { font-family: var(--mono); font-size: 11.5px; color: var(--mute); line-height: 1.5; }

/* ---------- Section heads ---------- */
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 6vw, 120px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.head p { margin: 0; color: var(--mute); max-width: 36em; }
.dark .head p { color: rgba(242,241,238,.7); }

/* ---------- Doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.door { position: relative; padding: 28px clamp(20px, 2.4vw, 40px) 36px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 360px; }
.door:first-child { border-left: 0; padding-left: 0; }
.door .num { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: .06em; }
.door .swatch { width: 92px; height: 120px; margin: 36px 0 34px; border-radius: var(--r-board); background: var(--c) var(--tex) center / cover; box-shadow: 10px 14px 24px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.05); transform: rotate(-3deg); transition: transform 520ms var(--ease), box-shadow 520ms var(--ease); }
.door:nth-child(2) .swatch { transform: rotate(2deg); }
.door:nth-child(3) .swatch { transform: rotate(-1deg); }
.door:hover .swatch { transform: rotate(0) translateY(-6px) scale(1.04); box-shadow: 16px 22px 34px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.05); }
.door h3 { font-size: clamp(22px, 1.2rem + .6vw, 28px); font-weight: 400; margin-bottom: 12px; }
.door p { color: var(--mute); max-width: 26em; }
.door .door__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px 22px; padding-top: 18px; }
.door .stretch::after { content: ""; position: absolute; inset: 0; }
.door .door__links a { position: relative; z-index: 2; }

/* ---------- Room (borrowed from direction 3) ---------- */
.room { position: relative; }
.room__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #e9e6e0; border-radius: 2px; }
.room__img, .room__strip { position: absolute; inset: 0; background-size: cover; background-position: center; }
.room__img { overflow: hidden; }
.room__img img { width: 100%; height: 100%; object-fit: cover; }
.room__strip { clip-path: inset(0 100% 0 0); }
.room__css { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 20%; overflow: hidden; background: linear-gradient(180deg, #f7f5f1 0%, #efece6 58%, #e6e2db 58.2%); }
.room__css .wallglow { position: absolute; right: 0; top: 0; width: 26%; height: 58%; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 40%), linear-gradient(180deg, #dfe8ee, #fff); opacity: .9; }
.room__css .plane { position: absolute; left: -60%; right: -60%; top: 58%; height: 160%; transform-origin: 50% 0; transform: rotateX(78deg); background-size: 14% auto; background-repeat: repeat; }
.room__css .sun { position: absolute; inset: 58% 0 0 0; background: linear-gradient(105deg, rgba(255,250,235,0) 30%, rgba(255,248,230,.35) 45%, rgba(255,248,230,0) 52%, rgba(255,248,230,.28) 60%, rgba(255,248,230,0) 70%); mix-blend-mode: screen; }
.room__css .skirt { position: absolute; left: 0; right: 0; top: calc(58% - 10px); height: 10px; background: #fbfaf8; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.room__chips {
  position: absolute; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 5;
  display: flex; gap: 6px; padding: 6px; background: rgba(255,255,255,.94); border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.room__chips button {
  display: flex; align-items: center; gap: 10px; border: 1px solid transparent; background: transparent; border-radius: 3px; padding: 6px 12px 6px 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
@media (min-width: 961px) { .room__chips:has(> :nth-child(5)) { display: grid; grid-template-columns: repeat(4, auto); } }
.room__chips button i { width: 30px; height: 30px; border-radius: 2px; background: var(--c) var(--tex) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.room__chips button[aria-checked="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.room__chips button:hover { background: var(--wall); }
.room__caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.example-tag { position: absolute; right: 12px; top: 12px; z-index: 6; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.88); color: var(--ink); padding: 5px 8px; border-radius: 2px; }

/* ---------- Under the floor (layers): one pinned, scroll-scrubbed scene ---------- */
.layers { position: relative; padding-top: var(--section); }
.layers__intro .head { margin-bottom: 0; }
.layers__pin { position: relative; height: 100svh; display: flex; align-items: center; overflow: hidden; }
/* without the scroll animation (Reduce Motion switched on, or the script not loaded) every step shows, so the box grows to fit them */
html:not(.js) .layers__pin { height: auto; min-height: 0; padding: clamp(32px, 6vw, 72px) 0; }
.layers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; width: 100%; }
.lrail { position: relative; display: flex; gap: 0; margin-bottom: 36px; border-bottom: 1px solid var(--rule-dark); max-width: 420px; }
.lrail span { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(242,241,238,.45); padding-bottom: 10px; }
.lrail__bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--blue-light); transform-origin: left; transform: scaleX(0); }
.lsteps { position: relative; min-height: 220px; }
.lstep .n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--blue-light); display: block; margin-bottom: 14px; }
.lstep h3 { font-size: clamp(22px, 1.1rem + .55vw, 28px); margin-bottom: 12px; }
.layers .head h2 { font-size: clamp(30px, 1.3rem + 1.3vw, 44px); }
.layers__grid { max-width: 1180px; margin: 0 auto; }
.lstep p { color: rgba(242,241,238,.72); max-width: 28em; margin: 0; }
.js .lstep { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; }
.js .lstep:first-child { opacity: 1; visibility: visible; }
.lstep + .lstep { margin-top: 36px; }
.js .lstep + .lstep { margin-top: 0; }
.layers__viz { display: flex; align-items: center; justify-content: center; height: min(64svh, 520px); }
.iso { position: relative; width: min(100%, 430px); aspect-ratio: 1; perspective: 2200px; }
.iso__stack { position: absolute; left: 50%; top: 58%; width: 62%; aspect-ratio: 1; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-40deg); }
.slab { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * 1px)); will-change: transform; }
.slab__top { position: absolute; inset: 0; background: var(--c) var(--tex) center / cover; }
.slab__top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.10)); }
.slab__front, .slab__side { position: absolute; background: var(--c) var(--tex) center / cover; }
/* every face keeps its own fixed raster, so moving in depth never forces a re-draw */
.slab__top, .slab__front, .slab__side, .slab__cove { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.layers .lstep, .layers .iso__tag, .lrail__bar { will-change: transform, opacity; }
.slab__front::after, .slab__side::after { content: ""; position: absolute; inset: 0; }
.slab__front { left: 0; right: 0; top: 100%; height: calc(var(--t, 10) * 1px); transform-origin: top; transform: rotateX(-90deg); }
.slab__front::after { background: rgba(0,0,0,.34); }
.slab__side { top: 0; bottom: 0; left: 100%; width: calc(var(--t, 10) * 1px); transform-origin: left; transform: rotateY(90deg); }
.slab__side::after { background: rgba(0,0,0,.18); }
.slab__seam { position: absolute; top: 0; bottom: 0; left: 48%; width: 3px; background: #6f7275; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transform-origin: top; }
.slab__cove { position: absolute; left: 0; right: 0; bottom: 100%; height: 34%; transform-origin: bottom; transform: rotateX(90deg); background: var(--c) var(--tex) center / cover; }
.slab__cove::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.04) 40%, rgba(255,255,255,.06)); }
.iso__tags { position: absolute; top: 0; bottom: 0; left: 0; right: -27%; pointer-events: none; }
/* The labels reach 27% past the drawing's right edge. On the two-column layout the drawing makes room for them, moving left
   only as far as needed and shrinking only when the column is too narrow for both, so they never pass the column edge
   (they ran off the screen between about 960 and 1200 px wide; fixed 15 October 2026). */
@media (min-width: 961px) { .iso { --iso-w: min(430px, 78.7%); width: var(--iso-w); margin-right: max(0px, calc(var(--iso-w) * 1.54 - 100%)); } }
.iso__tag { position: absolute; right: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(242,241,238,.85); display: flex; align-items: center; gap: 10px; }
.js .iso__tag { opacity: 0; }
.iso__tag::before { content: ""; width: 34px; height: 1px; background: var(--blue-light); }
/* Computer screens tall enough for it: the heading, the steps and the drawing share one screen, and the whole section is
   pinned instead of the scene alone, so no empty band sits between the words and the drawing (Bianca, 17 October 2026:
   "this whole black screen should be visible"). The drawing takes the height that is left. The script pins the section
   under the same condition (main.js, initLayers); shorter screens keep the heading above the pinned scene. */
@media (min-width: 961px) and (min-height: 620px) {
  .js .layers { height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2svh, 28px); padding: calc(var(--header-h) + clamp(16px, 3svh, 40px)) 0 clamp(16px, 3svh, 40px); }
  .js .layers__intro { flex: none; }
  /* the scene is never taller than the drawing, so a tall screen adds space above and below, not between words and drawing */
  .js .layers__pin { flex: 0 1 440px; height: auto; min-height: 0; }
  .js .layers__grid { height: 100%; grid-template-rows: minmax(0, 1fr); }
  .js .layers__viz { height: 100%; max-height: 520px; container-type: size; }
  .js .iso { --iso-w: min(430px, 78.7cqw, 100cqh); }
}

/* ---------- Vision statement: serif over a dark floor close-up (after KARAK) ---------- */
.statement { position: relative; overflow: hidden; background: #151413; color: #f2efe9; padding: clamp(96px, 6rem + 4vw, 176px) 0; }
.statement__bg { position: absolute; inset: -10% 0; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,13,12,.82), rgba(14,13,12,.45) 70%, rgba(14,13,12,.3)); pointer-events: none; }
.statement__inner { position: relative; z-index: 2; }
.statement .label { color: rgba(242,239,233,.6); }
.statement__text { font-family: var(--serif); font-weight: 400; text-shadow: 0 2px 30px rgba(0,0,0,.35); font-size: clamp(32px, 1.4rem + 2.4vw, 62px); line-height: 1.08; letter-spacing: -.015em; max-width: 19em; margin: 0; text-wrap: balance; }
.js [data-words] .w { opacity: .2; transition: opacity .45s var(--ease); }
.js [data-words] .w.on { opacity: 1; }

/* ---------- Range rows ---------- */
.range { border-top: 1px solid var(--ink); }
.rrow { position: relative; display: grid; grid-template-columns: 48px minmax(0, 3fr) minmax(0, 4fr) 170px; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.rrow .n { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.rrow h3 { font-size: clamp(22px, 1.2rem + .7vw, 30px); font-weight: 400; transition: transform var(--slow) var(--ease); }
.rrow p { margin: 0; color: var(--mute); }
.rrow .spec { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); display: block; margin-top: 6px; }
.rrow .acts { display: flex; gap: 10px; align-items: center; position: relative; z-index: 3; }
.rrow .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rrow:hover h3 { transform: translateX(6px); }
.sample-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-btn); background: #fff; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out); }
.sample-btn:hover { border-color: var(--ink); }
.sample-btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.sample-btn .plus { width: 10px; height: 10px; position: relative; }
.sample-btn .plus::before, .sample-btn .plus::after { content: ""; position: absolute; background: currentColor; left: 0; right: 0; top: 4.5px; height: 1px; transition: transform var(--default) var(--ease); }
.sample-btn .plus::after { transform: rotate(90deg); }
.sample-btn[aria-pressed="true"] .plus::after { transform: rotate(0); }
.flyer { position: fixed; z-index: 120; width: 42px; height: 52px; border-radius: 2px; background: var(--c) var(--tex) center / cover; box-shadow: 0 10px 24px rgba(0,0,0,.25); pointer-events: none; }
.gerflor { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--mute); }

/* ---------- Projects ---------- */
.pgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); }
.pitem { margin: 0; }
.pitem .frame { position: relative; overflow: hidden; background: var(--wall-2); border-radius: 2px; }
.pitem img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.pitem figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.pitem figcaption span { color: var(--mute); }
.p-a { grid-column: 1 / span 7; } .p-a .frame { aspect-ratio: 4 / 3; }
.p-b { grid-column: 9 / span 4; margin-top: 18%; } .p-b .frame { aspect-ratio: 3 / 4; }
.p-c { grid-column: 2 / span 4; } .p-c .frame { aspect-ratio: 4 / 5; }
.p-d { grid-column: 7 / span 6; margin-top: -6%; } .p-d .frame { aspect-ratio: 4 / 3; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); counter-reset: s; position: relative; }
.steps li { padding: 30px 22px 0 0; position: relative; }
.steps .tile { width: 26px; height: 26px; margin-bottom: 26px; border-radius: 2px; background: var(--c) var(--tex) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.steps .n { font-family: var(--mono); font-size: 12px; color: var(--blue); display: block; margin-bottom: 10px; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--mute); font-size: 15.5px; }
.steps__line { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* ---------- Showroom ---------- */
.showroom { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: stretch; }
.showroom__map { position: relative; min-height: 420px; background: var(--wall-2); overflow: hidden; border-radius: 2px; }
.showroom__map::before { content: "Ruimsig Shopping Centre · Roodepoort"; position: absolute; left: 20px; bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.showroom__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
/* a tap anywhere on the map opens Google Maps with a Maps URL (Google's own link format for websites), which the phone apps
   open reliably; the map's built-in "Open in Maps" link failed in the app on Bianca's phone (13 October 2026) */
.map-open { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px; text-decoration: none; }
.map-open span { background: #fff; color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.map-open:hover span, .map-open:focus-visible span { background: var(--ink); color: #fff; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.facts dd { margin: 0; }
.facts a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.hours { margin: 0; padding: 0; list-style: none; }
.hours li { display: flex; justify-content: space-between; max-width: 280px; }

/* ---------- CTA ---------- */
.cta { text-align: left; }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 110px); align-items: end; }
.cta h2 { font-size: clamp(32px, 1.6rem + 2vw, 56px); line-height: 1.04; letter-spacing: -.02em; }
.cta__tiles { display: flex; gap: 6px; margin-bottom: 40px; }
.cta__tiles i { width: 38px; height: 38px; border-radius: 2px; background: var(--c) var(--tex) center / cover; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wall); padding: clamp(64px, 7vw, 110px) 0 32px; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0 33.4%, var(--off-black) 33.4% 66.6%, var(--red) 66.6% 100%); }
.foot { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 3fr); gap: 32px; }
.foot .brand img { height: 64px; }
.foot h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__base { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); }
.foot__base a { text-decoration: none; }
.foot__base a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Inner pages ---------- */
.phero { padding: calc(var(--header-h) + clamp(48px, 7vw, 110px)) 0 clamp(48px, 6vw, 88px); background: var(--wall); position: relative; overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 110px); align-items: end; }
.phero h1 { max-width: 14em; }
.phero .lede { margin-top: 22px; color: var(--ink); }
.crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.phero__board { justify-self: end; width: min(100%, 360px); aspect-ratio: 4 / 5; border-radius: var(--r-board); background: var(--c) var(--tex) center / cover; box-shadow: 30px 40px 60px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.05); transform: perspective(1200px) rotateX(5deg) rotate(-2deg); }
.phero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--wall-2); }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
/* a small label on a hero photo, so a phone reader knows what it shows (the About showroom, Steven, 14 October 2026) */
.phero__tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(255,255,255,.94); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 11px; border-radius: 3px; }

.glance { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.glance div { padding: 22px 22px 26px 0; border-right: 1px solid var(--rule); }
.glance div + div { padding-left: 22px; }
.glance div:last-child { border-right: 0; }
.glance dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.glance dd { margin: 0; font-size: 17px; line-height: 1.4; }

.prose { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 110px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--rule); }
.prose:first-child { border-top: 0; }
.prose h2 { font-size: clamp(24px, 1.2rem + .9vw, 34px); }
.prose .body > *:last-child { margin-bottom: 0; }
/* SAWLFA's "Member of" badge on About: a vector traced from SAWLFA's member logo, sharp at any size (12 October 2026) */
.member-badge { display: block; width: 180px; height: auto; margin: 28px 0 0; }
@media (max-width: 600px) { .member-badge { width: 150px; } }
.prose ul.ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.prose ul.ticks li { padding-left: 26px; position: relative; }
.prose ul.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 1px; background: var(--ink); }
.ol-steps { list-style: none; margin: 0; padding: 0; counter-reset: o; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ol-steps li { counter-increment: o; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ol-steps li::before { content: counter(o, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--mute); padding-top: 4px; }
.product { border-top: 1px solid var(--ink); padding: 22px 0; display: grid; grid-template-columns: 120px 1fr; gap: 24px; }
.product + .product { border-top: 1px solid var(--rule); }
.product .sw { width: 120px; aspect-ratio: 3 / 4; border-radius: 2px; background: var(--c) var(--tex) center / cover; }
.product h3 { margin-bottom: 6px; }
.product .spec { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.product p { color: var(--mute); margin-bottom: 10px; }
.note { font-size: 14px; color: var(--mute); border-left: 1px solid var(--ink); padding-left: 14px; }

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 14px; height: 14px; position: relative; margin-top: 6px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1px; background: currentColor; transition: transform var(--default) var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq .ans { padding: 0 0 22px; color: var(--mute); max-width: 44em; }

.tilelinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.tilelink { display: block; text-decoration: none; }
.tilelink .sw { aspect-ratio: 4 / 3; border-radius: 2px; background: var(--c) var(--tex) center / cover; margin-bottom: 14px; transition: transform var(--slow) var(--ease); }
.tilelink:hover .sw { transform: translateY(-4px); }
.tilelink b { display: block; font-weight: 500; font-size: 18px; }
.tilelink span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }

.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 400; border-bottom: 1px solid var(--ink); }
.compare tbody th { font-weight: 500; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.dot--half { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.dotkey { list-style: none; margin: 0 0 18px; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: 3px; font-size: 14px; }
.dotkey li { display: flex; align-items: center; gap: 10px; }
.dotkey .k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.dotkey .none { display: inline-block; width: 9px; height: 1px; background: var(--mute); }
@media (max-width: 960px) { .dotkey { flex-direction: column; align-items: flex-start; gap: 8px; } }

#catalogues { scroll-margin-top: 110px; }   /* the sticky header must not cover the heading when a page links here */
.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.docs li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.docs small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 28px); }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.gallery .frame { position: relative; overflow: hidden; border-radius: 2px; background: var(--wall-2); aspect-ratio: 4 / 3; }
.gallery .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.gallery figure.is-wide { grid-column: span 2; }
.gallery figure.is-wide .frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.gallery figure.is-full { grid-column: 1 / -1; }
.gallery figure.is-full .frame { aspect-ratio: 16 / 7; }
.gallery figcaption { padding-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; }
.gallery figcaption span { color: var(--mute); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button { min-height: 40px; padding: 0 16px; border: 1px solid var(--rule); background: #fff; border-radius: var(--r-btn); cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.filters button[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.gallery figure.is-hidden { display: none; }

.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.feed li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.feed .d { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.feed b { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1rem + .5vw, 23px); }
.feed .w { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); text-align: right; }
@media (max-width: 720px) { .feed li { grid-template-columns: 1fr; gap: 4px; } .feed .w { text-align: left; } }

/* ---------- Quote ---------- */
.quote { min-height: 100svh; padding: calc(var(--header-h) + 40px) 0 80px; background: var(--wall); position: relative; overflow: hidden; }
.quote__bg { position: absolute; inset: auto 0 0 0; height: 34%; background: var(--c, #ddd) var(--tex, none) center / 420px auto repeat; opacity: .55; transition: opacity 600ms var(--ease); -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); }
.quote__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "aside card" "more card"; grid-template-rows: auto 1fr; gap: 0 clamp(32px, 6vw, 110px); }
.quote__aside { grid-area: aside; }
.quote__more { grid-area: more; }
.quote__holder { grid-area: card; }
.page-quote .qbar { display: none !important; }
.quote__aside .lede { margin-top: 20px; }
.qprog { display: flex; gap: 4px; margin: 34px 0 10px; }
.qprog i { flex: 1; height: 22px; border-radius: 2px; background: rgba(0,0,0,.06); position: relative; overflow: hidden; }
.qprog i::after { content: ""; position: absolute; inset: 0; background: var(--c) var(--tex) center / cover; transform: translateY(-110%); transition: transform 520ms var(--ease); }
.qprog i.done::after { transform: none; }
.qprog-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.qcard { background: #fff; border-radius: 4px; padding: clamp(22px, 3vw, 44px); box-shadow: 0 30px 60px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
.qstep { display: none; }
.qstep.is-on { display: block; animation: qin 420ms var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qstep h2 { font-size: clamp(24px, 1.2rem + .9vw, 32px); margin-bottom: 8px; }
.qstep > p { color: var(--mute); }
.qdoors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.qdoor { text-align: left; border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; min-height: 190px; transition: border-color var(--fast) var(--ease-out), transform var(--default) var(--ease); }
.qdoor:hover { border-color: var(--ink); }
.qdoor[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.qdoor .sw { width: 54px; height: 68px; border-radius: 2px; background: var(--c) var(--tex) center / cover; box-shadow: 6px 8px 14px rgba(0,0,0,.12); transform: rotate(-3deg); }
.qdoor b { font-weight: 500; font-size: 18px; }
.qdoor span { font-size: 14px; color: var(--mute); line-height: 1.4; }
.qdoor b { color: var(--ink); }
.field { margin-top: 22px; }
.field > label, .field > legend { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.field .hint { font-size: 14px; color: var(--mute); margin: -4px 0 10px; }
fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; font-size: 15px; transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out); }
.opt input:hover + span { border-color: var(--ink); }
.opt input:checked + span { background: var(--blue); color: #fff; border-color: var(--blue); }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.inp { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #8a8985; border-radius: 3px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color var(--fast) var(--ease-out); }
.inp:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
textarea.inp { min-height: 110px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-top: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.drop { border: 1px dashed #8a8985; border-radius: 3px; padding: 22px; text-align: center; font-size: 15px; color: var(--mute); cursor: pointer; display: block; }
.drop input { display: none; }
.drop b { color: var(--ink); font-weight: 500; }
.qnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule); }
.qnav .back { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding: 10px 0; }
.qerr { color: #a3201a; font-size: 14px; margin-top: 10px; min-height: 1em; }
.check .req { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.check.is-missing { outline: 2px solid #a3201a; outline-offset: 6px; border-radius: 2px; }
.check.is-missing .req { color: #a3201a; }
.wapreview { margin: 26px 0 0; padding: 16px; background: #efeae2; border-radius: 6px; }
.wapreview .label { margin-bottom: 10px; }
.wapreview__bubble { position: relative; margin-left: auto; max-width: 92%; background: #d9fdd3; color: #111b21; padding: 10px 12px 8px; border-radius: 8px 0 8px 8px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wapreview__to { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #54656f; margin: 0 0 10px; }
.wapreview__note { font-size: 13px; color: #54656f; margin: 10px 0 0; }
.popia { font-size: 13.5px; color: var(--mute); margin-top: 18px; line-height: 1.5; }
.qdone .ref { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; padding: 12px 14px; border: 1px solid var(--ink); display: inline-block; margin: 8px 0 22px; border-radius: 3px; }
.qdone ol { padding-left: 20px; }
.qdone li { margin-bottom: 8px; }
.samples-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.sidepanel { margin-top: 36px; border-top: 1px solid var(--rule); padding-top: 22px; display: grid; gap: 12px; font-size: 15px; }
.sidepanel a { text-decoration: none; display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }

/* ---------- Motion helpers ---------- */
.js:not(.is-ready) .hero__giant-in, .js:not(.is-ready) .board, .js:not(.is-ready) .cast, .js:not(.is-ready) .contact,
.js:not(.is-ready) [data-split]:not([data-split-done]) { visibility: hidden; }
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
[data-blind] { position: relative; overflow: hidden; }
.blind { position: absolute; inset: 0; z-index: 4; background: var(--blind, #e4e2de); transform-origin: 50% 0; pointer-events: none; will-change: transform; }
/* the mask that slides each headline line up: deep enough below the line for Boska's descenders (g, y, p),
   which .06em clipped (Bianca, 12 October 2026: the "g" in Gauteng was cut off) */
.js .split-line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.js .split-line > span { display: block; transform: translateY(105%); }
.is-ready [data-reveal], .is-ready [data-blind] { will-change: auto; }

/* View transitions between pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-btn { display: block; margin-left: 4px; }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
  .foot > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .brand img { height: 38px; }
  .hero__scene { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: calc(var(--header-h) + 22px); }
  .stage { --k: 1; }
  .hero__label { position: static; order: 1; padding: 0 var(--gutter); }
  .hero { --gfs: 25vw; }
  .hero__giant { top: calc(var(--header-h) + 54px); left: calc(var(--gutter) - .05em); }
  .hero__label .wide { display: none; }
  .stage { order: 2; margin-top: calc(25vw * .78); }
  .hero__copy { order: 3; padding: 0 var(--gutter); margin: 0 0 34px; max-width: none; }
  .hero__line { font-size: clamp(28px, 7.6vw, 34px); }
  .hero__copy .btns { flex-wrap: wrap; }
  .hero__copy .btns .btn { flex: 1 1 auto; }
  .hero { --stage-bottom: 58px; }
  .hero__floor { display: none; }
  .stage::before { content: ""; position: absolute; z-index: -1; left: -20vw; right: -20vw; top: 93%; height: 200vh; background: linear-gradient(180deg, rgba(214,212,207,0) 0, rgba(214,212,207,0) 120px, #d6d4cf 230px), var(--floor-img, none) center top / 170% auto no-repeat, #d6d4cf; box-shadow: inset 0 14px 18px -12px rgba(0,0,0,.08); }
  .stage { width: 112%; margin-left: -6%; }
  .strip ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip ul::-webkit-scrollbar { display: none; }
  .strip li { flex: 0 0 68%; scroll-snap-align: start; }
  .strip li:first-child a { padding-left: var(--gutter); }
  .head, .phero__grid, .showroom, .cta__inner, .quote__grid, .layers__grid, .prose { grid-template-columns: 1fr; }
  .quote__grid { grid-template-areas: "aside" "card" "more"; grid-template-rows: auto; }
  .quote__aside .lede { font-size: 16px; }
  .qprog { margin-top: 22px; }
  .quote__holder { margin-top: 18px; }
  .doors { grid-template-columns: 1fr; }
  .door { border-left: 0; border-top: 1px solid var(--rule); padding: 26px 0 30px; min-height: 0; display: grid; grid-template-columns: 76px 1fr; gap: 0 20px; }
  .door:first-child { border-top: 0; }
  .door .num { grid-column: 1 / -1; margin-bottom: 18px; }
  .door .swatch { width: 70px; height: 92px; margin: 4px 0 0; grid-row: span 3; }
  .door .door__links { grid-column: 2; }
  .room__frame { aspect-ratio: auto; overflow: visible; background: none; }
  .room__img { position: relative; inset: auto; aspect-ratio: 4 / 3; background-color: #e9e6e0; background-position: 60% 100%; border-radius: 2px; }
  .room__chips { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; padding: 4px; background: #fff; border: 1px solid var(--rule); box-shadow: none; }
  .room__chips button { min-width: 0; padding: 6px 8px 6px 6px; white-space: normal; text-align: left; line-height: 1.25; }
  .example-tag { top: 10px; right: 10px; }
  .room__chips::-webkit-scrollbar { display: none; }
  .layers__pin { align-items: stretch; }
  .layers__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-content: start; padding-top: calc(var(--header-h) + 8px); }
  /* the drawing gives way on shorter phones, so the words always sit above the quote bar (100svh less header, words and bar) */
  .layers { --words-h: 444px; }
  .layers__viz { order: -1; height: min(46svh, calc(100svh - var(--words-h))); }
  .iso { width: min(84vw, 360px, calc(100svh - var(--words-h))); }
  .iso__tag { display: none; }
  .lrail { margin-bottom: 20px; }
  .lsteps { min-height: 200px; }
  .rrow { grid-template-columns: 34px 1fr; gap: 6px 14px; }
  .rrow .desc { grid-column: 2; }
  .rrow .acts { grid-column: 2; margin-top: 8px; }
    .pgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .pgrid::-webkit-scrollbar { display: none; }
  .pitem { flex: 0 0 78%; scroll-snap-align: start; margin: 0 !important; }
  .pitem .frame { aspect-ratio: 4 / 5 !important; }
  .steps { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--rule); padding-left: 22px; }
  .steps li { padding: 0 0 30px; }
  .steps .tile { position: absolute; left: -36px; top: 0; width: 26px; height: 26px; margin: 0; }
  .steps__line { left: -1px; top: 0; width: 1px; height: 100%; transform-origin: top; transform: scaleY(0); }
  .showroom__map { min-height: 300px; }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance div { border-bottom: 1px solid var(--rule); }
  .glance div:nth-child(2) { border-right: 0; }
  .glance div:nth-child(3) { padding-left: 0; }
  .tilelinks { grid-template-columns: 1fr; }
  .qdoors { grid-template-columns: 1fr; }
  .qdoor { flex-direction: row; align-items: center; min-height: 0; }
  .qdoor .sw { width: 44px; height: 56px; flex: none; }
  .row2 { grid-template-columns: 1fr; }
  .phero__board { display: none; }
  .qbar { display: flex; }
  .site-footer { padding-bottom: 110px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .product { grid-template-columns: 84px 1fr; gap: 16px; }
  .product .sw { width: 84px; }
  .compare { font-size: 14px; }
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .menu li a { font-size: 22px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot > :last-child { grid-column: 1 / -1; }
  .gallery, .gallery--2 { grid-template-columns: 1fr; }
}

/* Reduced motion: no movement, content visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-blind], .js .split-line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .blind { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Client logos (from Miccor's current website): a slow moving banner, full colour, pauses on hover */
.clients { margin-top: clamp(64px, 7vw, 110px); }
.clients__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 28px; }
.clients__head .label { margin-bottom: 12px; }
.clients__head h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 1.2rem + .9vw, 34px); line-height: 1.12; max-width: 20em; }
.marquee { overflow: hidden; padding: 4px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; width: max-content; animation: logos 46s linear infinite; }
.marquee:hover .logos { animation-play-state: paused; }
.logos li { flex: none; width: clamp(160px, 15vw, 230px); aspect-ratio: 2 / 1; background: #fff; border: 1px solid var(--rule); border-radius: 3px; display: grid; place-items: center; }
.logos img { width: auto; height: auto; max-width: 68%; max-height: 58%; object-fit: contain; }
@keyframes logos { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .logos { animation: none; flex-wrap: wrap; width: auto; } .logos li[aria-hidden] { display: none; } }

/* Preview switch for the button colour (demo only, comes off once Steven has chosen) */
.btn-switch { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.btn-switch .t { margin-right: 6px; }
.btn-switch button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; color: var(--ink); }
.btn-switch button i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.btn-switch button[aria-pressed="true"] { background: var(--wall); }
.btn-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu-open .btn-switch { display: none; }
@media (max-width: 960px) { .btn-switch { right: 12px; bottom: auto; top: calc(var(--header-h) + 8px); padding: 4px; gap: 2px; } .btn-switch .t, .btn-switch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .btn-switch button { padding: 9px; } .btn-switch button i { width: 16px; height: 16px; } }
@media print { .btn-switch { display: none; } }

/* Where we work */
.where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.where__home > .label { margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule-dark); }
.where__sa { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 2rem + 2.4vw, 76px); line-height: .98; letter-spacing: -.015em; margin: 26px 0 28px; }
.where__home dl { margin: 0; display: grid; gap: 18px; }
.where__home dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 4px; }
.where__home dd { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(242,241,238,.86); }
.where__away > .label { margin-bottom: 0; padding-bottom: 14px; }
.where__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--rule-dark); }
.where__list li { padding: 15px 0 14px; border-bottom: 1px solid var(--rule-dark); font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.05rem + .45vw, 25px); line-height: 1.2; }
.where__list li small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-light); margin-top: 4px; }
@media (max-width: 900px) {
  .where__grid { grid-template-columns: 1fr; }
  .where__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}

/* review fixes 6 October: no doubled spacing between two sections of the same background, readable PCL logo,
   healthcare client logos, phone room chips that wrap */
.section--wall + .section--wall, .section:not(.section--wall):not(.dark) + .section.related { padding-top: 0; }
.logos li.pcl img { max-width: 82%; max-height: 74%; }
.hc-logos { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.hc-logos img { height: 72px; width: auto; background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 10px 14px; }

/* Preview timer and closed screen (demo only; the build's --launch switches the timer off) */
.kp-timer { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 10px 16px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.kp-timer__cd { color: var(--ink); }
.kp-timer__s { display: none; }
.kp-timer__cd:empty { display: none; }
.kp-timer[data-closes="0"] { display: none; }
.menu-open .kp-timer { display: none; }
@media (max-width: 960px) { .kp-timer { left: 12px; bottom: auto; top: calc(var(--header-h) + 8px); padding: 8px 12px; font-size: 10px; } .kp-timer__t { display: none; } .kp-timer__s { display: inline; } }
@media print { .kp-timer { display: none; } }
/* On a phone the timer and the colour dots slide up and away with the header while scrolling down, and come back with it */
@media (max-width: 960px) {
  .kp-timer, .btn-switch { transition: transform var(--slow) var(--ease), opacity var(--default) var(--ease-out); }
  .hdr-hidden .kp-timer, .hdr-hidden .btn-switch { transform: translateY(calc(-100% - var(--header-h) - 14px)); opacity: 0; pointer-events: none; }
}
/* Klyrra demo watermark and ownership notice (demo only; --launch removes both) */
.kmark { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: .82; color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.kmark img { width: 26px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.room__frame .kmark { top: 14px; bottom: auto; }
/* the whole-page watermark: Klyrra's mark and "Klyrra demo, not for reuse" repeated over every page, under the menu,
   timer and colour switch, never catching a tap. A fixed layer with a still picture costs nothing while scrolling. */
.kwall { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: url("/assets/img/klyrra-watermark-tile.png") 0 0 / 520px 360px repeat; opacity: .15; }
@media (max-width: 960px) { .kwall { background-size: 390px 270px; } }
/* narrow phones: keep the demo label and the colour dots from touching */
@media (max-width: 400px) { .kp-timer { padding: 8px 10px; font-size: 9.5px; letter-spacing: .03em; } .btn-switch button { padding: 7px; } }
.foot__own { display: flex; gap: 16px; align-items: flex-start; margin: 22px 0 0; padding: 16px 18px; background: #fff; border: 1px solid var(--rule); border-radius: 3px; font-size: 13px; line-height: 1.55; color: var(--mute); max-width: 920px; }
.foot__own img { width: 30px; height: auto; flex: none; margin-top: 2px; }
.foot__own b { color: var(--ink); font-weight: 500; }
@media print { .kmark { opacity: .6; } }
.kp-gate { display: none; }
.kp-closed body > *:not(#kp-gate) { display: none !important; }
.kp-closed body { background: #1b1f24; }
.kp-closed .kp-gate { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 32px var(--gutter); background: #1b1f24; color: #fff; text-align: center; font-family: var(--sans); }
.kp-gate__in { max-width: 46ch; }
.kp-gate__mark { width: 64px; height: auto; margin: 0 auto 26px; }
.kp-gate__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c9a96a; margin: 0 0 14px; }
.kp-gate h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 6vw, 48px); line-height: 1.05; margin: 0 0 16px; color: #fff; }
.kp-gate p { color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.6; margin: 0; }
.kp-gate__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 22px; }
.kp-gate__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 3px; border: 1px solid rgba(255,255,255,.4); color: #fff; text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.kp-gate__btn--p { background: #c9a96a; border-color: #c9a96a; color: #1b1f24; }
.kp-gate__foot { font-size: 13px !important; color: rgba(255,255,255,.55) !important; }
.kp-gate__foot a { color: inherit; }

/* ---------- Short screens and phones held sideways (15 October 2026) ----------
   Too short for the pinned "under the floor" scene: every step shows, one under the other, as with Reduce Motion. The script
   pins the scene only above these heights (main.js, initLayers), so the two always agree, also when a phone is turned. */
@media (max-width: 960px) and (max-height: 599.98px), (min-width: 961px) and (max-height: 479.98px) {
  .js .layers__pin { height: auto; min-height: 0; padding: clamp(32px, 6vw, 72px) 0; }
  .js .lstep { position: relative; opacity: 1; visibility: visible; }
  .js .lstep + .lstep { margin-top: 36px; }
  .js .iso__tag { opacity: 1; }
}
/* the narrowest phones wrap the words onto one more line */
@media (max-width: 340px) { .layers { --words-h: 476px; } }
/* the steps-in-a-list version on a phone: the drawing sits in its own space instead of running into the step numbers */
@media (max-width: 960px) and (max-height: 599.98px) {
  .layers__grid { padding-top: 0; }
  .layers__viz { height: auto; padding: 4px 0 20px; }
  .iso { width: min(84vw, 320px, 72svh); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .layers__grid { padding-top: 0; }
  .layers__viz { height: auto; padding: 4px 0 20px; }
  .iso { width: min(84vw, 340px, 72svh); }
}
/* phones held sideways: the big word, the sample boards and the room picture are sized by the screen's height too */
@media (max-width: 960px) and (orientation: landscape) {
  .hero { --gfs: min(25vw, 30svh); }
  .stage { --stage-w: min(112%, 150svh); width: var(--stage-w); margin-top: calc(var(--gfs) * .78); margin-left: calc((100% - var(--stage-w)) / 2); }
  .room__img { aspect-ratio: auto; height: 60svh; }
  .room__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}