/* ==========================================================================
   KALA ENTERPRISE — "Precision Engineered"
   --------------------------------------------------------------------------
   Contents
     01  Tokens
     02  Reset & base
     03  Typography helpers
     04  Buttons & links
     05  Preloader
     06  Custom cursor
     07  Header & navigation
     08  Mobile menu
     09  Hero
     10  Section furniture
     11  Category cards
     12  Product cards & grid
     13  Timeline, stats, brands, CTA band
     14  Products page controls
     15  Product detail page
     16  About page
     17  Contact page & forms
     18  Footer
     19  Scroll reveal
     20  Responsive
     21  Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* palette */
  --ink:        #111214;   /* matte black base            */
  --ink-2:      #191B1F;   /* raised dark surface         */
  --ink-3:      #23262B;   /* dark borders                */
  --brass:      #C9A24D;   /* brushed brass accent        */
  --brass-lt:   #E3C88C;
  --brass-dk:   #9A7A33;
  --steel:      #8A8F98;   /* secondary text              */
  --bone:       #F4F1EA;   /* off-white light sections    */
  --bone-2:     #EAE5DA;   /* light section borders       */
  --white:      #FFFFFF;

  /* brushed metal gradients */
  --grad-brass: linear-gradient(135deg, #F7ECC9 0%, #E0BE79 18%, #C9A24D 46%, #A6812E 70%, #E3C88C 100%);
  --grad-steel: linear-gradient(135deg, #F3F5F8 0%, #D2D8E0 22%, #A9B0BA 50%, #868D97 76%, #C8CED6 100%);
  --grad-dark:  linear-gradient(170deg, #1B1E22 0%, #111214 55%, #0A0B0D 100%);

  /* type */
  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* rhythm */
  --shell:   1280px;
  --gutter:  clamp(20px, 5vw, 64px);
  --pad-y:   clamp(72px, 10vw, 148px);

  /* motion */
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --t-fast:  .22s;
  --t:       .42s;
  --t-slow:  .72s;

  --hdr-h:   84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

address { font-style: normal; }

::selection { background: var(--brass); color: var(--ink); }

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

.skip-link {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 1200;
  padding: 10px 18px;
  background: var(--brass);
  color: var(--ink);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 14px; }

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

/* ------------------------------------------------------- 03 typography */
.eyebrow {
  margin: 0 0 22px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
}

.section__title {
  font-size: clamp(32px, 5.2vw, 62px);
}

.section__lede {
  margin: 14px 0 0;
  max-width: 52ch;
  color: var(--steel);
  font-size: clamp(15px, 1.3vw, 17px);
}

.section--light .section__lede { color: #5D6269; }

/* Oversized margin numerals. */
.section__num {
  font-family: var(--display);
  font-size: clamp(54px, 8vw, 110px);
  font-weight: 700;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--brass);
  opacity: .34;
  user-select: none;
  flex: none;
}

.section__num--head {
  display: block;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------- 04 buttons */
.btn {
  --btn-fg: var(--bone);
  --btn-bd: var(--brass);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1.5px solid var(--btn-bd);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* The fill sweeps in from the left on hover. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t) var(--ease-io);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:hover, .btn:focus-visible { color: var(--ink); }

.btn--brass { --btn-fg: var(--brass); }
.btn--ghost { --btn-bd: rgba(138, 143, 152, .55); }
.btn--ghost:hover { border-color: var(--brass); }

.btn--sm { padding: 11px 20px; font-size: 13px; }
.btn--lg { padding: 18px 38px; font-size: 16px; }

.section--light .btn { --btn-fg: var(--ink); }
.section--light .btn--brass { --btn-fg: var(--brass-dk); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.link-arrow span { transition: transform var(--t) var(--ease); }
.link-arrow:hover span { transform: translateX(7px); }
.link-arrow--sm { font-size: 12px; }

/* ------------------------------------------------------- 05 preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: var(--ink);
  transition: opacity .45s var(--ease), visibility .45s;
}

/* The preloader clears itself in CSS after 1.2s even if main.js never runs,
   so a failed script can never leave the page covered. main.js removes the
   element afterwards; .is-done is simply the faster JS-driven path. */
.preloader {
  animation: preloaderOut .45s var(--ease) 1.2s forwards;
}
@keyframes preloaderOut {
  to { opacity: 0; visibility: hidden; }
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__lock {
  width: 108px;
  height: 108px;
  color: var(--brass);
}

/* The key turns a quarter turn… */
.preloader__key {
  transform-origin: 60px 72px;
  animation: keyTurn .62s var(--ease-io) .12s forwards;
}
@keyframes keyTurn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}

/* …and the bolt slides open behind it. */
.preloader__shackle {
  animation: boltOpen .42s var(--ease-io) .66s forwards;
}
@keyframes boltOpen {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-11px) rotate(-13deg); transform-origin: 78px 52px; }
}

.preloader__word {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .52em;
  text-indent: .52em;
  color: var(--steel);
  opacity: 0;
  animation: fadeUp .5s var(--ease) .3s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- 06 cursor */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 1500;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: width .2s var(--ease), height .2s var(--ease),
              margin .2s var(--ease), opacity .2s var(--ease),
              background-color .2s var(--ease);
  will-change: transform;
}
.cursor.is-on   { opacity: 1; }
.cursor.is-over {
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  background: rgba(201, 162, 77, .13);
}

/* Only hide the system cursor once ours is actually running. */
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }

/* ---------------------------------------------------------- 07 header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  /* Default state, used on every page except the home page: a solid dark bar,
     because those pages open on a light band and white nav text would vanish. */
  background: rgba(17, 18, 20, .92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(201, 162, 77, .2);
  transition: background-color var(--t) var(--ease),
              backdrop-filter var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

/* Over the home page's dark hero the bar starts invisible… */
body.is-home .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* …and gains the blurred dark glass once the page has scrolled past 80px. */
body.is-home .site-header.is-stuck {
  background: rgba(17, 18, 20, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(201, 162, 77, .22);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--hdr-h);
  transition: height var(--t) var(--ease);
}
.site-header.is-stuck .site-header__inner { height: 66px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--brass);
  transition: transform var(--t-slow) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__mark svg { width: 100%; height: 100%; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .16em;
}
.brand__sub {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--brass);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 34px; }

.nav__link {
  position: relative;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .76);
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 1.5px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t) var(--ease-io);
}
.nav__link:hover { color: var(--bone); }
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); transform-origin: left center; }
.nav__link.is-current { color: var(--brass); }

/* ----------------------------------------------------- 08 mobile menu */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
}
.burger span {
  display: block;
  height: 1.8px;
  background: var(--bone);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  width: min(86vw, 400px);
  padding: 104px var(--gutter) 48px;
  background: var(--grad-dark);
  border-left: 1px solid rgba(201, 162, 77, .24);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-io), visibility var(--t-slow);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: none; visibility: visible; }

.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }

.mobile-menu__link {
  padding: 13px 0;
  border-bottom: 1px solid rgba(201, 162, 77, .16);
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(26px);
}
.mobile-menu.is-open .mobile-menu__link {
  animation: slideIn .46s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.mobile-menu__cta {
  margin-top: 22px;
  opacity: 0;
  transform: translateX(26px);
}
.mobile-menu.is-open .mobile-menu__cta {
  animation: slideIn .46s var(--ease) .44s forwards;
}
@keyframes slideIn {
  to { opacity: 1; transform: none; }
}

.mobile-menu__foot {
  font-size: 13px;
  line-height: 1.7;
  color: var(--steel);
}
.mobile-menu__foot a { color: var(--brass); }

.mobile-menu__veil {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(10, 11, 13, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.mobile-menu__veil.is-on { opacity: 1; }

/* ------------------------------------------------------------ 09 hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: calc(var(--hdr-h) + 64px) 0 clamp(64px, 11vh, 128px);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

/* Slow Ken-Burns drift on the backdrop. */
.hero__kenburns {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(ellipse 70% 55% at 72% 36%, rgba(201, 162, 77, .20), transparent 62%),
    radial-gradient(ellipse 60% 70% at 18% 78%, rgba(138, 143, 152, .13), transparent 60%),
    var(--grad-dark);
  animation: kenburns 26s var(--ease-io) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-2.2%, -1.6%, 0); }
}

/* Faint blueprint grid + bolt-circle motif. */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 162, 77, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 77, .085) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 85% 75% at 60% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 60% 42%, #000 20%, transparent 78%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,18,20,.94) 0%, rgba(17,18,20,.74) 46%, rgba(17,18,20,.44) 100%);
}

.hero__inner { position: relative; z-index: 1; max-width: 1000px; }

.hero__title {
  font-size: clamp(46px, 10.4vw, 142px);
  line-height: .93;
  letter-spacing: .005em;
}

/* Each word is masked and slides up in sequence. */
.hero__title .word {
  display: block;
  overflow: hidden;
}
.hero__title .word > span {
  display: block;
  transform: translateY(104%);
  animation: wordUp .9s var(--ease-io) forwards;
}
.hero__title .word:nth-child(1) > span { animation-delay: .95s; }
.hero__title .word:nth-child(2) > span { animation-delay: 1.07s; }
.hero__title .word:nth-child(3) > span { animation-delay: 1.19s; }

@keyframes wordUp { to { transform: none; } }

.word--brass > span {
  background: var(--grad-brass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The brass line draws itself under the headline. */
.hero__rule {
  display: block;
  width: min(340px, 62%);
  height: 2px;
  margin: 30px 0 28px;
  background: var(--grad-brass);
  transform: scaleX(0);
  transform-origin: left center;
  animation: drawRule .95s var(--ease-io) 1.62s forwards;
}
@keyframes drawRule { to { transform: scaleX(1); } }

.hero__lede {
  max-width: 54ch;
  color: rgba(244, 241, 234, .74);
  font-size: clamp(15px, 1.45vw, 18.5px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  z-index: 1;
  width: 1px; height: 54px;
  background: rgba(201, 162, 77, .3);
  overflow: hidden;
}
.hero__scroll span {
  display: block;
  width: 100%; height: 42%;
  background: var(--brass);
  animation: scrollHint 2.1s var(--ease-io) infinite;
}
@keyframes scrollHint {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(240%); }
}

/* ------------------------------------------------- 10 section furniture */
.section { padding-block: var(--pad-y); }

.section--dark  { background: var(--ink); }
.section--light { background: var(--bone); color: var(--ink); }
.section--light .section__title { color: var(--ink); }

/* Faint engineering grid used on a few light sections. */
.blueprint { position: relative; isolation: isolate; }
.blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(17, 18, 20, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 20, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.section__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(42px, 6vw, 76px);
}

.section__head--split { flex-wrap: wrap; }
.section__head--split > div { margin-right: auto; }
.section__head--split .link-arrow { align-self: flex-end; padding-bottom: 6px; }

.page-head {
  padding: calc(var(--hdr-h) + clamp(56px, 9vw, 104px)) 0 clamp(40px, 6vw, 68px);
  background: var(--bone);
  color: var(--ink);
}
.page-head__title {
  font-size: clamp(40px, 7.6vw, 96px);
  line-height: .95;
}
.page-head__lede {
  max-width: 50ch;
  margin-top: 18px;
  color: #5D6269;
  font-size: clamp(15px, 1.3vw, 17px);
}
.page-head--product { padding-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-size: 12.5px;
  color: #6B7079;
}
.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--brass-dk); }
.crumbs span[aria-hidden] { color: var(--brass); opacity: .6; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* -------------------------------------------------- 11 category cards */
.cat-grid {
  display: grid;
  /* Explicit counts, not auto-fill: there are 8 categories, so 4 or 2 columns
     always fill the last row exactly. 3 columns would leave an empty cell. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--bone-2);
  border: 1px solid var(--bone-2);
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--bone);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.cat-card:hover { background: var(--white); }

.cat-card__icon { color: var(--brass-dk); }
.cat-icon {
  width: 46px; height: 46px;
  transition: transform var(--t-slow) var(--ease), color var(--t) var(--ease);
}
.cat-card:hover .cat-icon { transform: translateY(-4px) rotate(-5deg); color: var(--brass); }

.cat-card__name {
  font-size: 19px;
  letter-spacing: .05em;
  color: var(--ink);
}
.cat-card__blurb {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #6B7079;
  flex: 1;
}
.cat-card__count {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-dk);
}

/* Brass frame that draws in on hover. */
.cat-card__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px solid var(--brass);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path var(--t-slow) var(--ease-io);
}
.cat-card:hover .cat-card__frame { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------- 12 product cards */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

.prod-card {
  position: relative;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}

/* Used by the filter on the products page. */
.prod-card.is-hiding { opacity: 0; transform: scale(.94); pointer-events: none; }
.prod-card.is-hidden { display: none; }

.prod-card__link { display: flex; flex-direction: column; height: 100%; }

.prod-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 4 / 3;
}

.prod-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.prod-card__link:hover .prod-card__img { transform: scale(1.07); }

.prod-card__frame {
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--brass);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path .62s var(--ease-io);
  pointer-events: none;
}
.prod-card__link:hover .prod-card__frame { clip-path: inset(0 0 0 0); }

/* "View Details" slides up from the bottom edge. */
.prod-card__view {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 13px;
  background: var(--grad-brass);
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--t) var(--ease-io);
}
.prod-card__link:hover .prod-card__view,
.prod-card__link:focus-visible .prod-card__view { transform: none; }

.prod-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 2px 0;
  flex: 1;
}

.prod-card__cat {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}

.prod-card__name {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .035em;
  transition: color var(--t-fast) var(--ease);
}
.prod-card__link:hover .prod-card__name { color: var(--brass); }

.prod-card__spec {
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
  flex: 1;
}

.prod-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 13px;
  border-top: 1px solid rgba(138, 143, 152, .22);
}

.prod-card__price {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--brass);
}
.prod-card__price.is-request {
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--steel);
}
.prod-card__brand {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Light-section variants. */
.section--light .prod-card__media { background: var(--white); }
.section--light .prod-card__name { color: var(--ink); }
.section--light .prod-card__spec { color: #6B7079; }
.section--light .prod-card__price { color: var(--brass-dk); }
.section--light .prod-card__foot { border-top-color: rgba(17, 18, 20, .13); }

/* ------------------------------------- 13 timeline, stats, brands, CTA */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
}
/* The rail the dots sit on. */
.timeline::before {
  content: '';
  position: absolute;
  top: 11px; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brass), rgba(201, 162, 77, .18));
}

.timeline__item { position: relative; padding-top: 44px; }

.timeline__dot {
  position: absolute;
  top: 4px; left: 0;
  width: 16px; height: 16px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  background: var(--bone);
}
.timeline__dot::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--grad-brass);
  transform: scale(0);
  transition: transform .5s var(--ease-io) calc(var(--d, 0ms) + 240ms);
}
.timeline__item.is-in .timeline__dot::after { transform: scale(1); }

.timeline__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--brass-dk);
}
.timeline__title {
  margin-bottom: 11px;
  font-size: 19px;
  letter-spacing: .035em;
  color: var(--ink);
}
.timeline__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: #6B7079;
}

.stats {
  padding-block: clamp(52px, 6vw, 86px);
  background: var(--ink-2);
  border-block: 1px solid var(--ink-3);
}
.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.stat { text-align: center; }
.stat__value {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(42px, 5.6vw, 74px);
  font-weight: 700;
  line-height: 1;
  background: var(--grad-brass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}

.brands {
  padding-block: clamp(44px, 5vw, 72px);
  background: var(--ink);
}
.brands__head {
  margin-bottom: 26px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brass);
}
/* ---> EDIT the brand names in index.php, not here. <--- */
.brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 58px);
}
.brands__item {
  font-family: var(--display);
  font-size: clamp(19px, 2.3vw, 31px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .3);
  transition: color var(--t) var(--ease);
}
.brands__item:hover { color: var(--brass); }
.brands__note {
  max-width: 54ch;
  margin: 28px auto 0;
  font-size: 12.5px;
  text-align: center;
  color: #585D65;
}

.cta-band {
  position: relative;
  padding-block: clamp(62px, 8vw, 110px);
  background: var(--grad-brass);
  color: var(--ink);
  overflow: hidden;
}
/* Bolt-circle motif in the corner. */
.cta-band::after {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border: 1.5px solid rgba(17, 18, 20, .16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 44px rgba(17, 18, 20, .05);
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.cta-band__title { font-size: clamp(30px, 4.6vw, 56px); }
.cta-band__text {
  max-width: 44ch;
  margin-top: 16px;
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  color: rgba(17, 18, 20, .78);
}
.cta-band__label {
  margin: 0 0 4px;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(17, 18, 20, .55);
}
.cta-band__address {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}
.cta-band__email {
  display: inline-block;
  margin-bottom: 26px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1.5px solid rgba(17, 18, 20, .3);
  transition: border-color var(--t-fast) var(--ease);
}
.cta-band__email:hover { border-color: var(--ink); }
.cta-band__btn {
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}
.cta-band__btn::before { background: var(--ink); }
.cta-band__btn:hover { color: var(--brass); }

/* ------------------------------------------- 14 products page controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.controls__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
}
.controls__search svg {
  position: absolute;
  left: 16px;
  width: 19px; height: 19px;
  color: var(--brass-dk);
  pointer-events: none;
}
.controls__input {
  width: 100%;
  padding: 15px 18px 15px 46px;
  background: var(--white);
  border: 1.5px solid rgba(17, 18, 20, .14);
  color: var(--ink);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease);
}
.controls__input:focus { outline: none; border-color: var(--brass); }
.controls__input::placeholder { color: #9AA0A8; }

.controls__sort { display: flex; align-items: center; gap: 12px; }
.controls__sortLabel {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B7079;
}
.controls__select {
  padding: 14px 40px 14px 16px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A24D' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
  border: 1.5px solid rgba(17, 18, 20, .14);
  color: var(--ink);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}
.controls__select:focus { outline: none; border-color: var(--brass); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border: 1.5px solid rgba(17, 18, 20, .14);
  color: #4A4F56;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--brass); color: var(--ink); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.chip__n {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brass);
}
.chip.is-active .chip__n { color: var(--brass-lt); }

.result-count {
  margin: 0 0 30px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A7F87;
}

.empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(48px, 8vw, 96px) 20px;
  text-align: center;
}
.empty svg { width: 58px; height: 58px; color: var(--brass); opacity: .55; }
.empty__title { font-size: 25px; color: var(--ink); }
.empty__text { max-width: 46ch; margin: 0; font-size: 14.5px; color: #6B7079; }
.empty__text a { color: var(--brass-dk); border-bottom: 1px solid currentColor; }
.empty .btn { margin-top: 10px; }

/* ----------------------------------------------- 15 product detail page */
.pdp { padding-top: clamp(40px, 5vw, 64px); }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.pdp__gallery { position: sticky; top: calc(var(--hdr-h) + 22px); }

.pdp__stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--bone-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pdp__img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--t) var(--ease);
}
.pdp__img.is-swapping { opacity: 0; }

.pdp__stageFrame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201, 162, 77, .4);
  pointer-events: none;
}

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.pdp__thumb {
  position: relative;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--bone-2);
  aspect-ratio: 1;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: rgba(201, 162, 77, .6); }
.pdp__thumb.is-active { border-color: var(--brass); }

.pdp__cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-dk);
}
.pdp__cat a { border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.pdp__cat a:hover { border-bottom-color: currentColor; }
.pdp__brand {
  padding: 5px 11px;
  border: 1px solid rgba(17, 18, 20, .18);
  color: #6B7079;
  letter-spacing: .16em;
}

.pdp__title {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  color: var(--ink);
}

.pdp__rule {
  display: block;
  width: 92px; height: 2px;
  margin: 22px 0;
  background: var(--grad-brass);
}

.pdp__short {
  max-width: 48ch;
  font-size: clamp(15px, 1.3vw, 17px);
  color: #5D6269;
}

.pdp__price {
  margin: 26px 0 0;
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
  color: var(--ink);
}
.pdp__price.is-request {
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: .06em;
  color: #6B7079;
}
.pdp__priceNote {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F98;
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 14px;
}

.pdp__note {
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.66;
  color: #7A7F87;
}

.pdp__h2 {
  margin-bottom: 16px;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--brass-dk);
}

.pdp__desc {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--bone-2);
}
.pdp__desc p {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.76;
  color: #4A4F56;
}

.pdp__specs {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--bone-2);
}

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--bone-2);
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 38%;
  padding-right: 18px;
  font-weight: 500;
  letter-spacing: .03em;
  color: #7A7F87;
}
.spec-table td { color: var(--ink); font-weight: 500; }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

.notfound { text-align: center; }
.notfound__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-block: clamp(30px, 5vw, 60px);
}
.notfound .section__num { -webkit-text-stroke-color: var(--brass-dk); opacity: .4; }
.notfound__title { font-size: clamp(28px, 4vw, 46px); color: var(--ink); }
.notfound__text { max-width: 48ch; margin: 0; color: #6B7079; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }

/* ------------------------------------------------------- 16 about page */
.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5.5vw, 86px);
  align-items: start;
}

.split__media { position: relative; }
.split__frame {
  position: relative;
  background: var(--white);
  border: 1px solid var(--bone-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.split__frame::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(201, 162, 77, .42);
  pointer-events: none;
}
.split__img { width: 100%; height: 100%; object-fit: cover; }

/* Overlapping brass badge. */
.split__badge {
  position: absolute;
  right: -18px; bottom: -22px;
  display: grid;
  gap: 5px;
  padding: 22px 26px;
  background: var(--grad-brass);
  color: var(--ink);
}
.split__badgeNum {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  line-height: .9;
}
.split__badgeText {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.4;
}

.split__text p {
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: #4A4F56;
}
.split__text .section__title { margin-bottom: 26px; }

.quote {
  position: relative;
  margin: 38px 0 0;
  padding: 30px 32px;
  border: 1.5px solid var(--brass);
}
.quote::before {
  content: '';
  position: absolute;
  top: -1.5px; left: -1.5px;
  width: 44px; height: 44px;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.quote p {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink);
}
.quote cite {
  font-family: var(--body);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-dk);
}

.mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
.mission__lead {
  font-family: var(--display);
  font-size: clamp(21px, 2.5vw, 31px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: .015em;
  color: var(--bone);
}
.mission__body { color: var(--steel); font-size: 15px; line-height: 1.78; }

.supply {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px;
  background: var(--bone-2);
  border: 1px solid var(--bone-2);
}
.supply__item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px 24px;
  background: var(--bone);
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A4F56;
  transition: background-color var(--t-fast) var(--ease);
}
.supply__item:hover { background: var(--white); }
.supply__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  color: var(--brass-dk);
}
.supply__tick svg { width: 100%; height: 100%; }
.supply__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ----------------------------------------------------- 17 contact page */
.contact {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4.5vw, 70px);
  align-items: start;
}

.contact__aside { display: grid; gap: 2px; background: var(--bone-2); border: 1px solid var(--bone-2); }

.info-card {
  padding: 26px 28px;
  background: var(--bone);
  transition: background-color var(--t-fast) var(--ease);
}
.info-card:hover { background: var(--white); }
.info-card__head {
  margin-bottom: 11px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--brass-dk);
}
.info-card__body {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.66;
  color: #4A4F56;
}
.info-card__body--muted { color: #8A8F98; margin-bottom: 0; }
.info-card__email {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1.5px solid var(--brass);
  transition: color var(--t-fast) var(--ease);
}
.info-card__email:hover { color: var(--brass-dk); }
.info-card__note { margin: 10px 0 0; font-size: 12.5px; color: #8A8F98; }

.form {
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--white);
  border: 1px solid var(--bone-2);
}
.form__head { margin-bottom: 10px; font-size: 25px; color: var(--ink); }
.form__lede { max-width: 48ch; margin-bottom: 30px; font-size: 14px; color: #6B7079; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { display: block; margin-bottom: 20px; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #4A4F56;
}
.field__label span { color: var(--brass-dk); }

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bone);
  border: 1.5px solid rgba(17, 18, 20, .14);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--body);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brass);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.66; }

.field.has-error input,
.field.has-error textarea { border-color: #B4442F; background: #FDF5F3; }

.field__error {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #B4442F;
}

/* The honeypot. Hidden from people; bots fill it in and get discarded. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}
.form__fallback {
  font-size: 13.5px;
  color: #6B7079;
  border-bottom: 1px solid rgba(17, 18, 20, .2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.form__fallback:hover { color: var(--brass-dk); border-color: var(--brass); }

.form__small { margin: 22px 0 0; font-size: 12px; color: #8A8F98; }

.alert {
  margin-bottom: 26px;
  padding: 24px 26px;
  border-left: 3px solid var(--brass);
  background: var(--white);
}
.alert__title { margin-bottom: 9px; font-size: 19px; color: var(--ink); }
.alert p { font-size: 14px; color: #4A4F56; margin-bottom: 0; }
.alert .btn { margin-top: 18px; }
.alert--ok    { border-left-color: #3E8E5A; }
.alert--warn  { border-left-color: var(--brass); }
.alert--error { border-left-color: #B4442F; }

.map-section .section__head { margin-bottom: 36px; }
.map {
  position: relative;
  border: 1px solid var(--ink-3);
  overflow: hidden;
  /* Google's map tiles are bright; this tones them toward the brand palette. */
  filter: grayscale(.42) contrast(1.06) brightness(.94);
  transition: filter var(--t-slow) var(--ease);
}
.map:hover { filter: none; }
.map iframe { display: block; width: 100%; border: 0; }

/* ----------------------------------------------------------- 18 footer */
.site-footer {
  padding-block: clamp(52px, 6vw, 88px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-3);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: clamp(26px, 3.4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.brand--footer { margin-bottom: 18px; }

.site-footer__line {
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--steel);
}

.site-footer__head {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--brass);
}

.site-footer__list { display: grid; gap: 10px; }
.site-footer__list a {
  font-size: 13.5px;
  color: rgba(244, 241, 234, .66);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.site-footer__list a:hover { color: var(--brass); padding-left: 5px; }

.site-footer__address {
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--steel);
}
.site-footer__email {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--brass);
  border-bottom: 1px solid rgba(201, 162, 77, .4);
  transition: border-color var(--t-fast) var(--ease);
}
.site-footer__email:hover { border-color: var(--brass); }
.site-footer__hours { font-size: 12.5px; line-height: 1.7; color: #6B7079; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-block: 24px;
  border-top: 1px solid var(--ink-3);
  font-size: 12.5px;
  color: #6B7079;
}
.site-footer__base p { margin: 0; }
.site-footer__tagline {
  font-family: var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: .72;
}

/* ------------------------------------------------------ 19 scroll reveal */
/* Visible by default. The .js-reveal class is added by the inline script in
   includes/header.php and only survives if main.js actually runs, so a failed
   script leaves the content on screen rather than hiding it for good. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .72s var(--ease) var(--d, 0ms),
              transform .72s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------- 20 responsive */
@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; max-width: 620px; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 38px; }
  .timeline::before { display: none; }
  .timeline__item { padding-left: 34px; padding-top: 0; }
  .timeline__dot { top: 4px; }
  .contact { grid-template-columns: 1fr; }
  .mission { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .nav,
  .site-header__cta { display: none; }
  .burger { display: flex; }

  .split { grid-template-columns: 1fr; }
  .split__media { max-width: 480px; }
  .split__badge { right: 14px; }

  .cta-band__inner { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr 1fr; row-gap: 34px; }
}

@media (max-width: 640px) {
  :root { --hdr-h: 70px; }

  .hero { min-height: 92svh; }
  .hero__rule { width: 72%; }

  .section__head { flex-direction: column; gap: 10px; }
  .section__head--split .link-arrow { align-self: flex-start; }

  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; }
  .prod-card__name { font-size: 15px; }
  .prod-card__spec { display: none; }
  .prod-card__view { font-size: 11px; padding: 10px; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card { padding: 20px 16px; gap: 9px; }
  .cat-card__name { font-size: 15.5px; }
  .cat-card__blurb { display: none; }
  .cat-icon { width: 34px; height: 34px; }

  .timeline { grid-template-columns: 1fr; }
  .supply { grid-template-columns: 1fr; }

  .form__row { grid-template-columns: 1fr; gap: 0; }
  .pdp__thumbs { grid-template-columns: repeat(4, 1fr); }

  .controls { flex-direction: column; align-items: stretch; }
  .controls__sort { justify-content: space-between; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__base { flex-direction: column; }

  .split__badge { right: 10px; bottom: -16px; padding: 16px 18px; }
  .split__badgeNum { font-size: 30px; }
}

@media (max-width: 380px) {
  /* Product cards need the width to stay legible, so they go single column.
     Category cards are short enough to stay two-up even on a 360px phone —
     eight of them stacked singly would be a long scroll. */
  .prod-grid { grid-template-columns: 1fr; }
  .cat-card  { padding: 18px 13px; }
  .cat-card__name { font-size: 14px; }
  .hero__actions .btn { width: 100%; }
}

/* ------------------------------------------- 21 reduced motion & print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Everything that animates in must start visible instead. */
  .js-reveal .reveal,
  .reveal { opacity: 1; transform: none; }
  .hero__title .word > span { transform: none; }
  .hero__rule { transform: scaleX(1); }
  .preloader { display: none; }
  .cursor { display: none; }
  .mobile-menu__link,
  .mobile-menu__cta { opacity: 1; transform: none; }
  .timeline__item .timeline__dot::after { transform: scale(1); }
  .hero__kenburns { animation: none; }
  .prod-card__frame,
  .cat-card__frame { clip-path: inset(0 0 0 0); opacity: 0; }
  .prod-card__link:hover .prod-card__frame,
  .cat-card:hover .cat-card__frame { opacity: 1; }
}

@media print {
  .site-header, .mobile-menu, .mobile-menu__veil, .preloader,
  .cursor, .hero__scroll, .site-footer, .controls, .chips { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-head { padding-block: 16px; }
}