/* ============================================================
   ANTWERP ATELIERS — Mockup
   Editorial atelier · Private + Professional
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --ink-soft: #1a1a1a;
  --ink-line: #262626;
  --bone: #f5f1ea;
  --bone-soft: #ebe6dc;
  --paper: #fafaf7;
  --gold: #c9a961;       /* decorative gold, AA only on dark bg (8.80:1 on ink) */
  --gold-deep: #a88c4a;  /* legacy hover state — fails AA on bone/paper */
  --gold-text: #7d6633;  /* readable gold for body text on bone/paper — AA 4.88:1 */
  --aubergine: #3a1c2e;
  --muted: #8a8478;
  --muted-readable: #6b6657; /* AA-passing muted for body text on light bg (5.09:1 on bone) */
  --line: #e3ddd2;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-weight: 300;
  letter-spacing: 0.01em;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Use readable gold on light backgrounds. Dark-bg sections set their own
     color inline or via `.eyebrow.muted`. */
  color: var(--gold-text);
  margin-bottom: 16px;
}

/* Dark-bg sections (`.split.gold`, `.pd-process .section-pad` etc) explicitly
   request the brand-bright gold for visual punch — it's only the small-text
   on-bone case that fails contrast. */
.split .eyebrow,
.aubergine .eyebrow,
section[style*="--ink"] .eyebrow,
[style*="background:var(--ink)"] .eyebrow {
  color: var(--gold);
}

.eyebrow.muted {
  color: var(--muted);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 720px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  position: relative;
}

.section-pad {
  padding: clamp(80px, 10vw, 140px) 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 72px);
  gap: 32px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(36px, 5vw, 64px);
  max-width: 720px;
}

.section-head .link {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.section-head .link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(10, 10, 10, 0);
  transition: background 0.4s, backdrop-filter 0.4s, color 0.3s;
  color: var(--bone);
}

.nav.scrolled,
.nav.solid {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav.solid {
  background: var(--ink);
  color: var(--bone);
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  list-style: none;
}

.nav-links a {
  position: relative;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
}

.nav-logo {
  text-align: center;
}

.nav-logo a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.nav-logo .mark {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.18em;
  font-weight: 400;
}

.nav-logo .sub {
  font-size: 9px;
  letter-spacing: 0.36em;
  opacity: 0.6;
  margin-top: 4px;
}

.nav-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Tier 1: utility icon (borderless circle) — search.
   Tier 2: secondary chip — locale.
   Tier 3: primary action — CTA (gold-tinted border, arrow).
   Status pill is hidden in the desktop nav; the open/closed signal lives in the
   footer and is folded into the CTA's gold dot via the .nav-cta.status-open class. */
.nav-tools .locale-chip,
.nav-tools .nav-cta {
  height: 34px;
  padding: 0 14px;
  white-space: nowrap;
  box-sizing: border-box;
}

.nav-tools .usearch-trigger {
  height: 34px;
  width: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.2s;
}

.nav-tools .usearch-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.nav-tools .usearch-trigger kbd { display: none; }
.nav-tools .usearch-trigger svg { width: 14px; height: 14px; }

/* Status pill removed from desktop nav (info, not action). It still exists in the DOM
   so JS that targets it doesn't break — see .nav-cta status-open coupling instead. */
.nav-tools .status-pill { display: none !important; }

.lang-switch {
  display: flex;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.lang-switch button {
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.lang-switch button.active {
  opacity: 1;
  color: var(--gold);
}

.lang-switch button:hover {
  opacity: 1;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* height + padding now set by .nav-tools .nav-cta */
  border: 1px solid rgba(218, 192, 134, 0.55); /* gold-tinted border = primary affordance */
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}

/* Arrow appended via CSS — signals "this is an action you can take" without
   editing every page's HTML. Slides on hover for a tactile cue. */
.nav-cta::after {
  content: "→";
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.nav-cta:hover::after {
  transform: translateX(2px);
  opacity: 1;
}

.nav-cta .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(218, 192, 134, 0.18);
  transition: background 0.2s, box-shadow 0.2s;
}

/* When the atelier is currently open, the CTA's dot turns green and pulses —
   replacing the standalone status pill that used to sit beside it. */
body.atelier-open .nav-cta .dot {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
  animation: aa-status-pulse 2.5s ease-in-out infinite;
}

.nav-cta:hover .dot { box-shadow: none; background: var(--ink); animation: none; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  color: inherit;
  font-size: 14px;
}

@media (max-width: 880px) {
  .nav {
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
}

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

.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 35%, rgba(10,10,10,0.85) 100%);
  z-index: 2;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.9) contrast(1.05) brightness(0.65);
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 120px var(--gutter) 80px;
  max-width: 1100px;
}

.hero-mark {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 128px);
  letter-spacing: 0.06em;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 16px;
}

.hero-mark .amp {
  color: var(--gold);
  font-style: italic;
}

.hero-sub {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 56px;
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  margin: 0 auto 56px;
  max-width: 680px;
  opacity: 0.95;
}

.hero-tagline span {
  color: var(--gold);
}

.dual-entry {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.entry-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid rgba(245, 241, 234, 0.3);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  transition: all 0.3s;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
}

.entry-chip:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
  transform: translateY(-2px);
}

.entry-chip.gold {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.entry-chip.gold:hover {
  background: var(--bone);
  border-color: var(--bone);
}

.entry-chip .arrow {
  font-family: var(--serif);
  font-size: 18px;
  transition: transform 0.3s;
}

.entry-chip:hover .arrow {
  transform: translateX(4px);
}

.hero-foot {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-foot .scroll {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-foot .line {
  width: 40px;
  height: 1px;
  background: var(--bone);
  opacity: 0.5;
}

/* ============================================================
   LIVE WORKSHOP STRIP
   ============================================================ */

.live-strip {
  background: var(--ink);
  color: var(--bone);
  padding: 28px var(--gutter);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
}

.live-strip-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-stat .num {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.live-stat .label {
  opacity: 0.7;
  max-width: 140px;
}

.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ============================================================
   STORIES (Editorial archive)
   ============================================================ */

.stories {
  background: var(--paper);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}

.story-card {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  display: block;
  transition: transform 0.4s;
}

.story-card:hover {
  transform: translateY(-4px);
}

.story-card.feature { grid-column: span 7; aspect-ratio: 4/3; }
.story-card.tall { grid-column: span 5; aspect-ratio: 4/5; }
.story-card.wide { grid-column: span 8; aspect-ratio: 16/9; }
.story-card.small { grid-column: span 4; aspect-ratio: 1/1; }

.story-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.2) contrast(1.05);
  transition: transform 0.8s, filter 0.6s;
}

.story-card:hover .story-img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.1);
}

.story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: var(--bone);
}

.story-meta {
  display: flex;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.85;
}

.story-meta .channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
}

.story-card h3 {
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.15;
  max-width: 90%;
}

.story-card.feature h3 {
  font-size: clamp(28px, 3vw, 42px);
}

@media (max-width: 880px) {
  .story-card.feature,
  .story-card.tall,
  .story-card.wide,
  .story-card.small {
    grid-column: span 12;
    aspect-ratio: 4/3;
  }
}

/* ============================================================
   FEATURED PIECES
   ============================================================ */

.pieces {
  background: var(--bone);
  padding: clamp(80px, 10vw, 140px) 0;
}

.piece-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.piece {
  position: relative;
  transition: transform 0.3s ease;
}

.piece:hover {
  transform: translateY(-3px);
}

.piece-media {
  aspect-ratio: 4/5;
  background: var(--paper);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  transition: box-shadow 0.3s ease;
}

.piece:hover .piece-media {
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.12), 0 4px 12px rgba(10, 10, 10, 0.06);
}

.piece-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.piece:hover .piece-media img {
  transform: scale(1.04);
}

.piece-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--paper);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  color: var(--ink);
}

.piece-tag.bespoke { background: var(--ink); color: var(--gold); }
.piece-tag.exclusive { background: var(--gold); color: var(--ink); }

.piece h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.piece-meta {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted-readable);
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
}

.piece-meta .dot::before {
  content: '·';
  margin-right: 12px;
  opacity: 0.5;
}

.piece-link {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

@media (max-width: 880px) {
  .piece-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SPLIT SECTIONS (Bespoke + Trade)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--bone);
  min-height: 70vh;
}

.split-half {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 96px);
  overflow: hidden;
}

.split-half.dark { background: var(--ink); }
.split-half.gold { background: var(--bone); color: var(--ink); }
.split-half.aubergine { background: var(--aubergine); color: var(--bone); }

.split-half .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: grayscale(0.6) contrast(1.1);
  z-index: 0;
}

.split-half .content {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.split-half h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.1;
  margin-bottom: 24px;
}

.split-half p {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
  opacity: 0.85;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: inherit;
}

.btn:hover {
  background: currentColor;
}

.btn:hover span:not(.arrow) { color: var(--ink); }
.split-half.gold .btn:hover span:not(.arrow) { color: var(--paper); }

.btn.solid {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn.solid:hover {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}

.btn .arrow {
  font-family: var(--serif);
  font-size: 16px;
  transition: transform 0.3s;
}

.btn:hover .arrow {
  transform: translateX(4px);
}

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================
   ANTWERP SECTION
   ============================================================ */

.antwerp-sec {
  background: var(--bone);
  padding: clamp(80px, 10vw, 140px) 0;
}

.antwerp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.antwerp-text h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  margin-bottom: 32px;
}

.antwerp-text h2 em {
  color: var(--gold);
  font-style: italic;
}

.antwerp-text p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--ink-soft);
  max-width: 520px;
}

.antwerp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.antwerp-stat .num {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 44px);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.antwerp-stat .lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.antwerp-image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  position: relative;
  filter: contrast(1.05);
}

.antwerp-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.4) 100%);
}

.antwerp-image .pin {
  position: absolute;
  bottom: 32px;
  left: 32px;
  background: var(--paper);
  padding: 18px 24px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.antwerp-image .pin strong {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
}

@media (max-width: 880px) {
  .antwerp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: var(--ink);
  color: var(--bone);
  padding: 80px var(--gutter) 32px;
}

.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--ink-line);
}

.footer-brand h3 {
  font-size: 28px;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.65;
  max-width: 360px;
  margin-bottom: 24px;
}

.footer-newsletter {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.footer-newsletter input {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--bone);
  font-family: inherit;
  font-size: 13px;
  border-radius: 999px;
}

.footer-newsletter input:focus {
  outline: none;
  border-color: var(--gold);
}

.footer-newsletter button {
  padding: 12px 18px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--gold);
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-col a:hover {
  opacity: 1;
}

.footer-bottom {
  max-width: var(--max);
  margin: 32px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-socials {
  display: flex;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-socials .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   PAGE CHROME (sub-pages)
   ============================================================ */

.page-hero {
  background: var(--ink);
  color: var(--bone);
  padding: 200px var(--gutter) 100px;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  filter: grayscale(0.6);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  margin-bottom: 24px;
  max-width: 900px;
}

.page-hero h1 em {
  color: var(--gold);
  font-style: italic;
}

.page-hero .lede {
  color: var(--bone);
  opacity: 0.9;
  max-width: 700px;
}

.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 24px;
}

/* ============================================================
   COLLECTIONS (Catalog)
   ============================================================ */

.cat-toolbar {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 78px;
  background: rgba(250, 250, 247, 0.95);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.cat-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cat-filter {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
}

.cat-filter.active {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.cat-filter:hover { border-color: var(--ink); }

.cat-sort {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-sort select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 0;
}

@media (max-width: 880px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BESPOKE / TRADE FORMS
   ============================================================ */

.flow-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(60px, 8vw, 120px) 0;
}

.flow-aside h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin-bottom: 24px;
}

.flow-aside p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.flow-steps {
  list-style: none;
  border-top: 1px solid var(--line);
}

.flow-steps li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
}

.flow-steps .step-num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
  min-width: 32px;
}

.flow-form {
  background: var(--bone);
  padding: clamp(32px, 5vw, 64px);
}

.field {
  margin-bottom: 28px;
}

.field label,
.field .field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--muted);
}

/* Screen-reader-only text. Used to label icon-only inputs and file inputs
   without altering visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 10px 16px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
}

.chip.active {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

@media (max-width: 880px) {
  .flow-grid { grid-template-columns: 1fr; }
  .field-group { grid-template-columns: 1fr; }
}

/* ============================================================
   UTIL
   ============================================================ */

.divider {
  height: 1px;
  background: var(--line);
  margin: 40px 0;
}

.muted { color: var(--muted-readable); }
/* Dark-bg overrides keep the original light-muted token */
.split .muted,
.aubergine .muted,
.author-block .muted,
[style*="background:var(--ink)"] .muted { color: var(--muted); }

.hide-on-mobile {
  display: initial;
}

@media (max-width: 880px) {
  .hide-on-mobile { display: none; }
}

/* ============================================================
   LOCALE CHIP (combined language + currency)
   ============================================================ */

.locale-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.nav.solid .locale-chip,
.nav.scrolled .locale-chip {
  border-color: rgba(255, 255, 255, 0.18);
}

.locale-chip:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.locale-chip .divider {
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.25;
  margin: 0;
}

.locale-chip .chev {
  /* Replaced unicode ▾ with a properly-aligned, sized chevron. Keep .chev as
     the hook so JS open-state still works via the rotation rule below. */
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
  margin-left: 4px;
  font-size: 0;          /* hides the unicode glyph behind the CSS chevron */
  transition: transform 0.2s;
}

.locale-chip.open .chev { transform: rotate(225deg) translate(-1px, -1px); }

.locale-chip .lang-code,
.locale-chip .cur-code {
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* Popover */
.locale-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 28px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding: 24px 28px;
  min-width: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 110;
}

.locale-pop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.locale-col h5 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}

.locale-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.locale-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s;
}

.locale-list button:hover { background: var(--bone); }

.locale-list button.active {
  background: var(--bone);
  font-weight: 500;
}

.locale-list .native {
  font-size: 14px;
}

/* Language code (EN/NL/FR/DE) reads inline next to the native name, the same
   way the currency symbol (€/$/£/…) sits next to its code below. */
.locale-list .meta {
  font-size: 11px;
  color: var(--muted-readable);
  letter-spacing: 0.08em;
  margin-left: 8px;
}

.locale-list .check {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}

.locale-list button.active .check { opacity: 1; }

.locale-list .sym {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 8px;
}

@media (max-width: 600px) {
  .locale-pop {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    min-width: 0;
    padding: 24px 20px 32px;
  }
}

/* hide the older switchers that may still be referenced in pages */
.lang-switch[data-render="auto"],
.currency-switch[data-render="auto"] { display: none; }

/* ============================================================
   LIVE CHAT WIDGET
   ============================================================ */

.aa-chat-root {
  position: fixed;
  z-index: 250;
  bottom: 24px;
  right: 24px;
  font-family: var(--sans);
}

/* Floating button */
.aa-chat-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(10,10,10,0.25), 0 4px 10px rgba(10,10,10,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}

.aa-chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(10,10,10,0.32), 0 6px 14px rgba(10,10,10,0.2);
}

.aa-chat-fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.aa-chat-fab .aa-chat-pulse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
  animation: aa-chat-pulse 2.5s ease-in-out infinite;
}

@keyframes aa-chat-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201,169,97,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(201,169,97,0); }
}

/* Panel */
.aa-chat {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(10,10,10,0.25), 0 8px 20px rgba(10,10,10,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.aa-chat.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.aa-chat-head {
  background: var(--ink);
  color: var(--bone);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.aa-chat-head-l {
  display: flex;
  gap: 12px;
  align-items: center;
}

.aa-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}

.aa-chat-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.aa-chat-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.aa-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}

.aa-chat-close {
  background: none;
  border: none;
  color: var(--bone);
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
}

.aa-chat-close:hover {
  background: rgba(255,255,255,0.08);
  opacity: 1;
}

/* Body */
.aa-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--paper);
}

.aa-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa-msg {
  display: flex;
  max-width: 85%;
}

.aa-msg.agent { align-self: flex-start; }
.aa-msg.user { align-self: flex-end; }

.aa-msg-bub {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.aa-msg.agent .aa-msg-bub {
  background: var(--bone);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.aa-msg.user .aa-msg-bub {
  background: var(--ink);
  color: var(--bone);
  border-bottom-right-radius: 4px;
}

.aa-msg.typing .aa-msg-bub {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 14px;
}

.aa-msg.typing .aa-msg-bub span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: aa-chat-typing 1.4s ease-in-out infinite;
}
.aa-msg.typing .aa-msg-bub span:nth-child(2) { animation-delay: 0.15s; }
.aa-msg.typing .aa-msg-bub span:nth-child(3) { animation-delay: 0.3s; }

@keyframes aa-chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Quick action chips */
.aa-chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.aa-chat-quick.hidden { display: none; }

.aa-chat-quick button {
  font-family: inherit;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.aa-chat-quick button:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

/* Form */
.aa-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}

.aa-chat-input {
  flex: 1;
  border: none;
  background: var(--bone-soft);
  border-radius: 18px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  line-height: 1.4;
  outline: none;
  max-height: 120px;
}

.aa-chat-input:focus { background: var(--bone); }

.aa-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.aa-chat-send:hover { background: var(--gold); color: var(--ink); }

.aa-chat-foot {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  padding: 8px 16px 12px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* Mobile */
@media (max-width: 480px) {
  .aa-chat-root {
    bottom: 16px;
    right: 16px;
  }
  .aa-chat {
    position: fixed;
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
}

/* ============================================================
   HAMBURGER + MOBILE MENU
   ============================================================ */

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.2s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--bone);
  z-index: 110;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  overflow-y: auto;
}

.mobile-menu.open { opacity: 1; pointer-events: auto; }

.mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 24px;
}

.mm-head .mark { font-size: 16px; letter-spacing: 0.18em; }
.mm-head .sub { font-size: 9px; letter-spacing: 0.36em; opacity: 0.5; margin-top: 4px; display: block; }

.mm-close {
  background: none;
  border: 1px solid var(--ink-line);
  color: var(--bone);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.mm-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 48px;
}

.mm-links a {
  display: block;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: 0.01em;
  color: var(--bone);
  border-bottom: 1px solid var(--ink-line);
}

.mm-foot {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.mm-locale {
  position: relative;
}

.mm-addr {
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-tools .nav-cta { display: none; }
  .nav-links { display: none; }
  .nav {
    grid-template-columns: 1fr auto;
    padding: 16px 20px;
  }
  .nav-logo { grid-column: 1; text-align: left; }
  .nav-logo a { align-items: flex-start; }
  .nav-tools { grid-column: 2; }
  .nav-logo .mark { font-size: 16px; letter-spacing: 0.16em; }
  .nav-logo .sub { font-size: 8px; letter-spacing: 0.32em; }
}

/* ============================================================
   HOUSE / NETWORK GRID
   ============================================================ */

.house-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.house-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--bone);
  transition: all 0.2s;
  min-height: 220px;
}

.house-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.house-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}

.house-card .house-tag {
  color: var(--gold);
}

.house-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.05;
}

.house-card p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 24px;
  flex: 1;
}

.house-card .house-link {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  align-self: flex-start;
}

@media (max-width: 880px) {
  .house-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .house-grid { grid-template-columns: 1fr; }
}

/* Footer network row */
.footer-network {
  max-width: var(--max);
  margin: 24px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ink-line);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  /* Was 0.55, which dropped the gold "Group" label below WCAG AA on the
     dark footer background (effective contrast ~2.9:1). 0.85 still reads
     as subordinate but the label scores 6.3:1 and the links 11.4:1. */
  opacity: 0.85;
}

.footer-network .lbl { color: var(--gold); margin-right: 8px; }
.footer-network a { color: inherit; }
.footer-network a:hover { color: var(--gold); }
.footer-network .sep { opacity: 0.3; }

/* ============================================================
   PIECE DETAIL
   ============================================================ */

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 100vh;
  padding-top: 78px; /* account for fixed nav */
}

.pd-media {
  position: relative;
  background: var(--bone);
  overflow: hidden;
  min-height: 60vh;
}

.pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-media .piece-tag {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
}

.pd-thumbs {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.pd-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--paper);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.7;
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-thumb:hover { opacity: 1; transform: translateY(-2px); }

.pd-thumb.on {
  opacity: 1;
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .pd-thumbs { bottom: 16px; left: 16px; }
  .pd-thumb { width: 44px; height: 44px; }
}

.sd-share {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.sd-share:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pd-info {
  padding: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
}

.pd-info .breadcrumb {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.pd-info .breadcrumb a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }

.pd-info h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 12px;
  font-weight: 400;
}

.pd-spec {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 24px;
}

.pd-price {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.pd-blurb {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 480px;
}

.pd-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.pd-details {
  border-top: 1px solid var(--line);
  margin: 0;
}

.pd-details > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.pd-details dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.pd-details dd {
  color: var(--ink);
  align-self: center;
}

.pd-process {
  background: var(--bone);
}

.pd-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.pd-step {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.pd-step .num {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.pd-step h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 400;
}

.pd-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .pd-hero { grid-template-columns: 1fr; min-height: 0; }
  .pd-media { aspect-ratio: 4/5; min-height: 0; }
  .pd-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .pd-steps { grid-template-columns: 1fr; }
}

/* Bespoke ref banner */
.bespoke-ref {
  background: var(--ink);
  color: var(--bone);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  border-radius: 0;
  flex-wrap: wrap;
}

.bespoke-ref img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.bespoke-ref .eyebrow {
  color: var(--gold);
  margin-bottom: 4px;
  font-size: 10px;
}

.bespoke-ref h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
}

.bespoke-ref .link {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* ============================================================
   STORY DETAIL
   ============================================================ */

.sd-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 160px var(--gutter) clamp(60px, 8vw, 120px);
}

.sd-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sd-channel { color: var(--gold); }

.sd-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.sd-hero {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)) 48px;
  background: var(--bone);
}

.sd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-cta-overlay {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--ink);
  color: var(--gold);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.sd-cta-overlay:hover { background: var(--gold); color: var(--ink); }

.sd-body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
}

.sd-body p { margin-bottom: 24px; }

.sd-lede {
  font-size: 22px !important;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 32px !important;
}

.sd-body blockquote {
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-size: 24px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (max-width: 880px) {
  .sd-hero { margin: 0 calc(-1 * var(--gutter)) 32px; }
  .sd-body { font-size: 17px; }
}

/* ============================================================
   MOBILE PASS — additional fixes
   ============================================================ */

@media (max-width: 880px) {
  /* Hero foot stacks */
  .hero-foot {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
  }
  /* Live strip wraps */
  .live-strip-inner {
    gap: 24px 32px;
  }
  /* Section heads stack */
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Footer 1-col stack */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Catalog filters scroll horizontally instead of wrapping */
  .cat-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    width: 100%;
  }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cat-toolbar { overflow: hidden; }
  body, html { overflow-x: hidden; }
  .cat-filter { flex-shrink: 0; }
  /* Toolbar stacks vertically */
  .cat-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .cat-sort { justify-content: flex-end; }
  /* Bigger tap targets in nav */
  .nav-cta { padding: 10px 16px; }
  .nav-toggle { width: 44px; height: 44px; }
  /* Forms */
  .flow-grid { grid-template-columns: 1fr; gap: 32px; }
  .field-group { grid-template-columns: 1fr; gap: 16px; }
  /* Locale chip on the mobile menu */
  .mobile-menu .locale-chip {
    border-color: rgba(255,255,255,0.3);
    color: var(--bone);
  }
  .mobile-menu .locale-pop {
    background: var(--ink-soft);
    color: var(--bone);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }
  .mobile-menu .locale-list button { color: var(--bone); }
  .mobile-menu .locale-list button:hover,
  .mobile-menu .locale-list button.active { background: rgba(255,255,255,0.06); }
  .mobile-menu .locale-col h5 { color: rgba(245,241,234,0.5); }
}

@media (max-width: 600px) {
  .hero-content { padding: 120px 24px 80px; }
  .hero-mark { font-size: 56px !important; }
  .hero-tagline { font-size: 20px; }
  .dual-entry { flex-direction: column; gap: 12px; }
  .dual-entry .entry-chip { width: 100%; justify-content: center; }
  .live-stat .num { font-size: 24px; }
  .pieces .piece-grid,
  .stories .story-grid,
  .pieces > .container > .piece-grid {
    grid-template-columns: 1fr;
  }
  .piece-grid {
    grid-template-columns: 1fr 1fr;
  }
  .split { grid-template-columns: 1fr; }
  .split-half { padding: 56px 24px; }
  .footer-newsletter { flex-direction: column; }
  .footer-newsletter button { width: 100%; }
  .pd-info { padding: 32px 24px; }
  .pd-details > div { grid-template-columns: 100px 1fr; }
  .nav-logo .mark { font-size: 17px; }
  .nav-logo .sub { font-size: 8px; }
}

.piece-price {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.piece-meta {
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   GEO BANNER
   ============================================================ */

.geo-banner {
  position: fixed;
  bottom: 100px;  /* sit above chat FAB */
  right: 24px;
  z-index: 200;
  max-width: 420px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.geo-banner.show {
  transform: translateY(0);
  opacity: 1;
}

.geo-banner-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  position: relative;
}

.geo-flag {
  font-size: 32px;
  line-height: 1;
}

.geo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.geo-title {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.02em;
}

.geo-body {
  font-size: 13px;
  opacity: 0.7;
}

.geo-actions {
  display: flex;
  gap: 8px;
}

.geo-yes,
.geo-keep {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 234, 0.3);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.geo-yes {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.geo-yes:hover { background: var(--bone); border-color: var(--bone); }
.geo-keep:hover { border-color: var(--bone); }

.geo-close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 16px;
  color: var(--bone);
  opacity: 0.4;
  background: none;
  border: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  line-height: 1;
}

.geo-close:hover { opacity: 1; }

@media (max-width: 600px) {
  .geo-banner {
    left: 16px;
    right: 16px;
    bottom: 88px;  /* above chat FAB */
    max-width: none;
  }
  .geo-banner-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .geo-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* ============================================================
   FILE UPLOAD AREA
   ============================================================ */

.file-drop {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px dashed var(--ink-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.file-drop:hover { border-color: var(--ink); }
.file-drop.drag { border-color: var(--gold); background: rgba(201, 169, 97, 0.06); border-style: solid; }
.file-drop.has-files { padding: 16px; text-align: left; }

.file-drop input[type="file"] { display: none; }

.file-drop .file-prompt {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.file-drop .file-prompt strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  display: block;
  font-weight: 400;
  margin-bottom: 4px;
}

.file-drop.has-files .file-prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.file-thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bone);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-thumb .file-icon {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.file-thumb .file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.7);
  color: var(--bone);
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.file-thumb .file-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 10, 10, 0.65);
  color: var(--bone);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.booking-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.booking-bg {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.booking-card {
  position: relative;
  width: 640px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 16px;
  padding: 48px 56px;
  box-shadow: 0 32px 64px rgba(10,10,10,0.3);
  transform: translateY(12px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.booking-modal.show .booking-card { transform: translateY(0); }

.booking-card .eyebrow { color: var(--gold); margin-bottom: 12px; }

.booking-card h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin-bottom: 8px;
  font-weight: 400;
}

.booking-card p.muted {
  font-size: 15px;
  margin-bottom: 32px;
}

.booking-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  z-index: 1;
}

.booking-close:hover { border-color: var(--ink); }

.booking-card .field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.booking-card .field { margin-bottom: 20px; }

.booking-card .field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--muted);
}

.booking-card .field input,
.booking-card .field select,
.booking-card .field textarea {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.booking-card .field input:focus,
.booking-card .field select:focus,
.booking-card .field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .booking-card { padding: 32px 24px; }
  .booking-card .field-group { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   SEARCH BAR (catalog + stories)
   ============================================================ */

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  width: 320px;
  max-width: 100%;
  transition: border-color 0.2s;
}

.search-bar:focus-within { border-color: var(--ink); }

.search-bar svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.search-bar input {
  border: none;
  background: transparent;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.search-bar input::placeholder { color: var(--muted); }

@media (max-width: 880px) {
  .search-bar { width: 100%; }
}

/* ============================================================
   WISHLIST
   ============================================================ */

.wish-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.wish-btn:hover {
  background: var(--paper);
  transform: scale(1.06);
}

.wish-btn.on {
  background: var(--ink);
  color: var(--gold);
}

.wish-btn.on svg {
  fill: currentColor;
}

.icon-btn-wish {
  width: 48px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-wish.on {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}

.wishlist-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: inherit;
  transition: all 0.2s;
}

.wishlist-nav:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--ink);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: 6px;
  z-index: 1000;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: top 0.15s;
}

.skip-link:focus { top: 8px; }

/* ============================================================
   BACK TO TOP
   ============================================================ */

.back-to-top {
  position: fixed;
  bottom: 96px;  /* above chat FAB */
  right: 24px;
  z-index: 240;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(10,10,10,0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, background 0.15s;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}

@media (max-width: 880px) {
  .back-to-top {
    bottom: 156px;  /* above sticky CTA + chat */
    right: 16px;
  }
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--bone) 0%, var(--bone-soft) 50%, var(--bone) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bone); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.reveal-in {
  opacity: 1;
  transform: none;
}

/* Disable on hero (always visible) and for users who prefer reduced motion */
.hero,
.page-hero,
.nav,
footer,
.aa-chat-root,
.geo-banner,
.aa-cookie {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   UNIVERSAL SEARCH OVERLAY
   ============================================================ */

.usearch {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.usearch.show {
  opacity: 1;
  pointer-events: auto;
}

.usearch-bg {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.usearch-card {
  position: relative;
  width: 720px;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.usearch.show .usearch-card { transform: none; }

.usearch-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.usearch-input-row svg { opacity: 0.45; flex-shrink: 0; }

.usearch-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
}

.usearch-input-row input::placeholder { color: var(--muted); }

.usearch-input-row kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bone);
  border-radius: 4px;
  color: var(--muted);
  letter-spacing: 0;
}

.usearch-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.usearch-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 20px 6px;
}

.usearch-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  color: var(--ink);
  transition: background 0.1s;
}

.usearch-result:hover { background: var(--bone); }

.usearch-result img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.usearch-result > div { flex: 1; min-width: 0; }

.usearch-title {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usearch-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.usearch-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}

.usearch-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.usearch-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* Search trigger button (in nav, optional) */
.usearch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* height + padding now set by .nav-tools .usearch-trigger */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.usearch-trigger:hover { border-color: rgba(255,255,255,0.45); }

.usearch-trigger kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 0;
  background: transparent;
  opacity: 0.45;
  letter-spacing: 0;
}

/* Hide the keyboard hint on tablet and below — it's a power-user affordance,
   not worth the visual clutter on smaller viewports. */
@media (max-width: 1024px) {
  .usearch-trigger kbd { display: none; }
}

/* ============================================================
   OPEN / CLOSED STATUS
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* height + padding now set by .nav-tools .status-pill */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); /* slightly lighter than CTA — secondary info */
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.status-dot.open {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  animation: aa-status-pulse 2.5s ease-in-out infinite;
}

@keyframes aa-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}

.status-dot.closed {
  background: #aaa;
}

/* ============================================================
   MULTI-STEP FORM (bespoke)
   ============================================================ */

.bespoke-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-line);
}

.bespoke-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.bespoke-progress-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  flex-shrink: 0;
  background: var(--paper);
}

.bespoke-progress-step.on .bespoke-progress-num {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}

.bespoke-progress-step.done .bespoke-progress-num {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.bespoke-progress-step .lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bespoke-progress-step.on .lbl { color: var(--ink); }

.bespoke-progress-line {
  flex: 1;
  height: 1px;
  background: var(--ink-line);
}

.bespoke-progress-step.done + .bespoke-progress-line { background: var(--gold); }

.form-step { display: none; }
.form-step.on { display: block; }

.form-step-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}

.form-step-actions .btn { flex: 0 0 auto; }

@media (max-width: 600px) {
  .bespoke-progress-step .lbl { display: none; }
  .bespoke-progress { gap: 4px; }
}

/* ============================================================
   MAP + QR (contact page)
   ============================================================ */

.map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 480px;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.map-text {
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.map-text .eyebrow { color: var(--gold); }

.map-text h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  margin-bottom: 20px;
}

.map-text p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 32px;
  max-width: 480px;
}

.map-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  max-width: 360px;
  background: rgba(255,255,255,0.03);
}

.qr-card img {
  background: var(--paper);
  border-radius: 6px;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.qr-card strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.qr-card span {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.4;
}

.map-iframe {
  position: relative;
  background: var(--ink-soft);
  min-height: 480px;
}

@media (max-width: 880px) {
  .map-grid { grid-template-columns: 1fr; }
  .map-iframe { min-height: 320px; }
}

/* ============================================================
   COMPARE PIECES
   ============================================================ */

.compare-checkbox {
  position: absolute;
  top: 12px;
  right: 56px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.compare-checkbox:hover { background: rgba(0,0,0,0.7); border-color: var(--bone); }

.compare-checkbox.on {
  background: var(--gold);
  border-color: var(--gold);
}

.compare-checkbox.on::after {
  content: '✓';
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.compare-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 195;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.compare-bar.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.compare-bar-thumbs {
  display: flex;
  gap: 6px;
}

.compare-bar-thumbs img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
}

.compare-bar-count {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.compare-bar .btn-compare {
  background: var(--gold);
  color: var(--ink);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.compare-bar .btn-clear {
  background: transparent;
  color: var(--bone);
  border: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px 8px;
}

.compare-bar .btn-clear:hover { opacity: 1; }

/* Compare view (modal) */
.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--paper);
  overflow-y: auto;
  display: none;
  padding: 24px;
}

.compare-modal.show { display: block; }

.compare-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto 32px;
  padding-top: 8px;
}

.compare-modal-head h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
}

.compare-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-size: 18px;
}

.compare-modal-close:hover { border-color: var(--ink); }

.compare-grid {
  display: grid;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.compare-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.compare-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.compare-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.compare-col img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

.compare-col h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 4px;
}

.compare-col .price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 16px;
}

.compare-col dl {
  margin: 0;
}

.compare-col dl div {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  gap: 4px;
}

.compare-col dl dt {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-col .btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

@media (max-width: 880px) {
  .compare-grid[data-cols="3"], .compare-grid[data-cols="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .compare-bar-thumbs { display: none; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  cursor: zoom-out;
}

.lightbox.show { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bone);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.lightbox-close:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

/* ============================================================
   STICKY MOBILE CTA on piece detail
   ============================================================ */

.pd-sticky-cta {
  display: none;
}

@media (max-width: 880px) {
  .pd-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ink);
    color: var(--bone);
    padding: 12px 16px;
    z-index: 99;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -8px 24px rgba(10,10,10,0.18);
  }
  .pd-sticky-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
  }
  .pd-sticky-info strong {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pd-sticky-info span {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.02em;
  }
  .pd-sticky-cta .btn {
    flex-shrink: 0;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
  /* Push chat FAB up so it doesn't overlap the sticky CTA */
  .aa-chat-root { bottom: 80px; }
}

/* ============================================================
   PRINT STYLESHEET (piece detail = quote-sheet ready)
   ============================================================ */

@media print {
  /* Hide chrome */
  .nav, footer, .footer-network, .footer-bottom,
  .aa-chat-root, .aa-cookie, .geo-banner, .toast,
  .booking-modal, .skip-link, .pd-thumbs,
  .pd-actions { display: none !important; }

  body { background: white; color: black; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Stack the hero columns for readability */
  .pd-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .pd-media { aspect-ratio: 4/3; min-height: 0; max-height: 60vh; }
  .pd-info { padding: 24px 0; }

  /* Print header — show the brand at top of every page */
  .pd-hero::before {
    content: 'ANTWERP ATELIERS  ·  Hoveniersstraat 19, 2018 Antwerp  ·  info@antwerpateliers.com  ·  +32 476 76 05 77';
    display: block;
    font-family: var(--sans);
    font-size: 9pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 24px;
  }

  /* Print footer */
  .pd-process::after {
    content: '© Antwerp Ateliers — a brand of OnlyJewels BV  ·  BTW BE 0698 934 191  ·  Quote valid 30 days from print date';
    display: block;
    font-family: var(--sans);
    font-size: 8pt;
    letter-spacing: 0.1em;
    color: #666;
    border-top: 1px solid #ccc;
    margin-top: 32px;
    padding-top: 12px;
  }

  /* Tighter typography for print */
  .pd-info h1 { font-size: 32pt; }
  .pd-price { font-size: 18pt; }
  .pd-blurb { font-size: 11pt; }
  .pd-details { font-size: 10pt; }

  /* Hide related pieces / recently viewed */
  .pd-process,
  [data-render="related-pieces"],
  [data-render="recently-viewed"],
  .pieces { display: none; }

  /* Force black text */
  h1, h2, h3, p, dt, dd { color: black !important; }
  em { color: #555 !important; }

  /* Page break controls */
  .pd-hero { page-break-after: avoid; }
  .pd-details { page-break-inside: avoid; }

  /* Standard A4 margin */
  @page { margin: 16mm 14mm; }
}

*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* No outline on mouse clicks (focus-visible already handles keyboard only) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */

.aa-cookie {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 195;
  max-width: 460px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(10,10,10,0.18), 0 2px 8px rgba(10,10,10,0.08);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  border: 1px solid var(--line);
}

.aa-cookie.show {
  opacity: 1;
  transform: translateY(0);
}

.aa-cookie-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.aa-cookie-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
}

.aa-cookie-text span {
  color: var(--ink-soft);
}

.aa-cookie-link {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.aa-cookie-link:hover { color: var(--ink); }

.aa-cookie-ok {
  background: var(--ink);
  color: var(--bone);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.aa-cookie-ok:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 600px) {
  .aa-cookie {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    flex-wrap: wrap;
  }
  .aa-cookie-ok { width: 100%; }
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 300;
  background: var(--ink);
  color: var(--bone);
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  max-width: calc(100vw - 32px);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============================================================
   ADMIN
   ============================================================ */

.admin-body {
  background: var(--paper);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.admin-sidebar {
  background: var(--ink);
  color: var(--bone);
  padding: 32px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-logo {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}

.admin-logo-sub {
  font-size: 9px;
  letter-spacing: 0.36em;
  opacity: 0.5;
  margin-bottom: 40px;
}

.admin-nav {
  list-style: none;
  margin-bottom: 32px;
}

.admin-nav li {
  margin-bottom: 4px;
}

.admin-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bone);
  opacity: 0.7;
  border-radius: 8px;
  transition: all 0.15s;
}

.admin-nav a:hover { opacity: 1; background: rgba(255,255,255,0.04); }
.admin-nav a.active { opacity: 1; background: rgba(255,255,255,0.06); color: var(--gold); }

.admin-nav .badge {
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}

.admin-foot {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  font-size: 11px;
  opacity: 0.4;
  letter-spacing: 0.1em;
}

.admin-foot a {
  display: block;
  padding: 6px 0;
  color: var(--bone);
}

.admin-main {
  padding: 40px 48px;
  overflow-x: auto;
}

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.admin-head h1 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
}

.admin-head .sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.admin-head .actions {
  display: flex;
  gap: 12px;
}

.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.btn-admin:hover { border-color: var(--ink); }

.btn-admin.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-admin.primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn-admin.danger {
  color: #b94545;
  border-color: rgba(185,69,69,0.2);
}

.btn-admin.danger:hover {
  background: #b94545;
  color: var(--paper);
  border-color: #b94545;
}

/* Admin stats */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.admin-stat {
  background: var(--paper);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.admin-stat .lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.admin-stat .val {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
}

.admin-stat .val em {
  font-style: normal;
  color: var(--gold);
}

.admin-stat .delta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* Admin table */
.admin-table {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

.admin-table th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  background: var(--bone-soft);
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: var(--bone); }

.admin-table .thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.admin-table .row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-table .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  transition: all 0.15s;
}

.admin-table .icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.admin-table .icon-btn.danger:hover { border-color: #b94545; color: #b94545; }

.admin-table .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--bone-soft);
  color: var(--ink-soft);
  text-transform: capitalize;
}

.admin-table .pill.exclusive { background: var(--gold); color: var(--ink); }
.admin-table .pill.bespoke { background: var(--ink); color: var(--gold); }
.admin-table .pill.new { background: #d6efd6; color: #2e7d2e; }
.admin-table .pill.contacted { background: #fce6c0; color: #8a5a00; }
.admin-table .pill.closed { background: var(--bone-soft); color: var(--muted); }

/* Admin modal */
.admin-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.5);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-modal-bg.show { display: flex; }

.admin-modal {
  background: var(--paper);
  border-radius: 16px;
  width: 720px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.admin-modal h2 {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 8px;
}

.admin-modal .sub {
  color: var(--muted);
  margin-bottom: 28px;
  font-size: 14px;
}

.admin-modal .close-x {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.admin-modal .close-x:hover { border-color: var(--ink); }

.admin-modal .field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.admin-modal .field { margin-bottom: 20px; }

.admin-modal .field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--muted);
}

.admin-modal .field input,
.admin-modal .field select,
.admin-modal .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--paper);
}

.admin-modal .field input:focus,
.admin-modal .field select:focus,
.admin-modal .field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.admin-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

/* Detail card (inquiry / trade view) */
.detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.detail-row .lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.detail-row .val { color: var(--ink); }

.empty-state {
  padding: 80px 32px;
  text-align: center;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.empty-state h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .admin-body { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
}

/* ============================================================
   IMAGE-FAILED PLACEHOLDER
   ============================================================
   When an <img> 404s, the global error handler in store.js hides it and
   adds .img-failed to the parent. This rule renders a clean paper-coloured
   placeholder where the broken-image icon + alt text would otherwise show. */
.img-failed {
  background:
    linear-gradient(135deg, var(--paper) 0%, rgba(0,0,0,0.04) 100%);
  position: relative;
}
.img-failed::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  transform: translateY(-50%);
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}
.img-failed img,
.img-failed > img {
  opacity: 0 !important;
}

/* =================================================================
   ORDER PORTAL — /order/[token]/
   Customer-facing private surface. Slim chrome (no shop nav), wide
   readable column, atelier-quiet aesthetic. Lives outside the main
   marketing IA: the order pages are signed + noindex'd.
   ================================================================= */

.order-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.order-chrome-logo {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.order-chrome-logo .mark {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.order-chrome-logo .sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-readable);
  text-transform: uppercase;
  margin-top: 2px;
}
.order-chrome-contact {
  font-size: 13px;
  color: var(--muted-readable);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.order-chrome-contact:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.order-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 640px) {
  .order-shell { padding: 32px 16px 64px; gap: 24px; }
  .order-chrome { padding: 16px 20px; }
}

.order-loading {
  text-align: center;
  padding: 80px 0;
  color: var(--muted-readable);
}

.order-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-readable);
  font-weight: 500;
}
.order-eyebrow.muted { color: var(--muted); }

.order-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 6px 0 0;
}
.order-lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 60ch;
}
.order-lede a { color: var(--ink); text-decoration: underline; }

/* ---- Hero (number + stage chip) ---------------------------------- */
.order-hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.order-hero-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.order-hero-meta {
  font-size: 13px;
  color: var(--muted-readable);
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.order-hero-meta .order-number {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--bone-soft);
  padding: 3px 8px;
  border-radius: 3px;
}
.dot-sep { color: var(--muted); margin: 0 4px; }
.order-hero-stage { flex-shrink: 0; }

.order-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--bone-soft);
  color: var(--ink);
  border: 1px solid var(--line);
}
.order-stage-chip.is-quoted    { background: #fff5dc; border-color: #e8c97a; color: #6e4b00; }
.order-stage-chip.is-confirmed { background: #e7f4ea; border-color: #9cc7a4; color: #225b32; }
.order-stage-chip.is-production{ background: #fef0e6; border-color: #e4b58a; color: #6b3300; }
.order-stage-chip.is-ready     { background: #e5efff; border-color: #94b3e2; color: #1f3f7a; }
.order-stage-chip.is-delivered { background: var(--bone-soft); border-color: var(--line); color: var(--muted-readable); }

/* ---- Timeline ---------------------------------------------------- */
.order-timeline {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  position: relative;
}
.order-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.order-timeline-step .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  position: relative;
  z-index: 1;
  transition: background .2s, border-color .2s, transform .2s;
}
/* connector line between steps */
.order-timeline-step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -50%;
  right: 50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.order-timeline-step:first-child::before { display: none; }
.order-timeline-step.is-done .dot {
  background: var(--ink);
  border-color: var(--ink);
}
.order-timeline-step.is-done.is-done + .order-timeline-step::before,
.order-timeline-step.is-done + .order-timeline-step::before {
  background: var(--ink);
}
.order-timeline-step.is-active .dot {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18);
}
.order-timeline-step.is-active .step-label {
  color: var(--ink);
  font-weight: 600;
}
.order-timeline-step .step-label {
  line-height: 1.25;
}
/* Collapse the 7-column timeline to a vertical list at any viewport
   narrower than 960px. Even with the type shrunk to 10px, 7 long
   localised labels like "Ready for pickup" / "Prête à retirer" /
   "Abholbereit" wrap onto two lines on iPad-portrait (768px) and
   misalign the dot row. Vertical reads better at any tablet width. */
@media (max-width: 960px) {
  .order-timeline {
    grid-template-columns: 1fr;
    gap: 14px;
    border-left: 1px solid var(--line);
    padding-left: 18px;
    margin-left: 6px;
  }
  .order-timeline-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    font-size: 12px;
  }
  .order-timeline-step .dot { margin-left: -25px; }
  .order-timeline-step::before { display: none; }
}

/* ---- Cards ------------------------------------------------------- */
.order-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 32px;
}
@media (max-width: 640px) {
  .order-card { padding: 20px 18px; }
}
.order-card-h { margin-bottom: 18px; }
.order-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.order-card-meta {
  font-size: 12px;
  color: var(--muted-readable);
  margin-top: 10px;
}

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bone-soft);
  color: var(--ink-soft);
}
.badge--ok   { background: #e7f4ea; border-color: #9cc7a4; color: #225b32; }
.badge--warn { background: #fdecec; border-color: #d99a9a; color: #7a2222; }

/* ---- Brief ------------------------------------------------------- */
.order-brief-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 24px;
  margin: 0;
  font-size: 14px;
}
.order-brief-dl dt { color: var(--muted-readable); }
.order-brief-dl dd { margin: 0; color: var(--ink); }
.order-brief-notes {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.order-brief-notes p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 8px 0 0;
  white-space: pre-wrap;
}

/* ---- Quote ------------------------------------------------------- */
.order-quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}
.order-quote-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.order-quote-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-quote-table tfoot td {
  border-bottom: none;
  padding-top: 8px;
}
.order-quote-table tr.sub td { color: var(--ink-soft); }
.order-quote-table tr.total td {
  font-weight: 600;
  font-size: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.order-quote-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.order-fineprint {
  font-size: 12px;
  color: var(--muted-readable);
  margin: 0;
  max-width: 60ch;
}

/* ---- Files ------------------------------------------------------- */
.order-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-files li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.order-files li:last-child { border-bottom: none; }
.order-files .file-icon { font-size: 18px; grid-row: 1 / 3; }
.order-files .file-name { color: var(--ink); font-weight: 500; }
.order-files .file-meta { font-size: 12px; color: var(--muted-readable); white-space: nowrap; }
.order-files .file-note {
  grid-column: 2 / 4;
  font-size: 12px;
  color: var(--muted-readable);
  font-style: italic;
}

/* ---- Conversation ------------------------------------------------ */
.order-msgs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.order-msg {
  border-left: 3px solid var(--line);
  padding: 4px 16px;
}
.order-msg.is-atelier { border-left-color: var(--gold); }
.order-msg.is-customer { border-left-color: var(--ink-soft); }
.msg-head {
  font-size: 12px;
  color: var(--muted-readable);
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
}
.msg-from { color: var(--ink); font-weight: 600; }
.msg-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}
.order-thread-empty {
  color: var(--muted-readable);
  font-style: italic;
  margin: 0;
}
.order-reply {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-reply textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 4px;
  resize: vertical;
  min-height: 90px;
}
.order-reply textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.order-reply button { align-self: flex-start; }

/* ---- Lookup ------------------------------------------------------ */
.order-lookup { text-align: left; }
.order-lookup-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}
.order-lookup-form .field { display: flex; flex-direction: column; gap: 6px; }
.order-lookup-form label {
  font-size: 12px;
  color: var(--muted-readable);
  letter-spacing: 0.04em;
}
.order-lookup-form input {
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.order-lookup-form input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.order-lookup-form button { align-self: flex-start; }
.order-lookup-hint {
  font-size: 12px;
  color: var(--muted-readable);
  max-width: 50ch;
}
.order-lookup-demo {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.order-lookup-demo p { margin: 8px 0 14px; color: var(--ink-soft); }
.order-lookup-demo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
}
.order-lookup-demo-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}
.order-lookup-demo-list a:hover { border-bottom-color: var(--ink); }

.order-callout {
  border-radius: 4px;
  padding: 20px 24px;
  margin-top: 24px;
}
.order-callout--ok {
  background: #e7f4ea;
  border: 1px solid #9cc7a4;
  color: #225b32;
}
.order-callout p { margin: 8px 0 0; }

.order-error { text-align: left; }
.order-error-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Footer ------------------------------------------------------ */
.order-footer {
  border-top: 1px solid var(--line);
  background: var(--bone);
  padding: 40px 32px;
  font-size: 13px;
}
.order-footer-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
@media (max-width: 640px) {
  .order-footer { padding: 28px 20px; }
  .order-footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.order-footer-h {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-readable);
  margin-bottom: 10px;
}
.order-footer-line {
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}
.order-footer-line a { color: var(--ink); }

/* ---- Order confirmation modal (form success → orderUrl) --------- */
.order-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease-out;
  pointer-events: none;
}
.order-confirm-modal.show { opacity: 1; pointer-events: auto; }
.order-confirm-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
}
.order-confirm-card {
  position: relative;
  max-width: 460px;
  width: calc(100% - 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px 36px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(8px);
  transition: transform .2s ease-out;
}
.order-confirm-modal.show .order-confirm-card { transform: translateY(0); }
.order-confirm-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--muted-readable);
  cursor: pointer;
  padding: 4px;
}
.order-confirm-close:hover { color: var(--ink); }
.order-confirm-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 500;
  margin-bottom: 10px;
}
.order-confirm-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}
.order-confirm-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.order-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-confirm-actions .btn { width: 100%; justify-content: center; text-align: center; }
@media (min-width: 480px) {
  .order-confirm-actions { flex-direction: row; }
  .order-confirm-actions .btn { width: auto; }
}

/* Mock-mode honesty banner on /order/[token]/ when serving the demo
   fixture (no SPRKS env vars set). Hidden in production. */
.order-mock-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: #fef7e6;
  border: 1px solid #e8c97a;
  border-radius: 6px;
  font-size: 13px;
  color: #6e4b00;
  line-height: 1.5;
  margin-bottom: 24px;
}
.order-mock-banner strong {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* =================================================================
   TESTIMONIALS — atelier voices section on /index.html
   ================================================================= */
.testimonials {
  padding: clamp(60px, 8vw, 120px) var(--gutter);
  /* Paper background so we have rhythm against the adjacent
     `.antwerp-sec` (bone) above. The .testimonial cards underneath
     use `--bone-soft` for visible contrast on this lighter ground. */
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.testimonials-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.testimonials-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.testimonials-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 500;
  margin-bottom: 16px;
}
.testimonials-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 18px;
}
.testimonials-head .lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 880px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 24px; }
  .testimonials-head { margin-bottom: 40px; }
}
.testimonial {
  /* Card bg darker than the surrounding `.testimonials` (paper) so
     each quote sits as a clear element rather than fading into the
     section. --bone-soft is just enough warmer to stand apart. */
  background: var(--bone-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial blockquote {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
.testimonial blockquote::before {
  /* Curly left-double-quote (U+201C) — the typographically-correct
     glyph for an opening quote in a serif marque. Was a typewriter
     ASCII " before, which felt machine-set against the rest of the
     atelier voice. */
  content: '\201C';
  position: absolute;
  top: -32px;
  left: -8px;
  font-size: 80px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  font-family: var(--serif);
}
.testimonial blockquote p { margin: 0; }
.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.testimonial figcaption strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.testimonial-meta {
  font-size: 12px;
  color: var(--muted-readable);
  letter-spacing: 0.02em;
}
.testimonials-foot {
  text-align: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.testimonials-foot strong {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.testimonials-foot strong span[aria-hidden] {
  color: var(--gold);
  margin-right: 6px;
}

/* =================================================================
   PRICE TILES — pricing transparency on /bespoke.html
   ================================================================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .price-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .price-grid { grid-template-columns: 1fr; }
}
.price-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
}
.price-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-readable);
  font-weight: 500;
  margin-bottom: 8px;
}
.price-range {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.price-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* =================================================================
   PRESS PAGE — credentials grid + coverage list
   ================================================================= */
.creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
@media (max-width: 880px) { .creds-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .creds-grid { grid-template-columns: 1fr; } }
.cred-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 24px;
}
.cred-mark {
  display: inline-block;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--gold-text);
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.cred-tile h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink);
}
.cred-tile p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.press-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.press-list-empty {
  font-style: italic;
  color: var(--muted-readable);
  padding: 24px 0;
  text-align: center;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

/* =================================================================
   PRINT — /order/[token]/
   A customer printing or saving-as-PDF wants the brief, quote, and
   conversation. Chrome, footer, reply box, mock banner — gone.
   ================================================================= */
@media print {
  .order-chrome,
  .order-footer,
  .order-mock-banner,
  .order-approve-banner,
  .order-checkout-banner,
  .order-reply,
  .nav-toggle,
  .skip-link,
  .geo-banner,
  .aa-cookie,
  .chat-fab,
  .toast,
  [data-render="locale-chip"] {
    display: none !important;
  }
  body,
  .order-shell {
    background: #fff !important;
    color: #000 !important;
  }
  .order-shell {
    max-width: none !important;
    padding: 0 !important;
    gap: 16px !important;
  }
  .order-card,
  .order-hero {
    background: #fff !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .order-quote-table {
    page-break-inside: avoid;
  }
  .order-stage-chip,
  .badge {
    background: #fff !important;
    border: 1px solid #444 !important;
    color: #000 !important;
  }
  /* Headline + brief + quote come first; conversation can break */
  .order-hero { page-break-after: avoid; }
  .order-msgs { page-break-inside: auto; }
  /* Reveal full link URLs so a printed page is verifiable */
  .order-msg a[href]:after { content: " (" attr(href) ")"; font-size: 11px; color: #444; }
  /* Page-break only between major sections, not mid-card */
  a { color: #000 !important; text-decoration: underline; }
}