/* ==========================================================================
   SAI CREATION, MAIN STYLESHEET
   --------------------------------------------------------------------------
   Consumes design tokens from tokens.css. Organized in clearly-marked
   sections so it is easy to extend or restyle later:

     01. Reset & base
     02. Utilities (container, eyebrow, buttons, section headers)
     03. Header & navigation
     04. Footer
     05. Hero (home)
     06. Marquee strip
     07. Story / stats
     08. Horizontal collections showcase (home)
     09. Craftsmanship / process
     10. Certifications band
     11. Global reach / CTA
     12. Page hero (interior pages)
     13. Collections page (filters, grid, lightbox)
     14. About page
     15. Contact page
     16. Reveal-animation initial states
     17. Responsive overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--clr-bg);
  color: var(--clr-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* <picture> wrappers must not affect layout, img sizes against its container */
[hidden] { display: none !important; } /* display resets above must not defeat the hidden attribute */
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

::selection { background: var(--clr-gold); color: var(--clr-bg); }

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

.section { padding-block: var(--section-pad); position: relative; }
.section--soft  { background: var(--clr-bg-soft); }
.section--cream { background: var(--clr-cream); color: var(--clr-ink-on-cream); }

/* Uppercase eyebrow label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: var(--space-3);
}
.section--cream .eyebrow { color: var(--clr-gold-deep); }

.section-head { max-width: 56rem; margin-bottom: var(--space-6); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { margin-top: var(--space-3); }

.lead {
  font-size: var(--fs-lead);
  color: var(--clr-ink-soft);
  max-width: 42rem;
}
.section--cream .lead { color: #5C5140; }

/* Italic serif accent inside headings */
.accent {
  font-style: italic;
  font-weight: 380;
  color: var(--clr-gold-hi);
}
.section--cream .accent { color: var(--clr-gold-deep); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 2.1rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--gold   { background: var(--clr-gold); color: #1A1508; }
.btn--gold:hover { background: var(--clr-gold-hi); }
.btn--ghost  { border: 1px solid var(--clr-line); color: var(--clr-ink); }
.btn--ghost:hover { border-color: var(--clr-gold); color: var(--clr-gold-hi); }
.section--cream .btn--ghost { border-color: #CDC0A8; color: var(--clr-ink-on-cream); }
.section--cream .btn--ghost:hover { border-color: var(--clr-gold-deep); color: var(--clr-gold-deep); }

/* --------------------------------------------------------------------------
   03. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: transform .45s var(--ease-out), background .45s, box-shadow .45s;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.25rem;
}
.site-header.is-scrolled {
  background: rgba(19, 16, 9, .85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--clr-line);
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand { display: inline-flex; align-items: center; }
.brand-lockup {
  display: block;
  height: 2.75rem;
  width: auto;
}

.nav-links { display: flex; gap: 2.6rem; }
.nav-links a {
  position: relative;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  padding-block: .4rem;
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--clr-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--clr-ink); }
.nav-links a:hover::after, .nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta { display: inline-flex; }
.nav-cta .btn { padding: .7rem 1.5rem; }

/* Mobile burger + panel */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: calc(var(--z-menu) + 1); }
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--clr-ink);
  transition: transform .4s var(--ease-out), opacity .3s, top .4s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
body.menu-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  background: rgba(19, 16, 9, .97);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility 0s .45s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.2rem);
  padding-block: .55rem;
  color: var(--clr-ink);
  display: flex; align-items: baseline; gap: 1rem;
  transform: translateY(24px); opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s, color .3s;
}
.mobile-menu a small {
  font-family: var(--font-body);
  font-size: .7rem; letter-spacing: .25em; color: var(--clr-gold);
}
.mobile-menu a:hover { color: var(--clr-gold-hi); }
body.menu-open .mobile-menu a { transform: translateY(0); opacity: 1; }
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: .10s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: .16s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: .22s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: .28s; }

/* --------------------------------------------------------------------------
   04. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #0D0B06;
  border-top: 1px solid var(--clr-line);
  padding-top: var(--space-6);
}
.footer-word {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: .95;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-line);
  text-align: center;
  user-select: none;
  transition: color 1.2s var(--ease-out);
}
.footer-word:hover { color: rgba(200, 161, 94, .12); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  margin-bottom: var(--space-3);
}
.footer-grid a, .footer-grid p { color: var(--clr-ink-soft); font-size: var(--fs-small); }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a:hover { color: var(--clr-gold-hi); }
.footer-about { max-width: 26rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  border-top: 1px solid var(--clr-line);
  padding-block: var(--space-3);
  font-size: .78rem;
  color: var(--clr-ink-faint);
}

/* --------------------------------------------------------------------------
   05. HERO (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(19,16,9,.96) 0%, rgba(19,16,9,.45) 45%, rgba(19,16,9,.35) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(200,161,94,.14), transparent 60%);
}
.hero .container { position: relative; z-index: 2; padding-bottom: clamp(4rem, 9vh, 7rem); }
.hero-kicker {
  display: flex; align-items: center;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-gold-hi);
  margin-bottom: var(--space-3);
}
.hero h1 {
  font-size: var(--fs-hero);
  color: #F3EADA;
  max-width: 12ch;
  margin-bottom: var(--space-4);
}
.hero-sub {
  max-width: 34rem;
  color: #CDBFA6;
  font-size: var(--fs-lead);
  margin-bottom: var(--space-5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-meta {
  position: absolute;
  right: var(--gutter); bottom: clamp(4rem, 9vh, 7rem);
  z-index: 2;
  text-align: right;
  font-size: var(--fs-small);
  color: var(--clr-ink-faint);
  display: grid; gap: .4rem;
}
.hero-meta strong { color: var(--clr-ink); font-weight: 500; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 1.4rem; z-index: 2;
  transform: translateX(-50%);
  width: 1px; height: 3.2rem;
  background: linear-gradient(var(--clr-gold), transparent);
  overflow: hidden;
}
.scroll-hint::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--clr-gold-hi);
  animation: hintDrop 2.2s var(--ease-inout) infinite;
}
@keyframes hintDrop {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   06. MARQUEE STRIP (certifications ticker)
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--clr-line);
  background: var(--clr-bg-soft);
  overflow: hidden;
  padding-block: 1.1rem;
}
.marquee-track {
  display: flex; gap: 3.5rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: flex; align-items: center; gap: 3.5rem;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  white-space: nowrap;
}
.marquee-track span::after { content: "✦"; color: var(--clr-gold); font-size: .7em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   07. STORY / STATS
   -------------------------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.story-media { position: relative; }
.story-media .frame {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.story-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.story-media .frame--main { aspect-ratio: 4 / 5; }
.story-media .frame--float {
  position: absolute;
  right: -8%; bottom: -12%;
  width: 52%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--clr-bg);
}
.story-copy h2 { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.story-copy p { color: var(--clr-ink-soft); margin-bottom: var(--space-3); max-width: 38rem; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--clr-line);
}
.stat .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  color: var(--clr-gold-hi);
  line-height: 1;
}
.stat .stat-num sup { font-size: .45em; color: var(--clr-gold); }
.stat .stat-label {
  margin-top: .6rem;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
}

/* --------------------------------------------------------------------------
   08. HORIZONTAL COLLECTIONS SHOWCASE (home)
   -------------------------------------------------------------------------- */
.showcase { overflow: hidden; }
.showcase-head { padding-block: var(--section-pad) var(--space-5); }
.showcase-track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 0 var(--gutter) var(--space-3);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.showcase-track > .show-card { scroll-snap-align: start; }
.show-card {
  position: relative;
  width: clamp(18rem, 34vw, 30rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--clr-surface);
}
.show-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter .6s;
}
.show-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,11,6,.92) 0%, rgba(13,11,6,.05) 55%);
}
.show-card:hover img { transform: scale(1.06); }
.show-card-body {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: .4rem;
}
.show-card-index {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--clr-gold);
}
.show-card h3 { font-size: var(--fs-h3); }
.show-card .count { font-size: var(--fs-small); color: var(--clr-ink-soft); }
.show-card .go {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(243,234,218,.35);
  display: grid; place-items: center;
  color: var(--clr-ink);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform .45s var(--ease-out);
}
.show-card:hover .go { background: var(--clr-gold); border-color: var(--clr-gold); color: #1A1508; transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   09. CRAFTSMANSHIP / PROCESS
   -------------------------------------------------------------------------- */
.craft { position: relative; overflow: hidden; }
.craft-bg { position: absolute; inset: -18% 0; z-index: 0; }
.craft-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: saturate(.4); }
.craft .container { position: relative; z-index: 1; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--clr-line);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.process-cell {
  background: var(--clr-bg);
  padding: var(--space-4);
  min-height: 13rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  transition: background var(--dur-fast);
}
.process-cell:hover { background: var(--clr-surface); }
.process-cell .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--clr-gold);
  font-size: 1.1rem;
}
.process-cell h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.process-cell p { font-size: var(--fs-small); color: var(--clr-ink-faint); }

/* --------------------------------------------------------------------------
   10. CERTIFICATIONS BAND
   -------------------------------------------------------------------------- */
.cert-band .container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.cert-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.cert-chip {
  border: 1px solid #D8CCB4;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--clr-ink-on-cream);
  background: #FBF7EE;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.cert-chip:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(34,28,20,.35); }
.cert-chip small { display: block; font-family: var(--font-body); font-size: .6rem; letter-spacing: .18em; color: #8F7F66; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   11. GLOBAL REACH / CTA
   -------------------------------------------------------------------------- */
.reach { text-align: center; }
.reach h2 { font-size: var(--fs-h1); max-width: 20ch; margin-inline: auto; }
.reach .lead { margin: var(--space-4) auto var(--space-5); }
.reach-media {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-card);
}
.reach-media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   12. PAGE HERO (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: clamp(9rem, 20vh, 14rem);
  padding-bottom: var(--space-6);
  overflow: hidden;
  /* .page-hero is a dark island (tokens.css re-scopes --clr-ink to cream).
     Setting color here anchors the H1 to that scope, otherwise the H1 would
     inherit body's already-computed dark ink and disappear against the bg. */
  color: var(--clr-ink);
}
.page-hero .lead { color: var(--clr-ink-soft); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 14ch; }
.page-hero .lead { margin-top: var(--space-4); }
.page-hero--media { min-height: 72svh; display: flex; align-items: flex-end; }
.page-hero--media .page-hero-bg { position: absolute; inset: 0; }
.page-hero--media .page-hero-bg img { width: 100%; height: 115%; object-fit: cover; }
.page-hero--media .page-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,16,9,.97), rgba(19,16,9,.35));
}
.page-hero--media .container { position: relative; z-index: 2; }
.breadcrumb {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  margin-bottom: var(--space-3);
}
.breadcrumb a:hover { color: var(--clr-gold-hi); }

/* --------------------------------------------------------------------------
   13. COLLECTIONS PAGE
   -------------------------------------------------------------------------- */
.filter-bar {
  position: sticky;
  top: 5.25rem;
  z-index: 50;
  background: rgba(247,241,230,.9);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--clr-line);
  padding-block: 1rem;
}
.filter-bar .container { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.filter-scroll { display: contents; }
.filter-btn {
  padding: .62rem 1.4rem;
  border: 1px solid var(--clr-line);
  border-radius: 100px;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--clr-gold); color: var(--clr-gold-hi); }
.filter-btn.is-active { background: var(--clr-gold); border-color: var(--clr-gold); color: #1A1508; }
.filter-btn--3d { color: var(--clr-gold-hi); border-color: var(--clr-gold-deep); }
.filter-count { margin-left: auto; font-size: var(--fs-small); color: var(--clr-ink-faint); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-block: var(--space-6);
}
.product-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-surface);
  cursor: pointer;
}
.product-card .ph {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #E8E4DC; /* most product shots are on light seamless */
}
.product-card .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.product-card:hover .ph img { transform: scale(1.07); }
.product-card .pc-body {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem 1.25rem;
}
.product-card h3 { font-size: 1.08rem; font-weight: 480; }
.product-card .sku { font-size: .72rem; letter-spacing: .12em; color: var(--clr-ink-faint); white-space: nowrap; }
.product-card .zoom {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgba(19,16,9,.55);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: var(--clr-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.product-card:hover .zoom { opacity: 1; transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(13,11,6,.94);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img {
  max-height: 78vh; max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.lightbox-caption { margin-top: 1rem; text-align: center; color: var(--clr-ink-soft); font-size: var(--fs-small); }
.lightbox-caption strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--clr-ink); font-weight: 480; }
.lb-btn {
  position: absolute;
  width: 3.2rem; height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--clr-line);
  display: grid; place-items: center;
  color: var(--clr-ink);
  background: rgba(19,16,9,.6);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.lb-btn:hover { border-color: var(--clr-gold); color: var(--clr-gold-hi); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }

/* 3D model viewer (opt-in per product via data.js `model` field) */
.badge-3d {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  padding: .32rem .6rem;
  border-radius: 999px;
  color: var(--clr-bg);
  background: linear-gradient(135deg, var(--clr-gold-hi), var(--clr-gold));
  box-shadow: 0 3px 12px -3px rgba(0,0,0,.55);
}
.lb-3d {
  width: min(90vw, 660px);
  height: min(72vh, 660px);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 28%, #211b12, #100d07 72%);
  box-shadow: var(--shadow-card);
}
.lb-3d model-viewer {
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
}
.lb-3d-toggle {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clr-gold-hi);
  border: 1px solid var(--clr-gold-deep);
  border-radius: 999px;
  padding: .55rem 1.2rem;
  background: rgba(200,161,94,.08);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.lb-3d-toggle:hover { border-color: var(--clr-gold); background: rgba(200,161,94,.18); }

/* OEM banner on collections page */
.oem-note {
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(200,161,94,.12), transparent 55%),
    var(--clr-surface);
}
.oem-note h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.oem-note p { color: var(--clr-ink-soft); max-width: 46rem; }

/* --------------------------------------------------------------------------
   14. ABOUT PAGE
   -------------------------------------------------------------------------- */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--clr-line);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fact-cell { background: var(--clr-bg); padding: var(--space-4); }
.fact-cell .k {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  margin-bottom: .8rem;
}
.fact-cell .v { font-family: var(--font-display); font-size: 1.5rem; }

.units-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.unit-chip {
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  display: flex; align-items: center; gap: 1rem;
  font-size: var(--fs-small);
  color: var(--clr-ink-soft);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.unit-chip:hover { border-color: var(--clr-gold-deep); color: var(--clr-ink); background: var(--clr-surface); }
.unit-chip::before { content: "·"; color: var(--clr-gold); }

.gallery-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: clamp(12rem, 32vw, 24rem);
  gap: var(--space-3);
}
.gallery-band .cell { border-radius: var(--radius-md); overflow: hidden; }
.gallery-band .cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.gallery-band .cell:hover img { transform: scale(1.05); }
.gallery-band .cell--wide { grid-column: 1 / -1; }

.award-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.award-card {
  background: #FBF7EE;
  border: 1px solid #D8CCB4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.award-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.award-card figcaption { padding: 1.1rem 1.3rem; font-size: var(--fs-small); color: #5C5140; }

/* --------------------------------------------------------------------------
   15. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact-list { display: grid; gap: var(--space-4); }
.contact-item .k {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  margin-bottom: .5rem;
}
.contact-item a, .contact-item p { font-size: 1.12rem; color: var(--clr-ink-soft); }
.contact-item a:hover { color: var(--clr-gold-hi); }

.inquiry-form {
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid;
  gap: var(--space-3);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clr-ink-faint);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--clr-bg);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  color: var(--clr-ink);
  font: inherit;
  padding: .95rem 1.1rem;
  transition: border-color var(--dur-fast);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clr-gold);
}
.form-note { font-size: .8rem; color: var(--clr-ink-faint); }
.form-error {
  font-size: .95rem; color: var(--clr-error); margin-top: .25rem;
}
.form-error a { color: inherit; text-decoration: underline; }

.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;
}

.inquiry-success {
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.inquiry-success h3 { font-size: var(--fs-h3); margin: .25rem 0 var(--space-3); }
.inquiry-success p  { color: var(--clr-ink-soft); }
.inquiry-success a  { color: var(--clr-gold-hi); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. REVEAL-ANIMATION INITIAL STATES
   --------------------------------------------------------------------------
   Elements tagged with data-reveal / data-reveal-img start hidden and are
   animated in by GSAP (main.js). no-js fallback keeps them visible.
   -------------------------------------------------------------------------- */
html.js [data-reveal]      { opacity: 0; }
html.js [data-reveal-img]  { clip-path: inset(0 0 100% 0); }
html.js [data-reveal-img] img { transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]     { opacity: 1 !important; }
  html.js [data-reveal-img] { clip-path: none !important; }
  html.js [data-reveal-img] img { transform: none !important; }
  .marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .story-grid, .cert-band .container, .contact-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-grid, .units-grid, .award-row { grid-template-columns: repeat(2, 1fr); }
  .story-media .frame--float { display: none; }
  .hero-meta { display: none; }
}
@media (max-width: 40rem) {
  .process-grid, .facts-grid, .units-grid, .award-row, .form-row { grid-template-columns: 1fr; }
  .gallery-band { grid-template-columns: 1fr; }
  .oem-note { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .lb-prev { left: .5rem; } .lb-next { right: .5rem; }

  /* Header: solid backdrop on mobile so it separates from the hero content
     underneath, and the burger has something to sit against. */
  .site-header { background: rgba(19, 16, 9, .82); backdrop-filter: blur(10px); }
  .site-header .container { height: 4.5rem; }
  .brand-lockup { height: 2rem; }

  /* Hero: top-align content on mobile with clearance for the fixed header
     so the kicker sits below the brand, not on top of it. */
  .hero { align-items: flex-start; }
  .hero .container { padding-top: 6rem; padding-bottom: 3rem; }
  .hero-kicker { font-size: 0.62rem; margin-bottom: var(--space-2); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }

  /* Page hero on interior pages: same clearance. */
  .page-hero { padding-top: 6.5rem; }
  .page-hero--media { min-height: 60svh; }

  /* Filter bar: single-row category strip that scrolls sideways, with the 3D
     chip pinned to the right and the count dropping under the strip. */
  .filter-bar { padding-block: .75rem; }
  .filter-bar .container { flex-wrap: wrap; gap: .5rem .6rem; }
  .filter-scroll {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* soft fade on the right to hint at more chips */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    padding-right: 1rem;
  }
  .filter-scroll::-webkit-scrollbar { display: none; }
  .filter-scroll .filter-btn { flex: 0 0 auto; scroll-snap-align: start; padding: .5rem 1rem; font-size: .78rem; }
  .filter-btn--3d { flex: 0 0 auto; padding: .5rem 1rem; font-size: .78rem; }
  .filter-count { flex: 1 0 100%; text-align: right; }
}