/* ==========================================================================
   METAL CRAFT STUDIO — Design System
   Precision in Every Fold.

   Token layer → primitives → components → page blocks → utilities
   No build step. No framework. One file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  TOKENS
   Palette: warm white / off white / metallic silver / graphite / charcoal /
   deep black, with burnished bronze as the single controlled accent.
   -------------------------------------------------------------------------- */
:root {
  /* --- surface --- */
  --c-white:       #FFFFFF;
  --c-warm:        #F7F6F3;   /* warm white — page ground */
  --c-off:         #EEEDE9;   /* off white — alternating band */
  --c-silver:      #DDDCD7;   /* metallic silver — rules, edges */
  --c-silver-2:    #C6C5BF;

  --c-graphite:    #6B6A66;   /* mid text */
  --c-charcoal:    #33322F;   /* strong text */
  --c-black:       #171715;   /* deep black — dark bands */
  --c-black-2:     #201F1D;

  /* --- accent: burnished bronze, used only where finished metal justifies --- */
  --c-bronze:      #8A6220;
  --c-bronze-deep: #78562A;
  --c-bronze-lit:  #C79A55;
  --c-bronze-wash: #F0E9DD;

  /* --- semantic (product status) --- */
  --c-ok:          #3F6B4A;
  --c-ok-bg:       #E6EDE7;
  --c-custom:      #8A6212;
  --c-custom-bg:   #F3EBD8;
  --c-dev:         #2F5773;
  --c-dev-bg:      #E3EBF0;
  --c-soon:        #6B6A66;
  --c-soon-bg:     #EDECE8;

  /* --- roles (light) ---
     Components only ever reference these roles, never the raw palette above,
     so switching theme is a token swap and nothing else. Every value here is
     redefined wholesale in the two dark blocks that follow. -------------- */
  --bg:            var(--c-warm);
  --bg-alt:        var(--c-off);
  --surface:       var(--c-white);
  --surface-2:     var(--c-off);
  --ink:           var(--c-black);
  --ink-2:         var(--c-charcoal);
  --ink-3:         var(--c-graphite);
  --rule:          var(--c-silver);
  --rule-2:        #E5E4E0;
  --accent:        var(--c-bronze);
  --accent-ink:    var(--c-bronze-deep);
  --accent-wash:   var(--c-bronze-wash);

  /* the deliberately dark bands: section--dark, cta-band, marquee, footer */
  --inverse-bg:    var(--c-black);
  --inverse-ink:   #EFEEEA;
  --inverse-ink-2: #A9A8A2;
  --inverse-rule:  #35342F;

  /* chrome */
  --header-bg:     rgba(247,246,243,.92);
  --btn-solid-bg:  var(--c-black);
  --btn-solid-ink: #FFFFFF;
  --field-bd:      var(--c-silver-2);
  --err:           #8C3126;
  --err-bg:        #F6E9E7;

  /* --- type --- */
  --f-display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* type scale — 1.25 major third, clamped */
  --t-xs:   0.75rem;    /* 12   labels */
  --t-sm:   0.8125rem;  /* 13   captions, table data */
  --t-base: 1rem;       /* 16   body */
  --t-md:   1.0625rem;  /* 17   lead body */
  --t-lg:   clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --t-2xl:  clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-3xl:  clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --t-4xl:  clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

  /* --- space: 4px base --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --section-y: clamp(56px, 8vw, 128px);
  --gutter:    clamp(16px, 4vw, 40px);
  --container:  1280px;
  --container-narrow: 860px;

  /* --- form --- */
  --radius:    2px;
  --radius-lg: 3px;
  --border:    1px solid var(--rule);
  --shadow-1:  0 1px 2px rgba(23,23,21,.05);
  --shadow-2:  0 2px 4px rgba(23,23,21,.05), 0 12px 32px -16px rgba(23,23,21,.22);
  --shadow-3:  0 4px 8px rgba(23,23,21,.07), 0 24px 56px -24px rgba(23,23,21,.30);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .34s;
  --dur-fast:  .18s;

  --header-h:  72px;
}

/* ---------------------------------------------------------------------------
   BLACK IS THE DEFAULT.

   MCS is architectural metalwork in brass, bronze and stainless. Those finishes
   read as metal on a dark ground and as brown on a light one, so the studio's
   own identity is the dark one — this is a deliberate single-direction choice,
   not a follow-the-OS toggle. A visitor who explicitly picks light still gets
   light; nothing else overrides it.
   --------------------------------------------------------------------------- */
  :root:not([data-theme="light"]) {
  --bg:            #0B0B0C;
  --bg-alt:        #141416;
  --surface:       #17171A;
  --surface-2:     #1E1E22;

  --ink:           #F2EDE2;
  --ink-2:         #C3C5C1;
  --ink-3:         #90948F;
  --rule:          #31353A;
  --rule-2:        #292D31;

  /* bronze lifts in dark so it still reads as a metal accent rather than brown */
  --accent:        #C8973F;
  --accent-ink:    #E3B563;
  --accent-wash:   #2A2318;

  /* a dark band on a dark page goes DEEPER than the page, not lighter, and
     carries hairline rules so it still reads as a band rather than dissolving */
  --inverse-bg:    #050506;
  --inverse-ink:   #EFEEEA;
  --inverse-ink-2: #9DA09B;
  --inverse-rule:  #2A2C2F;

  --header-bg:     rgba(11,11,12,.94);
  --btn-solid-bg:  #E9EAE7;
  --btn-solid-ink: #0B0B0C;
  --field-bd:      #454B51;
  --err:           #E08D82;
  --err-bg:        #2C1D1B;

  --c-silver-2:    #454B51;

  --c-ok:          #7FBE97;  --c-ok-bg:      #16261C;
  --c-custom:      #D8B45F;  --c-custom-bg:  #2A2415;
  --c-dev:         #83B6D8;  --c-dev-bg:     #16232D;
  --c-soon:        #9AA0A4;  --c-soon-bg:    #212528;

  --shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --shadow-2:  0 2px 4px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.75);
  --shadow-3:  0 4px 8px rgba(0,0,0,.4), 0 24px 56px -24px rgba(0,0,0,.85);
  }

/* Dark by explicit choice — identical values, so the toggle is stable. */
:root[data-theme="dark"] {
  --bg:            #0B0B0C;
  --bg-alt:        #141416;
  --surface:       #17171A;
  --surface-2:     #1E1E22;

  --ink:           #F2EDE2;
  --ink-2:         #C3C5C1;
  --ink-3:         #90948F;
  --rule:          #31353A;
  --rule-2:        #292D31;

  /* bronze lifts in dark so it still reads as a metal accent rather than brown */
  --accent:        #C8973F;
  --accent-ink:    #E3B563;
  --accent-wash:   #2A2318;

  /* a dark band on a dark page goes DEEPER than the page, not lighter, and
     carries hairline rules so it still reads as a band rather than dissolving */
  --inverse-bg:    #050506;
  --inverse-ink:   #EFEEEA;
  --inverse-ink-2: #9DA09B;
  --inverse-rule:  #2A2C2F;

  --header-bg:     rgba(11,11,12,.94);
  --btn-solid-bg:  #E9EAE7;
  --btn-solid-ink: #0B0B0C;
  --field-bd:      #454B51;
  --err:           #E08D82;
  --err-bg:        #2C1D1B;

  --c-silver-2:    #454B51;

  --c-ok:          #7FBE97;  --c-ok-bg:      #16261C;
  --c-custom:      #D8B45F;  --c-custom-bg:  #2A2415;
  --c-dev:         #83B6D8;  --c-dev-bg:     #16232D;
  --c-soon:        #9AA0A4;  --c-soon-bg:    #212528;

  --shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --shadow-2:  0 2px 4px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.75);
  --shadow-3:  0 4px 8px rgba(0,0,0,.4), 0 24px 56px -24px rgba(0,0,0,.85);
}

/* --------------------------------------------------------------------------
   02  RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* focus — visible, bronze, never removed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-black); color: #fff; padding: 12px 20px;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   03  TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: .005em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); line-height: 1.2; }
/* A card heading is an h3 so the outline has no gap in it, and carries
   this class so it still looks like the h4 it replaced. */
.h4 { font-size: var(--t-lg); line-height: 1.2; }
/* A section heading is an h2 for the outline, and carries this class so it
   still looks like the h3 it replaced. */
.h3 { font-size: var(--t-xl); }
h5 { font-size: var(--t-md); line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }

p { margin: 0 0 var(--s-4); max-width: 68ch; }
.lead {
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 62ch;
}
.measure     { max-width: 68ch; }
.measure-tight { max-width: 52ch; }

/* eyebrow — mono, bronze, tracked. The site's signature label. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: var(--c-bronze-lit); }
.eyebrow--light::before { background: var(--c-bronze-lit); }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* the zero-radius emphasis — a hairline rule under a word, like a dimension line */
.dim {
  position: relative;
  white-space: nowrap;
  color: var(--accent);
}
.dim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: 1px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   04  LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--alt  { background: var(--bg-alt); }
.section--dark {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  border-block: 1px solid var(--inverse-rule);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark .h4, .section--dark h5 { color: var(--inverse-ink); }
.section--dark .lead, .section--dark p { color: var(--inverse-ink-2); }
.section--dark .label { color: var(--inverse-ink-2); }

/* section head — rule + eyebrow + title, used everywhere */
.sec-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.sec-head__title { font-size: var(--t-2xl); }
.sec-head__sub   { color: var(--ink-3); max-width: 60ch; margin: 0; }
.section--dark .sec-head__sub { color: var(--inverse-ink-2); }

.sec-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    gap: var(--s-7);
  }
  .sec-head--split .sec-head__sub { justify-self: end; }
}

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--tight { gap: 1px; background: var(--rule); }

.stack   { display: grid; gap: var(--s-4); align-content: start; }
.stack-6 { display: grid; gap: var(--s-6); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }
.section--dark hr.rule { border-color: var(--inverse-rule); }

/* --------------------------------------------------------------------------
   05  BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--btn-solid-bg);
  --btn-ink: var(--btn-solid-ink);
  --btn-bd: var(--btn-solid-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 14px 26px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover  { --btn-bg: var(--c-bronze-deep); --btn-bd: var(--c-bronze-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost   { --btn-bg: transparent; --btn-ink: var(--ink); --btn-bd: var(--field-bd); }
.btn--ghost:hover { --btn-bg: var(--btn-solid-bg); --btn-ink: var(--btn-solid-ink); --btn-bd: var(--btn-solid-bg); }

.btn--light   { --btn-bg: #fff; --btn-ink: var(--c-black); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--c-bronze-lit); --btn-bd: var(--c-bronze-lit); --btn-ink: var(--c-black); }

.btn--outline-light { --btn-bg: transparent; --btn-ink: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-ink: var(--c-black); --btn-bd: #fff; }

.btn--bronze  { --btn-bg: var(--c-bronze); --btn-bd: var(--c-bronze); }
.btn--bronze:hover { --btn-bg: var(--c-bronze-deep); --btn-bd: var(--c-bronze-deep); }

.btn--sm  { padding: 10px 18px; font-size: 11px; }
.btn--lg  { padding: 17px 34px; }
.btn--block { width: 100%; }

/* text link with an arrow that travels on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(5px); }
.section--dark .link-arrow { color: var(--inverse-ink); border-bottom-color: var(--inverse-rule); }
.section--dark .link-arrow:hover { color: var(--c-bronze-lit); border-bottom-color: var(--c-bronze-lit); }

/* --------------------------------------------------------------------------
   06  CHIPS / STATUS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  line-height: 1.4;
}
.chip--available { color: var(--c-ok);     background: var(--c-ok-bg);     border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
.chip--custom    { color: var(--c-custom); background: var(--c-custom-bg); border-color: color-mix(in srgb, var(--c-custom) 40%, transparent); }
.chip--development { color: var(--c-dev);  background: var(--c-dev-bg);    border-color: color-mix(in srgb, var(--c-dev) 40%, transparent); }
.chip--soon      { color: var(--c-soon);   background: var(--c-soon-bg);   border-color: var(--rule); }
.chip--solid     { background: var(--btn-solid-bg); color: var(--btn-solid-ink); border-color: var(--btn-solid-bg); }

/* --------------------------------------------------------------------------
   07  HEADER + MEGA MENU
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--dur) var(--ease);
}
.header--scrolled { box-shadow: var(--shadow-1); }

.header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
/* Deliberately sets nothing: the logo rule above owns the mark's size, and a
   width or height here would outrank it on specificity — which is exactly how
   the header and the footer came to disagree. */
.header__logo-txt {
  font-family: var(--f-display);
  font-size: 15.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.header__logo-txt small {
  display: block;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  color: var(--accent);
  margin-top: 3px;
  font-weight: 500;
}

.nav { display: none; }
@media (min-width: 1100px) { .nav { display: flex; align-items: center; gap: 0; min-width: 0; flex-shrink: 1; } }

.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--accent-ink); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px;
  height: 1px; background: var(--accent);
}
.nav__caret {
  width: 7px; height: 7px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translateY(-2px); }

.header__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--accent-ink); border-color: var(--rule); }
.icon-btn svg { width: 18px; height: 18px; }

.basket-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff;
  border-radius: 8px;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  display: grid; place-items: center;
}
.icon-btn { position: relative; }
.header__quote { display: none; }
@media (min-width: 700px) and (max-width: 1099px) { .header__quote { display: inline-flex; } }
@media (min-width: 1100px) { .header__quote { display: inline-flex; } }

/* Between 1100 and 1400 the eight nav items, the logo and the actions are all
   competing for the same row. Buy the space back from the gutter and the CTA
   padding rather than dropping the CTA, which is the strongest link here. */
@media (min-width: 1100px) and (max-width: 1399px) {
  .header .container { padding-inline: var(--s-5); }
  /* Tightened rather than dropped. Seven top-level items leave enough room to
     keep the call to action visible on a laptop, which is where most of these
     visits happen — hiding it was only ever a symptom of too many items. */
  .header__quote { padding-inline: 12px; letter-spacing: .08em; font-size: 10.5px; }
  .nav__link { padding-inline: 7px; letter-spacing: .08em; }
}

/* --- mega panel --- */
.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 90;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .mega__inner--products { grid-template-columns: repeat(4, 1fr) minmax(220px, .85fr); }
  .mega__inner--caps     { grid-template-columns: repeat(2, 1fr) minmax(240px, 1fr); }
  .mega__inner--apps     { grid-template-columns: repeat(3, 1fr); }
  .mega__inner--simple   { grid-template-columns: repeat(2, 1fr) minmax(240px, 1fr); }
}
.mega__col > .label { margin-bottom: var(--s-4); display: block; color: var(--accent); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mega__list a:hover { color: var(--accent-ink); border-bottom-color: var(--rule); }
.mega__list .n {
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mega__feature {
  border-left: 1px solid var(--rule);
  padding-left: var(--s-6);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.mega__feature img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
}
.mega__feature h4, .mega__feature .h4 { font-size: 16px; }
.mega__feature p { font-size: 13.5px; color: var(--ink-3); margin: 0; }

/* --- mobile nav --- */
.mnav {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--surface);
  overflow-y: auto;
  z-index: 95;
  /* Slides on Y, not X. A fixed element parked off-screen horizontally is not
     clipped by the body's overflow-x and would widen the document on mobile. */
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease),
              visibility var(--dur);
  padding-bottom: var(--s-9);
}
.mnav[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (min-width: 1100px) { .mnav, .nav-toggle { display: none !important; } }

.mnav__acc { border-bottom: 1px solid var(--rule); }
.mnav__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: 18px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-size: 19px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  text-decoration: none;
}
.mnav__trigger .nav__caret { width: 8px; height: 8px; color: var(--ink-3); }
.mnav__panel { display: none; padding: 0 0 var(--s-5); }
.mnav__panel[data-open="true"] { display: block; }
.mnav__panel .label { display: block; margin: var(--s-4) 0 var(--s-2); color: var(--accent); }
.mnav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mnav__panel a {
  display: block; padding: 8px 0 8px var(--s-4);
  border-left: 1px solid var(--rule);
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.mnav__panel a:hover { color: var(--accent-ink); border-left-color: var(--accent); }
.mnav__foot { padding-top: var(--s-6); display: grid; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   08  HERO
   Asset-driven: the source photography tops out at 750px wide, so the hero
   is a composed split — type left, framed image right — never a stretched
   full-bleed. The image renders at or below its native size.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 104px);
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.hero__title {
  font-size: var(--t-4xl);
  /* The concept's signature: condensed Oswald set in caps. Oswald is a narrow
     face, so uppercase here reads as engineered signage rather than shouting,
     and it is the one place on the page that earns it. */
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .01em;
  margin-bottom: var(--s-5);
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
  display: block;
}
.hero__lead {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 48ch;
  margin-bottom: var(--s-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

/* framed image — a drawing-sheet frame with a bronze corner tick */
.hero__frame {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  width: 100%;
}
.hero__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.hero__frame::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.hero__frame::after  { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }

.hero__caption {
  position: absolute;
  bottom: var(--s-4); left: var(--s-4); right: var(--s-4);
  background: rgba(23,23,21,.82);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
}
.hero__caption span:last-child { color: var(--c-bronze-lit); }

/* stat bar */
.statbar {
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.statbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .statbar__grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) { .stat { border-bottom: 0; } .stat:last-child { border-right: 0; } }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__n sup { font-size: .5em; color: var(--accent); vertical-align: super; }
.stat__l {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   09  MARQUEE (capability strip)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding-block: 18px;
  border-block: 1px solid var(--inverse-rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--s-7);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee a, .marquee span {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--inverse-ink); text-decoration: none; white-space: nowrap;
}
.marquee a:hover { color: var(--c-bronze-lit); }
.marquee .sep { color: var(--c-bronze-lit); }

/* --------------------------------------------------------------------------
   10  CARDS
   Portrait 3:4 by default — the source photography is predominantly portrait,
   and profiles / baffles / louvers are vertical products.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--c-silver-2); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 3 / 4;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__media--wide { aspect-ratio: 4 / 3; }
.card__media--square { aspect-ratio: 1 / 1; }

.card__badges {
  position: absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3);
  display: flex; gap: 6px; flex-wrap: wrap;
  pointer-events: none;
}
.card__body { padding: var(--s-4); display: grid; gap: 6px; align-content: start; flex: 1; }
.card__cat {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.card__title {
  font-family: var(--f-display); font-weight: 500; font-size: 17px;
  line-height: 1.15; letter-spacing: .01em; color: var(--ink);
}
.card__meta {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  margin-top: auto; padding-top: var(--s-3);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}

/* division card — image + count, larger type */
.divcard { position: relative; }
.divcard .card__media { aspect-ratio: 3 / 4; }
.divcard .card__body {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(23,23,21,.94) 12%, rgba(23,23,21,.72) 55%, transparent);
  padding: var(--s-6) var(--s-4) var(--s-4);
  gap: 4px;
}
.divcard .card__title { color: #fff; font-size: 19px; }
.divcard .card__cat   { color: var(--c-bronze-lit); }
.divcard .card__meta  { color: rgba(255,255,255,.72); padding-top: var(--s-2); }

/* feature card — spans two columns, landscape source */
.card--feature { grid-column: span 2; }
.card--feature .card__media { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .card--feature { grid-column: span 1; } }

/* application tile — full-bleed photographic band item */
.apptile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 260px;
  background: var(--c-black);
}
.apptile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .58;
  transition: transform 1.1s var(--ease-out), opacity var(--dur) var(--ease);
}
.apptile:hover img { transform: scale(1.05); opacity: .72; }
.apptile__body {
  position: relative;
  padding: var(--s-5);
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px;
  color: #fff;
}
.apptile__body h4, .apptile__body .h4 { color: #fff; font-size: 20px; }
.apptile__body .label { color: rgba(255,255,255,.7); }

/* capability card */
.capcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: grid; gap: var(--s-3); align-content: start;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.capcard:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.capcard__n {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; color: var(--accent);
}
.capcard p { font-size: 14.5px; color: var(--ink-3); margin: 0; }
.capcard--flagship { border-color: var(--accent); background: var(--accent-wash); }

/* swatch */
.swatch {
  display: grid; gap: var(--s-3);
  text-decoration: none; color: inherit;
}
.swatch__chip {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.swatch:hover .swatch__chip { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.swatch__name {
  font-family: var(--f-display); font-size: 14px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink); line-height: 1.2;
}
.swatch__meta { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); }

/* finish swatch surfaces — CSS gradients standing in until photographed */
.sw-mirror   { background: linear-gradient(135deg,#f4f4f2 0%,#c9cac6 22%,#fbfbfa 40%,#a8aaa6 62%,#e9e9e6 82%,#bdbeb9 100%); }
.sw-hairline { background: repeating-linear-gradient(90deg,#d6d7d2 0 1px,#c3c4bf 1px 2px,#dcddd8 2px 3px); }
.sw-matte    { background: linear-gradient(160deg,#c9cac5,#b1b2ad); }
.sw-bead     { background: radial-gradient(circle at 30% 30%,#d9dad5,#b8b9b4 60%),#c4c5c0; }
.sw-antique  { background: linear-gradient(140deg,#9d9791 0%,#7c766f 45%,#a8a29b 100%); }
.sw-gold     { background: linear-gradient(135deg,#e8c98a 0%,#b98f3f 28%,#f3dfae 48%,#9a7038 72%,#dcbb78 100%); }
.sw-rose     { background: linear-gradient(135deg,#e7bda6 0%,#c08a6e 30%,#f0d3c2 50%,#a8705a 74%,#dfae95 100%); }
.sw-champagne{ background: linear-gradient(135deg,#eadfc4 0%,#c4b287 32%,#f2ead4 52%,#ab9a70 76%,#ded2b2 100%); }
.sw-black    { background: linear-gradient(135deg,#4a4a48 0%,#232322 30%,#5c5c59 52%,#1b1b1a 74%,#3d3d3b 100%); }
.sw-bronze   { background: linear-gradient(135deg,#b58a5a 0%,#7d5730 30%,#c9a173 52%,#6b4a29 76%,#a67f52 100%); }
.sw-powder   { background: linear-gradient(160deg,#d8d7d3,#bfbeba); }

/* download card */
.dlcard {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dlcard:hover { border-color: var(--accent); background: var(--accent-wash); }
.dlcard__ext {
  flex: none;
  width: 46px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .06em; color: var(--accent);
}
.dlcard__body { display: grid; gap: 3px; }
.dlcard__title { font-family: var(--f-display); font-size: 16px; letter-spacing: .02em; }
.dlcard__meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   11  V-GROOVE COMPARISON SLIDER
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px; background: var(--c-bronze-lit);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare__knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-bronze-lit); color: var(--c-black);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 13px;
  box-shadow: var(--shadow-2);
}
.compare__tag {
  position: absolute; top: var(--s-4);
  padding: 6px 10px;
  background: rgba(23,23,21,.82);
  color: #fff; border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.compare__tag--l { left: var(--s-4); }
.compare__tag--r { right: var(--s-4); color: var(--c-bronze-lit); }
.compare__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.compare__range:focus-visible + .compare__handle .compare__knob { outline: 3px solid #fff; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   12  PROCESS CHAIN
   -------------------------------------------------------------------------- */
.chain { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px)  { .chain { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .chain { grid-template-columns: repeat(6, 1fr); } }
.chain__step {
  background: var(--surface);
  padding: var(--s-5) var(--s-4);
  display: grid; gap: 6px; align-content: start;
  text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease);
}
.chain__step:hover { background: var(--accent-wash); }
.chain__n { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--accent); }
.chain__name { font-family: var(--f-display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.chain__note { font-size: 13px; color: var(--ink-3); }

/* numbered workflow rail */
.rail { display: grid; gap: 0; }
.rail__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 var(--s-5);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-5);
}
.rail__row:last-child { border-bottom: 1px solid var(--rule); }
.rail__n {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; color: var(--accent); padding-top: 4px;
}
.rail__body h4, .rail__body .h4 { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.rail__body p { font-size: 14.5px; color: var(--ink-3); margin: 0; max-width: 60ch; }
.section--dark .rail__row { border-color: var(--inverse-rule); }
.section--dark .rail__body p { color: var(--inverse-ink-2); }

/* --------------------------------------------------------------------------
   13  FILTERS + PRODUCT INDEX
   -------------------------------------------------------------------------- */
.toolbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
}
.toolbar__row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.search {
  position: relative; flex: 1 1 260px; min-width: 0;
}
.search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14.5px;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); }

.filter-toggle { display: inline-flex; }
@media (min-width: 1000px) { .filter-toggle { display: none; } }

.results-count {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-left: auto;
}

.index-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .index-layout { grid-template-columns: 236px 1fr; gap: var(--s-7); } }

.facets { display: grid; gap: var(--s-5); align-content: start; }
@media (max-width: 999px) {
  .facets {
    position: fixed; inset: 0; z-index: 120;
    background: var(--surface); overflow-y: auto;
    padding: var(--s-5) var(--gutter) var(--s-9);
    transform: translateY(24px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .facets[data-open="true"] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
}
.facets__head { display: none; }
@media (max-width: 999px) {
  .facets__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
}
.facet { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.facet:first-of-type { border-top: 0; padding-top: 0; }
.facet > .label { display: block; margin-bottom: var(--s-3); color: var(--ink); }
.facet__opts { display: grid; gap: 2px; max-height: 250px; overflow-y: auto; }
.check {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; cursor: pointer;
  font-size: 14px; color: var(--ink-2);
}
.check input {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--field-bd); border-radius: 1px;
  background: var(--surface); cursor: pointer; position: relative;
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.check:hover { color: var(--ink); }
.check__n { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-4); }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); cursor: pointer;
}
.pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.product-grid {
  display: grid;
  gap: var(--s-4);
  /* Two columns on a phone, not one. A single 343px-wide column turns a
     48-product page into a 30,000px scroll; at two columns it behaves like
     the product listing it is. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.empty {
  grid-column: 1/-1;
  padding: var(--s-9) var(--s-5);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
.empty h4, .empty .h4 { margin-bottom: var(--s-2); }
.empty p { margin-inline: auto; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   14  BREADCRUMB
   -------------------------------------------------------------------------- */
.crumbs {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .06em; color: var(--ink-3);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--c-silver-2); }
.crumbs [aria-current] { color: var(--ink); }

/* --------------------------------------------------------------------------
   15  PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pdp { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: var(--s-6) var(--s-8); }
@media (min-width: 940px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } }

.gallery { display: grid; gap: var(--s-3); }
.gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gallery__thumb {
  width: 74px; aspect-ratio: 1/1;
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; padding: 0; background: var(--surface-2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }

.pdp__head { display: grid; gap: var(--s-4); align-content: start; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 939px) { .pdp__head { position: static; } }
.pdp__title { font-size: var(--t-2xl); }
.pdp__desc { color: var(--ink-2); font-size: var(--t-md); }
.pdp__actions { display: grid; gap: var(--s-3); }
.pdp__actions-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pdp__links { display: flex; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.pdp__links a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
.pdp__links a:hover { color: var(--accent-ink); }

.block { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule); }
.block__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.block__head h3, .block__head .h3 { font-size: var(--t-lg); letter-spacing: .04em; text-transform: uppercase; }

/* spec table */
.spectable { width: 100%; font-size: 14.5px; }
.spectable th, .spectable td { padding: 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); }
.spectable th {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  width: 38%; padding-right: var(--s-4);
}
.spectable td { color: var(--ink-2); }
.spectable tr:last-child th, .spectable tr:last-child td { border-bottom: 0; }
.spec-note {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--accent-wash); border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.spec-note p { margin: 0; font-size: 14px; color: var(--accent-ink); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 520px; }

/* components exploded list */
.components { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.components__row { background: var(--surface); padding: var(--s-4); display: grid; grid-template-columns: 92px 1fr; gap: var(--s-4); align-items: start; }
.components__role { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.components__name { font-family: var(--f-display); font-size: 15px; letter-spacing: .03em; }
.components__note { font-size: 13.5px; color: var(--ink-3); margin: 3px 0 0; }

/* --------------------------------------------------------------------------
   16  FORMS + RFQ
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; }
.field > label, .field > .label { color: var(--ink-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--field-bd);
  border-radius: var(--radius);
  font-size: 15px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.field__hint { font-size: 12.5px; color: var(--ink-3); }
.field__err { font-size: 12.5px; color: var(--err); display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--err); }
.field[data-invalid="true"] .field__err { display: block; }

.choice-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  position: relative;
  border: 1px solid var(--field-bd);
  border-radius: var(--radius);
  padding: var(--s-4);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display: grid; gap: 4px;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__t { font-family: var(--f-display); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.choice__d { font-size: 13px; color: var(--ink-3); }
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* stepper */
.stepper { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s-6); }
.stepper__dot {
  flex: 1 1 0; min-width: 22px; height: 3px;
  background: var(--rule); border-radius: 2px;
  transition: background var(--dur) var(--ease);
}
.stepper__dot[data-state="done"]    { background: var(--c-bronze-lit); }
.stepper__dot[data-state="current"] { background: var(--accent); }
.step { display: none; }
.step[data-active="true"] { display: grid; gap: var(--s-5); }
.step__n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.step-nav { display: flex; gap: var(--s-3); justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid var(--rule); }

/* dropzone */
.dropzone {
  border: 1.5px dashed var(--field-bd);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--accent); background: var(--accent-wash); }
/* The input inside is visually hidden, so its focus ring is too. Without this
   a keyboard user has no idea where they are on the form. */
.dropzone:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
/* Spans rather than divs and a <p>, because a <label> may only contain
   phrasing content — so they are told to behave as blocks. */
.dropzone__icon { display: block; font-size: 26px; color: var(--accent); line-height: 1; margin-bottom: var(--s-3); }
.dropzone__t { display: block; font-family: var(--f-display); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
.dropzone__d { display: block; font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }
.filelist { display: grid; gap: 6px; margin-top: var(--s-4); }
.filelist__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 11.5px;
}
.filelist__item button { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1; }
.filelist__item button:hover { color: var(--err); }

/* --------------------------------------------------------------------------
   17  CTA BANDS
   -------------------------------------------------------------------------- */
.cta-band { background: var(--inverse-bg); color: var(--inverse-ink); position: relative; overflow: hidden; border-block: 1px solid var(--inverse-rule); }
.cta-band__inner { padding-block: clamp(56px, 8vw, 112px); position: relative; z-index: 1; text-align: center; display: grid; gap: var(--s-5); justify-items: center; }
.cta-band h2 { color: #fff; font-size: var(--t-3xl); }
.cta-band p { color: var(--inverse-ink-2); margin: 0; }
.cta-band .cluster { justify-content: center; }
.cta-band__bg { position: absolute; inset: 0; opacity: .16; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }

/* full-bleed photographic band — only used with the three large-format sources */
.bleed { position: relative; min-height: clamp(340px, 46vw, 560px); display: grid; align-items: center; background: var(--c-black); overflow: hidden; }
.bleed__img { position: absolute; inset: 0; }
.bleed__img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.bleed__inner { position: relative; z-index: 1; padding-block: var(--section-y); color: #fff; }
.bleed__inner h2 { color: #fff; }
.bleed__inner p { color: rgba(255,255,255,.78); }

/* --------------------------------------------------------------------------
   18  FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--inverse-bg); color: var(--inverse-ink-2); padding-block: var(--s-8) var(--s-5); border-top: 1px solid var(--inverse-rule); }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-7); } }
.footer__brand { display: grid; gap: var(--s-3); align-content: start; }
.footer__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-bronze-lit); }
.footer__brand p { font-size: 14px; color: var(--inverse-ink-2); max-width: 40ch; margin: 0; }
.footer__col > .label { display: block; color: #fff; margin-bottom: var(--s-4); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__col a { color: var(--inverse-ink-2); text-decoration: none; font-size: 14px; }
.footer__col a:hover { color: var(--c-bronze-lit); }
.footer__contact { display: grid; gap: 6px; font-size: 14px; font-style: normal; }
.footer__contact a { color: var(--inverse-ink); text-decoration: none; }
.footer__contact a:hover { color: var(--c-bronze-lit); }
.footer__social { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.footer__social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--inverse-rule); border-radius: var(--radius);
  color: var(--inverse-ink-2);
}
.footer__social a:hover { border-color: var(--c-bronze-lit); color: var(--c-bronze-lit); }
.footer__social svg { width: 15px; height: 15px; }
.footer__base {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--inverse-rule);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--inverse-ink-2);
}
.footer__base a { color: var(--inverse-ink-2); text-decoration: none; }
.footer__base a:hover { color: var(--c-bronze-lit); }

/* --------------------------------------------------------------------------
   19  FLOATING ACTIONS
   -------------------------------------------------------------------------- */
.floaters {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  z-index: 80; display: grid; gap: 10px; justify-items: end;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-3);
  transition: transform var(--dur) var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 24px; height: 24px; }
.fab--wa { background: #25D366; color: #fff; }
.fab--top { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); width: 42px; height: 42px; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fab--top[data-show="true"] { opacity: 1; pointer-events: auto; }
.fab--top svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   20  SCROLL REVEAL — restrained; opacity + 12px only
   -------------------------------------------------------------------------- */
/* Fail-safe by construction. The default state of every section is VISIBLE;
   nothing is hidden by the stylesheet alone. JS adds .will-reveal only to
   sections that are below the fold, and removes it as they scroll in — so if
   JS is blocked, if IntersectionObserver never fires, or if transitions never
   tick, the worst case is no animation rather than an invisible page.
   Content is never staked on an effect completing. */
/* ---- where a cropped photograph is cropped from --------------------------
   Fifteen containers on this site use object-fit: cover, and cover keeps the
   middle. For a portrait photograph in a wide banner that means a horizontal
   band through the centre and 65% of the picture discarded — fine when the
   subject is central, wrong when it is not, and the editor could do nothing
   about it.

   Admin -> Library -> Crop position writes this. Centre is the browser's own
   default and gets no attribute, so a site where nobody has moved a crop
   carries none of this. */
img[data-focal="top"]          { object-position: top; }
img[data-focal="bottom"]       { object-position: bottom; }
img[data-focal="left"]         { object-position: left; }
img[data-focal="right"]        { object-position: right; }
img[data-focal="top-left"]     { object-position: left top; }
img[data-focal="top-right"]    { object-position: right top; }
img[data-focal="bottom-left"]  { object-position: left bottom; }
img[data-focal="bottom-right"] { object-position: right bottom; }

[data-reveal] {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].will-reveal {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  [data-reveal].will-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21  UTILITIES
   -------------------------------------------------------------------------- */
.no-scroll { overflow: hidden; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.hide-sm { display: none; }
@media (min-width: 700px) { .hide-sm { display: initial; } }

/* --------------------------------------------------------------------------
   22  NARROW PHONES (≤360px)
   At 320 the wordmark plus three icon buttons no longer fit the bar. The
   search icon goes first: search lives inside the menu and on /products.
   -------------------------------------------------------------------------- */
/* Adding the theme toggle put a fourth control in the bar. Below the desktop
   nav the search icon is the one to drop — search is in the menu and on
   /products — otherwise the row overruns the gutter at 375px. */
@media (max-width: 559px) {
  .header__actions .icon-btn[aria-label="Search products"] { display: none; }
}

@media (max-width: 360px) {
  :root { --header-h: 62px; }
  .header .container { padding-inline: 14px; }
  .header__bar { gap: var(--s-2); }
  .header__logo-txt { font-size: 13px; letter-spacing: .07em; }
  .header__logo-txt small { font-size: 7.5px; letter-spacing: .16em; }
  .header__actions .icon-btn[aria-label="Search products"] { display: none; }
  .icon-btn { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   23  LOAD MORE
   The index ships every product in the HTML for crawlers and no-JS visitors;
   with JS running it renders a page at a time so the document stays short.
   -------------------------------------------------------------------------- */
.load-more {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-7) 0 var(--s-2);
}
.load-more[hidden] { display: none; }

/* Cards get narrow on a phone at two columns — pull the type in to match. */
@media (max-width: 380px) {
  /* 320px leaves 273px of usable track. Two 124px columns plus the 12px gap
     fit inside that; anything larger collapses the index to one column and a
     ~14,700px scroll. */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}
@media (max-width: 559px) {
  .product-grid { gap: var(--s-3); }
  .card__body { padding: var(--s-3); }
  .card__title { font-size: 15px; }
  .card__cat { font-size: 9px; letter-spacing: .1em; }
  .card__meta { font-size: 10px; gap: var(--s-2); }
}

/* --------------------------------------------------------------------------
   24  THEME TOGGLE
   Shows the icon for the theme you would switch TO, which is the convention
   people expect from a single-button toggle.
   -------------------------------------------------------------------------- */
.theme-toggle__moon { display: none; }
.theme-toggle__sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
}
/* light on screen -> offer the moon; dark on screen -> offer the sun */
:root:not([data-theme="dark"]) .theme-toggle__moon { display: block; }
:root:not([data-theme="dark"]) .theme-toggle__sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
}
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: block; }

/* --------------------------------------------------------------------------
   25  ACCENT ON DARK GROUNDS
   The light-theme bronze is deliberately deep so it clears 4.5:1 on white and
   on the off-white band. That same value is too dark on the near-black bands,
   so those grounds re-point the accent tokens at the light bronze. Scoping it
   to the token means every descendant follows without per-component rules.
   -------------------------------------------------------------------------- */
.section--dark,
.cta-band,
.bleed,
.footer,
.marquee {
  --accent:     var(--c-bronze-lit);
  --accent-ink: var(--c-bronze-lit);
}

/* The flagship capability card sits on the bronze wash, where the muted grey
   lands at 4.49:1 — a hair under. Step it up one level. */
.capcard--flagship p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   26  PHOTO FIGURES
   Used on the finish pages and the technical guides. The caption describes
   the object in the photograph, which is also its alt text.
   -------------------------------------------------------------------------- */
.shot { margin: 0; display: grid; gap: var(--s-3); }
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.shot figcaption {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.shot--lead { margin-bottom: var(--s-6); }
.shot--lead img { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   27  GRID ITEM MIN-WIDTH
   Grid and flex children default to min-width:auto, which means a child will
   refuse to shrink below its content's min-content width — so an overflow-x
   scroller nested in a grid cell never actually scrolls, it just pushes the
   page wide. Wide tables live in .table-scroll; this is what lets it work.
   -------------------------------------------------------------------------- */
.grid > *,
.cols > *,
.index-layout > *,
.pdp > * { min-width: 0; }

/* --------------------------------------------------------------------------
   BRAND MARK
   An uploaded logo replaces the wordmark. The height comes from the settings
   and is written on the element; the width follows so the file's own
   proportions are kept rather than squashed to a box.

   A separate file can be supplied for dark backgrounds. Both are in the markup
   and CSS chooses, because a stylesheet can follow the theme and a template
   cannot. The same three states as everywhere else: an explicit choice wins,
   and with no choice the system preference decides.
   -------------------------------------------------------------------------- */
/* The header and the footer show the same mark at the same size. The height
   comes from the Logo height setting, through the width and height attributes
   on the image itself — pinning one of them here is what made the footer
   ignore that setting and the two marks disagree. Both dimensions stay auto so
   the max-width cap scales a wide logo instead of squashing it. */
.header__logo-img,
.footer__logo-img {
  display: block;
  height: var(--logo-h, 34px);   /* set on the element from the Logo height setting */
  width: auto;                   /* so the file's own ratio decides the width */
  max-width: 210px;
  object-fit: contain;           /* if a very wide mark meets the cap, letterbox it
                                    rather than squash it */
}

/* One file only: it is used on both themes. */
.header__logo-img--light { display: block; }
.header__logo-img--dark  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header__logo-img--light { display: none; }
  :root:not([data-theme="light"]) .header__logo-img--dark  { display: block; }
}
:root[data-theme="dark"] .header__logo-img--light { display: none; }
:root[data-theme="dark"] .header__logo-img--dark  { display: block; }
:root[data-theme="light"] .header__logo-img--light { display: block; }
:root[data-theme="light"] .header__logo-img--dark  { display: none; }

/* --------------------------------------------------------------------------
   VIDEO CARDS
   A card is a link to YouTube that upgrades into a player when JavaScript is
   available. Nothing is requested from YouTube until someone presses play, so
   a page with three videos on it does not report every reader to a third party
   or spend a megabyte before anyone has asked to watch anything.
   -------------------------------------------------------------------------- */
.video { display: grid; gap: var(--s-3); text-decoration: none; color: inherit; }
.video__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.video__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__blank {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
/* The play button is drawn rather than loaded, so it costs nothing. */
.video__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12, 13, 14, .72); border: 1px solid rgba(255, 255, 255, .38);
  transition: background var(--t-fast), transform var(--t-fast);
}
.video__play::after {
  content: ""; position: absolute; inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.video:hover .video__play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.video:focus-visible .video__frame { outline: 2px solid var(--accent); outline-offset: 3px; }
.video__time {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 6px; border-radius: 2px;
  font-family: var(--f-mono); font-size: 11px; color: #fff;
  background: rgba(12, 13, 14, .78);
}
.video__title { display: block; font-weight: 500; line-height: 1.35; }
.video__desc { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   PROJECT CARDS
   -------------------------------------------------------------------------- */
.projcard { display: grid; gap: var(--s-3); text-decoration: none; color: inherit; }
.projcard__shot {
  display: block; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius);
}
.projcard__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow);
}
.projcard:hover .projcard__shot img { transform: scale(1.03); }
.projcard:focus-visible .projcard__shot { outline: 2px solid var(--accent); outline-offset: 3px; }
.projcard__title { display: block; font-weight: 500; line-height: 1.35; }
.projcard__meta {
  display: block; margin-top: 3px; font-family: var(--f-mono);
  font-size: 12px; color: var(--ink-3);
}

/* ==================================================================
   Gallery page: the division index, the photograph grid, and posts
   ================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-6);
}
.chips .chip { text-decoration: none; }
.chips .chip:hover,
.chips .chip:focus-visible { border-color: var(--accent); color: var(--ink); }
.chips .chip span { font-weight: 400; opacity: .6; }

.shot-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.shot-tile {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.shot-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.shot-tile figcaption {
  padding: 8px 10px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* A post is a picture, a caption and a link out. Nothing is embedded, so
   nothing is loaded from a social network until someone chooses to go. */
.post {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.post:hover,
.post:focus-visible { border-color: var(--accent); }
.post__frame { display: block; background: var(--surface-2); }
.post__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.post__blank {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
}
.post__body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.post__net {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.post__when {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.post__caption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.sec-head__sub a + a { margin-left: 10px; }

/* ------------------------------------------------------------------
   Client logos

   Shown small and evenly, in the page's own ink rather than in each
   brand's colours — a wall of competing logos reads as a badge
   collection. Nothing here appears unless permission was recorded.
   ------------------------------------------------------------------ */

.clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
}
.clients__item { display: flex; align-items: center; justify-content: center; }
.clients__item img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 48px;
  /* Evened out so one bright logo does not shout over the rest. Colour
     returns on hover, and for anyone who has asked for less motion it is
     simply always in colour rather than animating. */
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--t-fast), opacity var(--t-fast);
}
.clients__item a:hover img,
.clients__item a:focus-visible img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .clients__item img { transition: none; }
}


/* =====================================================================
   CARRIED OVER FROM THE 2026-09-14 BUILD — components the previous site
   did not have (lightbox, video modal, quote form, catalogue, product page,
   editing tools…), restyled through the token aliases below.
   ===================================================================== */

/* Token aliases: the 2026-09-14 components read these names; the previous
   site's tokens supply the values, so both themes stay in step. */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --bg-2: var(--bg-alt); --bg-3: var(--surface); --deep: var(--inverse-bg);
  --line: var(--rule); --line-2: var(--c-silver-2);
  --bronze: var(--accent); --bronze-2: var(--accent-ink); --bronze-3: var(--c-bronze-deep);
  --paper: var(--c-warm); --paper-ink: var(--c-black);
  --sy: var(--section-y); --gut: var(--gutter); --hdr-h: var(--header-h); --top-h: 0px;
  --ok: var(--c-ok); --dev: var(--c-dev); --err: #8C3126;
  --f-serif: var(--f-body);
  --t-md: 1.0625rem;
}

:root:not([data-theme="light"]) { --paper: #0B0B0C; --paper-ink: #F2EDE2; }

@media (prefers-color-scheme: dark) { 
:root:not([data-theme="light"]) { --err: #E08D82; }
 }

:root[data-theme="dark"] { --err: #E08D82; }

:root[data-theme="light"] { --paper: var(--c-warm); --paper-ink: var(--c-black); --err: #8C3126; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.statement__text em { font-style: normal; font-weight: 500; color: var(--bronze-2); }

@keyframes heroSettle { to { transform: scale(1); } }

.statement { padding: clamp(80px, 11vw, 170px) 0; }

.statement__text { font: 300 clamp(1.35rem, 1rem + 1.4vw, 2.3rem)/1.4 var(--f-body); letter-spacing: -.005em; max-width: 46ch; color: var(--ink); }

.marquee { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }

.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }

@keyframes marquee { to { transform: translateX(-50%); } }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .88rem; color: var(--ink-2); background: none; }

.chip span { font: .72rem var(--f-mono); color: var(--ink-3); }

.chips--filter { margin-bottom: 8px; }

.chips--filter .chip { cursor: pointer; transition: all .25s; }

.chips--filter .chip:hover { border-color: var(--bronze-2); color: var(--ink); }

.chips--filter .chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.chips--filter .chip.is-on span { color: var(--bg); opacity: .6; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 104px); align-items: center; }

.split--right .split__media { order: 2; }

.split__media { margin: 0; position: relative; }

.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }

.split__media a { display: block; overflow: hidden; border: 1px solid var(--line); }

.split__media a:hover img { transform: scale(1.03); }

.split__text { color: var(--ink-2); font-size: var(--t-md); max-width: 58ch; margin-bottom: 30px; }

.split__text p + p { margin-top: 1em; }

@media (max-width: 960px) {

 
 
.split { grid-template-columns: 1fr; }

 
 
.split--right .split__media { order: 0; }

}

.gal { display: grid; gap: clamp(10px, 1.2vw, 18px); }

.gal--row { grid-template-columns: repeat(3, 1fr); }

.gal--grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.gal--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 240px); }

.gal--mosaic .gal__item:first-child { grid-column: span 2; grid-row: span 2; }

.gal__item { margin: 0; position: relative; }

.gal__item a { display: block; overflow: hidden; background: var(--bg-3); }

.gal__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease), filter .6s; filter: saturate(.92); }

.gal--grid .gal__item img { aspect-ratio: 1 / 1; }

.gal__item a:hover img { transform: scale(1.04); filter: saturate(1); }

.gal--mosaic .gal__item a, .gal--mosaic .gal__item img { height: 100%; aspect-ratio: auto; }

.gal--mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 36px 14px 12px; background: linear-gradient(0deg, rgba(8,8,7,.85), transparent); pointer-events: none; }

.gal__item figcaption { margin-top: 10px; font: .7rem/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }

@media (max-width: 760px) {

 
 
.gal--row { grid-template-columns: 1fr 1fr; }

 
 
.gal--row .gal__item:first-child { grid-column: span 2; }

 
 
.gal--mosaic { grid-template-columns: 1fr 1fr; }

}

.compare-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }

.compare-figure { margin: 0; }

.compare-figure a { display: block; overflow: hidden; border: 1px solid var(--line); background: #000; }

.compare-figure img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }

.compare-figure a:hover img { transform: scale(1.02); }

.compare-figure figcaption { margin-top: 10px; font: .7rem/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }

.compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; border: 1px solid var(--line); user-select: none; }

.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }

.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--bronze-2); pointer-events: none; }

.compare__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(13,13,12,.8); border: 1px solid var(--bronze-2); display: grid; place-items: center; font-size: .7rem; color: var(--bronze-2); letter-spacing: .1em; backdrop-filter: blur(6px); }

.compare__tag { position: absolute; top: 16px; z-index: 2; font: 500 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: rgba(8,8,7,.78); color: var(--ink); padding: 7px 10px; pointer-events: none; }

.compare__tag--l { left: 16px; }

.compare__tag--r { right: 16px; color: var(--bronze-2); }

.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }

.compare__range:focus-visible + .compare__handle, .compare:focus-within .compare__handle span { box-shadow: 0 0 0 3px rgba(220,185,126,.35); }

@media (max-width: 960px) {

 
 
.compare-layout { grid-template-columns: 1fr; }

}

.status { flex: none; display: inline-block; font: 500 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 7px; border: 1px solid currentColor; }

.tag { display: inline-block; font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--line-2); color: var(--ink-2); }

.swatch { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }

.swatch__chip { display: block; aspect-ratio: 1; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.35); margin-bottom: 8px; transition: transform .5s var(--ease); }

.swatch:hover .swatch__chip { transform: translateY(-4px); }

.swatch.is-current .swatch__chip { outline: 2px solid var(--bronze-2); outline-offset: 4px; }

.swatch__name { font: 600 1rem/1.2 var(--f-display); }

.sw-mirror { background: linear-gradient(135deg, #f7f7f7 0%, #9aa0a6 18%, #eef0f2 36%, #6d737a 52%, #e8eaec 70%, #a9aeb4 100%); }

.sw-hairline { background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, rgba(0,0,0,.07) 1px 2px, transparent 2px 3px), linear-gradient(180deg, #cdd0d3, #9ea3a8); }

.sw-matte { background: linear-gradient(160deg, #9a9c9e, #7d7f82); }

.sw-bead { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%), repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(160deg, #b5b7b9, #95989b); }

.sw-antique { background: linear-gradient(135deg, #5e401c, #a07a3e 40%, #563a1a 70%, #8d6a36); }

.sw-gold { background: linear-gradient(135deg, #8a6a2c, #f2d27b 30%, #b88a35 55%, #f6dc8f 75%, #9c7632); }

.sw-rose { background: linear-gradient(135deg, #8f5f55, #e9b3a2 30%, #b77a6c 55%, #f0c2b3 75%, #95655a); }

.sw-champagne { background: linear-gradient(135deg, #9d8a67, #eadcbc 30%, #c0ac85 55%, #efe2c6 75%, #a89370); }

.sw-black { background: linear-gradient(135deg, #050505, #3a3a3c 30%, #0f0f10 55%, #2c2c2e 75%, #060606); }

.sw-bronze { background: linear-gradient(135deg, #3b2615, #8a5a32 30%, #4f331c 55%, #94653b 75%, #3d2816); }

.sw-powder { background: linear-gradient(160deg, #3a4549, #26302f); }

.video-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px 20px; }

.video-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }

.video-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }

.video-card__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: transform 1s var(--ease), filter .6s; }

.video-card:hover .video-card__media img { transform: scale(1.04); filter: brightness(.9); }

.video-card__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(8,8,7,.45); backdrop-filter: blur(6px); transition: transform .4s var(--ease), border-color .3s; }

.video-card__play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

.video-card:hover .video-card__play { transform: scale(1.08); border-color: var(--bronze-2); }

.video-card__body { display: grid; gap: 6px; }

.video-card__div { font: 500 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }

.video-card__title { font: 600 1.02rem/1.3 var(--f-display); }

.video-card__text { font-size: .86rem; color: var(--ink-3); }

.social-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3vw, 44px); }

.social-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.social-follow > span { font: .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }

.post-card { display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--ink); }

.post-card__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-3); }

.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }

.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__body { display: grid; gap: 5px; }

.post-card__net { font: 500 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }

.post-card__cap { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }

.post-card--text { border: 1px solid var(--line-2); padding: 18px; justify-content: flex-end; min-height: 100%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px), var(--bg-2); }

.gal-div { margin-top: clamp(40px, 5vw, 64px); }

.gal-div[hidden] { display: none; }

.gal-div__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }

.gal-div__head h3 { font-size: 1.3rem; }

.faq { border-top: 1px solid var(--line-2); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; }

.faq__item summary::-webkit-details-marker { display: none; }

.faq__q { font: 500 clamp(1.05rem, .98rem + .35vw, 1.28rem)/1.35 var(--f-display); transition: color .25s; }

.faq__item summary:hover .faq__q { color: var(--bronze-2); }

.faq__icon { position: relative; flex: none; width: 16px; height: 16px; }

.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bronze-2); transition: transform .35s var(--ease); }

.faq__icon::after { transform: rotate(90deg); }

.faq__item[open] .faq__icon::after { transform: rotate(0); }

.faq__a { padding: 0 48px 26px 0; color: var(--ink-2); max-width: 72ch; }

.field input, .field textarea, .field select {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink);
  padding: 13px 14px; font: inherit; font-size: .95rem; border-radius: 0; transition: border-color .2s, box-shadow .2s;
}

.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--bronze-2); box-shadow: 0 0 0 3px rgba(196,154,90,.18); }

.facet { border: 0; padding: 0; margin: 26px 0 0; }

.facet legend { font: 500 .68rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; padding: 0; }

.facet__opts { display: grid; gap: 1px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }

.field > span { font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.field textarea { resize: vertical; min-height: 110px; }

.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

.field__hint { font-size: .82rem; color: var(--ink-3); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.field.is-invalid input, .field.is-invalid textarea { border-color: var(--err); }

.field__err { color: var(--err); font-size: .82rem; }

@media (max-width: 640px) {

 
 
.field-row { grid-template-columns: 1fr; }

}

.qf-layout { display: grid; grid-template-columns: 1fr 290px; gap: clamp(32px, 5vw, 80px); align-items: start; }

.qf-aside { position: sticky; top: calc(var(--hdr-h) + 28px); border-left: 1px solid var(--line); padding-left: 28px; display: grid; gap: 26px; }

.qf-aside__t { font: 500 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; }

.qf-aside a { color: var(--ink); border-bottom: 1px solid var(--line-2); }

.qf-aside a:hover { color: var(--bronze-2); }

.qf { margin-top: 12px; }

.qf__progress { height: 2px; background: var(--line); margin: 8px 0 0; display: none; }

.qf.is-stepped .qf__progress { display: block; }

.qf__progress span { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, var(--bronze-3), var(--bronze-2)); transition: width .5s var(--ease); }

.qf__step { border: 0; margin: 0; padding: 34px 0; border-top: 1px solid var(--line); min-width: 0; }

.qf.is-stepped .qf__step { display: none; border-top: 0; }

.qf.is-stepped .qf__step.is-current { display: block; animation: stepIn .5s var(--ease); }

@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.qf__legend { font: 600 clamp(1.4rem, 1.15rem + 1vw, 2rem)/1.1 var(--f-display); letter-spacing: -.02em; padding: 0; margin-bottom: 22px; }

.qf__num { display: block; font: 500 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }

.opts { display: flex; flex-wrap: wrap; gap: 10px; }

.opts--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.opt { position: relative; }

.opt input { position: absolute; opacity: 0; pointer-events: none; }

.opt span { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line-2); cursor: pointer; font-size: .92rem; color: var(--ink-2); transition: all .2s; }

.opt--card span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; padding: 18px; }

.opt--card strong { font: 600 1.02rem var(--f-display); color: var(--ink); }

.opt--card small { font-size: .82rem; color: var(--ink-3); }

.opt span:hover { border-color: var(--ink-3); color: var(--ink); }

.opt input:checked + span { border-color: var(--bronze-2); background: rgba(196,154,90,.12); color: var(--ink); }

.opt input:focus-visible + span { outline: 2px solid var(--bronze-2); outline-offset: 2px; }

.opt--swatch i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); }

.drop-zone { position: relative; border: 1px dashed var(--line-2); padding: 40px 24px; text-align: center; transition: border-color .2s, background .2s; }

.drop-zone.is-over { border-color: var(--bronze-2); background: rgba(196,154,90,.06); }

.drop-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.drop-zone__t { font: 600 1.1rem var(--f-display); margin-bottom: 6px; }

.drop-zone__t strong { color: var(--bronze-2); }

.drop-zone__s { font: .72rem var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }

.drop-zone__list { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 6px; text-align: left; }

.drop-zone__list li { display: flex; justify-content: space-between; gap: 12px; font: .78rem var(--f-mono); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 6px; }

.qf__nav { display: flex; gap: 12px; align-items: center; padding-top: 26px; border-top: 1px solid var(--line); }

.qf__nav [data-qf-next], .qf__nav .qf__submit { margin-left: auto; }

.qf__nav [hidden] { display: none; }

.basket { border: 1px solid var(--line-2); padding: 16px 18px; margin-bottom: 20px; background: var(--bg-2); }

.basket[hidden] { display: none; }

.basket__h { font: 500 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }

.basket ul { list-style: none; padding: 0; }

.basket li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }

.basket button { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: .8rem; }

.basket button:hover { color: var(--err); }

.qf-done { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line-2); background: var(--bg-2); margin-top: 24px; }

.qf-done[hidden] { display: none; }

.qf-done h2 { font-size: var(--t-xl); margin-bottom: 16px; }

.qf-done__ref strong { font-family: var(--f-mono); color: var(--bronze-2); font-size: 1.15em; letter-spacing: .04em; }

.qf-done p { color: var(--ink-2); }

@media (max-width: 1000px) {

 
 
.qf-layout { grid-template-columns: 1fr; }

 
 
.qf-aside { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

}

.reviews__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }

.reviews__inner .blk__title { font-size: var(--t-xl); }

.pd__thumbs { list-style: none; padding: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }

.pd__thumbs a { display: block; overflow: hidden; border: 1px solid var(--line); opacity: .75; transition: opacity .25s, border-color .25s; }

.pd__thumbs a:hover { opacity: 1; border-color: var(--bronze-2); }

.pd__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; font-size: .84rem; }

.share a, .share button { color: var(--ink-2); background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 2px 0; cursor: pointer; font-size: inherit; }

.share a:hover, .share button:hover { color: var(--bronze-2); border-color: currentColor; }

.lb__img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }

.lb__cap { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 80px; text-align: center; font: .76rem/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }

.lb__btn { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(13,13,12,.6); color: var(--ink); cursor: pointer; font-size: 1.3rem; display: grid; place-items: center; transition: border-color .2s, color .2s; }

.lb__btn:hover { border-color: var(--bronze-2); color: var(--bronze-2); }

.lb__close { top: 18px; right: 18px; }

.lb__prev { left: 18px; top: 50%; margin-top: -25px; }

.lb__next { right: 18px; top: 50%; margin-top: -25px; }

.lb__count { position: absolute; top: 30px; left: 24px; font: .72rem var(--f-mono); color: var(--ink-3); letter-spacing: .1em; }

.vmodal { position: fixed; inset: 0; z-index: 120; background: rgba(6,6,5,.95); display: grid; place-items: center; padding: 20px; }

.vmodal__frame { width: min(1120px, 94vw); aspect-ratio: 16 / 9; background: #000; }

.vmodal__frame iframe { width: 100%; height: 100%; border: 0; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 130; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 20px; font-size: .9rem; opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.adm-bar { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; max-width: calc(100vw - 110px); padding: 9px 12px 9px 16px; background: #f5f3ef; color: #1c1b19; border-radius: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.45); font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.adm-bar a { color: #1c1b19; text-decoration: underline; text-underline-offset: 2px; }

.adm-bar__who { color: #6f6b63; }

.adm-bar a.adm-bar__edit { background: #1c1b19; color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 4px; font-weight: 600; }

.adm-bar a.adm-bar__edit:hover { background: #8a6220; }

.adm-bar__x { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: #6f6b63; padding: 2px 4px; }

.adm-bar--preview { left: 50%; transform: translateX(-50%); background: #b0833f; color: #15110a; max-width: calc(100vw - 32px); }

.adm-bar--preview .adm-bar__who { color: #15110a; font-weight: 700; }

.edit-blk { position: relative; height: 0; z-index: 30; }

.edit-blk a { position: absolute; top: 10px; right: 12px; padding: 6px 10px; background: rgba(245,243,239,.94); color: #1c1b19; border-radius: 4px; font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); opacity: .55; transition: opacity .15s; }

.edit-blk a small { font-weight: 400; color: #6f6b63; margin-left: 4px; }

.edit-blk a:hover, .edit-blk a:focus { opacity: 1; }

@media (max-width: 640px) {

 
 
.adm-bar__who { display: none; }

 
 
.edit-blk a small { display: none; }

}

main > .edit-blk:first-of-type a { top: 96px; }

.icon-btn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s; }

.icon-btn:hover { color: var(--bronze-2); border-color: var(--bronze-2); }

.icon-btn svg { width: 18px; height: 18px; }

.theme-toggle svg + svg { display: none; }

@media (max-width: 480px) {

 
 
.icon-btn { width: 36px; height: 36px; }

}

.srch { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: clamp(56px, 12vh, 140px) 16px 24px; background: rgba(8,8,7,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.srch[hidden] { display: none; }

.srch__box { width: min(760px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 40px 100px rgba(0,0,0,.5); }

.srch__form { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }

.srch__form > svg { width: 20px; height: 20px; color: var(--bronze-2); flex: none; }

.srch__form input { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0; outline: 0; color: var(--ink); font: 500 1.1rem var(--f-body); }

.srch__form input::-webkit-search-cancel-button { display: none; }

.srch__close { flex: none; padding: 8px 12px; border: 1px solid var(--line-2); background: none; color: var(--ink-2); font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.srch__close:hover { color: var(--bronze-2); border-color: var(--bronze-2); }

.srch__results { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }

.srch__results:empty { display: none; }

.srch__item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px 16px; outline: none; }

.srch__item:hover, .srch__item:focus-visible { background: var(--bg-3); }

.srch__item img, .srch__ph { width: 56px; height: 56px; object-fit: cover; background: var(--bg-3); border: 1px solid var(--line); }

.srch__t { display: block; font: 600 1rem/1.25 var(--f-body); color: var(--ink); }

.srch__k { display: block; margin-top: 4px; font: .66rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.srch__none { padding: 16px; color: var(--ink-2); }

.srch__hint { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line); font: .68rem var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }

.pd__thumbs a.is-current { opacity: 1; border-color: var(--bronze); }

.vg-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--bronze-3); color: var(--bronze-2); font: 500 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

.vg-badge::before { content: ""; width: 8px; height: 8px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: skewX(-12deg); }

.pd__vg { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin: 22px 0 6px; padding: 16px 18px; border: 1px solid var(--bronze-3); background: rgba(196,154,90,.06); }

.pd__vg svg { width: 44px; height: 44px; color: var(--bronze-2); }

.pd__vg b { display: block; font: 600 .95rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

.pd__vg p { margin: 0; font-size: .92rem; color: var(--ink-2); }

.pd__vg a { color: var(--bronze-2); border-bottom: 1px solid transparent; }

.pd__vg a:hover { border-bottom-color: currentColor; }

.cat__quick { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; padding: 8px 12px; border: 1px solid var(--bronze-3); cursor: pointer; font-size: .9rem; }

.cat__quick input { accent-color: var(--bronze); width: 16px; height: 16px; }

.cat__quick b { color: var(--bronze-2); }

.qf__b2b { margin: -8px 0 28px; padding: 14px 18px; border-left: 2px solid var(--bronze); color: var(--ink-2); max-width: 70ch; }

.qf__b2b b { color: var(--ink); }



/* ---- additions for the ported views (2026-09-15) ---- */
.card__blank{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--bg-alt) 12px 24px);color:var(--ink-3)}
.hero__grid--solo{grid-template-columns:1fr}
.hero__grid--solo .hero__title{max-width:18ch}
.footer__b2b{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs);color:var(--accent);margin:0 0 var(--s-4)}
.footer__contact{font-style:normal;display:grid;gap:8px}
.footer__contact a,.footer__contact span{color:inherit}
.section--tight{padding-block:var(--s-8)}
.stack-6{display:grid;gap:var(--s-6)}
.container--narrow{max-width:var(--container-narrow)}
.table-scroll{overflow-x:auto}
/* forms that the previous site did not have (short contact form) and index shims */
.mini-form{display:grid;gap:var(--s-4);padding:var(--s-6);border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.mini-form .field{display:grid;gap:6px}
.mini-form .field>span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mini-form input,.mini-form textarea{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg);color:var(--ink);font:inherit}
.mini-form input:focus,.mini-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.mini-form .field-row{display:grid;gap:var(--s-4);grid-template-columns:1fr 1fr}
@media (max-width:600px){.mini-form .field-row{grid-template-columns:1fr}}
.form-status{margin:0;font-size:14px;color:var(--ink-2);min-height:1.2em}
.form-status.is-error{color:var(--err)}.form-status.is-ok{color:var(--ok)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.no-scroll{overflow:hidden}
@media (max-width:939px){[data-catalogue].is-open .facets{transform:none;opacity:1;visibility:visible;pointer-events:auto}}
.cat__quick{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.cat__quick input{accent-color:var(--accent)}
.toolbar__row .results-count{margin-left:auto}
.product-grid>li{list-style:none}
.share a,.share button{cursor:pointer}
.prose.block{border-top:0;padding-top:0}
button.link-arrow{appearance:none;background:none;border-width:0 0 1px;cursor:pointer;font:inherit}
.facet legend.label{color:var(--ink)}
@media (min-width:1040px){.chain--2{grid-template-columns:repeat(2,1fr)}.chain--3{grid-template-columns:repeat(3,1fr)}.chain--4{grid-template-columns:repeat(4,1fr)}.chain--5{grid-template-columns:repeat(5,1fr)}}
/* original MCS logo in header and footer (15 Sep 2026) */
.header__logo{margin-right:auto}
.footer__brand .header__logo{margin:0 0 var(--s-2)}
.footer__tag{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-xs);color:var(--accent);margin:0 0 var(--s-3)}
@media (max-width:600px){.header__logo{--logo-h:40px!important}}
/* The site is dark unless the visitor picks light, so the dark-ground logo (white wordmark) is the default. */
.header__logo-img--light { display: none; }
.header__logo-img--dark { display: block; }
:root[data-theme="light"] .header__logo-img--light { display: block; }
:root[data-theme="light"] .header__logo-img--dark { display: none; }
/* Social feed: small square tiles, five across on desktop (the rule was missing, so posts stacked full-width). */
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.post-grid > li { min-width: 0; }
.post-card { text-decoration: none; }
.post-card__media { border-radius: var(--radius); }
.post-card__cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.pill:hover { color: var(--accent-ink); border-color: var(--accent); }
/* video cards: links without the browser's underline */
.video-card, .video-card:hover { text-decoration: none; }
.video-card__title, .video-card__text, .video-card__div { text-decoration: none; }
.video-card__title { color: var(--ink); }
.video-card__text { color: var(--ink-3); }

/* restored 15 Sep 2026: rules with two-letter class names (.lb …) that the prune had dropped */
.pd { padding: clamp(28px, 4vw, 56px) 0 var(--sy); }
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(6,6,5,.96); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.lb.is-open { opacity: 1; }