/* ============================================================
   BLUE GEMS AND JEWELS — Design System
   Warm editorial luxury palette: deep ink + bone/ivory base,
   accented by an antique gold, with emerald and rose-taupe used sparingly.
   Spacing follows an 8px scale: 8 / 16 / 24 / 32 / 40 / 48 / 64 / 80px.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');
:root{
  /* neutral bone/ivory ramp — every "gray" on the site comes from this one ramp */
  --navy-950:#f3eee4;
  --navy-900:#e9e1d2;
  --navy-800:#ded0c4;
  --navy-700:#cbb9a8;
  --navy-600:#a99a89;
  --navy-500:#8a7a6b;
  --ink:#16140f;
  --ink-soft:#2a271f;

  /* the ONE brand accent — antique gold — as a single tonal ramp.
     (kept the historical "gold-*" names so every component below
     that referenced them stays wired to the same accent automatically.) */
  --gold-100:#efe3cb;
  --gold-300:#d8be8f;
  --gold-400:#a9824c;
  --gold-500:#8e6d3f;
  --gold-600:#8a6a52;

  /* secondary accents, used sparingly */
  --emerald-900:#22392c;
  --emerald-700:#3c5a49;
  --rose-taupe:#ded0c4;
  --placeholder-brown:#8a6a52;

  --ivory:#16140f;
  --ivory-dim:#6b6255;
  --white:#ffffff;
  --line:rgba(22,20,15,0.14);
  --line-soft:rgba(22,20,15,0.08);
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22,.68,.2,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-snap-type:y proximity; scroll-padding-top:var(--nav-h,100px); }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; letter-spacing:.01em; }
p{ margin:0; }
::selection{ background:var(--gold-100); color:var(--ink); }
/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-900); }
::-webkit-scrollbar-thumb{ background:var(--navy-500); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-500); }
/* ---------- utility ---------- */
/* padding is clamped so it stops growing past ~1067px viewport width —
   plain 6vw would otherwise keep eating into the capped .wrap box as
   screens get wider (4K/ultrawide), squeezing the content column down
   to a sliver between two huge gutters */
.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(1.5rem,6vw,4rem); }
/* let the content column grow on large monitors/ultrawide instead of
   staying frozen at 1240px inside ever-larger empty gutters */
@media(min-width:1600px){ .wrap{ max-width:1400px; } }
@media(min-width:2000px){ .wrap{ max-width:1600px; } }
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-400);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:'';
  width:34px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500));
}
.eyebrow-center{ display:flex; justify-content:center; width:100%; }
.eyebrow-center::before{ display:none; }
.section{ position:relative; padding:7.56px 0; }
.section-tight{ padding:min(5vw,48px) 0; }
/* ---------- stacking-card scroll effect ---------- */
.stack-section{
  position:sticky;
  top:0;
  min-height:100vh;
  min-height:100dvh;
  padding-top:var(--nav-h,100px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:var(--white);
  border-radius:20px;
  box-shadow:0 -30px 60px -30px rgba(22,20,15,.22);
  transform-origin:center top;
  will-change:transform, opacity;
  transition:transform .6s cubic-bezier(.22,.68,.2,1), opacity .6s cubic-bezier(.22,.68,.2,1);
  overflow:hidden;
}
.stack-section > .wrap{ width:100%; will-change:transform; }
.hero{ scroll-snap-align:start; scroll-snap-stop:always; }
.center{ text-align:center; }
.grid{ display:grid; gap:2.5rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
/* ---------- title/subtitle/image/text media row (standard mobile order) ---------- */
.media-row{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5rem; }
.media-row.media-right{ grid-template-areas:"head img" "body img"; }
.media-row.media-left{ grid-template-areas:"img head" "img body"; }
.media-row.media-top{ grid-template-areas:"head head" "body img"; row-gap:3rem; }
.media-row.media-top.media-left{ grid-template-areas:"head head" "img body"; }
.media-row.media-top > .text-head{ text-align:center; }
.media-row > .text-head{ grid-area:head; }
.media-row > .text-body{ grid-area:body; }
.media-row > .tile{ grid-area:img; }
@media(max-width:1000px){
  .media-row,
  .media-row.media-right,
  .media-row.media-left,
  .media-row.media-top,
  .media-row.media-top.media-left{ grid-template-columns:1fr; grid-template-areas:"head" "img" "body"; gap:2.2rem; }
}
@media(min-width:1001px){
  .retailers-cta{ margin-bottom:3.5rem; }
  .tech-precision-section{ margin-bottom:5rem; }
}
/* laptop-only: trim the text column's vertical rhythm so it matches the image's height */
@media(min-width:1001px) and (max-width:1440px){
  .media-row--fit{ row-gap:1.4rem; }
  .media-row--fit h2{ line-height:1.22; font-size:clamp(1.6rem,2.4vw,2.05rem); }
  .media-row--fit .text-head{ margin-bottom:0; }
  .media-row--fit ul{ gap:.5rem !important; }
  .media-row--fit .btn{ margin-top:1rem !important; }
}
.muted{ color:var(--ivory-dim); }
.gold{ color:var(--gold-400); }
.divider{
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-soft) 20%,var(--line-soft) 80%,transparent);
}
.divider-gold{
  width:64px; height:1px; margin:1.5rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
}
/* ---------- reveal animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1s var(--ease-soft), transform 1.1s var(--ease-soft);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1s var(--ease-soft), transform 1.1s var(--ease-soft); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.reveal-line{ opacity:0; transform:translateX(-24px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-line.in{ opacity:1; transform:translateX(0); }
.stagger > *{ transition-delay:calc(var(--i,0) * 110ms); }
/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.5rem,6vw,4rem);
  background:linear-gradient(180deg,rgba(22,20,15,.55),rgba(22,20,15,0));
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  padding:1rem clamp(1.5rem,6vw,4rem);
  background:rgba(243,238,228,.92);
  box-shadow:0 1px 0 var(--line-soft), 0 20px 40px -20px rgba(22,20,15,.12);
}
.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:.12em;
  display:flex; align-items:center; line-height:1.05;
}
.brand b{ font-weight:700; color:var(--white); text-shadow:0 2px 12px rgba(0,0,0,.5); transition:color .3s; }
.nav.scrolled .brand b,
.footer .brand b{ color:var(--ivory); text-shadow:none; }
.brand small{ font-family:var(--sans); font-size:.56rem; letter-spacing:.28em; color:var(--gold-300); font-weight:400; margin-top:.35rem; transition:color .3s; }
.nav.scrolled .brand small{ color:var(--gold-400); }
.brand-logo{
  display:block; width:76px; height:76px; border-radius:50%; flex-shrink:0;
  background-color:var(--navy-950); background-position:center center; background-size:102% auto; background-repeat:no-repeat;
  border:1px solid rgba(243,238,228,.5); box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:width .4s var(--ease), height .4s var(--ease), border-color .3s;
}
.nav.scrolled .brand-logo{ width:64px; height:64px; border-color:var(--line-soft); box-shadow:0 2px 8px rgba(22,20,15,.15); }
.nav-links{ display:flex; gap:2.3rem; align-items:center; }
.nav-links a{
  font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(243,238,228,.85); text-shadow:0 2px 12px rgba(0,0,0,.5); position:relative; padding:.3rem 0;
  transition:color .3s, text-shadow .3s;
}
.nav.scrolled .nav-links a{ color:var(--ivory-dim); text-shadow:none; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{ color:var(--white); }
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.active{ color:var(--ivory); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{
  color:var(--gold-300)!important;
  text-shadow:none; transition:color .3s!important;
}
.nav-cta:hover{ color:var(--white)!important; }
.nav.scrolled .nav-cta{ color:var(--gold-500)!important; }
.nav.scrolled .nav-cta:hover{ color:var(--gold-400)!important; }
/* ---- grouped dropdowns (Manufacturing, Company) ---- */
.nav-drop{ position:relative; }
.nav-drop > a{ display:inline-flex; align-items:center; gap:.4em; }
.nav-drop .caret{ font-size:.6em; transition:transform .3s var(--ease); }
.nav-drop:hover .caret{ transform:rotate(180deg); }
.nav-drop-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  min-width:220px; padding:.5rem; margin-top:1rem;
  background:var(--white); border:1px solid var(--line-soft); border-radius:6px;
  box-shadow:0 20px 40px -20px rgba(22,20,15,.25);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-drop:hover .nav-drop-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-drop-menu a{
  display:block; padding:.7rem .9rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ivory)!important; text-shadow:none!important; border-radius:4px;
}
.nav-drop-menu a::after{ display:none; }
.nav-drop-menu a:hover{ background:var(--gold-100); color:var(--gold-500)!important; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; padding:12px; margin:-12px; }
.nav-toggle span{ width:24px; height:1px; background:var(--white); box-shadow:0 1px 6px rgba(0,0,0,.5); transition:transform .3s,opacity .3s,background .3s; }
.nav.scrolled .nav-toggle span{ background:var(--ivory); box-shadow:none; }
.mobile-panel{
  position:fixed; inset:0; background:var(--navy-950); z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  overflow-y:auto; padding:6rem 0 2rem;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.mobile-panel.open{ opacity:1; pointer-events:auto; }
.mobile-panel a{ font-family:var(--serif); font-size:1.5rem; }
.mp-group{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.mp-group .mp-heading{
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-400);
}
.mp-group a{ font-size:1.15rem; }
@media(max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{ padding:1.1rem 5vw; }
  .nav.scrolled{ padding:.8rem 5vw; }
  .brand-logo{ width:56px; height:56px; }
  .nav.scrolled .brand-logo{ width:48px; height:48px; }
}
/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-10%; z-index:-4;
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(169,130,76,.20), transparent 60%),
    radial-gradient(50% 45% at 78% 75%, rgba(222,208,196,.16), transparent 60%),
    linear-gradient(160deg,var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  animation:driftBg 22s ease-in-out infinite alternate;
}
@keyframes driftBg{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(-2%,2%,0) scale(1.06);} }
.hero-photo{ position:absolute; inset:0; z-index:-3; overflow:hidden; background:var(--navy-950); }
.hero-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); animation:kenBurns 28s ease-in-out infinite alternate;
}
@keyframes kenBurns{ from{ transform:scale(1.08) translate(0,0); } to{ transform:scale(1.18) translate(-1.5%,-1.5%); } }
/* pages with no hero video — the img is the permanent visual, not a
   brief fallback, so the heavy 1.08→1.18 Ken Burns zoom (tuned for a
   crop that's on screen for a split second) was cropping it far more
   than intended. Much gentler zoom when there's no video sibling. */
.hero-photo img:only-child{ transform:scale(1); animation:kenBurnsSoft 34s ease-in-out infinite alternate; }
@keyframes kenBurnsSoft{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.06) translate(-1%,-1%); } }
.hero-photo video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
}
.hero-photo video.is-ready{ opacity:1; }
/* ---------- hero background "train" slider (home page only) ----------
   vertical columns of images scroll continuously; each track holds its
   image set twice back-to-back so translateY(-50%) loops seamlessly */
.hero-slider{
  position:absolute; inset:0; z-index:-3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  width:100%; height:100%; background:var(--navy-950);
}
.hero-slider-col{ position:relative; overflow:hidden; height:100%; }
.hero-slider-track{
  display:flex; flex-direction:column; gap:3px; width:100%;
  animation:heroSlide var(--dur,30s) linear infinite;
}
.hero-slider-col--down .hero-slider-track{ animation-direction:reverse; }
.hero-slider-track img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
  filter:saturate(1.05) brightness(.78);
}
@keyframes heroSlide{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media(max-width:760px){
  .hero-slider{ grid-template-columns:repeat(2,1fr); }
  .hero-slider-col:nth-child(3), .hero-slider-col:nth-child(4){ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .hero-slider-track{ animation:none; }
}
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(22,20,15,.55) 0%, rgba(22,20,15,.3) 40%, rgba(22,20,15,.5) 75%, rgba(22,20,15,.72) 100%);
}
.hero-facets{
  position:absolute; inset:0; z-index:-1; opacity:.6;
  background-image:
    linear-gradient(115deg,transparent 48%, rgba(142,109,63,.05) 49%, rgba(142,109,63,.05) 50%, transparent 51%),
    linear-gradient(65deg,transparent 48%, rgba(216,190,143,.05) 49%, rgba(216,190,143,.05) 50%, transparent 51%);
  background-size:180px 180px, 260px 260px;
}
.hero-content{ padding:128px clamp(1.5rem,6vw,4rem) 0; max-width:980px; }
.hero .eyebrow{ justify-content:center; margin-bottom:1.6rem; color:var(--gold-300); text-shadow:0 2px 16px rgba(0,0,0,.5); }
.hero h1{
  font-size:clamp(2.4rem,6vw,5rem); line-height:1.08; color:var(--white);
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.hero h1 em{ font-style:italic; color:var(--gold-300); }
.hero p.lead{
  max-width:640px; margin:1.8rem auto 0; color:rgba(243,238,228,.92); font-size:1.08rem;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hero-actions{ display:flex; gap:1.2rem; justify-content:center; margin-top:2.6rem; flex-wrap:wrap; }
.hero .hero-actions .btn-ghost{ border-color:rgba(243,238,228,.55); color:var(--white); }
.hero .hero-actions .btn-ghost:hover{ border-color:var(--gold-300); color:var(--gold-300); }
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2rem; font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  border-radius:2px; transition:all .4s var(--ease); white-space:nowrap;
}
.btn-gold{ background:var(--gold-500); color:var(--white); }
.btn-gold:hover{ background:var(--gold-400); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(142,109,63,.4); }
.btn-ghost{ border:1px solid var(--line-soft); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold-500); color:var(--gold-500); transform:translateY(-2px); }
.btn-sm{ padding:.55rem 1.2rem; font-size:.64rem; letter-spacing:.1em; }
/* one card per grid cell: photo tile on top, a small CTA below it */
.tf-card{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.tf-card .tile{ width:100%; }
/* ============================================================
   CARDS
   ============================================================ */
.card{
  position:relative; padding:2.5rem 2rem; border:1px solid var(--line-soft);
  background:linear-gradient(160deg,rgba(22,20,15,.025),rgba(22,20,15,0));
  box-shadow:0 1px 3px rgba(22,20,15,.04);
  border-radius:4px; transition:border-color .4s,transform .4s var(--ease),background .4s,box-shadow .4s;
}
.card:hover{ border-color:var(--line); transform:translateY(-6px); background:linear-gradient(160deg,rgba(142,109,63,.07),rgba(22,20,15,0)); box-shadow:0 20px 40px -20px rgba(22,20,15,.18); }
.card .num{ font-family:var(--serif); font-size:.85rem; color:var(--gold-500); letter-spacing:.1em; }
.card h3{ font-size:1.3rem; margin:1rem 0 .8rem; color:var(--ivory); }
.card p{ color:var(--ivory-dim); font-size:.92rem; }
.card-icon{
  width:48px; height:48px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
  color:var(--gold-400);
}
/* ---------- product constellation (circular auto-rotating showcase) ---------- */
.orbit-showcase{ display:flex; align-items:center; justify-content:center; gap:4rem; flex-wrap:wrap; }
.orbit-stage{
  position:relative; width:440px; height:440px; max-width:100%;
  --orbit-r:160px; --center-d:190px; --item-d:82px;
}
.orbit-ring{ position:absolute; inset:0; animation:orbit-spin 90s linear infinite; }
.orbit-item{
  position:absolute; top:50%; left:50%; width:var(--item-d); height:var(--item-d);
  margin:calc(var(--item-d) / -2) 0 0 calc(var(--item-d) / -2);
}
.orbit-item-face{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 10px 26px -14px rgba(22,20,15,.25);
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  animation:orbit-counter-spin 90s linear infinite;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.orbit-item:hover .orbit-item-face{ border-color:var(--gold-500); box-shadow:0 14px 32px -12px rgba(138,106,82,.4); }
.orbit-item-face img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease); }
.orbit-item:hover .orbit-item-face img{ transform:scale(1.15); }
.orbit-center{
  position:absolute; top:50%; left:50%; width:var(--center-d); height:var(--center-d);
  margin:calc(var(--center-d) / -2) 0 0 calc(var(--center-d) / -2);
  border-radius:50%; overflow:hidden; z-index:5;
  border:1px solid var(--gold-500); box-shadow:0 24px 55px -20px rgba(138,106,82,.35);
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
}
.orbit-center img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(.9);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.orbit-center img.in{ opacity:1; transform:scale(1); }
@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
@keyframes orbit-counter-spin{ to{ transform:rotate(-360deg); } }
.orbit-text{ text-align:left; max-width:380px; flex:1 1 300px; }
.orbit-text h3{
  font-size:1.4rem; color:var(--ivory);
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.orbit-text p{
  margin-top:.7rem; color:var(--ivory-dim); font-size:.94rem; line-height:1.7;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-soft) .08s, transform .5s var(--ease-soft) .08s;
}
.orbit-text.in h3, .orbit-text.in p{ opacity:1; transform:translateY(0); }
@media(max-width:900px){
  .orbit-showcase{ flex-direction:column; text-align:center; }
  .orbit-text{ display:contents; }
  .orbit-label{ order:1; }
  .orbit-stage{ order:2; margin-inline:auto; }
  .orbit-name{ order:3; }
  .orbit-desc{ order:4; }
}
@media(max-width:640px){
  .orbit-stage{ width:320px; height:320px; --orbit-r:112px; --center-d:150px; --item-d:60px; }
}
.card-logo{
  width:100%; height:120px; border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
  overflow:hidden; position:relative;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400);
}
.card-logo img{ width:100%; height:100%; object-fit:cover; }
/* "What We Manufacture" — Women's / Men's category subsections */
.gender-row .eyebrow{ margin-bottom: 0; }
/* keep Women's / Men's side by side at every width, unlike the generic
   .grid-2 (which the site collapses to one column under 1000px) */
.wm-split{ display:grid; grid-template-columns:repeat(2,1fr); gap:3.6rem; margin-top:3.6rem; }
@media(min-width:901px){
  .wm-cta{ margin-bottom:4rem; }
}
.cat-icons{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 1.2rem; margin-top:1.6rem; }
.cat-icon{ display:flex; align-items:center; gap:.9rem; }
.cat-avatar{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%; overflow:hidden;
  border:1px solid var(--line-soft); box-shadow:0 10px 22px -12px rgba(22,20,15,.2);
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cat-avatar img{ width:100%; height:100%; object-fit:cover; }
.cat-icon:hover .cat-avatar{ transform:scale(1.08); border-color:var(--gold-500); box-shadow:0 14px 28px -14px rgba(138,106,82,.35); }
.cat-info{ font-family:var(--serif); font-size:1rem; color:var(--ivory); }
.cat-info small{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); margin-bottom:.2rem; }
@media(max-width:640px){
  .wm-split{ gap:1.6rem; }
  .wm-split .cat-icons{ grid-template-columns:1fr; gap:1.1rem; }
}
@media(max-width:480px){
  .cat-avatar{ width:52px; height:52px; flex:0 0 52px; }
  .wm-split{ gap:1.1rem; }
  .cat-info{ font-size:.9rem; }
}
/* "How the Floor Works" process table — desktop only: breathing room
   below the table gives the sticky section's scroll-reveal nudge more
   distance to work with, so the last rows fully clear the viewport
   before the next section takes over */
@media(min-width:901px){
  .pf-table{ margin-bottom:6rem; }
}
/* ---------- certification stacked-card carousel ---------- */
.cert-showcase{
  display:grid; grid-template-columns:380px 1fr; gap:4.5rem; align-items:center;
}
.cert-stack-wrap{ display:flex; flex-direction:column; align-items:center; }
.cert-stack{
  position:relative; width:100%; max-width:340px; height:430px;
  touch-action:pan-y;
}
/* first-glimpse full-screen takeover: surrounding text disappears and
   the carousel expands to fill the viewport so every card fans out
   fully visible, before settling back into its normal in-page spot */
body.cert-glimpse-active{ overflow:hidden; }
body.cert-glimpse-active #cert-showcase{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  grid-template-columns:none; gap:0; padding:0;
  background:var(--navy-950);
}
body.cert-glimpse-active #cert-text,
body.cert-glimpse-active .cert-stack-nav{
  opacity:0; pointer-events:none; transition:opacity .25s;
}
/* taken out of flex flow entirely — otherwise the (still-present,
   merely invisible) #cert-text sibling keeps claiming its share of
   width and pushes the card stack off-center */
body.cert-glimpse-active .cert-stack-wrap{
  position:absolute; inset:0; width:100%; max-width:none;
  display:flex; align-items:center; justify-content:center;
}
body.cert-glimpse-active .cert-stack{ max-width:none; width:100%; height:100%; }
body.cert-glimpse-active .cert-stack-card{
  inset:auto; top:50%; left:50%; width:230px; height:300px; margin:-150px 0 0 -115px;
}
@media(max-width:640px){
  body.cert-glimpse-active .cert-stack-card{ width:160px; height:210px; margin:-105px 0 0 -80px; }
}
.cert-stack-card{
  position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(155deg,var(--gold-600),var(--ink));
  border:1px solid var(--gold-500);
  box-shadow:0 24px 50px -20px rgba(138,106,82,.45);
  padding:1.8rem; display:flex; flex-direction:column;
  transform-origin:center 110%;
  transition:transform .7s cubic-bezier(.22,.68,.2,1), opacity .7s cubic-bezier(.22,.68,.2,1), box-shadow .7s;
  cursor:pointer; user-select:none;
}
.cert-stack-card::after{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(135deg,rgba(243,238,228,.10) 0%,transparent 30%);
}
.cert-stack-logo{
  flex:1; background:var(--white); border-radius:10px; padding:1.6rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem; overflow:hidden;
}
.cert-stack-logo img{ width:100%; height:100%; object-fit:contain; }
/* full-bleed variant for cards whose art is a poster/photo rather than
   a badge-style logo — image stretches edge to edge, no white margin */
.cert-stack-logo--fill{ padding:0; background:none; }
.cert-stack-logo--fill img{ object-fit:cover; }
.cert-stack-foot{ display:flex; align-items:center; gap:.8em; }
.cert-stack-num{ font-family:var(--serif); font-size:.85rem; color:var(--gold-300); letter-spacing:.1em; }
.cert-stack-name{ color:var(--white); font-family:var(--serif); font-size:1rem; letter-spacing:.01em; }
.cert-stack-nav{ display:flex; align-items:center; gap:1.4rem; margin-top:2rem; }
.cert-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:none; cursor:pointer; color:var(--gold-500); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s,color .3s,border-color .3s;
}
.cert-nav-btn:hover{ background:var(--gold-100); border-color:var(--gold-500); }
.cert-stack-dots{ display:flex; gap:.55rem; }
.cert-dot{
  width:7px; height:7px; border-radius:50%; background:var(--navy-600); border:none; padding:0; cursor:pointer;
  transition:background .3s,transform .3s;
}
.cert-dot.active{ background:var(--gold-500); transform:scale(1.3); }
.cert-text{ transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft); }
.cert-text.switching{ opacity:0; transform:translateY(14px); }
.cert-text-index{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400); }
.cert-text h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2rem); margin:.6rem 0 1.1rem; color:var(--ivory); }
.cert-text p{ color:var(--ivory-dim); font-size:.98rem; line-height:1.75; max-width:480px; }
.cert-text-meta{ display:flex; gap:2.4rem; margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); }
.cert-text-meta small{ display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.4rem; }
.cert-text-meta span{ font-size:.9rem; color:var(--ivory); }
@media(max-width:1000px){
  .cert-showcase{ grid-template-columns:1fr; gap:2.4rem; justify-items:center; text-align:center; }
  .cert-stack{ height:400px; }
  .cert-text-meta{ justify-content:center; }
  .cert-text p{ max-width:100%; }
}
@media(max-width:480px){
  .cert-stack{ max-width:280px; height:360px; }
}
/* ============================================================
   PAST EVENTS — vertical poster-stack showcase
   ============================================================ */
.pe-section{
  background:var(--ink);
}
.pe-wrap{ padding:3rem 0; }
.pe-head{ margin-bottom:2.2rem; max-width:640px; }
.pe-eyebrow{ color:var(--gold-300); }
.pe-stack-wrap{ position:relative; }
.pe-scroll-hint{ display:none; }
.pe-stack{
  display:flex;
  gap:.5rem;
  width:100%;
  height:68vh;
  min-height:420px;
  max-height:640px;
}
@media(min-width:641px){
  /* the active panel's width now tracks its photo's aspect ratio, so
     it rarely fills the exact remaining space — center the row so any
     leftover space balances evenly instead of collecting on one side */
  .pe-stack{ justify-content:center; }
}
.pe-pillar{
  position:relative;
  flex:0 0 auto;
  width:64px;
  min-width:0;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:var(--ink-soft);
  border:1px solid rgba(243,238,228,.08);
  outline:none;
  will-change:width;
  transition:width .45s var(--ease-soft), border-color .4s;
}
/* .pe-active gets its width set inline by JS, sized to the real photo's
   aspect ratio so the margin either side of it stays snug; this is only
   the backstop if JS never runs — kept modest so it can never overflow
   the row and clip a neighbouring pillar out of the clickable area */
.pe-pillar.pe-active{ width:40%; border-color:rgba(243,238,228,.22); }
.pe-pillar.pe-inactive{ width:64px; }
.pe-pillar:focus-visible{ border-color:var(--gold-400); }
/* blurred, oversized copy of the same photo fills the frame behind the
   real image so the expanded panel never has to crop it to fit */
.pe-pillar-bg{
  position:absolute; inset:-10%;
  background-size:cover; background-position:center;
  filter:blur(32px) saturate(1.2) brightness(.55);
  opacity:0; transition:opacity .8s var(--ease-soft);
}
.pe-pillar-bg.active{ opacity:0; }
.pe-pillar-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .7s var(--ease-soft), transform 1.4s var(--ease-soft), filter .6s;
  filter:saturate(.85) brightness(.78);
}
.pe-pillar-img.active{ opacity:1; transform:scale(1); }
.pe-pillar.pe-active .pe-pillar-img{ filter:saturate(1) brightness(.96); }
/* the expanded "hero" panel shows the full photo, uncropped, on the
   blurred backdrop above instead of cover-cropping it to fill the box —
   desktop/tablet only, mobile keeps the full-bleed cover crop behind its
   bottom-anchored text band */
@media(min-width:641px){
  .pe-pillar.pe-active .pe-pillar-bg.active{ opacity:1; }
  .pe-pillar.pe-active .pe-pillar-img.active{ object-fit:contain; transform:scale(1); }
}
.pe-pillar-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,20,15,0) 32%, rgba(22,20,15,.6) 70%, rgba(22,20,15,.94) 100%);
  transition:background .5s;
}
.pe-pillar.pe-active .pe-pillar-scrim{
  background:linear-gradient(0deg, rgba(22,20,15,.95) 0%, rgba(22,20,15,.6) 40%, rgba(22,20,15,.1) 72%, rgba(22,20,15,0) 100%);
}
.pe-pillar-tag{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:1.4rem .8rem;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--serif); font-size:1rem; letter-spacing:.02em; color:var(--white);
  opacity:1; transition:opacity .3s var(--ease-soft);
  pointer-events:none; white-space:nowrap;
}
.pe-pillar-tag small{
  writing-mode:vertical-rl; font-family:var(--sans); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-300); margin-bottom:.7rem; display:block;
}
.pe-pillar.pe-active .pe-pillar-tag{ opacity:0; }
/* small circular "i" button, bottom-left of the image — visible only
   once the pillar is open; hovering or clicking it is what reveals
   the info text below it, instead of the text always showing */
.pe-info-btn{
  all:unset; box-sizing:border-box;
  position:absolute; left:1.5rem; bottom:1.5rem; z-index:4;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-size:.82rem; color:var(--white);
  background:rgba(22,20,15,.55); border:1px solid rgba(243,238,228,.4);
  cursor:pointer; opacity:0; pointer-events:none; transform:scale(.85);
  transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft), background .25s, border-color .25s;
}
.pe-pillar.pe-active .pe-info-btn{ opacity:1; pointer-events:auto; transform:scale(1); }
.pe-info-btn:hover, .pe-pillar.pe-info-open .pe-info-btn{ background:var(--gold-500); border-color:var(--gold-500); }
/* text box sits just above the button (still bottom-left/"down" on
   the image) so the two never overlap */
.pe-pillar-detail{
  position:absolute; left:0; right:0; bottom:3.4rem;
  padding:0 1.8rem 0 1.5rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
  pointer-events:none;
}
.pe-pillar.pe-active.pe-info-open .pe-pillar-detail{ opacity:1; transform:translateY(0); pointer-events:auto; }
.pe-pillar-num{ font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-300); white-space:nowrap; }
.pe-pillar-title{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2rem); color:var(--white); margin-top:.5rem; line-height:1.1; }
.pe-pillar-exhibition{ display:block; margin-top:.4rem; font-family:var(--sans); font-size:.82rem; color:rgba(243,238,228,.7); }
.pe-pillar-meta{ margin-top:.7rem; display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.64rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-300); white-space:nowrap; }
.pe-pillar-meta .pe-meta-dot{ color:rgba(243,238,228,.3); }
.pe-pillar-desc{ margin-top:.9rem; max-width:420px; font-size:.88rem; line-height:1.7; color:rgba(243,238,228,.72); }
@media(max-width:900px){
  .pe-stack{ height:58vh; min-height:380px; }
  .pe-pillar-title{ font-size:1.25rem; }
  .pe-pillar-exhibition{ font-size:.76rem; }
  .pe-pillar-meta{ font-size:.6rem; gap:.5rem; }
  .pe-pillar-desc{ font-size:.82rem; max-width:100%; }
  .pe-pillar-detail{ padding:1.4rem 1.3rem 1.3rem; }
}
@media(max-width:640px){
  /* fixed-width strips + horizontal scroll: flex-grow ratios squeeze
     10 items into one screen width until the vertical labels are
     narrower than a single glyph and get clipped, so give each
     collapsed strip a guaranteed minimum width instead */
  .pe-stack{
    gap:.3rem; height:44vh; min-height:280px;
    overflow-x:auto; overflow-y:hidden;
    scroll-behavior:smooth; touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pe-stack::-webkit-scrollbar{ display:none; height:0; width:0; }
  .pe-pillar{ flex:0 0 auto; width:28px; }
  .pe-pillar.pe-active{ width:70vw; max-width:300px; }
  .pe-pillar.pe-inactive{ width:28px; }
  .pe-pillar-tag{ font-size:.74rem; padding:.8rem .45rem; }
  /* text lives in the bottom 30-35% only — reads naturally from the
     image down, keeps faces/products in the top of the frame clear,
     and gives the gradient a small, easy-to-darken band to work with */
  .pe-pillar.pe-active .pe-pillar-scrim{
    background:linear-gradient(0deg, rgba(22,20,15,.96) 0%, rgba(22,20,15,.82) 22%, rgba(22,20,15,.35) 34%, rgba(22,20,15,0) 48%);
  }
  .pe-pillar-detail{
    top:66%; bottom:2.3rem; height:auto;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center;
    padding:.7rem .9rem 0;
  }
  .pe-pillar-num{ font-size:.5rem; letter-spacing:.14em; }
  .pe-pillar-title{ font-size:.92rem; margin-top:.25rem; line-height:1.15; }
  .pe-pillar-exhibition{ font-size:.62rem; margin-top:.2rem; }
  .pe-pillar-meta{ font-size:.5rem; gap:.35rem; margin-top:.35rem; letter-spacing:.06em; justify-content:center; }
  .pe-pillar-desc{ font-size:.66rem; line-height:1.45; margin-top:.4rem; max-height:2.9em; overflow:hidden; }
  .pe-info-btn{ left:.75rem; bottom:.75rem; width:20px; height:20px; font-size:.66rem; }
  /* vertical "more to explore" cue pinned to the right edge, replaced
     with "End" once the strip has been scrolled all the way through */
  .pe-scroll-hint{
    display:flex; align-items:center; justify-content:center;
    position:absolute; right:0; top:0; bottom:0; width:22px; z-index:5;
    background:linear-gradient(270deg, rgba(22,20,15,.92) 20%, transparent);
    pointer-events:none; transition:opacity .3s;
  }
  .pe-scroll-hint span{
    writing-mode:vertical-rl;
    font-family:var(--sans); font-size:.56rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(243,238,228,.65);
  }
  .pe-scroll-hint.pe-hint-end span{ color:var(--gold-300); }
}
/* ---------- founder profile cards + popup ---------- */
.founder-card-wrap{ position:relative; }
.founder-card{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2.5rem 2rem; border:1px solid var(--line-soft); border-radius:4px;
  background:linear-gradient(160deg,rgba(22,20,15,.025),rgba(22,20,15,0));
  transition:border-color .4s,transform .4s var(--ease),background .4s,box-shadow .4s;
}
.founder-card:hover,.founder-card:focus-visible{
  border-color:var(--line); transform:translateY(-6px);
  background:linear-gradient(160deg,rgba(142,109,63,.07),rgba(22,20,15,0));
  box-shadow:0 20px 40px -20px rgba(22,20,15,.18);
}
.founder-linkedin{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); border-radius:50%; color:var(--ivory-dim);
  background:var(--navy-950); transition:color .3s, border-color .3s, transform .3s;
}
.founder-linkedin:hover{ color:var(--gold-500); border-color:var(--gold-500); transform:translateY(-2px); }
.founder-linkedin svg{ width:16px; height:16px; }
.founder-avatar{
  width:140px; height:140px; border-radius:50%; margin-bottom:1.5rem;
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.founder-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.founder-card h3{ font-size:1.15rem; color:var(--ivory); }
.founder-role{
  display:block; margin-top:.35rem; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-400);
}
.founder-card p{ margin-top:1rem; color:var(--ivory-dim); font-size:.9rem; }
.founder-more{ margin-top:1.3rem; font-size:.74rem; letter-spacing:.06em; color:var(--gold-500); }
.founder-modal{
  position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:2rem;
}
.founder-modal.open{ display:flex; }
.founder-modal-backdrop{ position:absolute; inset:0; background:rgba(22,20,15,.55); backdrop-filter:blur(4px); }
.founder-modal-panel{
  position:relative; max-width:480px; width:100%; background:var(--white); border-radius:12px;
  padding:3rem 2.5rem; text-align:center; box-shadow:0 30px 80px -20px rgba(22,20,15,.35);
  opacity:0; transform:translateY(20px) scale(.97);
  transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
  display:flex; flex-direction:column; align-items:center;
}
.founder-modal.open .founder-modal-panel{ opacity:1; transform:translateY(0) scale(1); }
.founder-modal-close{
  position:absolute; top:1rem; right:1rem; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:none; cursor:pointer; font-size:1.2rem; line-height:1;
  color:var(--ivory-dim); display:flex; align-items:center; justify-content:center;
  transition:background .3s,color .3s;
}
.founder-modal-close:hover{ background:var(--gold-100); color:var(--gold-500); }
.founder-avatar-lg{ width:170px; height:170px; margin-bottom:1.5rem; }
.founder-modal-panel h3{ font-size:1.4rem; color:var(--ivory); }
.founder-modal-panel .founder-role{ margin-top:.4rem; }
.founder-modal-panel p{ margin-top:1.4rem; color:var(--ivory-dim); line-height:1.75; font-size:.94rem; }
/* clickable service card — same visual as .card, plus an affordance arrow */
a.card{ display:block; cursor:pointer; }
a.card .card-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin-top:1.5rem;
  border:1px solid var(--line); color:var(--gold-400);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
a.card:hover .card-arrow{ background:var(--gold-500); border-color:var(--gold-500); color:var(--white); transform:translateX(4px); }
.process-row{
  background:var(--navy-950); padding:1.5rem 1.5rem; display:flex; justify-content:space-between; align-items:center;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.process-row:hover{ background:var(--gold-100); padding-left:2rem; }
.process-row:hover .gold{ transform:translateX(3px); }
.process-row .gold{ display:inline-block; transition:transform .3s var(--ease); }
/* ============================================================
   STEP / TIMELINE (manufacturing process)
   ============================================================ */
.process{ position:relative; }
.process-rail{
  position:absolute; left:32px; top:0; bottom:0; width:1px;
  background:linear-gradient(var(--gold-500),var(--navy-600) 90%);
  opacity:.5;
}
.step{ display:grid; grid-template-columns:64px 1fr; gap:2rem; padding:2.5rem 0; position:relative; }
.step:not(:last-child){ border-bottom:1px solid var(--line-soft); }
.step-dot{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--gold-400);
  background:var(--navy-950); position:relative; z-index:1; font-size:1.2rem;
  box-shadow:0 4px 14px rgba(22,20,15,.08);
}
.step-body h3{ font-size:1.5rem; color:var(--ivory); margin-bottom:.6rem; }
.step-body p{ color:var(--ivory-dim); max-width:640px; }
.step-tag{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-500); margin-bottom:.5rem; display:block; }
/* ============================================================
   STATS
   ============================================================ */
.stat{ text-align:center; }
.stat .value{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.4rem); color:var(--gold-400); }
.stat .label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); margin-top:.6rem; }
/* ---------- milestones mosaic (photo-backed stat tiles) ---------- */
.ms-section{ position:relative; overflow:hidden; justify-content:center; background:var(--navy-950); }
.ms-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy-950); }
.ms-bg img{ width:100%; height:100%; object-fit:cover; }
.ms-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(243,238,228,.55) 0%, rgba(243,238,228,.4) 60%, rgba(243,238,228,.7) 100%);
}
.ms-section > .wrap{ position:relative; z-index:2; }
.ms-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.ms-tile{ padding:2rem 1.8rem; }
.ms-tile--light{ background:rgba(255,255,255,.92); }
.ms-tile--light .ms-value{ color:var(--ink); }
.ms-tile--light .ms-label{ color:var(--ivory-dim); }
.ms-tile--dark{ background:rgba(222,208,196,.88); }
.ms-tile--dark .ms-value,
.ms-tile--dark .ms-label{ color:var(--ink); }
.ms-tile--dark .ms-label{ color:var(--ivory-dim); }
.ms-tile--mid{ background:rgba(239,227,203,.9); }
.ms-tile--mid .ms-value{ color:var(--ink); }
.ms-tile--mid .ms-label{ color:var(--ivory-dim); }
.ms-value{ font-family:var(--serif); font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.1; }
.ms-label{ font-size:.85rem; line-height:1.5; margin-top:.7rem; }
.ms-tile--wide{ grid-column:span 2; }
/* tiles with no ms-value (a phrase instead of a stat) — center the
   label and give it more presence so the cell doesn't read as empty */
.ms-tile:not(:has(.ms-value)){ display:flex; align-items:center; }
.ms-tile:not(:has(.ms-value)) .ms-label{ margin-top:0; font-size:1rem; line-height:1.5; }
@media(max-width:900px){
  .ms-grid{ grid-template-columns:repeat(2,1fr); }
  .ms-tile--wide{ grid-column:span 2; }
}
@media(max-width:480px){
  .ms-tile{ padding:1.5rem 1.3rem; }
}
/* ============================================================
   QUOTE / FOUNDER
   ============================================================ */
.quote-block{ max-width:820px; margin:0 auto; text-align:center; }
.quote-block p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--ivory); line-height:1.5; }
.quote-block .attrib{ margin-top:1.6rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-400); }
/* "What These Platforms Represent" closing quote — desktop only:
   larger type, centered in the middle of the section instead of
   sitting at the top like the other stack-sections */
@media(min-width:901px){
  .pe-final-quote{ justify-content:center; }
  .pe-final-quote .quote-block{ max-width:960px; }
  .pe-final-quote .quote-block p{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
}
/* ============================================================
   TESTIMONIALS (sliding carousel — one centered at a time)
   ============================================================ */
.testimonial-carousel{
  max-width:760px; margin:3.6rem auto 0; text-align:center; position:relative;
  min-height:240px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.testimonial-slide{ width:100%; transition:transform .6s var(--ease-soft), opacity .6s var(--ease-soft); }
.testimonial-slide .quote-mark{ display:block; font-family:var(--serif); font-size:2.8rem; line-height:1; color:var(--gold-300); }
.testimonial-slide p{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.2vw,1.5rem);
  line-height:1.65; color:var(--ivory); margin-top:.6rem;
}
.testimonial-slide .attrib{
  margin-top:1.6rem; font-family:var(--sans); font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-400);
}
.testimonial-slide.out{ transform:translateX(-40px); opacity:0; }
.testimonial-slide.in{ transform:translateX(40px); opacity:0; }
.testimonial-carousel{ cursor:grab; touch-action:pan-y; }
.testimonial-carousel:active{ cursor:grabbing; }
.testimonial-dots{ display:flex; justify-content:center; gap:.55rem; margin-top:2rem; }
.testimonial-dot{
  width:7px; height:7px; border-radius:50%; background:var(--navy-600); border:none; padding:0;
  transition:background .3s,transform .3s;
}
.testimonial-dot.active{ background:var(--gold-500); transform:scale(1.3); }
/* ============================================================
   BAND / DARK ALT SECTIONS
   ============================================================ */
.band{ background:var(--white); }
.band-gold{
  background:var(--white);
}
/* ============================================================
   GALLERY / VISUAL PLACEHOLDER TILES
   ============================================================ */
.tile{
  aspect-ratio:4/5; border-radius:4px; position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  box-shadow:0 1px 3px rgba(22,20,15,.05);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(142,109,63,.10), transparent 60%),
    linear-gradient(155deg,var(--navy-700),var(--navy-900));
}
.tile::after{
  content:''; position:absolute; inset:0; z-index:3;
  background:linear-gradient(135deg,transparent 40%,rgba(243,238,228,.5) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.tile:hover::after{ transform:translateX(120%); }
.tile-label{
  position:absolute; left:1.5rem; bottom:1.5rem; right:1.5rem; z-index:2;
  font-family:var(--serif); font-size:1.05rem; color:var(--ivory);
}
.tile-label small{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.5rem; }
.tile.wide{ aspect-ratio:16/10; }
.tile.photo img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease-soft);
}
.tile.photo:hover img{ transform:scale(1.1); }
.tile.photo video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease-soft);
}
.tile.photo:hover video{ transform:scale(1.1); }
.tile.photo::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(22,20,15,0) 35%, rgba(22,20,15,.8) 100%);
}
.tile.photo .tile-label{ color:var(--white); }
.tile.photo .tile-label small{ color:var(--gold-300); }
/* logo-style artwork (e.g. IIJS) shouldn't be force-cropped like a
   photo — show it whole, letterboxed on white, inside the same frame */
.tile.photo.tile-contain{ background:var(--white); }
.tile.photo.tile-contain img,
.tile.photo.tile-contain video{ object-fit:contain; padding:1.4rem; }
.tile.tall{ aspect-ratio:3/4.6; }
.tile.square{ aspect-ratio:1/1; }
/* uncropped, uncaptioned tiles ("On the Trade Floor", "Media Coverage")
   — the box just hugs the image's own proportions instead of
   force-cropping to a fixed ratio. Every override here is written at
   the same two-class specificity as the rules it needs to beat
   (.tile.wide, .tile.photo img, .tile.photo::before) so it wins on
   source order instead of silently losing to them. */
.tile.tf-tile{ aspect-ratio:auto; background:none; }
/* .stack-section .tile.wide{aspect-ratio:16/7} (≤768px) outranks the
   rule above on specificity alone (3 classes vs 2) — beat it here so
   mobile can't silently re-crop these tiles back to a fixed box */
.stack-section .tile.wide.tf-tile{ aspect-ratio:auto; }
.tile.tf-tile img{ position:static; width:100%; height:auto; object-fit:contain; }
.tile.tf-tile::before{ content:none; }
/* .tile.photo:hover img{transform:scale(1.1)} still matched these (they
   keep the .photo class) — zooming in past the tile's overflow:hidden
   edge cropped the image on hover on desktop. Full image, always. */
.tile.photo.tf-tile:hover img{ transform:none; }
/* facet svg overlay reused as gem motif */
.gem-mark{ color:var(--gold-500); width:34px; height:34px; }
/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  padding:5rem 0 2.5rem; background:var(--navy-900); border-top:1px solid var(--line-soft);
  scroll-snap-align:start; position:sticky; top:0;
  /* always paint above every .stack-section card, regardless of how
     many are on the page — the JS also sets an incrementing z-index,
     this is the guaranteed floor so the footer reliably rises over
     whichever section it lands on, on mobile and desktop alike */
  z-index:999;
  border-radius:20px 20px 0 0;
  box-shadow:0 -30px 60px -30px rgba(22,20,15,.35);
}
/* contact page has no .stack-section content — a sticky, rising-card
   footer there just looks like an unexplained stacking glitch, so it
   reverts to a plain, normally-flowing footer on this page only */
body[data-page="contact"] .footer{
  position:static; border-radius:0; box-shadow:none;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
.footer h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400); margin-bottom:1.3rem; }
.footer ul li{ margin-bottom:.7rem; }
.footer a{ color:var(--ivory-dim); font-size:.88rem; transition:color .3s; }
.footer a:hover{ color:var(--gold-500); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.footer-social a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); border-radius:50%; color:var(--ivory-dim);
  transition:color .3s, border-color .3s, transform .3s;
}
.footer-social a:hover{ color:var(--gold-500); border-color:var(--gold-500); transform:translateY(-2px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--line-soft); font-size:.72rem; color:var(--ivory-dim); flex-wrap:wrap; gap:1rem; }
.footer-credit{ margin:0; text-align:center; padding:1rem clamp(1.5rem,6vw,4rem) 1.4rem; background:var(--navy-900); border-top:1px solid var(--line-soft); font-size:.68rem; color:var(--ivory-dim); opacity:.7; position:relative; z-index:1000; }
.footer-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
.footer-credit a:hover{ color:var(--gold-500); }
@media(max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* ============================================================
   PAGE HERO (inner pages, shorter)
   ============================================================ */
.page-hero{ min-height:72vh; min-height:72dvh; }
.page-hero h1{ font-size:clamp(2.2rem,5.4vw,4.2rem); }
.breadcrumb{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); margin-bottom:1.4rem; }
.breadcrumb .gold{ color:var(--gold-400); }
/* ============================================================
   RESPONSIVE GRID FALLBACKS
   ============================================================ */
.puzzle{ grid-template-columns:repeat(5,1fr); }
@media(max-width:1000px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .puzzle{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:640px){
  .wrap{ padding:0 5.5vw; }
  .grid-4,.grid-3{ grid-template-columns:1fr; }
  .grid{ gap:1.6rem !important; }
  /* image galleries: shrink tiles and flow 2-4 per row instead of stacking full-width */
  .grid-4.gallery,.grid-3.gallery{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important; gap:.8rem !important; }
  .gallery .tile-label{ left:.7rem; bottom:.7rem; right:.7rem; font-size:.82rem; }
  .gallery .tile-label small{ font-size:.55rem; letter-spacing:.14em; margin-bottom:.3rem; }
  .gallery p{ font-size:.82rem; }
  /* Media Coverage — mobile only: one full, uncropped image at a time,
     horizontal swipe/scroll to the next instead of stacking vertically */
  .grid.mc-scroll{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    gap:0 !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
  }
  .mc-scroll::-webkit-scrollbar{ display:none; height:0; width:0; }
  .mc-scroll .tile{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; }
  /* "What We Manufacture" — locked 2x2 puzzle mosaic on mobile */
  .puzzle{ grid-template-columns:repeat(2,1fr) !important; gap:3px !important; }
  .puzzle .tile{ aspect-ratio:1/1; border-radius:0; border:none; }
  .puzzle .tile-label{ left:.6rem; bottom:.6rem; right:.6rem; font-size:.78rem; }
  .puzzle .tile-label small{ font-size:.52rem; letter-spacing:.12em; margin-bottom:.25rem; }
  .step{ grid-template-columns:48px 1fr; gap:1.5rem; }
  .step-dot{ width:48px; height:48px; font-size:.95rem; }
  .process-rail{ left:24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
  .footer-grid > div:first-child{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
  .card{ padding:2rem 1.5rem; }
  .hero-content{ padding-top:112px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .btn{ padding:.9rem 1.6rem; }
}
/* ---------- stacking-card sections: mobile fit ---------- */
@media(max-width:768px){
  .stack-section{
    padding-top:calc(var(--nav-h,90px) + 10px);
    padding-bottom:10px;
    justify-content:flex-start;
  }
  .stack-section > .wrap{ margin:0; }
  .stack-section h2{ font-size:1.5rem !important; margin-top:.4rem !important; }
  .stack-section p.lead,.stack-section .lead{ font-size:.95rem; }
  .stack-section .muted{ font-size:.88rem; margin-top:.8rem !important; }
  .stack-section .eyebrow{ font-size:.66rem; }
  .stack-section .grid{ gap:1rem !important; }
  .stack-section [style*="margin-top:3.6rem"]{ margin-top:1.2rem !important; }
  .stack-section [style*="margin-top:3rem"]{ margin-top:1.2rem !important; }
  .stack-section [style*="gap:5rem"]{ gap:1.6rem !important; }
  .stack-section .tile.wide{ aspect-ratio:16/7; }
  .stack-section .card{ padding:1.4rem 1.2rem; }
  .stack-section .card p{ font-size:.86rem; }
  .quote-block p{ font-size:1.05rem !important; }
}
/* ============================================================
   FORMS (contact page)
   ============================================================ */
.field{ margin-bottom:1.5rem; }
.field label{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.7rem; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-soft);
  color:var(--ivory); font-family:var(--sans); font-size:1rem; padding:.7rem 0; transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold-500); }
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{ border-color:#b5453f; }
.field select option{ background:var(--navy-900); }
.field textarea{ resize:vertical; min-height:110px; }
.field-phone{ display:flex; gap:.7rem; align-items:flex-end; }
.field-phone select{ flex:0 0 auto; width:auto; max-width:92px; }
.field-phone input{ flex:1 1 auto; min-width:0; }
/* map placeholder */
.map-block{
  height:340px; border:1px solid var(--line-soft); border-radius:4px; position:relative; overflow:hidden;
}
/* ============================================================
   INVESTOR RELATIONS — full-bleed image + glass content panel
   ============================================================ */
.ir-hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; text-align:center;
}
.ir-hero-bg{ position:absolute; inset:0; z-index:0; background:var(--ink); overflow:hidden; }
.ir-hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ir-hero-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
}
.ir-hero-bg video.is-ready{ opacity:1; }
.ir-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(22,20,15,.35) 0%, rgba(22,20,15,.55) 55%, rgba(22,20,15,.92) 100%);
}
.ir-hero-content{ position:relative; z-index:2; padding:6rem 0 4rem; }
.ir-hero-content .breadcrumb a{ color:var(--white); opacity:.7; transition:opacity .3s; }
.ir-hero-content .breadcrumb a:hover{ opacity:1; color:var(--gold-300); }
.ir-hero-content .breadcrumb span{ color:var(--gold-300); }
.ir-hero-content h1{
  color:var(--white); font-size:clamp(2.2rem,5vw,3.6rem); margin-top:.7rem;
  text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.ir-hero-content .ir-hero-sub{
  color:rgba(243,238,228,.85); font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6;
  max-width:640px; margin:1.1rem auto 0;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.ir-section{
  position:relative; z-index:2; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:6rem 0; margin-top:-4.5rem;
  background:url('https://images.unsplash.com/photo-1775163024488-e88e4a71179f?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
}
.ir-section .wrap{ width:100%; }
.ir-panel{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(22,20,15,.92) 0%, rgba(22,20,15,.88) 100%);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(243,238,228,.14);
  box-shadow:0 30px 80px -30px rgba(22,20,15,.6);
  padding:2.4rem clamp(1.2rem,3vw,2.8rem) 2.8rem;
}
.ir-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; padding-bottom:1.8rem; margin-bottom:1.8rem;
  border-bottom:1px solid rgba(243,238,228,.14);
}
.ir-tab{
  all:unset; cursor:pointer; box-sizing:border-box;
  padding:.65rem 1.3rem; border-radius:30px; border:1px solid rgba(243,238,228,.18);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(243,238,228,.75); transition:background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.ir-tab:hover{ border-color:var(--gold-300); color:var(--white); }
.ir-tab.active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--white); }
.ir-tab-panel{ display:none; }
.ir-tab-panel.active{ display:block; }
.ir-empty{
  padding:3.2rem 1rem; text-align:center; color:rgba(243,238,228,.6);
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  border:1px dashed rgba(243,238,228,.18); border-radius:10px;
}
.ir-coming-soon{
  color:var(--gold-300); font-style:normal; font-family:var(--sans);
  font-size:.8rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
}
.ir-accordion{ display:flex; flex-direction:column; gap:.7rem; }
.ir-item{
  border:1px solid rgba(243,238,228,.14); border-radius:10px; overflow:hidden;
  background:rgba(243,238,228,.04); transition:border-color .3s,background .3s;
}
.ir-item.open{ border-color:var(--gold-400); background:rgba(169,130,76,.12); }
.ir-item-head{
  all:unset; box-sizing:border-box; display:flex; width:100%; cursor:pointer;
  align-items:center; justify-content:space-between; padding:1.1rem 1.4rem;
  font-family:var(--sans); font-size:.94rem; color:var(--white);
}
.ir-item-head .chevron{
  transition:transform .3s var(--ease); color:var(--gold-300); font-size:.8rem;
  flex-shrink:0; margin-left:1rem;
}
.ir-item.open .ir-item-head .chevron{ transform:rotate(180deg); }
.ir-item-body{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-soft); }
.ir-item.open .ir-item-body{ max-height:600px; }
.ir-doc-table{ width:100%; border-collapse:collapse; }
.ir-doc-table th{
  text-align:left; padding:.9rem 1.4rem; font-family:var(--sans); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-300);
  border-top:1px solid rgba(243,238,228,.14); border-bottom:1px solid rgba(243,238,228,.14);
}
.ir-doc-table td{
  padding:1rem 1.4rem; font-size:.9rem; color:rgba(243,238,228,.92);
  border-bottom:1px solid rgba(243,238,228,.08);
}
.ir-doc-table tr:last-child td{ border-bottom:none; }
.ir-download-btn{
  display:inline-flex; align-items:center; gap:.5em; padding:.55rem 1.1rem; border-radius:4px;
  background:var(--gold-500); color:var(--white); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .3s,transform .3s;
}
.ir-download-btn:hover{ background:var(--gold-400); transform:translateY(-2px); }
@media(max-width:640px){
  .ir-panel{ padding:1.6rem 1.1rem 2rem; border-radius:12px; }
  .ir-section{ margin-top:-3rem; }
  .ir-doc-table{ font-size:.82rem; }
  .ir-doc-table th,.ir-doc-table td{ padding:.7rem .9rem; }
}
/* number badge for exhibitions timeline */
.year-badge{
  display:inline-block; font-family:var(--serif); font-size:.8rem; letter-spacing:.1em;
  color:var(--gold-400); border:1px solid var(--line); padding:.35rem .9rem; border-radius:20px;
}