/* ---------- TOKENS ---------- */
:root {
  --bg: #f5f1e8;
  --bg-2: #ebe6d7;
  --paper: #ffffff;
  --ink: #15140f;
  --ink-2: #3a3830;
  --ink-3: #76726a;
  --ink-4: #a8a298;
  --line: #d9d3c2;
  --line-2: #ebe6d7;
  --accent: #1a47d6;
  --accent-soft: #dbe3fb;
  --gold: #d4a574;
  --rust: #c44536;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --pad: 32px;
  --max: 1480px;
}

[data-theme="dark"] {
  --bg: #100f0c;
  --bg-2: #1a1814;
  --paper: #1c1a16;
  --ink: #f0ebde;
  --ink-2: #c8c3b5;
  --ink-3: #8a857a;
  --ink-4: #555044;
  --line: #2a2620;
  --line-2: #1f1c17;
  --accent: #6b8aff;
  --accent-soft: #1d2547;
  --gold: #d4a574;
  --rust: #d96550;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* type */
.display { font-family: var(--serif); font-weight: 400; line-height: 0.94; letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.italic { font-style: italic; }

/* layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
section { position: relative; }

/* ---------- TOP BAR ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px;
  font-style: italic;
}
.topnav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.topnav a { color: var(--ink-2); transition: color .2s; }
.topnav a:hover { color: var(--ink); }
.topnav .sep { width: 1px; height: 14px; background: var(--line); }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  transition: transform .25s, background .25s;
}
.cta-btn:hover { transform: translateY(-1px); }
.cta-btn .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--ink-3); }
.theme-toggle svg { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.5; }

/* ---------- HERO ---------- */
.hero {
  padding: 140px var(--pad) 80px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.hero-meta {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: absolute; top: 110px; left: var(--pad); right: var(--pad);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-meta .group { display: flex; gap: 24px; }
.hero-meta b { color: var(--ink-2); font-weight: 500; }

.hero-headline {
  font-size: clamp(54px, 7vw, 132px);
  margin-top: 24px;
}
.hero-headline .line {
  display: block;
  clip-path: inset(-10% 0 -2% 0);
  white-space: nowrap;
}
.hero-headline .inner {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.05s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-headline .line:nth-child(2) .inner { animation-delay: .12s; }
.hero-headline .line:nth-child(3) .inner { animation-delay: .22s; }
.hero-headline em {
  font-style: italic;
  color: var(--accent);
  position: relative;
}
.hero-headline em::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 6%;
  height: 0.06em; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  animation: line-grow 1.4s .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rise {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
@keyframes line-grow {
  to { transform: scaleX(1); }
}

.hero-sub {
  margin-top: 36px;
  max-width: 460px;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  opacity: 0;
  animation: fade-up .9s 0.6s forwards;
}
.hero-actions {
  margin-top: 36px;
  display: flex; align-items: center; gap: 18px;
  opacity: 0; animation: fade-up .9s 0.75s forwards;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  transition: transform .25s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary .arrow {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  transition: transform .3s;
}
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 8px;
  color: var(--ink);
  font-size: 14px;
  border-bottom: 1px solid var(--ink);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* hero stack of samples (right side) */
.hero-stage {
  position: relative;
  height: 620px;
  display: grid;
  place-items: center;
}
.stack {
  position: relative;
  width: 360px; height: 480px;
  transform-style: preserve-3d;
}
.sample {
  position: absolute; inset: 0;
  border-radius: 6px;
  box-shadow: 0 22px 50px -22px rgba(20,16,8,0.35), 0 2px 6px rgba(20,16,8,0.06);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.sample:nth-child(1) { transform: rotate(-8deg) translate(-90px, 30px); }
.sample:nth-child(2) { transform: rotate(-3deg) translate(-40px, 10px); }
.sample:nth-child(3) { transform: rotate(2deg) translate(20px, -10px); }
.sample:nth-child(4) { transform: rotate(7deg) translate(80px, -30px); z-index: 2; }

/* animation only when .stack--animated is present (admin toggle) */
.stack--animated .sample {
  opacity: 0;
  animation: card-in 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.stack--animated .sample:nth-child(1) { animation-delay: 0.45s; }
.stack--animated .sample:nth-child(2) { animation-delay: 0.55s; }
.stack--animated .sample:nth-child(3) { animation-delay: 0.65s; }
.stack--animated .sample:nth-child(4) { animation-delay: 0.75s; }

@keyframes card-in {
  from { opacity: 0; transform: var(--from, translate(0, 80px)); }
  to   { opacity: 1; }
}
.stack:hover .sample:nth-child(1) { transform: rotate(-14deg) translate(-160px, 20px); }
.stack:hover .sample:nth-child(2) { transform: rotate(-6deg) translate(-70px, 0); }
.stack:hover .sample:nth-child(3) { transform: rotate(5deg) translate(70px, -10px); }
.stack:hover .sample:nth-child(4) { transform: rotate(12deg) translate(160px, -20px); }

/* sample card content */
.sample .tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.sample .num {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--mono); font-size: 9px; color: var(--ink-3);
}
.sample .label {
  position: absolute; bottom: 18px; left: 18px;
  font-family: var(--serif); font-size: 26px;
  line-height: 1;
}
.sample .label small {
  display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 8px;
}

/* sample art */
.art-poster { background: #c44536; }
.art-poster::before {
  content: "RE\ASORT"; white-space: pre;
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  color: #f5f1e8; font-size: 88px; line-height: .85;
  text-align: center;
}
.art-card { background: linear-gradient(180deg, #f5f1e8 50%, #15140f 50%); }
.art-card::before {
  content: "L V"; position: absolute;
  top: 30%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic;
  font-size: 76px; color: #15140f;
}
.art-card::after {
  content: "Marielle Voss · Founder";
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  color: #f5f1e8; text-transform: uppercase;
}
.art-box {
  background: #d4a574;
}
.art-box::before {
  content: ""; position: absolute; inset: 30px;
  border: 2px dashed #15140f55;
  border-radius: 4px;
}
.art-box::after {
  content: "FRAGILE / THIS WAY UP";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: #15140f;
}
.art-sticker {
  background: var(--bg);
  display: grid; place-items: center;
}
.art-sticker::before {
  content: ""; width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fbbf24, #1a47d6);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.art-sticker::after {
  content: "★ MADE WITH CARE ★";
  position: absolute;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: #15140f; z-index: 1;
}

/* color separation strip running along hero */
.cmyk-strip {
  position: absolute; bottom: 60px; left: var(--pad); right: var(--pad);
  display: flex; gap: 0;
  height: 14px;
  border-radius: 2px; overflow: hidden;
  opacity: 0; animation: fade-up 1s 1.2s forwards;
}
.cmyk-strip span { flex: 1; }
.cmyk-strip .c { background: #00aeef; }
.cmyk-strip .m { background: #ec008c; }
.cmyk-strip .y { background: #fff200; }
.cmyk-strip .k { background: #15140f; }
.cmyk-label {
  position: absolute; bottom: 30px; left: var(--pad);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase;
  opacity: 0; animation: fade-up 1s 1.3s forwards;
}
.cmyk-label-right {
  position: absolute; bottom: 30px; right: var(--pad);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase;
  opacity: 0; animation: fade-up 1s 1.3s forwards;
}

/* ---------- MARQUEE ---------- */
.marquee {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
}
.marquee-track {
  display: flex; gap: 64px;
  animation: scroll 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-track span {
  font-family: var(--serif); font-size: 36px; font-style: italic;
  color: var(--ink-2);
}
.marquee-track .dot {
  font-family: var(--sans); font-size: 28px; font-style: normal;
  color: var(--accent);
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ---------- SECTION HEAD ---------- */
.section {
  padding: 120px var(--pad);
}
/* Editorial-feature head: optional eyebrow, generous display title, a
   measured blurb directly underneath. Block layout — flows naturally at
   any width, no awkward floating columns. A subtle hairline divider sits
   between the title and the blurb for that print-shop, masthead feel. */
.section-head {
  display: block;
  max-width: 920px;
  margin: 0 0 72px;
  position: relative;
}
.section-head .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.section-head .section-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 14ch;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}
.section-head::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--ink);
  margin: 0 0 28px;
}
.section-blurb {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 58ch;
  margin: 0;
}

/* Keep the legacy .section-num invisible if anything stale references it */
.section-num { display: none; }

/* ---------- PRODUCTS GALLERY ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.product {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.product:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(20,16,8,0.25); }
.product .canvas {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.product .meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}
.product .name { font-family: var(--serif); font-size: 22px; }
.product .num { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .12em; }
.product .badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}
.product .view {
  position: absolute; bottom: 16px; right: 16px;
  width: 44px; height: 44px;
  background: var(--paper); color: var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.7);
  transition: opacity .3s, transform .3s;
}
.product:hover .view { opacity: 1; transform: scale(1); }
.product .view svg { width: 16px; height: 16px; }

.p-poster { grid-column: span 5; }
.p-card { grid-column: span 4; }
.p-box { grid-column: span 3; }
.p-canvas { grid-column: span 4; }
.p-merch { grid-column: span 4; }
.p-sticker { grid-column: span 4; }
.p-brochure { grid-column: span 6; }
.p-signage { grid-column: span 6; }

/* product art renderings (CSS) */
.pa { position: absolute; inset: 0; display: grid; place-items: center; }
img.pa-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-poster { background: #15140f; }
.pa-poster::before {
  content: "VOSS"; font-family: var(--serif); font-style: italic;
  font-size: 180px; color: #f5f1e8; line-height: 0.85;
}
.pa-poster::after {
  content: "Spring Collection · 2026";
  position: absolute; bottom: 30px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: #d4a574; text-transform: uppercase;
}

.pa-card { background: linear-gradient(135deg, #f5f1e8 0%, #ebe6d7 100%); }
.pa-card::before {
  content: ""; width: 180px; height: 110px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: -10px 14px 0 -2px #d4a574, -18px 26px 0 -4px #1a47d6;
}
.pa-card::after {
  content: "M·V"; position: absolute;
  font-family: var(--serif); font-style: italic;
  font-size: 38px; color: var(--ink);
  margin-top: -8px;
}

.pa-box { background: #d4a574; }
.pa-box::before {
  content: ""; width: 65%; height: 60%;
  background:
    linear-gradient(135deg, transparent 49%, #15140f22 49% 51%, transparent 51%),
    #c89763;
  border: 1px solid #15140f33;
  transform: perspective(400px) rotateX(20deg) rotateY(-15deg);
  border-radius: 2px;
}
.pa-box::after {
  content: "LV"; position: absolute;
  font-family: var(--serif); font-style: italic;
  font-size: 56px; color: #15140f;
  transform: perspective(400px) rotateX(20deg) rotateY(-15deg) translateY(-6px);
}

.pa-canvas { background: #2a2e1f; }
.pa-canvas::before {
  content: ""; width: 70%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 30% 30%, #d4a574 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, #c44536 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, #1a47d6 0%, transparent 35%),
    #f5f1e8;
  border: 8px solid #f5f1e8;
  box-shadow: 0 0 0 1px #15140f, 0 18px 30px -10px rgba(0,0,0,0.4);
}

.pa-merch { background: #ebe6d7; }
.pa-merch::before {
  content: ""; width: 55%; height: 70%;
  background: var(--ink);
  clip-path: polygon(0 12%, 18% 12%, 26% 0%, 74% 0%, 82% 12%, 100% 12%, 95% 30%, 85% 28%, 85% 100%, 15% 100%, 15% 28%, 5% 30%);
}
.pa-merch::after {
  content: "LV"; position: absolute;
  font-family: var(--serif); font-style: italic;
  font-size: 42px; color: #d4a574;
  margin-top: 30px;
}

.pa-sticker {
  background: #f5f1e8;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(20,16,8,0.04) 12px 13px);
}
.pa-sticker::before {
  content: ""; width: 220px; height: 220px;
  border-radius: 50%;
  background: #1a47d6;
  position: absolute;
}
.pa-sticker::after {
  content: "GOOD\A INK"; white-space: pre;
  position: absolute;
  font-family: var(--serif); font-style: italic;
  font-size: 44px; color: #fbbf24;
  text-align: center; line-height: .9;
  z-index: 1;
}

.pa-brochure { background: #15140f; }
.pa-brochure::before {
  content: ""; width: 70%; height: 75%;
  background: linear-gradient(90deg, #f5f1e8 0% 33%, #c44536 33% 66%, #15140f 66% 100%);
  border-left: 1px solid #15140f;
  position: relative;
  box-shadow:
    inset 33.3% 0 0 -1px #00000022,
    inset 66.6% 0 0 -1px #00000022;
}
.pa-brochure::after {
  content: "TRIFOLD · 100LB MATTE";
  position: absolute; bottom: 30px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: #f5f1e8aa;
}

.pa-signage { background: #1a47d6; }
.pa-signage::before {
  content: "OPEN"; font-family: var(--serif); font-style: italic;
  font-size: 200px; color: #f5f1e8; line-height: 0.85;
  letter-spacing: -0.04em;
}
.pa-signage::after {
  content: "Acrylic · Standoffs · 24×36";
  position: absolute; bottom: 30px; right: 30px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: #fbbf24; text-transform: uppercase;
}

/* ---------- CAPABILITIES ---------- */
.caps-section { background: var(--bg-2); }
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.cap {
  padding: 56px 36px 48px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s;
}
.cap:hover { background: var(--bg); }
.cap:nth-child(3n) { border-right: none; }
.cap-num {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .14em;
}
.cap-icon {
  margin: 20px 0 36px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: var(--ink);
}
.cap-icon svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.cap h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.05; margin-bottom: 12px; }
.cap p { color: var(--ink-2); font-size: 14px; max-width: 320px; }

/* ---------- MATERIALS — Specimen library ---------- */
/* A printer's swatch-book on screen. Each "specimen" is a tall portrait
   plate; image when uploaded, otherwise a textured fallback swatch.
   The frame has an inner hairline + soft cast shadow, evoking a paper
   sample mounted on cream board. */
.materials-section { background: var(--bg); }

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.specimen {
  display: flex;
  flex-direction: column;
  cursor: default;
}
.specimen-frame {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--paper);
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(20,16,8,0.08),
    0 1px 0 var(--line-2),
    0 22px 32px -28px rgba(20,16,8,0.35);
  transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s;
}
.specimen:hover .specimen-frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(20,16,8,0.08),
    0 1px 0 var(--line-2),
    0 38px 56px -28px rgba(20,16,8,0.45);
}
.specimen-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.specimen:hover .specimen-img { transform: scale(1.04); }
.specimen-fallback {
  position: absolute; inset: 0;
}
.specimen-fallback::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(20,16,8,0.10), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(20,16,8,0.04) 0px,
      rgba(20,16,8,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.specimen-tag {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  padding: 0;
  background: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.specimen-tag::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: var(--ink-3);
  margin-bottom: 4px;
  margin-left: auto;
}
.specimen-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  position: relative;
}
.specimen-meta::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 24px; height: 1px; background: var(--ink);
}
.specimen-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.specimen-spec {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.specimen-spec span + span::before {
  content: "·";
  margin-right: 14px; margin-left: -8px;
  color: var(--ink-3);
}

/* ---------- FINISHING — Hand plates ---------- */
/* Darker, larger plates. The section sits on ink — so the eye reads
   the technique as a tactile object photographed under a lamp. Gold
   index marker (F.01) is the print-shop tell. */
.finishing-section {
  background: var(--bg);
  color: var(--ink);
}
.finishing-section .section-eyebrow { color: var(--gold); }
.finishing-section .section-eyebrow .dot { background: var(--gold); }
.finishing-section .section-title { color: var(--ink); }
.finishing-section .section-title em { color: var(--gold); font-style: italic; }
.finishing-section .section-head::after { background: var(--gold); opacity: 0.6; }
.finishing-section .section-blurb { color: var(--ink-2); }

.technique-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 24px;
}
.technique {
  display: flex;
  flex-direction: column;
}
.technique-plate {
  position: relative;
  aspect-ratio: 5/4;
  background: #1c1a14;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 30px 50px -36px rgba(0,0,0,0.6);
  transition: transform .6s cubic-bezier(.2,.6,.2,1), box-shadow .6s;
}
.technique:hover .technique-plate {
  transform: translateY(-8px);
  box-shadow:
    inset 0 0 0 1px rgba(212,165,116,0.25),
    0 24px 60px -30px rgba(212,165,116,0.18),
    0 48px 70px -36px rgba(0,0,0,0.7);
}
.technique-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.technique:hover .technique-img { transform: scale(1.05); }
.technique-fallback {
  position: absolute; inset: 0;
}
.technique-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.45), transparent 55%);
}
.technique-index {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
}
.technique-index::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  margin-bottom: 4px;
}
.technique-body {
  padding: 18px 2px 0;
  position: relative;
}
.technique-body::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--gold);
}
.technique-name {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.technique-spec {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 32ch;
}

/* Work — image-led card grid (visitor /work) */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.work-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1714;
}
.work-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-fallback {
  width: 100%;
  height: 100%;
}
.work-body { display: flex; flex-direction: column; gap: 4px; }
.work-name { font-size: 1.05rem; margin: 0; }
.work-cat  { font-size: 0.82rem; opacity: 0.68; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.work-desc { font-size: 0.92rem; opacity: 0.82; margin: 0; line-height: 1.5; }

/* Testimonials — text-only quote grid (visitor /testimonials) */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.testimonial-card {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-quote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  font-style: italic;
}
.testimonial-cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
}
.testimonial-author { font-weight: 600; }
.testimonial-role   { opacity: 0.7; }

/* ---------- PROCESS ---------- */
.process-section { background: var(--bg); }
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}
.process::before {
  content: ""; position: absolute;
  top: 30px; left: 5%; right: 5%;
  height: 1px; background: var(--line);
}
.step {
  position: relative;
  padding-top: 70px;
}
.step .dot {
  position: absolute; top: 22px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--ink);
}
.step:nth-child(1) .dot { background: var(--ink); }
.step .num {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .14em;
  margin-bottom: 14px;
}
.step h4 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 14px; }
.step .duration {
  margin-top: 18px;
  font-family: var(--mono); font-size: 10px;
  color: var(--accent); letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- WORK ---------- */
.work-section { background: var(--bg-2); }
.cases {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
.case {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}
.case .canvas {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.case .info {
  padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
}
.case h3 { font-family: var(--serif); font-size: 32px; font-weight: 400; }
.case .meta-row { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.case .read {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.case-1 { grid-column: span 2; }
.case-1 .canvas { aspect-ratio: 21/9; }

.case-art-1 {
  background:
    radial-gradient(ellipse at 30% 40%, #c44536 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, #1a47d6 0%, transparent 50%),
    #f5f1e8;
  display: grid; place-items: center;
}
.case-art-1::before {
  content: "Maison Voss"; font-family: var(--serif); font-style: italic;
  font-size: 120px; color: #15140f;
  letter-spacing: -0.03em;
}
.case-art-2 {
  background: #15140f;
  display: grid; place-items: center;
}
.case-art-2::before {
  content: ""; width: 60%; aspect-ratio: 1;
  background:
    repeating-linear-gradient(0deg, #d4a574 0 8px, transparent 8px 32px),
    repeating-linear-gradient(90deg, #c44536 0 8px, transparent 8px 32px),
    #f5f1e8;
  border-radius: 50%;
}
.case-art-3 {
  background: #d4a574;
  display: grid; place-items: center;
}
.case-art-3::before {
  content: "Lumen"; font-family: var(--serif);
  font-size: 88px; color: #15140f;
  letter-spacing: -0.02em;
}
.case-art-3::after {
  content: ""; width: 8px; height: 60%; background: #15140f;
  position: absolute; left: 16%; top: 20%;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials-section { background: var(--bg); }
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote {
  padding: 56px 40px;
  border-right: 1px solid var(--line);
  position: relative;
}
.quote:last-child { border-right: none; }
.quote .qmark {
  font-family: var(--serif); font-size: 88px; line-height: 0.5;
  color: var(--accent); margin-bottom: 10px;
  font-style: italic;
}
.quote p {
  font-family: var(--serif); font-size: 22px;
  line-height: 1.3; color: var(--ink);
  margin-bottom: 36px;
}
.quote .author {
  display: flex; align-items: center; gap: 14px;
}
.quote .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 16px;
}
.quote .who { font-size: 13px; }
.quote .who small {
  display: block; color: var(--ink-3); font-size: 11px;
  font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px;
}

/* ---------- INQUIRY FORM ---------- */
.inquiry-section {
  padding: 120px var(--pad) 80px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.inquiry-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.2fr;
  gap: 80px;
  max-width: var(--max);
  margin: 0 auto;
}
.inquiry-left h2 {
  font-family: var(--serif); font-size: clamp(48px, 5.5vw, 84px);
  font-weight: 400; line-height: 1; letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.inquiry-left h2 em { font-style: italic; color: var(--accent); }
.inquiry-left p {
  color: var(--ink-2); font-size: 16px; line-height: 1.5;
  max-width: 380px; margin-bottom: 36px;
}
.inquiry-contacts {
  display: flex; flex-direction: column; gap: 22px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  max-width: 380px;
}
.inquiry-contacts .row {
  display: flex; justify-content: space-between; align-items: center;
}
.inquiry-contacts .row b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.inquiry-contacts .row span { font-family: var(--serif); font-size: 18px; }

form.inquiry {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 40px;
}
.form-step {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.form-step .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: span 2; }
.field label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 90px; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2376726a' stroke-width='1.2' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; }

.field-section {
  grid-column: span 2;
  margin-top: 18px; padding-top: 28px;
  border-top: 1px dashed var(--line);
}
.field-section-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 16px;
}
.checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.2px solid var(--ink-4);
  transition: all .2s;
}
.checkbox:has(input:checked) {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.checkbox:has(input:checked) .dot {
  background: var(--accent); border-color: var(--accent);
}

.file-drop {
  grid-column: span 2;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2);
  cursor: pointer;
  transition: all .2s;
}
.file-drop:hover { border-color: var(--ink-3); background: var(--bg); }
.file-drop .left { display: flex; align-items: center; gap: 14px; }
.file-drop .icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
}
.file-drop .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.file-drop b { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.file-drop small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.file-drop .hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase;
}

.form-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-actions small {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase;
}
.submit-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--bg);
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 14px;
  transition: transform .25s;
}
.submit-btn:hover { transform: translateY(-1px); }

/* ---------- FOOTER ---------- */
footer {
  background: var(--ink); color: var(--bg);
  padding: 80px var(--pad) 32px;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
}
footer h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
  margin-bottom: 22px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer ul a { color: #c8c3b5; font-size: 14px; transition: color .2s; }
footer ul a:hover { color: var(--bg); }
.footer-brand .big {
  font-family: var(--serif); font-size: 64px; line-height: 1;
  margin-bottom: 16px;
}
.footer-brand .big em { color: var(--gold); font-style: italic; }
.footer-brand p { color: #c8c3b5; font-size: 14px; max-width: 280px; }
.footer-bottom {
  max-width: var(--max); margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid #2a2620;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-4); text-transform: uppercase;
}

/* ---------- ANIMATIONS ON SCROLL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .3s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .42s; }

/* responsive */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 120px; }
  .hero-stage { height: 480px; }
  .products-grid > * { grid-column: span 6 !important; }
  .caps { grid-template-columns: 1fr 1fr; }
  .cap:nth-child(3n) { border-right: 1px solid var(--line); }
  .cap:nth-child(2n) { border-right: none; }
  .specimen-grid { grid-template-columns: repeat(3, 1fr); }
  .technique-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr 1fr; }
  .process::before { display: none; }
  .cases { grid-template-columns: 1fr; }
  .case-1 { grid-column: span 1; }
  .quotes { grid-template-columns: 1fr; }
  .quote { border-right: 0; border-bottom: 1px solid var(--line); }
  .inquiry-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  :root { --pad: 20px; }
  .topnav .links { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: span 1; }
  .form-grid > .field-section { grid-column: span 1; }
  .form-grid > .file-drop { grid-column: span 1; flex-direction: column; gap: 16px; text-align: center; }
  .products-grid > * { grid-column: span 1 !important; }
  .caps { grid-template-columns: 1fr; }
  .cap { border-right: none !important; }
  .specimen-grid { grid-template-columns: repeat(2, 1fr); }
  .technique-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-meta { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-blurb { justify-self: start; }
}

/* ============ TEASER GRID (home) ============ */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.teaser-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: 28px 24px 24px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  min-height: 220px;
  transition: background .2s, transform .2s;
  position: relative;
}
.teaser-card:hover { background: var(--bg-2); }
.teaser-card:hover .tarrow { transform: translateX(6px); color: var(--accent); }
.teaser-card .tnum {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; color: var(--gold);
}
.teaser-card .tlabel {
  font-family: var(--serif);
  font-size: 28px; font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.teaser-card .tdesc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 28ch;
}
.teaser-card .tarrow {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-2);
  transition: transform .25s, color .25s;
  justify-self: end;
}
@media (max-width: 1100px) {
  .teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .teaser-grid { grid-template-columns: 1fr; }
  .teaser-card { min-height: 160px; }
}

/* aria-current marker for current nav link */
.topnav a[aria-current="page"] { color: var(--ink); }
.topnav a[aria-current="page"]::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  margin-top: 4px;
}

/* ============================================================
   RESPONSIVE — mobile-first refinements layered on top.
   Breakpoints: 1024 (tablet), 760 (large phone), 460 (phone)
   Preserves the editorial aesthetic at every width.
   ============================================================ */

/* Lock horizontal scroll globally — no swipe-left/right empty space ever. */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
.topbar-tools { display: flex; gap: 10px; align-items: center; }

/* ---------- Topbar scroll hide/reveal ----------
   Slow fade + slide on scroll-down, gentle return on scroll-up.
   Kept transform-only (cheap on the GPU). Drawer-open state always
   wins, so the hamburger never gets stranded off-screen. */
.topbar {
  transition:
    transform .45s cubic-bezier(.55, .08, .18, 1),
    opacity .35s ease-out;
  will-change: transform, opacity;
}
body.nav-hidden .topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body.nav-open .topbar {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hamburger button — hidden on desktop, revealed at <=760 */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .15s, background .15s;
}
.nav-toggle:hover { border-color: var(--ink-3); }
.nav-toggle .nav-toggle-bars {
  display: inline-grid;
  gap: 4px;
  width: 18px;
}
.nav-toggle .nav-toggle-bars i {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
body.nav-open .nav-toggle .nav-toggle-bars i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
body.nav-open .nav-toggle .nav-toggle-bars i:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .nav-toggle-bars i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ====================== Tablet ====================== */
@media (max-width: 1024px) {
  :root { --pad: 32px; }
  .hero .display, .hero-headline { font-size: clamp(48px, 8vw, 96px) !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .specimen-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .technique-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; }
}

/* ====================== Phone ====================== */
@media (max-width: 760px) {
  :root { --pad: 20px; }

  /* Fixed topbar — always pinned to the viewport top so it never scrolls away.
     Safe-area padding handles notched phones. Full-width left:0/right:0 means
     the banner spans edge-to-edge with no horizontal seam. */
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    inset: 0 0 auto 0 !important;
    padding: 14px var(--pad) !important;
    padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 100 !important;
    border-bottom: 1px solid var(--line);
  }

  /* Drawer = full-viewport overlay. Uses 100dvh so iOS URL bar can't
     clip the bottom. The padding-top reserves space for the fixed topbar
     (sits above the drawer via z-index). */
  .topnav.links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 96px var(--pad) 48px !important;
    gap: 4px !important;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4,.05,.1,1), opacity .25s;
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topnav.links a {
    font-family: var(--serif);
    font-size: 32px !important;
    line-height: 1.15;
    color: var(--ink);
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-2);
    flex-shrink: 0;
  }
  .topnav.links a:last-of-type { border-bottom: 0; }
  body.nav-open .topnav.links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: inline-flex; }
  .cta-btn { display: none; }   /* CTA lives inside the drawer / page CTAs */
  .theme-toggle { width: 38px; height: 38px; }

  /* Hero — stack everything, scale type, hide the sample stack */
  .hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 100px var(--pad) 56px !important;
    min-height: auto !important;
  }
  .hero-headline, .hero h1.display {
    font-size: clamp(46px, 13vw, 72px) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
  }
  .hero-sub { font-size: 15px !important; max-width: 100% !important; }
  .hero-stage { display: none !important; }
  .hero-meta {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    font-size: 10px !important;
  }
  .hero-meta .group { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 20px !important;
  }
  .cmyk-label, .cmyk-label-right { display: none !important; }
  .cmyk-strip { width: 100% !important; right: auto !important; }

  /* Section headers everywhere — stack the eyebrow + title + blurb.
     Top padding clears the fixed topbar (~70px). */
  .section { padding: 104px var(--pad) 64px !important; }
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .section-title, .section h2.display, .section h2.section-title {
    font-size: clamp(40px, 10vw, 64px) !important;
    line-height: 1.02 !important;
  }
  .section-blurb { font-size: 14px !important; max-width: 100% !important; }
  .section-num { font-size: 10px !important; }

  /* All grids → single column on phones */
  .products-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .features-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .specimen-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 14px !important; }
  .technique-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .teaser-grid { grid-template-columns: 1fr !important; }
  .teaser-card {
    min-height: 140px !important;
    padding: 22px 20px !important;
  }
  .teaser-card .tlabel { font-size: 24px !important; }

  /* Contact form — full-width inputs, larger taps */
  .inquiry-section { padding: 104px var(--pad) 64px !important; }
  .inquiry-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .inquiry-left h2.display { font-size: clamp(40px, 10vw, 60px) !important; }
  .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .field.full { grid-column: span 1 !important; }
  .form-grid > .field-section { grid-column: span 1 !important; margin-top: 8px; }
  .field input, .field select, .field textarea {
    padding: 14px 14px !important;
    font-size: 16px !important;  /* prevents iOS auto-zoom */
  }
  .field textarea { min-height: 120px; }
  .file-drop {
    grid-column: span 1 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
    padding: 24px !important;
    gap: 14px !important;
  }
  .file-drop .left { flex-direction: column; gap: 10px; align-items: center; }
  .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .submit-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px !important;
    font-size: 14px !important;
  }
  .inquiry-contacts .row {
    grid-template-columns: 70px 1fr !important;
    font-size: 13px !important;
  }
  .checkboxes {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Marquee — quiet it down */
  .marquee { padding: 18px 0 !important; }
  .marquee-track span { font-size: 22px !important; }

  /* Footer — single column */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 56px var(--pad) !important;
  }
  .footer-brand .big { font-size: 48px !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 20px var(--pad) !important;
  }
}

/* ====================== Small phone ====================== */
@media (max-width: 460px) {
  :root { --pad: 16px; }
  .hero { padding-top: 90px !important; }
  .hero-headline, .hero h1.display { font-size: clamp(40px, 14vw, 56px) !important; }
  .section-title { font-size: clamp(36px, 11vw, 52px) !important; }
  .brand span:not(.brand-mark) { font-size: 16px; }
  .teaser-card .tlabel { font-size: 22px !important; }
  .footer-brand .big { font-size: 40px !important; }
  .marquee-track span { font-size: 18px !important; }
}

/* Reduced motion — kill non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------- CULTURE ---------- */
.culture-section { padding: 96px 0 120px; position: relative; overflow: hidden; }
.culture-section .wrap { position: relative; z-index: 1; }
.culture-section .section-head { max-width: 720px; margin-bottom: 48px; }

/* Editorial collage grid — asymmetric, parallax, oversized serif index */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 48px;
  align-items: start;
  position: relative;
  padding: 24px 0 56px;
}

.ed-frame {
  position: relative;
  will-change: transform;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.ed-frame--lg   { grid-column: span 3; margin-top: 0; }
.ed-frame--por  { grid-column: span 3; margin-top: 36px; }
.ed-frame--sm   { grid-column: span 3; margin-top: -8px; }
.ed-frame--wide { grid-column: span 3; margin-top: 22px; }

.ed-frame .ed-image {
  position: relative; z-index: 1;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: zoom-in;
  box-shadow: 0 18px 36px -26px rgba(20, 18, 12, 0.4);
}
.ed-frame--lg   .ed-image { aspect-ratio: 4 / 3; }
.ed-frame--por  .ed-image { aspect-ratio: 4 / 5; }
.ed-frame--sm   .ed-image { aspect-ratio: 1 / 1; }
.ed-frame--wide .ed-image { aspect-ratio: 16 / 9; }
[data-theme="dark"] .ed-frame .ed-image { box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.8); }

.ed-frame .ed-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 720ms cubic-bezier(.2,.7,.2,1), filter 480ms ease;
}

.ed-frame:hover { transform: translateY(-10px) rotate(-1.5deg); }
.ed-frame:nth-child(even):hover { transform: translateY(-10px) rotate(1.5deg); }
.ed-frame:hover .ed-image img { transform: scale(1.05); }

.ed-num {
  position: absolute;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-size: 120px;
  color: var(--line);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: color 360ms ease, opacity 360ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.ed-frame--lg   .ed-num { top: -42px; left: -16px; }
.ed-frame--por  .ed-num { top: -48px; right: -14px; }
.ed-frame--sm   .ed-num { bottom: -52px; left: -22px; font-size: 140px; }
.ed-frame--wide .ed-num { top: -38px; left: -22px; font-size: 140px; }
.ed-frame:hover .ed-num {
  color: var(--accent-soft);
  opacity: 0.95;
  transform: translateY(-4px);
}
[data-theme="dark"] .ed-num { color: var(--line); opacity: 0.4; }
[data-theme="dark"] .ed-frame:hover .ed-num { color: var(--accent-soft); opacity: 0.7; }

.ed-caption {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.ed-caption-mark { color: var(--accent); font-weight: 500; }
.ed-caption-text { position: relative; padding-bottom: 4px; }
.ed-caption-text::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0; background: var(--ink-2);
  transition: width 360ms cubic-bezier(.2,.7,.2,1);
}
.ed-frame:hover .ed-caption-text::after { width: 100%; }

@media (max-width: 1100px) {
  .ed-frame--lg, .ed-frame--por, .ed-frame--sm, .ed-frame--wide {
    grid-column: span 4;
  }
}

@media (max-width: 800px) {
  .editorial-grid { row-gap: 40px; column-gap: 16px; }
  .ed-frame--lg, .ed-frame--por, .ed-frame--sm, .ed-frame--wide {
    grid-column: span 6;
    margin-top: 0;
  }
  .ed-frame--por { margin-top: 24px; }
  .ed-num { font-size: 96px; }
  .ed-frame--lg .ed-num   { top: -34px; left: -10px; }
  .ed-frame--por .ed-num  { top: -38px; right: -8px; }
  .ed-frame--sm .ed-num   { bottom: -38px; left: -12px; font-size: 110px; }
  .ed-frame--wide .ed-num { top: -32px; left: -14px; font-size: 110px; }
}

@media (max-width: 480px) {
  .culture-section { padding: 56px 0 72px; }
  .editorial-grid { padding: 16px 0 32px; row-gap: 32px; }
  .ed-frame--lg, .ed-frame--por, .ed-frame--sm, .ed-frame--wide {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .ed-frame--lg .ed-image,
  .ed-frame--por .ed-image,
  .ed-frame--sm .ed-image,
  .ed-frame--wide .ed-image { aspect-ratio: 4 / 3; }
  .ed-num { font-size: 88px; }
}

/* Lightbox */
.culture-lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.culture-lightbox[data-open] { opacity: 1; pointer-events: auto; }
.culture-lightbox[hidden] { display: none; }
.culture-lightbox .lightbox-figure {
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  transform: scale(.96);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.culture-lightbox[data-open] .lightbox-figure { transform: scale(1); }
.culture-lightbox .lightbox-figure img {
  max-width: 90vw; max-height: 78vh; object-fit: contain;
  background: var(--paper); padding: 14px; border: 1px solid var(--line);
}
.culture-lightbox .lightbox-figure figcaption {
  color: var(--bg); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.culture-lightbox .lightbox-close,
.culture-lightbox .lightbox-prev,
.culture-lightbox .lightbox-next {
  position: absolute; color: var(--bg);
  font-size: 28px; line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent);
  border-radius: 50%;
  transition: background 200ms ease;
}
.culture-lightbox .lightbox-close { top: 24px; right: 24px; }
.culture-lightbox .lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.culture-lightbox .lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.culture-lightbox button:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .ed-frame,
  .ed-frame .ed-image img,
  .ed-num,
  .culture-lightbox,
  .culture-lightbox .lightbox-figure { transition: none !important; }
  .ed-frame:hover,
  .ed-frame:nth-child(even):hover { transform: none; }
  .ed-frame:hover .ed-image img { transform: none; }
  .ed-frame:hover .ed-num { transform: none; }
}

/* ============ CAPABILITIES (visitor) ============
   Image-first cards with a swatch fallback. The index badge sits in the
   top-left of the thumb so the title below isn't competing with it. */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.capability-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e3ddca);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(20, 16, 8, 0.25);
}
.capability-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.capability-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.capability-swatch-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.32), transparent 58%);
}
.capability-index {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.capability-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.capability-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.capability-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.capability-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 20px; }
  .capability-thumb  { aspect-ratio: 3 / 2; }
}