/* Solar Gard: a schedule of finishes. Navy cloth, ivory card, one burgundy divider, brass rules.
   Design rules live in DESIGN.md. One 12-column grid; the spine is the start of column 9. */
:root {
  /* colour: the sample book */
  --navy: #0b1830;          /* cloth cover: hero, studio */
  --night: #070f1f;         /* nav, footer, code tags, studio readout */
  --navy-surface: #13264a;  /* fields and selected rows on navy */
  --burgundy: #6e1a2c;      /* the one divider band */
  --burgundy-deep: #4a1120; /* form fields on burgundy only */
  --brass: #c9a45c;         /* fill: the one primary action in view. line: the applied finish */
  --brass-dark: #b8914a;    /* metal rules on ivory and linen only, never text */
  --pale-brass: #e6cd94;    /* codes and small labels on navy and burgundy */
  --ivory: #f5efe5;         /* the card */
  --linen: #ebe2d3;         /* mount board behind physical chips only */
  --stage: #e9e3da;         /* 3D studio backdrop: must equal scene.background in studio.js */
  --ink: #1a1f2b;
  --stone: #5a5f6b;
  --on-dark: #f5efe5;
  --on-dark-2: rgba(245, 239, 229, .7);
  --on-burgundy-2: rgba(245, 239, 229, .72);
  /* hairlines */
  --rule: rgba(201, 164, 92, .28);
  --rule-quiet: rgba(201, 164, 92, .14);
  --rule-warm: rgba(230, 205, 148, .28);
  --rule-ink: rgba(26, 31, 43, .12);
  --rule-ink-strong: rgba(26, 31, 43, .28);
  --field-line: rgba(230, 205, 148, .6);
  --edge-dark: rgba(7, 15, 31, .4);
  --edge-light: rgba(26, 31, 43, .14);
  /* type */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --t-display: clamp(2.75rem, 1.95rem + 3.38vw, 5rem);
  --t-h2: clamp(2rem, 1.56rem + 1.88vw, 3.25rem);
  --t-title: clamp(1.375rem, 1.22rem + .56vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  --t-body: 17px;
  /* shape and space */
  --r-cut: 0;
  --r-ctl: 2px;
  --max: 1320px;
  --pad: clamp(20px, 5vw, 72px);
  --gutter: 24px;
  --gap-y: clamp(72px, 10vw, 136px);
  --nav-h: 64px;
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2)); /* screen edge to content edge */
  /* motion */
  --ease-lay: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 450 15px/1.4 var(--sans); color: var(--on-dark); background: var(--navy);
  -webkit-font-smoothing: auto; hanging-punctuation: first allow-end;
}
html.menu-open, body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
p, figure, dd { margin: 0; }
p { text-wrap: pretty; } /* no one-word last lines */
h1, h2, h3 { margin: 0; font-family: var(--sans); font-stretch: 76%; text-wrap: balance; }
h1 { font-size: var(--t-display); font-weight: 520; line-height: .94; letter-spacing: -.02em; text-wrap: wrap; }
h2 { font-size: var(--t-h2); font-weight: 540; line-height: 1; letter-spacing: -.012em; }
h3 { font-size: var(--t-title); font-weight: 560; line-height: 1.1; letter-spacing: -.004em; }
.code {
  font-family: var(--mono); font-stretch: 87.5%; font-weight: 450; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
}
/* the reading voice */
.lede, .apps-intro p, .app-text p, .fam-text, .steps p, .contact-copy > p, .total-note, .foot-brand p {
  font-family: var(--serif); font-size: var(--t-body); font-weight: 400; line-height: 1.55;
}
/* short paragraphs: even lines instead of a long line and a stub */
.lede, .apps-intro p, .app-text p, .fam-text, .foot-brand p { text-wrap: balance; }
.band-navy, .band-burgundy, .nav, .footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.band-navy, .band-burgundy, .footer { color-scheme: dark; }

/* focus: brass on navy and burgundy, ink on the light card (brass on ivory is only 2:1) */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.band-ivory :focus-visible { outline-color: var(--ink); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--r-ctl); background: var(--brass); color: var(--ink);
  font: 560 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease-out);
}
.btn:active { transform: translateY(1px); transition-duration: 0s; }
.btn-sm { min-height: 44px; padding: 0 16px; }
.link {
  background: none; border: 0; padding: 0; font-weight: 500; cursor: pointer; color: inherit;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px;
  min-height: var(--nav-h); padding: 10px max(var(--pad), calc((100% - var(--max)) / 2));
}
/* the scrolled ground fades in by opacity only */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--night);
  border-bottom: 1px solid var(--rule-quiet); opacity: 0; transition: opacity .3s;
}
.nav.scrolled::before, .nav.open::before { opacity: 1; }
.wordmark { padding-block: 12px; margin-block: -12px; font: 600 20px/1 var(--sans); font-stretch: 76%; letter-spacing: 0; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a:not(.btn) { font-size: 15px; font-weight: 450; color: var(--on-dark-2); text-decoration: none; }
.nav-menu-cta { display: none; }
.nav-cta { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--rule); }
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--on-dark); transition: transform .3s var(--ease-out); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 26px; }
.nav.open .nav-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- bands ---------- */
.band { position: relative; padding: var(--gap-y) var(--pad); isolation: isolate; overflow: hidden; overflow: clip; }
.band-navy { background: var(--navy); color: var(--on-dark); }
.band-ivory { background: var(--ivory); color: var(--ink); }
.band-burgundy { background: var(--burgundy); color: var(--on-dark); }
.band > :not(canvas) { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.band-ivory + .band-ivory { border-top: 1px solid var(--rule-ink-strong); }
.title-bar {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: baseline; margin-bottom: 20px;
}
.title-bar h2 { grid-column: 1 / 9; font-size: var(--t-title); font-weight: 560; line-height: 1.1; letter-spacing: -.004em; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; align-items: end; padding-top: calc(var(--nav-h) + 56px); padding-bottom: clamp(40px, 6vh, 72px); }
#hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease-out); }
#hero-canvas.is-live { opacity: 1; }
.hero-copy { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.hero h1 { grid-column: 1 / 8; max-width: 8.6em; margin: 0 0 28px -.05em; }
.lede { grid-column: 1 / 6; margin-bottom: 40px; font-size: var(--t-lead); line-height: 1.45; color: var(--on-dark-2); }
.hero-strip {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); align-items: end; padding-top: 20px;
}
.hero-strip .btn { grid-column: 1 / 5; justify-self: start; }
.hero-meta { grid-column: 9 / 13; justify-self: end; display: grid; gap: 4px; justify-items: end; text-align: right; }
.meta-label { font-size: 13px; color: var(--on-dark-2); }
/* the code in mono, the name in the heading face, like every other finish label on the page */
.hero-finish { font: 500 var(--t-title)/1 var(--sans); font-stretch: 76%; letter-spacing: -.004em; color: var(--on-dark); white-space: nowrap; }
.hero-finish .code { font-size: 1em; font-weight: 400; font-stretch: 75%; letter-spacing: -.02em; line-height: 1; color: var(--pale-brass); }
/* the label names a panel, so it shows with the panels (hero.js adds .is-live); with no WebGL it never claims one */
.js .hero-meta { opacity: 0; transition: opacity .9s var(--ease-out); }
.js .hero.is-live .hero-meta { opacity: 1; }
/* the foil rule: laid once, left to right, after the panels have faded in */
.hero-strip::before, .hero::after {
  content: ''; position: absolute; height: 1px; background: var(--rule); transform-origin: left;
  transition: transform 1.2s var(--ease-lay) .2s;
}
.hero-strip::before { inset: 0 0 auto; }
.hero::after { display: none; }
.js .hero-strip::before, .js .hero::after { transform: scaleX(0); }
.hero.is-live .hero-strip::before, .hero.is-live::after { transform: none; }

/* ---------- what we wrap ---------- */
.applications { padding-block: var(--gap-y) calc(var(--gap-y) * 1.1); }
/* the rows follow the intro; any spare height collects under the last row, at the end of the section */
.apps {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--gutter);
}
.apps-intro { grid-column: 8 / 13; grid-row: 1; }
.apps-intro p { margin-top: 16px; color: var(--stone); }
.app--plate { grid-column: 1 / 7; grid-row: 1 / -1; }
/* the plate bleeds off the left edge of the screen, but never wider than 760px (s19 is 1200px) */
.plate {
  position: relative; width: min(calc(100% + var(--edge)), 760px);
  margin-left: calc(100% - min(calc(100% + var(--edge)), 760px));
}
.plate img { width: 100%; aspect-ratio: 1; object-fit: cover; outline: 1px solid var(--rule-ink); outline-offset: -1px; }
.plate-mount {
  position: absolute; right: 20px; top: calc(100% - 40px); display: grid; grid-template-columns: 72px 72px;
  grid-auto-rows: 48px; gap: 2px; padding: 6px 6px 20px; background: var(--linen);
}
/* the caption sits under the photo, beside the hanging mount (158px wide, 20px in from the photo's right edge) */
.plate-ref { max-width: calc(100% - 196px); margin-top: 10px; font-size: 13px; color: var(--stone); }
.app--plate .app-text { margin-top: 28px; max-width: 34rem; }
.apps > .app:not(.app--plate) {
  grid-column: 8 / 13; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px;
  align-items: start; padding: 20px 0; border-top: 1px solid var(--rule-ink);
}
.apps > .app:nth-of-type(2) { grid-row: 2; margin-top: 48px; }
.apps > .app:nth-of-type(3) { grid-row: 3; }
.apps > .app:nth-of-type(4) { grid-row: 4; border-bottom: 1px solid var(--rule-ink); }
.app-thumb img { width: 112px; height: 112px; object-fit: cover; outline: 1px solid var(--rule-ink); outline-offset: -1px; }
.app-thumb figcaption { margin-top: 6px; font-size: 12px; color: var(--stone); }
/* a finish sample on a linen mount, where no catalogue photo shows the object honestly */
.app-thumb--chip img { padding: 6px; background: var(--linen); outline-color: var(--edge-light); }
.app-text h3 { margin-bottom: 8px; }
.app-text p { margin-bottom: 4px; color: var(--stone); }
.app-text .link { display: inline-block; padding-block: 12px; font-size: 15px; color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--brass-dark); }
.app-text .code, .plate-ref .code { font-size: .86em; }

/* mounted chips: square cut, code printed underneath (catalogue boards and the plate mount) */
.plate-mount i, .strip i { position: relative; display: block; border-radius: var(--r-cut); outline: 1px solid var(--edge-light); outline-offset: -1px; }
.plate-mount i::after, .strip i::after {
  content: attr(title); position: absolute; top: calc(100% + 5px); left: 0;
  font: 450 10px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .02em; color: var(--stone);
}

/* ---------- studio ---------- */
.studio { overflow: visible; padding-block: calc(var(--gap-y) * .5) calc(var(--gap-y) * .6); }
.studio .title-bar h2 { font-size: var(--t-h2); font-weight: 540; line-height: 1; letter-spacing: -.012em; }
.studio-sub { grid-column: 9 / 13; color: var(--on-dark-2); }
.studio-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) max(380px, calc((100% - 2 * var(--gutter)) / 3));
  height: min(calc(100svh - 104px), 860px); min-height: 640px;
  border: 1px solid var(--rule); border-radius: var(--r-cut); overflow: hidden; background: var(--navy);
}
.studio-stage { position: relative; min-height: 0; background: var(--stage); }
#studio-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#studio-canvas:active { cursor: grabbing; }
/* object tabs: docked in the corner like the index tabs of a sample book; the open one joins the stage */
.object-tabs {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--navy); border-right: 1px solid var(--rule);
}
.object-tabs::-webkit-scrollbar { display: none; }
.object-tabs button {
  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-right: 1px solid var(--rule-quiet); border-bottom: 1px solid var(--rule);
  border-radius: 0; background: none; font-size: 15px; font-weight: 450; color: var(--on-dark-2); white-space: nowrap; cursor: pointer;
}
.object-tabs button:last-child { border-right: 0; }
.object-tabs button[aria-pressed="true"] { background: var(--stage); border-bottom-color: transparent; color: var(--ink); font-weight: 500; }
.object-tabs button:focus-visible { outline-offset: -4px; }
.object-tabs button[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
.stage-hint {
  position: absolute; left: 16px; bottom: 14px; z-index: 2; max-width: calc(100% - 32px); margin: 0;
  font-size: 13px; line-height: 1.4; color: var(--stone); pointer-events: none; transition: opacity .6s;
}
.stage-hint span { display: inline-block; padding: 4px 8px; border-radius: var(--r-ctl); background: var(--stage); }
.studio-stage.used .stage-hint { opacity: 0; }
.stage-hint .hint-touch { display: none; }

.studio-panel { display: flex; flex-direction: column; min-height: 0; background: var(--navy); border-left: 1px solid var(--rule); }
.panel-block { padding: 16px 20px; border-bottom: 1px solid var(--rule-quiet); }
.panel-block h3 {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  font: 500 13px/1.4 var(--sans); letter-spacing: 0; color: var(--on-dark-2);
}
#swatch-count { font-size: 12px; color: var(--pale-brass); }
#swatch-count:not(:empty)::after { content: ' shown'; font: 500 13px/1.4 var(--sans); letter-spacing: 0; color: var(--on-dark-2); }
.panel-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.zones { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.zone {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 8px 10px 8px 12px;
  border: 0; border-top: 1px solid var(--rule-quiet); border-radius: 0; background: none; text-align: left; cursor: pointer;
}
.zone[aria-pressed="true"] { background: var(--navy-surface); box-shadow: inset 2px 0 0 var(--brass); }
.zone-sw { position: relative; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: var(--r-cut); outline: 1px solid var(--edge-dark); outline-offset: -1px; }
.zone > span:last-child { min-width: 0; }
.zone b { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; }
.zone small { display: block; overflow: hidden; font-size: 13px; color: var(--on-dark-2); white-space: nowrap; text-overflow: ellipsis; }
.zone small .code { font-size: 12px; color: var(--pale-brass); }
/* the laid edge: the chip of a picked part is laid again, left to right */
.zone-sw::after { content: ''; position: absolute; inset: 0; background: var(--navy-surface); border-left: 1px solid var(--brass); transform: translateX(101%); }
.zone[aria-pressed="true"] .zone-sw::after { animation: sg-lay .6s var(--ease-lay) both; }
@keyframes sg-lay { from { transform: translateX(0); } to { transform: translateX(101%); } }

.family-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.family-tabs button {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r-ctl); background: none;
  font-size: 13px; font-weight: 450; color: var(--on-dark-2); white-space: nowrap; cursor: pointer;
}
.family-tabs button[aria-pressed="true"] { background: var(--navy-surface); border-color: rgba(245, 239, 229, .6); color: var(--on-dark); font-weight: 500; }
#swatch-search {
  width: 100%; min-height: 44px; margin-bottom: 12px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r-ctl);
  background: var(--navy-surface); font-size: 16px; color: var(--on-dark); outline: none;
}
#swatch-search::placeholder { color: rgba(245, 239, 229, .55); }
#swatch-search:focus { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }

.swatch-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--navy-surface) transparent; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; padding: 4px 4px 10px; }
.sw {
  content-visibility: auto; contain-intrinsic-size: auto 58px;
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-cut); overflow: hidden; cursor: pointer;
  outline: 1px solid var(--edge-dark); outline-offset: -1px;
}
.sw img { width: 100%; height: 100%; object-fit: cover; }
.sw:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* every chip carries its code, printed, never behind hover */
.sw span {
  position: absolute; left: 0; bottom: 0; padding: 1px 4px 0; background: var(--night);
  font: 450 10px/14px var(--mono); font-stretch: 87.5%; letter-spacing: .02em; color: var(--pale-brass);
}
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--brass); }
.sw[aria-pressed="true"] span { background: var(--brass); color: var(--ink); }
.sw-empty { grid-column: 1 / -1; font-size: 13px; color: var(--on-dark-2); }

/* while studio.js loads: still text, no pulse. Same heights as the loaded panel, so nothing below
   the studio moves when it arrives (the kitchen's four parts are two rows of 52px) */
.zones:empty { min-height: 104px; background: rgba(255, 255, 255, .04); }
.swatch-grid:empty { min-height: 136px; background: rgba(255, 255, 255, .04); }
.studio-stage::after {
  content: 'Loading the 3D studio'; position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; pointer-events: none; font-size: 13px; color: var(--stone);
}
.studio-shell.is-ready .studio-stage::after { display: none; }
/* studio.js could not start (no WebGL): one honest message instead of a panel of dead controls */
.studio-shell.is-unavailable { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
.studio-shell.is-unavailable :is(.studio-panel, .object-tabs, .stage-hint) { display: none; }
.studio-shell.is-unavailable .studio-stage { height: auto; min-height: 240px; }
.studio-shell.is-unavailable .studio-stage::after { content: 'The 3D studio could not start on this device. Send us codes from the catalogue below and we will bring those samples to your visit.'; font-size: 15px; }

.panel-finish { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; border-bottom: 0; background: var(--night); }
.finish-chip { display: block; height: 32px; border-radius: var(--r-cut); outline: 1px solid var(--edge-dark); outline-offset: -1px; }
.finish-code { font-size: var(--t-title); font-stretch: 75%; font-weight: 400; letter-spacing: -.02em; line-height: 1; color: var(--on-dark); }
.finish-name { margin-top: 6px; font-size: 13px; color: var(--on-dark-2); }
.finish-note { margin-top: 4px; font-size: 13px; color: var(--on-dark-2); }
.finish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 2px; }
.finish-actions .link { min-height: 44px; font-size: 13px; color: var(--on-dark-2); }

/* ---------- catalogue: one ruled table ---------- */
.catalogue { padding-block: var(--gap-y) calc(var(--gap-y) * .5); }
.families-cols, .family, .families-total {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
}
.families-cols {
  align-items: baseline; padding: 18px 0 14px; border-top: 2px solid var(--brass-dark); border-bottom: 1px solid var(--rule-ink-strong);
  font-size: 13px; color: var(--stone);
}
.families-cols h2 { grid-column: 1 / 5; color: var(--ink); }
.families-cols span:nth-of-type(1) { grid-column: 5 / 6; justify-self: end; }
.families-cols span:nth-of-type(2) { grid-column: 6 / 9; }
.families-cols span:nth-of-type(3) { grid-column: 9 / 13; }
.families { list-style: none; margin: 0; padding: 0; }
.families li { border-bottom: 1px solid var(--rule-ink); }
.families li:last-child { border-bottom: 0; }
.family { align-items: baseline; padding: 24px 0; cursor: pointer; }
.fam-name { grid-column: 1 / 5; }
.fam-count { grid-column: 5 / 6; justify-self: end; font-size: 15px; color: var(--ink); }
.fam-desc { grid-column: 6 / 9; color: var(--stone); }
.fam-codes { margin-top: 6px; font: 450 13px/1.4 var(--sans); color: var(--stone); }
.fam-codes .code { font-size: 12px; white-space: normal; }
.fam-go {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; color: var(--ink);
  text-decoration-thickness: 2px; text-decoration-color: var(--brass-dark);
}
.strip {
  grid-column: 9 / 13; align-self: start; position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 64px; gap: 2px; padding: 6px 6px 22px; background: var(--linen);
}
/* the laid edge: each board is laid once on arrival. Covered only after main.js adds .reveal-ready.
   main.js sets --lay-delay, so only boards that arrive together are staggered */
.strip::before {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--linen); border-left: 1px solid var(--brass);
  transform: translateX(101%); transition: transform .9s var(--ease-lay) var(--lay-delay, 0ms); pointer-events: none;
}
.reveal-ready .families li:not(.in) .strip::before { transform: none; transition: none; }
.family:active .strip { opacity: .85; }
/* the total is a ledger line, set like the counts above it and marked by the double rule */
.families-total { align-items: baseline; margin: 0; padding: 14px 0 16px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.total-label { grid-column: 1 / 2; font-size: 13px; color: var(--stone); }
.total-figure { grid-column: 2 / 6; justify-self: end; font-size: 15px; font-weight: 500; color: var(--ink); }
.total-note { grid-column: 9 / 13; color: var(--stone); }

/* ---------- spaces: the supplier's photos, captioned with room and codes ---------- */
.spaces { padding-block: calc(var(--gap-y) * .45) calc(var(--gap-y) * .8); }
.title-bar--run { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 28px; }
.rail-note { color: var(--stone); }
.band.spaces > .space-rail { max-width: none; margin-inline: calc(-1 * var(--pad)); }
.space-rail {
  display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 calc(var(--pad) + max(0px, (100% - var(--max)) / 2)) 18px;
  scroll-padding-inline: calc(var(--pad) + max(0px, (100% - 2 * var(--pad) - var(--max)) / 2));
  scrollbar-width: thin; scrollbar-color: var(--brass-dark) transparent;
}
.space { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.space img { height: clamp(220px, 30vw, 300px); width: auto; max-width: 80vw; object-fit: cover; outline: 1px solid var(--rule-ink); outline-offset: -1px; }
.space figcaption { display: grid; width: 0; min-width: 100%; margin-top: 10px; }
.space figcaption b { font: 500 15px/1.3 var(--sans); }
.space .codes { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -4px; }
.space .codes button {
  min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer;
  font: 450 12px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .02em;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.space .codes button:active { background: var(--navy); color: var(--pale-brass); text-decoration-line: none; }

/* ---------- process + site visit (one flat burgundy band) ---------- */
.visit { padding-block: var(--gap-y) calc(var(--gap-y) * .8); }
.process { margin-bottom: calc(var(--gap-y) * .9); }
.process h2 { margin: 0 0 28px -.05em; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-warm); }
.steps li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule-warm);
}
.steps h3 { grid-column: 1 / 5; }
.steps p { grid-column: 5 / 12; color: var(--on-burgundy-2); }

.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.contact-copy { grid-column: 1 / 6; }
.contact-copy h2 { margin-left: -.05em; }
.contact-copy > p { max-width: 34rem; margin-top: 18px; color: var(--on-burgundy-2); }
.contact-lines { margin: 36px 0 0; }
.contact-lines div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule-warm); }
.contact-lines div:last-child { border-bottom: 1px solid var(--rule-warm); }
.contact-lines dt { font-size: 13px; color: var(--pale-brass); }
.contact-lines dd { font-size: 15px; color: var(--on-dark); }
.contact-lines a { display: inline-block; padding-block: 14px; margin-block: -14px; text-decoration: none; }
/* blanks on a printed form until CONTACT in main.js is filled (main.js then replaces the href) */
.contact-lines a[href="#contact"] { color: var(--on-dark-2); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: default; }
/* name and phone, emirate and surface share a row; the rest run full width */
.contact-form { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gutter); align-content: start; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--on-dark-2); }
.contact-form input, .contact-form select, .contact-form textarea {
  min-width: 0; min-height: 48px; padding: 12px; border: 0; border-bottom: 1px solid var(--field-line); border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  background: var(--burgundy-deep); font: 400 16px/1.35 var(--sans); color: var(--on-dark); outline: none;
}
#form-finishes { font-family: var(--mono); font-stretch: 87.5%; font-weight: 450; letter-spacing: .02em; }
#form-finishes::placeholder { font-family: var(--sans); font-stretch: 100%; letter-spacing: 0; }
.contact-form :is(input, textarea)::placeholder, .contact-form select:invalid { color: rgba(245, 239, 229, .55); }
.contact-form :is(input, select, textarea):focus-visible { border-bottom-color: var(--brass); outline: 2px solid var(--brass); outline-offset: 2px; }
.contact-form textarea { resize: vertical; }
.contact-form select option { background: var(--burgundy-deep); color: var(--on-dark); }
.contact-form .btn { width: 100%; }
.form-note { color: var(--on-dark); }

/* ---------- footer: the colophon ---------- */
.footer {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px;
  padding: 58px max(var(--pad), calc((100% - var(--max)) / 2)) 28px; background: var(--night); color: var(--on-dark);
}
.selvedge { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: 10px; height: 10px; }
.selvedge img { width: 100%; height: 100%; object-fit: cover; }
.foot-brand { grid-column: 1 / 8; }
.foot-brand p { margin-top: 14px; color: var(--on-dark-2); }
.fine { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid var(--rule-quiet); font-size: 13px; color: var(--on-dark-2); }

/* ---------- hover only where there is a mouse; every hover and press change is instant ---------- */
@media (hover: hover) {
  .btn:hover { background: var(--brass-dark); }
  .nav-cta:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--brass); }
  .nav-links a:not(.btn):hover { color: var(--on-dark); }
  .link:hover, .family:hover .fam-go { text-decoration-color: currentColor; }
  .app-text .link:hover { text-decoration-color: currentColor; }
  .object-tabs button:not([aria-pressed="true"]):hover, .family-tabs button:not([aria-pressed="true"]):hover { color: var(--on-dark); }
  .zone:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .04); }
  .sw:not([aria-pressed="true"]):hover { outline-color: rgba(245, 239, 229, .7); }
  .space .codes button:hover { background: var(--navy); color: var(--pale-brass); text-decoration-line: none; }
}
.object-tabs button:active, .family-tabs button:active { opacity: .7; }
@media (pointer: coarse) {
  .stage-hint .hint-mouse { display: none; }
  .stage-hint .hint-touch { display: inline-block; }
  .nav-links a:not(.btn) { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #hero-canvas, .js .hero-meta { transition-duration: .3s; }
  .js .hero-strip::before, .js .hero::after { transform: none; transition: none; }
  .strip::before, .zone-sw::after { display: none; }
}

/* ---------- small desktop and tablet ---------- */
@media (max-width: 1099px) {
  .nav { gap: 12px; }
  .nav-cta { margin-left: auto; padding: 0 12px; font-size: 13px; }
  .nav-toggle { display: block; }
  /* closed: visibility takes the links out of the tab order once the fade has finished; open: shown at once */
  .nav-links {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    margin: 0; padding: calc(var(--nav-h) + 24px) max(var(--pad), calc((100% - var(--max)) / 2)) 40px; overflow-y: auto;
    background: var(--night); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
  }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav.open .nav-cta { visibility: hidden; }
  .nav-links a:not(.btn) {
    display: flex; align-items: center; min-height: 56px; max-width: 32rem; border-top: 1px solid var(--rule-quiet);
    font-size: var(--t-title); font-weight: 560; font-stretch: 76%; color: var(--on-dark);
  }
  .nav-links .wa-float { border-bottom: 1px solid var(--rule-quiet); }
  .nav-menu-cta { display: flex; max-width: 32rem; margin-top: 24px; }

  .apps-intro, .apps > .app:not(.app--plate) { grid-column: 7 / 13; }
  .apps > .app:not(.app--plate) { grid-template-columns: 88px minmax(0, 1fr); }
  .app-thumb img { width: 88px; height: 88px; }

  .studio-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: hidden; overflow: clip; }
  .studio-panel { min-width: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .studio-stage { position: sticky; top: var(--nav-h); z-index: 3; height: 52svh; min-height: 300px; }
  .swatch-scroll { max-height: 380px; }
  .swatch-grid:empty { min-height: 380px; }

  .families-cols span { display: none; }
  .families-cols h2 { grid-column: 1 / -1; }
  .family { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .fam-name { grid-column: 1; }
  .fam-count { grid-column: 2; }
  .fam-desc, .strip { grid-column: 1 / -1; }
  .fam-desc { max-width: 36rem; }
  .strip { margin-top: 12px; }
  .families-total { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .total-label { grid-column: 1; }
  .total-figure { grid-column: 2; }
  .total-note { grid-column: 1 / -1; max-width: 36rem; }

  .contact-copy { grid-column: 1 / 7; }
  .contact-form { grid-column: 7 / 13; }

  .foot-brand { grid-column: 1 / 10; }
}
@media (max-width: 399px) { .cta-long { display: none; } }

/* ---------- desktop with a mouse: the spaces become a contact sheet of photos at native ratio ---------- */
@media (hover: hover) and (min-width: 1100px) {
  .band.spaces > .space-rail { max-width: var(--max); margin-inline: auto; }
  .space-rail { flex-wrap: wrap; gap: 40px var(--gutter); overflow: visible; scroll-snap-type: none; padding: 0; }
  /* each photo grows in proportion to its own ratio, so every row shares one height and the captions stand on one line */
  .space { flex: var(--r) 1 calc(var(--r) * 170px); max-width: calc(var(--r) * 220px); }
  /* the last row keeps the base height and stops short, like the last row of a contact sheet */
  .space-rail::after { content: ''; flex: 999 1 0; }
  .space img { width: 100%; height: auto; max-width: none; }
  .space figcaption { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--rule-ink-strong); }
}

/* ---------- hero on phones, portrait tablets and short landscape screens ----------
   Keep this query identical to NARROW in js/hero.js: the panels get their own zone above the copy. */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1099px), (max-height: 500px) {
  .hero { padding-top: calc(var(--nav-h) + clamp(190px, 36svh, 340px)); padding-bottom: 40px; }
  .hero-copy, .hero-strip { display: block; }
  .hero h1 { margin-bottom: 24px; }
  .lede { max-width: 34rem; margin-bottom: 28px; }
  .hero-strip { padding-top: 0; }
  .hero-strip::before { display: none; }
  .hero::after { display: block; left: 0; right: 0; top: var(--copy-top, 52%); z-index: 1; }
  .hero-meta { justify-self: start; justify-items: start; text-align: left; margin-top: 16px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; --t-body: 16px; }
  .hero .btn { width: 100%; }

  .apps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .apps-intro, .app--plate, .apps > .app:not(.app--plate) { grid-column: 1 / -1; grid-row: auto; }
  .apps > .app:nth-of-type(n) { grid-row: auto; margin-top: 0; }
  .plate { width: calc(100% + 2 * var(--pad)); margin: 28px calc(-1 * var(--pad)) 0; }
  .plate-ref { max-width: calc(100% - 172px); } /* the plate is full-bleed here, so the mount sits 20px further right */
  .app--plate .app-text { margin-top: 24px; }
  .app--plate { margin-bottom: 28px; }

  .studio { padding-inline: 0; }
  .studio .title-bar { display: block; padding-inline: var(--pad); }
  .studio-sub { margin-top: 10px; }
  .studio-shell { border-inline: 0; }
  .studio-stage { height: 44svh; min-height: 270px; }
  .stage-hint { left: 12px; bottom: 10px; }
  .panel-block { padding: 12px 16px; }
  .panel-block h3 { margin-bottom: 8px; }
  .family-tabs::-webkit-scrollbar { display: none; }
  .family-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; margin-bottom: 8px; scrollbar-width: none; }
  #swatch-search { margin-bottom: 10px; }
  .swatch-scroll { max-height: none; overflow-x: auto; overflow-y: hidden; margin-inline: -16px; overscroll-behavior-x: contain; }
  .swatch-grid { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, 64px); grid-auto-columns: 64px; padding: 4px 16px 8px; }
  .swatch-grid:empty { min-height: 146px; margin-inline: 16px; }
  .sw { contain-intrinsic-size: auto 64px; }
  .sw-empty { grid-row: 1 / span 2; width: 260px; }
  .finish-actions { justify-content: space-between; }

  .strip { grid-auto-rows: 52px; }

  .steps li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .steps h3, .steps p { grid-column: 1; }

  .contact-copy, .contact-form { grid-column: 1 / -1; }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .contact-lines div { grid-template-columns: 6rem minmax(0, 1fr); }

  .footer { grid-template-columns: minmax(0, 1fr); }
  .foot-brand, .fine { grid-column: 1 / -1; }
  .fine { flex-direction: column; gap: 8px; }
}