/* ============================================================
   DIAMOND LABORATORIES — SHOWPIECE
   Brand palette only · Trajan + Hanken Grotesk
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dli-paper);
  color: var(--fg1);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { display: block; max-width: 100%; }

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .sp-cursor-dot, .sp-cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 12000;
    border-radius: 50%;
    transform: translate(-100px, -100px);
  }
  .sp-cursor-dot { width: 6px; height: 6px; background: var(--dli-ink); }
  .sp-cursor-ring {
    width: 36px; height: 36px;
    border: 1px solid var(--dli-steel);
    transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out),
                border-color 0.28s, background-color 0.28s, opacity 0.28s;
  }
  .sp-cursor-ring.is-hover {
    width: 64px; height: 64px;
    border-color: var(--dli-silver);
    background: rgba(172,188,201,0.12);
  }
  body.sp-on-dark .sp-cursor-dot { background: var(--dli-paper); }
  body.sp-on-dark .sp-cursor-ring { border-color: var(--dli-silver); }
}

/* ---------- preloader ---------- */
.sp-loader {
  position: fixed; inset: 0; z-index: 11000;
  background: var(--dli-ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}
.sp-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-loader-word {
  font-family: var(--font-display);
  font-size: clamp(17px, 3.4vw, 38px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  padding-left: 0.18em; /* optical balance for tracking */
  text-align: center;
}
.sp-loader-word .wd { display: inline-flex; white-space: nowrap; }
.sp-loader-word .gap { width: 0.6em; flex: none; }
.sp-loader-word .wd span {
  opacity: 0;
  transform: translateY(0.6em);
  animation: sp-letter-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes sp-letter-in {
  to { opacity: 1; transform: translateY(0); }
}
.sp-loader-bar {
  width: min(320px, 60vw); height: 1px;
  background: var(--border-on-dark);
  position: relative; overflow: hidden;
}
.sp-loader-bar i {
  position: absolute; inset: 0;
  background: var(--dli-silver);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.2s linear;
}
.sp-loader-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--dli-steel);
}

/* ---------- scroll progress ---------- */
.sp-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 10000; pointer-events: none;
}
.sp-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--dli-ink);
  transform-origin: left;
  transform: scaleX(0);
}

/* ---------- header ---------- */
.sp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 11000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  transition: background-color 0.4s, box-shadow 0.4s, padding 0.4s,
              transform 0.6s var(--ease-out), opacity 0.6s;
  transform: translateY(-12px); opacity: 0;
}
body.sp-ready .sp-header { transform: translateY(0); opacity: 1; }
.sp-header.is-scrolled {
  background: rgba(251,251,249,0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--dli-mist);
  padding-top: 14px; padding-bottom: 14px;
}
.sp-wordmark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--fg1);
}
.sp-wordmark img { width: 30px; height: auto; }
.sp-wordmark b {
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.sp-nav { display: flex; gap: clamp(16px, 2.6vw, 36px); align-items: center; }
.sp-nav a {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg2); text-decoration: none;
  position: relative; padding: 6px 0;
}
.sp-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--dli-ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.36s var(--ease-out);
}
.sp-nav a:hover { color: var(--fg1); }
.sp-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 720px) { .sp-nav { display: none; } }

/* burger + mobile menu */
.sp-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.sp-burger i {
  display: block; width: 26px; height: 2px;
  background: var(--dli-ink);
  transition: transform 0.4s var(--ease-out), background-color 0.3s;
}
body.menu-open .sp-burger i { background: var(--dli-paper); }
body.menu-open .sp-burger i:first-child { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .sp-burger i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
@media (max-width: 720px) { .sp-burger { display: flex; } }
body.menu-open .sp-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .sp-wordmark b { color: var(--fg-on-dark); }
body.menu-open { overflow: hidden; }
.sp-menu {
  position: fixed; inset: 0; z-index: 10500;
  background: var(--dli-ink);
  display: flex; flex-direction: column;
  justify-content: center; gap: 8px;
  padding: 96px 32px 48px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-out), visibility 0.6s;
}
body.menu-open .sp-menu { clip-path: inset(0); visibility: visible; }
.sp-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 9vw, 44px);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-on-dark); text-decoration: none;
  padding: 10px 0;
  display: flex; align-items: baseline; gap: 16px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: 0ms;
}
.sp-menu a small {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--dli-steel); letter-spacing: 0.1em;
}
body.menu-open .sp-menu a { opacity: 1; transform: translateY(0); transition-delay: calc(120ms + var(--i) * 60ms); }
.sp-menu-foot {
  margin: 32px 0 0;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dli-steel);
}

/* ---------- hero ---------- */
.sp-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}
.sp-hero-canvas {
  position: absolute; inset: 0; margin: auto;
  width: min(78vmin, 760px); height: min(78vmin, 760px);
  z-index: 0;
}
.sp-hero-inner { position: relative; z-index: 1; will-change: transform, opacity; }
.sp-hero-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 28px;
  display: inline-flex; align-items: center; gap: 18px;
}
.sp-hero-eyebrow::before, .sp-hero-eyebrow::after {
  content: ""; width: 56px; height: 1px; background: var(--dli-silver);
}
.sp-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 9.2vw, 132px);
  line-height: 1.04;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg1);
}
@media (max-width: 520px) {
  .sp-hero h1 { font-size: clamp(26px, 8vw, 44px); letter-spacing: 0.045em; }
  .sp-hero-eyebrow { letter-spacing: 0.2em; font-size: 11px; }
  .sp-hero-eyebrow::before, .sp-hero-eyebrow::after { width: 28px; }
}
.sp-hero h1 .ln { display: block; overflow: hidden; padding: 0.04em 0; }
.sp-hero h1 .ch { display: inline-block; will-change: transform; }
.sp-hero h1 .ch.sp-space { width: 0.38em; }
body.sp-anim .sp-hero h1 .ch {
  opacity: 0; transform: translateY(110%) rotate(4deg);
  animation: sp-rise 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--loader-hold, 0ms) + var(--i) * 34ms);
}
@keyframes sp-rise {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.sp-hero-sub {
  max-width: 460px; margin: 36px auto 0;
  font-size: 17px; color: var(--fg2);
}
body.sp-anim .sp-hero-sub,
body.sp-anim .sp-hero-eyebrow,
body.sp-anim .sp-hero-cue {
  opacity: 0; animation: sp-fade-up 1.2s var(--ease-out) forwards;
  animation-delay: calc(var(--loader-hold, 0ms) + 900ms);
}
body.sp-anim .sp-hero-eyebrow { animation-delay: calc(var(--loader-hold, 0ms) + 300ms); }
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.sp-hero-cue {
  position: absolute; bottom: 34px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg3);
}
.sp-hero-cue i {
  width: 1px; height: 48px; background: var(--dli-silver);
  position: relative; overflow: hidden; display: block;
}
.sp-hero-cue i::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%; background: var(--dli-ink);
  animation: sp-cue 2.2s var(--ease-standard) infinite;
}
@keyframes sp-cue {
  0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; }
}
@media (max-height: 640px) { .sp-hero-cue { display: none; } }

/* ---------- marquee ---------- */
.sp-marquee {
  border-top: 1px solid var(--dli-mist);
  border-bottom: 1px solid var(--dli-mist);
  padding: 26px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.sp-marquee-track {
  display: inline-flex; align-items: center; gap: 64px;
  padding-right: 64px;
  animation: sp-marquee 28s linear infinite;
  will-change: transform;
}
@keyframes sp-marquee {
  to { transform: translateX(-50%); }
}
.sp-marquee span {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg1);
}
.sp-marquee .dia {
  width: 9px; height: 9px; background: var(--dli-silver);
  transform: rotate(45deg); flex: none;
}

/* ---------- shared section bits ---------- */
.sp-section { padding: clamp(96px, 12vw, 168px) clamp(20px, 5vw, 64px); }
.sp-wrap { max-width: 1200px; margin: 0 auto; }
.sp-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg3); margin: 0 0 20px;
  display: flex; align-items: center; gap: 16px;
}
.sp-eyebrow::before {
  content: ""; width: 9px; height: 9px;
  background: var(--dli-silver); transform: rotate(45deg); flex: none;
}
.sp-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.14;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(34px); }
.rv.in {
  opacity: 1; transform: translateY(0);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* clip reveal for big headers */
.rv-clip { clip-path: inset(0 0 102% 0); }
.rv-clip.in {
  clip-path: inset(0 0 -10% 0);
  transition: clip-path 1.1s var(--ease-out), opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---------- heritage scrollytelling ---------- */
.sp-era { position: relative; height: 340vh; background: var(--dli-paper); }
.sp-era-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 0 24px;
}
.sp-era-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 24vw, 360px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--dli-mist-2);
  -webkit-text-stroke: 1px var(--dli-silver-2);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.sp-era-stages {
  position: relative;
  margin-top: -1.2em;
  width: 100%;
  max-width: 620px;
  min-height: 220px;
}
@media (max-width: 520px) {
  .sp-era-stages { min-height: 300px; margin-top: -0.4em; }
  .sp-era-stage p { font-size: 15.5px; }
}
.sp-era-stage {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.sp-era-stage.active { opacity: 1; transform: translateY(0); }
.sp-era-stage h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg1); margin: 0 0 16px;
}
.sp-era-stage p { color: var(--fg2); font-size: 17px; margin: 0; }
.sp-era-rail {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px;
}
.sp-era-rail i {
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid var(--dli-silver);
  transition: background-color 0.4s;
}
.sp-era-rail i.active { background: var(--dli-ink); border-color: var(--dli-ink); }

/* ---------- pillars ---------- */
.sp-pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--dli-mist);
  border: 1px solid var(--dli-mist);
  margin-top: 72px;
}
@media (max-width: 880px) { .sp-pillars-grid { grid-template-columns: 1fr; } }
.sp-pillar {
  background: var(--dli-paper);
  padding: clamp(36px, 4vw, 56px);
  position: relative; overflow: hidden;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background-color 0.5s var(--ease-out);
}
.sp-pillar::before {
  content: ""; position: absolute; top: -90px; right: -90px;
  width: 180px; height: 180px;
  background: var(--dli-mist-2);
  transform: rotate(45deg) scale(0);
  transition: transform 0.6s var(--ease-out), background-color 0.5s;
}
.sp-pillar:hover { background: var(--dli-white); }
.sp-pillar:hover::before { transform: rotate(45deg) scale(1); background: var(--dli-mist); }
.sp-pillar .num {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.2em;
  color: var(--fg4);
  position: absolute; top: 32px; left: clamp(36px, 4vw, 56px);
  transition: color 0.5s;
}
.sp-pillar:hover .num { color: var(--fg3); }
.sp-pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 14px; color: var(--fg1);
}
.sp-pillar p { margin: 0; color: var(--fg2); font-size: 15.5px; }
.sp-pillar .bar {
  width: 40px; height: 2px; background: var(--dli-silver);
  margin-bottom: 22px;
  transition: width 0.6s var(--ease-out), background-color 0.6s;
}
.sp-pillar:hover .bar { width: 80px; background: var(--dli-ink); }

/* ---------- capabilities (dark) ---------- */
.sp-dark {
  background: var(--dli-ink);
  color: var(--fg-on-dark);
}
.sp-dark .sp-eyebrow { color: var(--dli-steel); }
.sp-dark .sp-h2 { color: var(--fg-on-dark); }
.sp-lines { margin-top: 64px; border-top: 1px solid var(--border-on-dark); }
.sp-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center; gap: 24px;
  padding: 30px 8px;
  border-bottom: 1px solid var(--border-on-dark);
  position: relative;
  text-decoration: none;
  transition: padding-left 0.45s var(--ease-out), background-color 0.45s;
}
.sp-line:hover { padding-left: 28px; background: rgba(172,188,201,0.05); }
.sp-line .idx {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.14em;
  color: var(--dli-steel);
}
.sp-line .name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 44px);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-on-dark);
  transition: color 0.4s;
}
.sp-line:hover .name { color: var(--dli-white); }
.sp-line .tag {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-on-dark-2);
  text-align: right;
}
@media (max-width: 640px) {
  .sp-line { grid-template-columns: 48px 1fr; row-gap: 2px; padding: 24px 4px; }
  .sp-line .tag { grid-column: 2; text-align: left; font-size: 11px; }
}
.sp-line-preview {
  position: fixed; z-index: 8000;
  width: 280px; height: 190px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.sp-line-preview.show { opacity: 1; transform: scale(1); }
.sp-line-preview img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.sp-line-preview::after {
  content: ""; position: absolute; inset: 0;
  background: var(--dli-ink); mix-blend-mode: color;
}

/* ---------- stats ---------- */
.sp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border-on-dark);
  border-top: 1px solid var(--border-on-dark);
  margin-top: 96px;
}
@media (max-width: 880px) { .sp-stats { grid-template-columns: repeat(2, 1fr); } }
.sp-stat { background: var(--dli-ink); padding: 40px 28px 8px; }
.sp-stat .val {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.04em;
  color: var(--fg-on-dark);
  font-variant-numeric: tabular-nums;
}
.sp-stat .lbl {
  margin-top: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dli-steel);
}

/* ---------- products ---------- */
.sp-products-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.sp-products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 72px;
}
@media (max-width: 880px) { .sp-products-grid { grid-template-columns: 1fr; } }
.sp-product {
  background: var(--dli-white);
  border: 1px solid var(--dli-mist);
  transition: box-shadow 0.5s var(--ease-out), border-color 0.5s,
              transform 0.5s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.sp-product:hover {
  border-color: var(--dli-silver);
  box-shadow: var(--shadow-lg);
}
.sp-product .ph {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sp-product .ph img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%; object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(1.04);
  transition: filter 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: transform;
}
.sp-product .ph::after {
  content: ""; position: absolute; inset: 0;
  background: var(--dli-ink); mix-blend-mode: color;
  opacity: 1; transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.sp-product:hover .ph::after { opacity: 0; }
.sp-product:hover .ph img { filter: grayscale(0) contrast(1) brightness(1); }
/* touch devices: bloom to color when card is centered in view */
.sp-product.in-view .ph::after { opacity: 0; }
.sp-product.in-view .ph img { filter: grayscale(0) contrast(1) brightness(1); }
.sp-product .body { padding: 28px 28px 32px; }
.sp-product h3 {
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: 0.09em;
  text-transform: uppercase; margin: 0 0 10px; color: var(--fg1);
}
.sp-product p { margin: 0 0 18px; color: var(--fg2); font-size: 14.5px; }
.sp-product .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-product .chip {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg2);
  border: 1px solid var(--dli-mist);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ---------- CTA ---------- */
.sp-cta {
  background: var(--dli-ink);
  position: relative; overflow: hidden;
  text-align: center;
  padding: clamp(120px, 16vw, 220px) 24px;
}
.sp-cta-canvas {
  position: absolute; inset: 0; margin: auto;
  width: min(70vmin, 640px); height: min(70vmin, 640px);
  opacity: 0.5; z-index: 0;
}
.sp-cta-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.sp-cta-inner { position: relative; z-index: 1; }
.sp-cta .sp-h2 { color: var(--fg-on-dark); max-width: 880px; margin: 0 auto; }
.sp-cta .sp-eyebrow { justify-content: center; color: var(--dli-steel); }
.sp-cta-sub { color: var(--fg-on-dark-2); max-width: 520px; margin: 26px auto 0; }

.sp-btn {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 48px;
  padding: 18px 40px;
  background: var(--dli-paper); color: var(--dli-ink);
  font-family: var(--font-text);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: none; border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  transition: color 0.4s var(--ease-out);
  will-change: transform;
}
.sp-btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--dli-silver);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.sp-btn:hover::before { transform: translateY(0); }
.sp-btn span { position: relative; }
.sp-btn .dia {
  width: 8px; height: 8px; background: currentColor;
  transform: rotate(45deg); position: relative;
}

/* ---------- footer ---------- */
.sp-footer {
  background: var(--dli-ink);
  color: var(--fg-on-dark-2);
  padding: 0 clamp(20px, 5vw, 64px) 56px;
}
.sp-footer-rule {
  display: flex; align-items: center; gap: 24px;
  max-width: 1200px; margin: 0 auto 56px;
}
.sp-footer-rule::before, .sp-footer-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--border-on-dark);
}
.sp-footer-rule b {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.34em;
  color: var(--dli-steel); text-transform: uppercase;
  padding-left: 0.34em;
}
.sp-footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 760px) { .sp-footer-grid { grid-template-columns: 1fr; } }
.sp-footer h4 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dli-steel); margin: 0 0 18px;
}
.sp-footer p, .sp-footer a {
  font-size: 14px; color: var(--fg-on-dark-2);
  text-decoration: none; margin: 0 0 8px;
}
.sp-footer a { display: block; transition: color 0.3s; }
.sp-footer a:hover { color: var(--fg-on-dark); }
.sp-footer .mark { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sp-footer .mark img { width: 36px; }
.sp-footer .mark b {
  font-family: var(--font-display);
  color: var(--fg-on-dark); font-size: 15px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.sp-footer-base {
  max-width: 1200px; margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.08em; color: var(--dli-steel);
}

/* ---------- mission scrollytelling ---------- */
.sp-mission { height: 230vh; background: var(--dli-mist-2); }
.sp-mission-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 clamp(20px, 7vw, 120px);
  overflow: hidden;
}
.sp-mission-sticky .sp-eyebrow { justify-content: center; margin-bottom: 36px; }
.sp-mission-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.9vw, 52px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg1);
  max-width: 1040px;
  margin: 0;
  text-wrap: balance;
}
.sp-mission-text .w { opacity: 0.13; transition: opacity 0.3s linear; }
.sp-mission-text .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sp-mission { height: auto; padding: 96px 0; }
  .sp-mission-sticky { position: static; height: auto; }
  .sp-mission-text .w { opacity: 1; }
}

/* ---------- gallery collage ---------- */
.sp-gallery {
  padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 56px);
  background: var(--dli-paper);
}
.sp-gallery-track {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}
.sp-gallery figure {
  margin: 0; position: relative; overflow: hidden;
  background: var(--dli-mist-2);
}
.sp-gallery figure img {
  position: absolute; left: 0; top: -10%;
  width: 100%; height: 120%; object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(1.04);
  transition: filter 0.7s var(--ease-out);
  will-change: transform;
}
.sp-gallery figure.duo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--dli-ink); mix-blend-mode: color;
  opacity: 1; transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.sp-gallery figure.duo:hover::after, .sp-gallery figure.duo.in-view::after { opacity: 0; }
.sp-gallery figure.duo:hover img, .sp-gallery figure.duo.in-view img { filter: grayscale(0); }
.sp-gallery figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dli-paper);
  background: rgba(0,4,52,0.55);
  padding: 4px 10px;
  white-space: nowrap;
}
.sp-gallery .g1 { grid-column: 1 / span 4; height: 430px; }
.sp-gallery .g1 img { object-position: 78% center; }
.sp-gallery .g2 { grid-column: 5 / span 3; height: 300px; margin-top: 96px; }
.sp-gallery .g3 { grid-column: 8 / span 3; height: 360px; margin-top: 40px; }
.sp-gallery .g4 { grid-column: 11 / span 2; height: 240px; margin-top: 130px; }
@media (max-width: 860px) {
  .sp-gallery .g1 { grid-column: 1 / span 7; height: 300px; }
  .sp-gallery .g2 { grid-column: 8 / span 5; height: 240px; margin-top: 64px; }
  .sp-gallery .g3 { grid-column: 1 / span 5; height: 240px; margin-top: 18px; }
  .sp-gallery .g4 { grid-column: 6 / span 7; height: 220px; margin-top: 56px; }
}

/* ---------- product image slot (herbal placeholder) ---------- */
.ph-slot::after { display: none; }
.ph-slot image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.sp-gallery .ph-slot image-slot { position: absolute; inset: 0; }

/* ---------- process steps ---------- */
.sp-steps {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 1000px) { .sp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-steps { grid-template-columns: 1fr; } }
.sp-step {
  border-top: 1px solid var(--dli-silver-2);
  padding-top: 24px;
  position: relative;
}
.sp-step::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 40px; height: 1px; background: var(--dli-ink);
}
.sp-step .snum {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.18em;
  color: var(--fg3);
  display: block; margin-bottom: 14px;
}
.sp-step h3 {
  font-family: var(--font-display);
  font-size: 21px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fg1);
  margin: 0 0 10px;
}
.sp-step p { margin: 0; color: var(--fg2); font-size: 15px; }

/* ---------- standards (dark) ---------- */
.sp-standards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 80px;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 40px;
}
@media (max-width: 760px) { .sp-standards { grid-template-columns: 1fr; gap: 32px; } }
.sp-standard b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-dark);
  display: block; margin-bottom: 10px;
}
.sp-standard p { margin: 0; font-size: 14px; color: var(--fg-on-dark-2); }

/* ---------- trusted names strip ---------- */
.sp-names {
  margin-top: 88px;
  border-top: 1px solid var(--dli-mist);
  border-bottom: 1px solid var(--dli-mist);
  padding: 30px 12px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 20px 28px;
}
.sp-names .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg3);
  margin-right: 12px;
}
.sp-names .nm {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg1);
}
.sp-names .dia {
  width: 7px; height: 7px; background: var(--dli-silver);
  transform: rotate(45deg); flex: none;
}

/* ---------- careers ---------- */
.sp-careers { background: var(--bg-raised); border-top: 1px solid var(--dli-mist); }
.sp-careers-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) { .sp-careers-grid { grid-template-columns: 1fr; gap: 32px; } }
.sp-careers-line {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--fg1);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.sp-careers-sub { margin: 0; color: var(--fg2); max-width: 52ch; }
.sp-btn-ghost {
  background: transparent;
  color: var(--dli-ink);
  box-shadow: inset 0 0 0 1px var(--dli-ink);
  margin-top: 36px;
}
.sp-btn-ghost::before { background: var(--dli-ink); }
.sp-btn-ghost:hover { color: var(--dli-paper); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sp-marquee-track { animation: none; }
  .sp-hero-cue i::after { animation: none; }
  .rv-clip, .rv-clip.in { clip-path: none; }
  body.sp-anim .sp-hero h1 .ch,
  body.sp-anim .sp-hero-sub,
  body.sp-anim .sp-hero-eyebrow,
  body.sp-anim .sp-hero-cue {
    animation: none; opacity: 1; transform: none;
  }
  .rv { opacity: 1; transform: none; }
  .sp-loader { display: none; }
}