/* mikrolighting.com — front-end stylesheet.
   Every colour comes from tokens.css. No gradients except the striped
   placeholder, no shadows except --shadow-badge, no motion beyond hover. */

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

img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  padding: 10px 16px; background: var(--ink); color: var(--white);
  border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 600;
}
.skip-link:focus { left: var(--gutter); color: var(--white); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ type */

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow--rule::before {
  content: ""; width: 28px; height: 1px; background: var(--accent); flex: 0 0 auto;
}
.eyebrow--dark { color: var(--dark-muted); }

.h-display { font-size: var(--fs-display); line-height: .98; letter-spacing: var(--tr-display); }
.h-1       { font-size: var(--fs-h1);      line-height: 1;    letter-spacing: var(--tr-display); }
.h-2       { font-size: var(--fs-h2);      line-height: 1.02; letter-spacing: var(--tr-h2); }
.h-2c      { font-size: var(--fs-h2-compact); line-height: 1.08; letter-spacing: -.02em; }
.h-3       { font-size: var(--fs-h3);      line-height: 1.2;  letter-spacing: var(--tr-h3); font-weight: 600; }

.lead  { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.body  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); max-width: 72ch; }
.meta  { font-size: var(--fs-meta); color: var(--muted); }
.small { font-size: var(--fs-small); color: var(--text-2); }
.muted { color: var(--muted); }
.soft  { color: var(--muted); font-style: normal; }

/* rich text from the CMS */
.rich { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); max-width: 72ch; }
.rich > * + * { margin-top: 14px; }
.rich h2 { font-size: var(--fs-h2-compact); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin-top: 28px; }
.rich h3, .rich h4 { font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); margin-top: 24px; font-weight: 600; }
.rich a { color: var(--link); border-bottom: 1px solid var(--line); }
.rich a:hover { border-bottom-color: var(--link); }
.rich strong, .rich b { font-weight: 600; color: var(--ink); }
.rich ul, .rich ol { margin: 0; padding-left: 20px; }
.rich li + li { margin-top: 6px; }
.rich img { border-radius: var(--r-card); margin-top: 20px; }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.rich th, .rich td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rich th { color: var(--ink); font-weight: 600; }
.rich blockquote {
  margin: 20px 0; padding-left: 18px; border-left: 1px solid var(--line);
  font-size: var(--fs-h2-compact); line-height: 1.2; color: var(--text-2);
}
.rich--dark { color: var(--dark-muted); }
.rich--dark h2, .rich--dark h3, .rich--dark strong { color: var(--dark-text); }

/* ============================================================ layout */

.page { container-type: inline-size; overflow-x: clip; }
.wrap { padding-inline: var(--pad-x); }

/* Sections carry top padding only. Two sections in a row should read as one
   --section apart, not two stacked paddings. The footer adds the closing gap. */
.section { padding-top: var(--section); }
.section--top { padding-top: var(--section); }
.section--flush { padding-bottom: 0; }

.stack      { display: flex; flex-direction: column; gap: 20px; }
.stack--sm  { gap: 10px; }
.stack--lg  { gap: clamp(20px, 2.4cqw, 36px); }
.row        { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }
.row--end   { align-items: flex-end; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px;
  margin-bottom: clamp(24px, 3cqw, 44px);
}

/* Column counts are explicit. An auto-fill grid inside a 1440px container
   keeps adding columns until the tiles are thumbnails and the last row is a
   hole; the counts below keep every tile at a readable size and the rows
   close to full. */
.grid { display: grid; gap: var(--gap-card); }
.grid--tiles    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--spaces   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--four     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6cqw, 24px); }
.grid--cards    { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4cqw, 36px); }

@media (min-width: 600px) {
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 680px) {
  .grid--tiles, .grid--spaces, .grid--four, .grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--tiles, .grid--spaces, .grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1140px) { .grid--products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1340px) { .grid--products { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Two-column pairings. One column until there is room for two, never three:
   a third auto-fit column is always an empty one. */
.hero-grid {
  display: grid; gap: clamp(28px, 4cqw, 64px);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
}

.duo {
  display: grid; gap: clamp(24px, 3cqw, 56px);
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
.duo--center { align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--text { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .duo--form { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* Heading rail on the left, content on the right: the pattern that keeps a
   narrow text block from sitting alone against an empty half-page. */
.split { display: grid; gap: clamp(16px, 2cqw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 4cqw, 88px); }
  .split__aside { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; }
  /* Long-form prose stays at a readable measure, so the rail and the text
     centre as a pair instead of hugging the left edge of a 1440px row. */
  .split--prose { grid-template-columns: minmax(0, 260px) minmax(0, 76ch); justify-content: center; }
}

/* ============================================================ header */

.announce {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 9px var(--pad-x);
  background: var(--ink); color: var(--bg);
  font-size: var(--fs-eyebrow); letter-spacing: .04em; text-align: center;
}
.announce__tag { color: var(--accent); }
.announce a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--white); }

/* The header stays with the reader. Translucent fill + the existing blur
   token, 1px line, nothing else -- no shadow, no shrink-on-scroll. */
.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
  backdrop-filter: var(--blur-bar); -webkit-backdrop-filter: var(--blur-bar);
}
/* Anything linked to by #anchor must clear the sticky header. */
html { scroll-padding-top: calc(var(--head-h) + 20px); }
[id] { scroll-margin-top: calc(var(--head-h) + 20px); }
/* Nothing in the header may set a min-content floor wider than the viewport,
   or the whole page gains a horizontal scrollbar on a narrow phone. */
.site-head > * { min-width: 0; }
.site-head__logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-head__logo img { height: 40px; width: auto; }
.site-head__logo-text { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

.nav { display: flex; gap: 34px; font-size: var(--fs-small); font-weight: 500; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.site-head__end { display: flex; align-items: center; gap: 22px; }

.langs { display: flex; align-items: center; gap: 10px; font-size: var(--fs-meta); }
.langs a, .langs span { letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.langs a:hover { color: var(--ink); }
.langs [aria-current="true"] { color: var(--ink); }

.burger {
  width: var(--hit-min); height: var(--hit-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.5px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); cursor: pointer; padding: 0;
}
.burger:hover { border-color: var(--ink); }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); }

/* Full-height sheet under the header. Opens via :target without JS and via
   the button with it, so the control is never dead. */
.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  position: fixed; inset: var(--head-h) 0 0 0; z-index: 35;
  padding: 20px var(--pad-x) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line); background: var(--bg);
}
#mobile-menu:target, .mobile-nav[data-open] { display: flex; }
.mobile-nav__link {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.mobile-nav__count { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
.mobile-nav__group { padding: 18px 0 4px; }
.mobile-nav__group > span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.mobile-nav__sub { display: flex; flex-wrap: wrap; gap: var(--gap-chip); padding-top: 12px; }
.mobile-nav__foot {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 22px; margin-top: 18px; border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}
.mobile-nav__langs { display: flex; gap: 16px; padding-top: 10px; }
.site-head__mobile { display: none; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.site-head__mobile .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.burger { flex: 0 0 auto; }

@media (max-width: 1023px) {
  .site-head__end { display: none; }
  .nav { display: none; }
  .site-head__mobile { display: flex; }
  .site-head { gap: 12px; }
}
@media (max-width: 420px) {
  .site-head__logo img { height: 32px; }
}

/* ============================================================ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-small); font-weight: 600; padding: var(--btn-pad);
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); color: var(--white); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--on-dark { background: var(--white); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent); color: var(--white); }
.btn--sm { padding: var(--btn-pad-sm); font-size: var(--fs-meta); }
.btn--xs { padding: var(--btn-pad-xs); font-size: var(--fs-eyebrow); }
.btn--lg { font-size: 15px; }
.btn--block { width: 100%; }

.link-text {
  font-size: var(--fs-small); font-weight: 600;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  display: inline-block;
}
.link-text:hover { color: var(--link); border-bottom-color: var(--link); }
.link-arrow { font-size: var(--fs-small); font-weight: 600; color: var(--link); }
.link-arrow:hover { color: var(--accent); }
.link-on-dark { color: var(--dark-text); border-bottom: 1px solid var(--dark-line); font-weight: 600; font-size: var(--fs-small); padding-bottom: 2px; }
.link-on-dark:hover { color: var(--white); border-bottom-color: var(--white); }

/* ============================================================ chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--gap-chip); }
.chips--scroll {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; -webkit-overflow-scrolling: touch;
}
.chips--scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-meta); font-weight: 500; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"], .chip--active {
  background: var(--ink); color: var(--white); border-color: var(--ink);
}
.chip--tab { padding: 10px 18px; font-size: var(--fs-small); }
.chip__count { color: var(--muted); font-weight: 400; }
.chip[aria-pressed="true"] .chip__count, .chip--active .chip__count { color: var(--dark-muted); }

/* ============================================================ image wells & placeholders */

.well {
  position: relative; overflow: hidden; background: var(--surface);
  border-radius: var(--r-card); display: grid; place-items: center;
}
.well--lg { border-radius: var(--r-panel); }
.well img { width: 100%; height: 100%; object-fit: cover; }
.well--contain img { object-fit: contain; padding: 8%; }

/* Hero wells keep the 4/5 ratio but must not grow past the fold and push
   into the section below, so the cap lives on the well itself. */
.well--hero { max-height: 640px; }

.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-3-4  { aspect-ratio: 3 / 4; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-16-9 { aspect-ratio: 16 / 9; }

.ph {
  background: repeating-linear-gradient(135deg, var(--stripe-light-a) 0 12px, var(--stripe-light-b) 12px 24px);
}
.ph__cap {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  padding: 5px 9px; border: 1px dashed var(--line-strong);
  text-align: center; max-width: 85%;
}
.ph--dark { background: repeating-linear-gradient(135deg, var(--stripe-dark-a) 0 14px, var(--stripe-dark-b) 14px 28px); }
.ph--dark .ph__cap { color: var(--dark-muted); border-color: var(--dark-line); }

.badge {
  position: absolute; left: 12px; top: 12px;
  font-size: 11px; font-weight: 600; padding: 5px 9px;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-pill); box-shadow: var(--shadow-badge);
}

/* ============================================================ cards */

.card { display: flex; flex-direction: column; gap: 12px; }
.card__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.card:hover .card__title { color: var(--link); }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.card__row .card__title, .card__row .cat-tile__name { min-width: 0; overflow-wrap: anywhere; }
.card__code { font-size: var(--fs-eyebrow); color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.card__spec {
  font-size: var(--fs-meta); color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.card__seen { font-size: var(--fs-eyebrow); color: var(--muted); }

/* Every category tile is the same size. A 2×2 feature tile cannot line its
   caption up with the row beside it, which is what made this grid ragged. */
.cat-tile__name { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.cat-tile .card__row { align-items: flex-start; }
.cat-tile--dark .well { background: var(--dark); padding: 16px; text-align: center; }
.cat-tile--dark .well span {
  font-size: var(--fs-h3); font-weight: 600; color: var(--bg); line-height: 1.25;
}

.space-card { position: relative; display: block; }
.space-card .well { border-radius: var(--r-card); }
.space-card__body {
  position: absolute; inset: auto 16px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.space-card__index { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.space-card__title { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.05; }
.space-card__list { font-size: var(--fs-meta); color: var(--muted); }
.space-card--invite .well {
  background: transparent; border: 1px solid var(--line-strong);
  align-content: center; padding: 20px; text-align: center;
}
.space-card--invite .well p { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }

/* ============================================================ stat strip */

/* Four figures: two rows of two on a phone or tablet, one row on desktop,
   never three with a dangling fourth. */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-inline: var(--pad-x);
}
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats__item { padding: 22px 0; display: flex; flex-direction: column; gap: 4px; }
.stats__num { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.stats__cap { font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ============================================================ panels & bands */

.panel {
  background: var(--surface); border-radius: var(--r-panel);
  padding: clamp(24px, 3.2cqw, 48px);
}
.panel--dark { background: var(--dark); color: var(--dark-text); }
.panel--dark .h-2, .panel--dark .h-2c, .panel--dark .h-3 { color: var(--dark-text); }
.panel--dark .body, .panel--dark .lead { color: var(--dark-muted); }
.panel--outline { background: transparent; border: 1px solid var(--line); }

.band {
  background: var(--dark); color: var(--dark-text); border-radius: var(--r-panel);
  overflow: hidden; margin-inline: var(--pad-x);
}
.band__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 3cqw, 56px); align-items: center;
  padding: clamp(24px, 3.2cqw, 56px);
}
.band__body { color: var(--dark-muted); }

.process { display: flex; flex-direction: column; }
.process__item {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.process__item:last-child { border-bottom: 1px solid var(--line); }
.process__num { font-size: 28px; font-weight: 600; line-height: 1; color: var(--muted); }
.process__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.process__body { font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); max-width: 64ch; }
.process--dark .process__item { border-color: var(--dark-line); }
.process--dark .process__num { color: var(--accent); }
.process--dark .process__body { color: var(--dark-muted); }

.timeline { display: flex; flex-direction: column; }
.timeline__row {
  display: grid; grid-template-columns: 88px 1fr; gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.timeline__row:last-child { border-bottom: 1px solid var(--line); }
.timeline__year { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.timeline__title { font-weight: 600; }
.timeline__body { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; max-width: 64ch; }

/* ============================================================ specs */

.keyspecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.keyspec {
  background: var(--surface); border-radius: var(--r-tile); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.keyspec__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.keyspec__value { font-size: 15px; font-weight: 600; line-height: 1.25; }

.dl { display: grid; grid-template-columns: minmax(120px, 140px) 1fr; }
.dl__k, .dl__v {
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.5;
}
.dl__k { color: var(--muted); padding-right: 16px; }
.dl__v { color: var(--ink); }
.dl > :nth-last-child(1), .dl > :nth-last-child(2) { border-bottom: 1px solid var(--line); }

/* ============================================================ breadcrumb */

.crumbs { font-size: var(--fs-meta); color: var(--muted); padding-top: 20px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li::after { content: " / "; color: var(--muted); padding-left: 6px; }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ============================================================ faq */

/* The accordion fills its column so the "+" sits on the right edge; only the
   answer text is capped for reading. */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--link); }
.faq__a { padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 72ch; }

/* ============================================================ forms */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-meta); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-family: var(--font); font-size: var(--fs-small);
  padding: 14px 16px;
}
.panel .input, .panel .select, .panel .textarea { background: var(--white); }
.panel--dark .input, .panel--dark .select, .panel--dark .textarea {
  background: var(--surface); border-color: transparent; color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); outline: none; }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: none; padding-right: 40px; }

/* A select with no affordance reads as a text box, so a ▾ glyph marks it.
   Text glyph, not an icon — the design system allows these six. */
.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: "▾"; position: absolute; right: 16px; top: 0; bottom: 0;
  display: grid; align-items: center; color: var(--muted); font-size: 15px;
  pointer-events: none;
}

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-input); }
@media (min-width: 540px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-error { font-size: var(--fs-meta); color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--ink); }

.notice {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-input);
  font-size: var(--fs-small); background: var(--surface); color: var(--ink);
}

/* ============================================================ configurator */

.options { display: flex; flex-wrap: wrap; gap: var(--gap-input); }
.option {
  border: 1.5px solid var(--line-mid); border-radius: var(--r-input);
  background: var(--white); color: var(--ink);
  font-size: var(--fs-meta); font-weight: 500; padding: 10px 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.option:hover { border-color: var(--ink); }
.option--on { border-color: var(--ink); background: var(--surface); }
.option--finish { border-radius: var(--r-pill); }
.option__swatch {
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line); flex: 0 0 auto;
}

/* ============================================================ gallery */

.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery__thumb { border-radius: var(--r-input); overflow: hidden; background: var(--surface); aspect-ratio: 1/1; border: 1px solid transparent; padding: 0; cursor: pointer; }
.gallery__thumb--on { border-color: var(--ink); }
.gallery__main { border-radius: var(--r-panel); }

/* ============================================================ sticky bits */

.sticky-bar {
  position: sticky; top: var(--head-h); z-index: 20;
  background: var(--bar-bg);
  backdrop-filter: var(--blur-bar); -webkit-backdrop-filter: var(--blur-bar);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px var(--pad-x);
}
.sticky-col { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; }
@media (max-width: 1023px) { .sticky-col { position: static; } }

.toc { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-meta); }
.toc span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--ink); }

/* ============================================================ logo strip */

/* Cell dividers are drawn by the cells themselves, so an incomplete last row
   leaves plain background rather than a slab of divider colour. */
.logos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; background: var(--bg);
}
@media (min-width: 560px)  { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px)  { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logos__item {
  display: grid; place-items: center; padding: 14px; aspect-ratio: 3 / 2;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logos__item img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.logos__item span { font-size: var(--fs-meta); color: var(--muted); text-align: center; }

/* ============================================================ pagination */

.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.pager__link {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 500;
}
.pager__link:hover { border-color: var(--ink); }
.pager__link[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ============================================================ footer */

.site-foot {
  margin-top: var(--section);
  padding: clamp(40px, 5cqw, 72px) var(--pad-x) 32px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 48px;
}
.site-foot__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 32px;
}
.site-foot__brand { display: flex; flex-direction: column; gap: 14px; }
.site-foot__brand img { height: 34px; width: auto; align-self: flex-start; }
.site-foot__col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.site-foot__col > span:first-child {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.site-foot__col a:hover { color: var(--link); }
.site-foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: var(--fs-eyebrow); color: var(--muted);
  padding-top: 20px; border-top: 1px solid var(--line);
}
.site-foot__bottom a { color: var(--muted); }
.site-foot__bottom a:hover { color: var(--ink); }
.site-foot__social { display: flex; flex-wrap: wrap; gap: 20px; }

/* ============================================================ misc */

.hero-caption {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--white); border-radius: var(--r-input);
}
.hero-caption__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-caption__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.1; }
.hero-caption__meta { font-size: var(--fs-eyebrow); color: var(--muted); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.empty { padding: 40px 0; color: var(--muted); font-size: var(--fs-small); }

/* ============================================================ compositions */

/* Consultation strip: copy on the left, the button hard right, wrapping to a
   stack when there is no room — not a three-column grid with an empty third. */
.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(20px, 2.4cqw, 40px);
}
.cta-row__copy { display: flex; flex-direction: column; gap: 10px; max-width: 54ch; }
.cta-row .btn { flex: 0 0 auto; }

/* The lead form sits in the right half of its panel; the invitation copy
   holds the left so neither half is a stretch of empty surface. */
.lead-panel__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 42ch; }
.lead-panel__form { display: flex; flex-direction: column; gap: var(--gap-input); }
.lead-panel__actions { padding-top: 6px; }

/* Space tiles read as photographs with a caption, so the caption needs its
   own plate when the photo behind it is missing or pale. */
.space-card__title { text-wrap: balance; }
@media (max-width: 680px) {
  /* Two cards to a phone row: the 30px title would run past the card. */
  .space-card__title { font-size: 22px; }
  .space-card__body { inset: auto 12px 12px 12px; }
}

/* Six thumbs, six columns: the strip is always exactly one row. */
.gallery__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.empty { padding: 32px 0 8px; }

/* ============================================================ header menus */

/* Disclosure panel under the header. Native <details> so it works with the
   keyboard and without JS; JS only adds hover-open and Escape. */
.menu { position: static; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; cursor: pointer; list-style: none;
  border-bottom: 1px solid transparent;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; font-size: 10px; color: var(--muted); }
.menu > summary:hover { border-bottom-color: var(--ink); }
.menu[open] > summary { border-bottom-color: var(--ink); }
.menu[open] > summary::after { content: "▴"; }

.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 39;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: clamp(24px, 3cqw, 40px) var(--pad-x);
}
.menu__grid {
  display: grid; row-gap: 2px; column-gap: clamp(20px, 2.4cqw, 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px)  { .menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .menu__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.menu__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.menu__label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.menu__link {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-small); font-weight: 500; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.menu__link span { font-size: var(--fs-eyebrow); color: var(--muted); font-weight: 400; }
.menu__link:hover { color: var(--link); }
.menu__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line);
}

/* ============================================================ search field */

.searchbox { display: flex; gap: 8px; align-items: center; width: 100%; }
.searchbox .input { border-radius: var(--r-pill); padding: 12px 18px; }
.searchbox .btn { flex: 0 0 auto; }
.menu__search { max-width: 420px; padding-bottom: 20px; }

/* ============================================================ live regions */

/* The product grid is replaced in place while filters change; dim nothing,
   just tell assistive tech it is busy. */
[data-grid][aria-busy="true"] { cursor: progress; }
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* A page that also carries the sticky filter bar needs its sticky side rail
   to clear both bars, not just the header. */
.page:has(.sticky-bar) .sticky-col,
.page:has(.sticky-bar) .split__aside { top: calc(var(--head-h) + 76px); }