/* ==========================================================================
   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; }
}