:root {
  /* Warm dark cinematic — palette option 2 from wireframes */
  --bg: #1a1612;
  --bg-2: #221c16;
  --bg-3: #2c241c;
  --ink: #f4ede0;
  --ink-2: #d6cab3;
  --ink-3: #9a8c75;
  --ink-4: #6b5d48;
  --line: rgba(244,237,224,0.12);
  --line-2: rgba(244,237,224,0.22);
  --accent: #c0613a;       /* terracotta default */
  --accent-2: #e8c98a;
  --accent-3: #a9c8c4;
  --serif: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --hero-dim: 0.6;
  --maxw: 1280px;
  --nav-h: 70px;
  --pad-x: clamp(20px, 4vw, 64px);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  --serif: var(--sans);
}
/* Sans companion: bold headings, no decorative italics */
h1, h2, h3, .brand, .pull, .em { font-weight: 600 !important; letter-spacing: -0.02em; }
.em, .italic, .pull, .brand-mark, .brand-mark i, .signoff .sig { font-style: normal !important; }
.brand-mark { font-weight: 500 !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

.serif { font-family: var(--serif); font-weight: 400; }
.italic { font-style: italic; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----- NAV ----- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--pad-x);
  transition: background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(26,22,18,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  background: transparent;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  /* Tightened from .15em: at that tracking the two links read as one run of
     letters rather than as two separate destinations. */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 200ms;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }

/* Icon row (Instagram / YouTube / shop) to the right of the text links.
   Inline SVG rather than an icon font so it inherits colour and needs no
   extra request. */
.nav-right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-icons { display: flex; align-items: center; gap: 6px; }
.nav-icons a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--ink-2);
  transition: color 200ms ease, background 200ms ease;
}
.nav-icons a:hover { color: var(--ink); background: rgba(244,237,224,0.10); }
.nav-icons svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .nav-icons { gap: 2px; }
  .nav-icons a { width: 26px; height: 26px; }
  .nav-icons svg { width: 15px; height: 15px; }
}
/* The shop icon is the least useful of the three on a phone, and dropping it
   is what keeps the two product links readable on a narrow one. */
@media (max-width: 480px) { .nav-icons a[data-icon="shop"] { display: none; } }

/* The nav used to be in-page anchors, so hiding it on mobile was harmless.
   Now it's the only way between the two product pages, so it stays visible
   and just tightens up. */
@media (max-width: 720px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.12em; }
}
/* Below 560px the wordmark doesn't fit alongside two links and three icons,
   so it drops to the B mark. Measured: at 430px with the text shown, the bar
   was 102px tall with everything wrapped onto two lines. */
@media (max-width: 559px) {
  .brand span:last-child { display: none; }
}
@media (max-width: 420px) {
  .nav { padding: 18px 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 9.5px; letter-spacing: 0.1em; }
}

/* ----- HERO ----- */
.hero {
  position: relative;
  min-height: 54vh;
  min-height: 54svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-x) clamp(40px, 6vh, 72px);
  overflow: hidden;
}

.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg-3);
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Focused dim around the headline area for readability */
    radial-gradient(ellipse 90% 60% at 30% 80%, rgba(0,0,0,var(--hero-dim)) 0%, transparent 65%),
    /* Vertical base gradient */
    linear-gradient(180deg, rgba(26,22,18,0.5) 0%, rgba(26,22,18,0.2) 30%, rgba(26,22,18,0.6) 60%, rgba(26,22,18,0.9) 100%),
    /* Warm terracotta accent in the top-right */
    radial-gradient(ellipse at 70% 0%, rgba(192,97,58,0.25), transparent 55%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}
/* No `--maxw` cap: the comp aligns the headline with the section header and
   the card edges below it, all on the `--pad-x` gutter. `.hero` already
   supplies that padding. */
.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hero-eyebrow .line { width: 36px; height: 1px; background: var(--ink-2); opacity: 0.6; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero h1 .em {
  font-style: italic;
  color: var(--accent-2);
}
.hero p.lede {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 85%, white); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.btn .arrow { transition: transform 220ms; }
.btn:hover .arrow { transform: translateX(3px); }

.hero-meta {
  position: absolute;
  z-index: 3;
  bottom: clamp(48px, 8vh, 96px);
  right: var(--pad-x);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.hero-meta .num { color: var(--ink); font-size: 13px; letter-spacing: 0.05em; }
@media (max-width: 900px) { .hero-meta { display: none; } }

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-cue .bar {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--ink-3), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%      { transform: scaleY(1.4); opacity: 1; }
}

/* ----- SECTIONS ----- */
section { position: relative; }
.section {
  padding: clamp(72px, 12vh, 140px) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.section-header h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  text-wrap: balance;
}
.section-header h2 .em { font-style: italic; color: var(--accent-2); }
.section-header .right { text-align: right; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 720px) {
  .section-header { flex-direction: column; align-items: flex-start; }
  .section-header .right { text-align: left; }
}

/* ----- CARD GRID ----- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  cursor: pointer;
  border-radius: 14px;
}
/* Featured card: 2 cols wide, stretches to match row height set by Balkans */
.card.featured {
  grid-column: span 2;
  align-self: stretch;
  aspect-ratio: auto;
}
.card.featured .card-front .meta h3 {
  font-size: clamp(48px, 6vw, 80px);
}
@media (max-width: 980px) {
  /* When grid drops to 2 cols, Vietnam takes its own full-width row — needs intrinsic height */
  .card.featured {
    grid-column: 1 / -1;
    align-self: auto;
    aspect-ratio: 21 / 9;
  }
}
@media (max-width: 600px) {
  .card.featured { aspect-ratio: 4 / 3; }
  .card.featured .card-front .meta h3 { font-size: 40px; }
}
.card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.2,.7,.2,1);
  border-radius: 14px;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0;
  border-radius: 14px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--line);
}
.card-front {
  background: var(--bg-3);
}
.card-front .photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms ease;
}
.card:hover .card-front .photo { transform: scale(1.06); }
.card-front .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
}
.card-front .meta {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.card-front .meta .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.85;
}
.card-front .meta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.card-front .desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height 320ms ease, opacity 320ms ease, margin-bottom 320ms ease;
}
.card:hover .card-front .desc {
  max-height: 6em;
  opacity: 1;
  margin-bottom: 10px;
}
/* Click-affordance pill, sits next to the title in .meta */
.card-front .card-hint {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  margin-bottom: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(26,22,18,0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244,237,224,0.16);
  color: var(--ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 280ms ease, transform 280ms ease, background 220ms ease, border-color 220ms ease;
  pointer-events: none; /* let the card receive the click */
}
.card-front .card-hint .arrow { transition: transform 220ms ease; }
.card:hover .card-front .card-hint {
  opacity: 1;
  transform: translateX(0);
  background: rgba(26,22,18,0.6);
  border-color: rgba(244,237,224,0.28);
}
.card:hover .card-front .card-hint .arrow { transform: translateX(2px); }
.card.flipped .card-front .card-hint { opacity: 0; }
/* Touch devices: always show the hint */
@media (hover: none) {
  .card-front .card-hint { opacity: 1; transform: none; }
}
/* Mobile: tighten card front type so it doesn't feel busy at small widths */
@media (max-width: 600px) {
  .card-front .meta h3 { font-size: 24px; }
  .card-front .meta .num { font-size: 9.5px; letter-spacing: 0.16em; }
  .card-front .desc { font-size: 11.5px; line-height: 1.4; margin-bottom: 8px; }
  .card-front .card-hint {
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 5px 9px;
  }
  .card-front .card-hint .hint-label { display: none; }
}

.card-back {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
  transform: rotateY(180deg);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  color: var(--ink);
}
.card-back .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
.card-back h3 {
  font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1;
  margin: 6px 0 14px; letter-spacing: -0.01em;
}
.card-back .accent-line { width: 32px; height: 2px; background: var(--accent); margin-bottom: 14px; }
.card-back .desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.card-back ul {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 8px;
}
.card-back li {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; gap: 8px; align-items: center;
}
.card-back li::before {
  content: ""; width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
}
.card-back .actions {
  margin-top: auto; display: flex; gap: 10px; align-items: center; padding-top: 24px;
}
.card-back .price { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; }

/* ----- PHILOSOPHY ----- */
.philosophy {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.philosophy::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(192,97,58,0.10), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(232,201,138,0.06), transparent 40%);
  pointer-events: none;
}
.philosophy-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: start;
}
@media (max-width: 900px) { .philosophy-inner { grid-template-columns: 1fr; } }
.philosophy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
  text-wrap: balance;
}
.philosophy h2 .em { font-style: italic; color: var(--accent-2); }
.philosophy .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.philosophy .body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.philosophy .body + .body { margin-top: 16px; }
.philosophy .signoff {
  margin-top: 36px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.philosophy .signoff .sig {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--ink); letter-spacing: 0;
  text-transform: none;
}
.philosophy .disclaimer {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(244,237,224,0.03);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-3);
  border-radius: 0 6px 6px 0;
}

/* ----- COMING SOON ----- */
.soon {
  padding: clamp(72px, 12vh, 140px) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.soon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 32px;
}
@media (max-width: 800px) { .soon-grid { grid-template-columns: repeat(2, 1fr); } }
.soon-cell {
  background: var(--bg);
  padding: 24px 22px;
  min-height: 130px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  transition: background 220ms ease;
}
.soon-cell:hover { background: var(--bg-2); }
.soon-cell .idx {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4);
}
.soon-cell .label {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
  margin-top: auto;
}
.soon-cell .status {
  position: absolute; top: 16px; right: 16px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}

/* ----- EMAIL ----- */
.email-wrap {
  margin: 0 var(--pad-x) clamp(60px, 10vh, 120px);
  max-width: var(--maxw);
  margin-left: auto; margin-right: auto;
}
.email {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(192,97,58,0.18), rgba(192,97,58,0.04)),
    var(--bg-2);
  border: 1px solid var(--line);
  padding: clamp(40px, 7vh, 72px) clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.email::after {
  content: "";
  position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,138,0.18), transparent 70%);
  pointer-events: none;
}
@media (max-width: 800px) { .email { grid-template-columns: 1fr; } }
.email h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.email p { color: var(--ink-2); margin: 0; font-size: 15px; line-height: 1.5; max-width: 42ch; }
/* Kit embed overrides */
.formkit-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.formkit-form [data-element="content"],
.formkit-form [data-group="content"] { padding: 0 !important; background: transparent !important; }
.formkit-heading,
.formkit-subheader { display: none !important; }
.formkit-alert { font-family: var(--sans); font-size: 13px; margin-bottom: 10px; }
.formkit-fields {
  display: flex !important; gap: 10px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  padding: 6px 6px 6px 22px !important;
  align-items: center !important;
}
.formkit-field { flex: 1 !important; min-width: 0 !important; }
.formkit-input {
  width: 100% !important; background: transparent !important;
  border: none !important; outline: none !important; box-shadow: none !important;
  color: var(--ink) !important; font-family: var(--sans) !important;
  font-size: 15px !important; padding: 12px 0 !important;
}
.formkit-input::placeholder { color: var(--ink-4) !important; }
.formkit-submit {
  background: var(--ink) !important; color: var(--bg) !important;
  border: none !important; border-radius: 999px !important;
  padding: 12px 22px !important; font-family: var(--sans) !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; cursor: pointer !important;
  white-space: nowrap !important; transition: transform 180ms ease !important;
}
.formkit-submit:hover { transform: translateY(-2px) !important; }
.formkit-guarantee {
  margin-top: 14px !important; background: transparent !important;
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--ink-4) !important; text-align: left !important;
}
.formkit-powered-by-convertkit-container { display: none !important; }

/* ----- FOOTER -----
   A full-bleed dark band on every page, so it reads the same under the light
   colour-grade page as it does under the dark ones. Colours are literal here
   rather than token-driven for that reason. */
footer {
  background: #14120f;
  color: rgba(246,241,232,0.60);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.footer-brand {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: rgba(246,241,232,0.95);
}
footer .links { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
footer .links svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
footer a { transition: color 200ms ease; }
footer a:hover { color: rgba(246,241,232,0.95); }
@media (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; row-gap: 18px; }
}

/* ----- LIGHT MODE ----- */
body.theme-light {
  --bg: #f4ede0;
  --bg-2: #ece2cf;
  --bg-3: #e2d6bf;
  --ink: #1f1a14;
  --ink-2: #4a3f30;
  --ink-3: #7a6a52;
  --ink-4: #9a8c75;
  --line: rgba(31,26,20,0.10);
  --line-2: rgba(31,26,20,0.20);
}
body.theme-light .nav.scrolled { background: rgba(244,237,224,0.85); }
body.theme-light .hero-overlay {
  background:
    linear-gradient(180deg, rgba(244,237,224,0.15) 0%, rgba(244,237,224,0.05) 35%, rgba(244,237,224,0.6) 100%),
    radial-gradient(ellipse at 70% 0%, rgba(192,97,58,0.18), transparent 55%);
}

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }



/* ============================================================
   PRODUCT GRID (homepage)

   Bill's 18 Sep comp: full-bleed photography, the product artwork
   floating over it, and the label / blurb / call-to-action stacked
   at the bottom over a scrim. Flexible — add another `.product-card`
   anchor and the grid reflows on its own.
   ============================================================ */
/* Full-bleed, gutters only — deliberately NOT capped at `--maxw`. That cap is
   a reading width; it suits prose and the itinerary grid, but it left two
   product cards stranded in the middle of a wide screen. The comp aligns the
   card edges with the nav and the hero headline, which is what `--pad-x` on
   its own gives. */
.products {
  padding: 0 var(--pad-x) clamp(72px, 12vh, 120px);
}

/* "Explore what I create" — the section intro above the grid */
.products-head { padding: clamp(52px, 8vh, 88px) 0 clamp(22px, 3.2vh, 34px); }
.products-head .eyebrow {
  display: block;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.2em;
  color: var(--ink);
}
.products-head p {
  margin: 7px 0 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 54ch;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
@media (max-width: 720px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Portrait at the width the comp was drawn at. Above that the ratio has to
     go: full-bleed cards run ~760px wide on a large display, and 6/7 of that
     is an 890px-tall card you can only see one of at a time.
     Note this is a height swap, NOT a `max-height` — `aspect-ratio` resolves
     a capped height by shrinking the width, which pulled the cards back out
     of their grid tracks (764px track, 549px card). */
  aspect-ratio: 6 / 7;
  /* Width is stated outright rather than left to `stretch`. As a grid item
     under `align-items: stretch` the card has a definite height, and an
     aspect-ratio is then free to derive the INLINE size from that height
     instead of filling the column. Chrome fills the column; Safari has been
     seen to take the other branch, leaving one tile roughly half the width of
     the other while both measured correct here. Stating `width` removes the
     choice. Third instance of the same trap in this file: an aspect-ratio
     with a constrained height takes it out of the width. */
  width: 100%;
  min-width: 0;
  padding: 28px 30px 30px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
@media (min-width: 1100px) {
  .product-card { aspect-ratio: auto; height: min(68vh, 640px); }
}
@media (max-width: 600px) {
  .product-card { aspect-ratio: 4 / 5; padding: 22px 22px 24px; }
}

.product-card .photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 700ms ease;
}
.product-card:hover .photo { transform: scale(1.06); }
.product-card .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.08) 34%,
    rgba(0,0,0,0.62) 68%,
    rgba(0,0,0,0.90) 100%);
}

/* Product artwork sits above the label, over the photograph.

   This is a flex child that takes whatever the label leaves — NOT an
   absolutely-positioned percentage band. A percentage band has to guess how
   much room the label needs, and it guesses wrong as soon as the card gets
   short: at 1440x640 a `bottom: 46%` artwork overlapped the title by 40px.
   Letting flex do the division means it cannot overlap at any card height.

   The image inside is still absolutely filled + object-fit, because a
   percentage height on the image itself resolves against an auto-sized box
   and lets the artwork grow through whatever is under it. */
.product-card .boxart {
  position: relative;
  z-index: 2;
  /* basis 0 rather than auto: the height must come from the flex division
     alone, or `container-type: size` below would be circular. */
  flex: 1 1 0%;
  min-height: 0;
  margin: 0 3% 12px;
  pointer-events: none;
}
.product-card .boxart img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,0.55));
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .boxart img { transform: translateY(-6px) scale(1.03); }

.product-card .meta { position: relative; z-index: 3; }
.product-card .meta .num { display: none; }   /* the comp drops the № label */
.product-card .meta h3 {
  font-family: var(--sans);
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.product-card .meta .desc {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 10px 0 0;
  max-width: 34ch;
}
/* Plain text link in the comp, not the pill the sketch version used. */
.product-card .card-hint {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.product-card .card-hint .arrow { transition: transform 220ms ease; }
.product-card:hover .card-hint .arrow { transform: translateX(4px); }


/* ------------------------------------------------------------
   FIRST SCREEN — hero on top, both products below, one viewport
   total, so nothing has to be scrolled to see what's for sale.

   `--hero-split` is the share the hero takes; the products row is
   told to fill whatever is left, and the cards stretch into it.
   The card ratio has to go here for the same reason it goes at
   1100px: `aspect-ratio` resolves a constrained height by shrinking
   the width, which would pull the cards out of their tracks.

   Gated on height as well as width — locking a 100svh layout on a
   short window crushes the cards rather than tidying them — and off
   entirely below 860px, where the grid is stacking anyway and two
   tiles in half a screen is not a thing worth forcing.
   ------------------------------------------------------------ */
@media (min-width: 860px) and (min-height: 620px) {
  /* Bill wants the products pulled up and the box reading larger, so the
     hero gives up height — but only down to a floor. At a bare 43svh a
     1280x720 window put the headline 6px INTO the nav, which is the
     collision fixed on 20 Sep. The floor keeps short screens safe while
     tall ones hand the extra room to the products. */
  :root {
    --hero-split: 43svh;
    --hero-h: max(var(--hero-split), 360px);
  }

  .hero {
    height: var(--hero-h);
    min-height: 0;
    /* The nav is a transparent overlay here, so without a floor the hero copy
       rises under it: at 1440x900 the headline's top sat at y=50 against a
       wordmark whose bottom was y=51, and the two collided. */
    padding-top: var(--nav-h);
    padding-bottom: clamp(28px, 4vh, 52px);
  }
  /* The headline was sized for a 65vh hero and never came down when the hero
     was halved — 129.6px over two lines does not fit in 450px alongside the
     lede and the button. */
  .hero h1 { font-size: clamp(40px, 5.6vw, 92px); }

  .products {
    min-height: calc(100svh - var(--hero-h));
    display: flex;
    flex-direction: column;
    padding-top: clamp(18px, 2.6vh, 30px);
    padding-bottom: clamp(18px, 2.6vh, 30px);
  }
  .products-head {
    flex: 0 0 auto;
    padding: 0 0 clamp(12px, 1.8vh, 20px);
  }
  .product-grid {
    flex: 1 1 auto;
    min-height: 0;
  }
  .product-card {
    aspect-ratio: auto;
    height: 100%;
    padding: 22px 26px 24px;
  }

  /* The tiles are wide and short now, so the label gives a little and the
     artwork takes correspondingly less. No percentage retuning needed — the
     artwork is a flex child and simply gets what the label leaves. */
  .product-card .meta h3 { font-size: clamp(22px, 1.9vw, 30px); }
  .product-card .meta .desc { margin-top: 7px; }
  .product-card .card-hint { margin-top: 13px; }
  .product-card .boxart { margin: 0 3% 10px; }
}

/* On a short laptop the label and the artwork are fighting over ~250px of
   card. The blurb is the least load-bearing line of the three — the title
   and the link both have to stay — so it goes, and the artwork gets the
   height back. Without this the product box renders about 40px tall at
   1440x640, which is worse than not showing it. */
@media (min-width: 860px) and (min-height: 620px) and (max-height: 799px) {
  .product-card .meta .desc { display: none; }
}

/* ============================================================
   COLOR GRADE PRODUCT PAGE

   Per the 18 Sep comp this page runs light — near-white ground,
   dark type — with two photographic bands and a dark nav and
   footer bracketing it. `body.page-light` flips the palette
   tokens; `.band--dark` flips them back inside a single section.
   ============================================================ */
body.page-light {
  --bg: #f2f0ec;
  --bg-2: #ffffff;
  --bg-3: #e7e4dd;
  --ink: #16140f;
  --ink-2: #4b463d;
  --ink-3: #7b7469;
  --ink-4: #a49c8e;
  --line: rgba(22,20,15,0.12);
  --line-2: rgba(22,20,15,0.22);
  background: var(--bg);
  color: var(--ink);
  padding-top: var(--nav-h);   /* the nav is an opaque bar here, not an overlay */
}
/* The comp's headings are one colour throughout — no gold second line. */
body.page-light .em { color: inherit; }

/* The nav bar stays dark on the light page, so its colours are literal
   rather than token-driven. */
body.page-light .nav,
body.page-light .nav.scrolled {
  background: #14120f;
  color: #f4ede0;
  border-bottom: 1px solid rgba(244,237,224,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-light .nav .nav-links a,
body.page-light .nav .nav-icons a { color: rgba(244,237,224,0.72); }
body.page-light .nav .nav-links a:hover,
body.page-light .nav .nav-icons a:hover { color: #f4ede0; }
body.page-light .nav .nav-icons a:hover { background: rgba(244,237,224,0.10); }
body.page-light .nav .brand-mark { border-color: rgba(244,237,224,0.8); }

/* ----- BANDS -----
   A full-bleed section with an optional photograph behind it. The veil
   sits between the photo and the content and decides which way the type
   reads; `--dark` additionally flips the palette tokens so everything
   inside it (rules, muted text, chips) inverts with it. */
.band { position: relative; overflow: hidden; }
/* Everything that isn't the backdrop sits above it. Spelled out rather than
   `.band > *` so the two absolutely-positioned layers below can't be pulled
   back into flow by a specificity tie. */
.band > :not(.band-bg):not(.band-veil) { position: relative; z-index: 2; }
.band-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
}
.band-veil { position: absolute; inset: 0; z-index: 1; }

.band--light .band-veil {
  background: linear-gradient(180deg, rgba(248,246,242,0.74), rgba(248,246,242,0.88));
}
.band--dark {
  --ink: #f6f1e8;
  --ink-2: rgba(246,241,232,0.82);
  --ink-3: rgba(246,241,232,0.62);
  --ink-4: rgba(246,241,232,0.45);
  --line: rgba(246,241,232,0.16);
  --line-2: rgba(246,241,232,0.30);
  color: var(--ink);
}
.band--dark .band-veil {
  background: linear-gradient(180deg, rgba(12,11,9,0.74) 0%, rgba(12,11,9,0.70) 50%, rgba(12,11,9,0.82) 100%);
}
.band--white { background: #fff; }
.band--plain { background: var(--bg); }

.cg-section {
  padding: clamp(64px, 10vh, 120px) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.cg-narrow { max-width: 760px; }
.cg-section h2 {
  font-family: var(--sans);
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.cg-section .eyebrow + h2 { margin-top: 14px; }
.cg-section p.body {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 18px auto 0;
  text-wrap: pretty;
}
.cg-section p.kicker {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 20px auto 0;
  max-width: 48ch;
  text-wrap: balance;
}
.cg-section p.sub {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 12px auto 0;
}

/* ----- CG HERO — copy left, product right, photograph behind -----
   The comp puts the product and the Buy button in the first screen
   alongside the headline rather than stacked under it. */
.cg-hero { padding: 0; }
/* The wash used to carry 0.26 opacity all the way to the right edge, which
   left the whole frame looking foggy. It now clears fast past the copy so the
   graded footage keeps real colour and contrast behind the product — which is
   the point, on a page about colour. */
.cg-hero .band-veil {
  background: linear-gradient(100deg,
    rgba(248,246,242,0.96) 0%,
    rgba(248,246,242,0.93) 32%,
    rgba(248,246,242,0.66) 58%,
    rgba(248,246,242,0.20) 82%,
    rgba(248,246,242,0.04) 100%);
}
.cg-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(44px, 7vh, 80px) var(--pad-x) clamp(52px, 8vh, 88px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  text-align: left;
}
.cg-hero h1 {
  font-family: var(--sans);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 14px 0 0;
  max-width: 13ch;
  text-wrap: balance;
}
.cg-hero .sub {
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.35;
  color: var(--ink-2);
  margin: 16px 0 0;
  font-weight: 500;
}
.cg-hero .lede {
  font-size: clamp(13.5px, 1.2vw, 15px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 46ch;
  margin: 12px 0 0;
  text-wrap: pretty;
}
.cg-hero-product { text-align: center; }
@media (max-width: 900px) {
  .cg-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .cg-hero h1 { margin-inline: auto; max-width: 16ch; }
  .cg-hero .sub, .cg-hero .lede { margin-inline: auto; }
  .cg-hero .cg-hero-copy .eyebrow { display: block; }
}

/* Product box — the 3D object above, sized per context.

   `--w` must never contain a percentage. It feeds both `width` and (via
   `--h`) `height`, and a percentage resolves against the container's width
   in the first case and its height in the second — where there is nothing
   to resolve against, so the box collapsed to zero. Viewport and container
   units have no such ambiguity. */

/* ============================================================
   THE BOX

   Bill's own render (22 Sep), cropped to its content and served as a
   transparent WebP — 48KB against 900KB for the same pixels as PNG,
   and alpha WebP is a weaker requirement than the container queries
   this sheet already relies on.

   This replaces the CSS 3D box that stood in for it. The hover keeps a
   small turn so the thing still responds, but it is a flat image now:
   the angle is baked into the render, so the rotation stays under ten
   degrees, where a plane reads as a box turning rather than as a
   picture being skewed.
   ============================================================ */
.boxshot {
  display: block;
  height: auto;
  margin-inline: auto;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 24px 42px rgba(22, 17, 10, 0.28));
  transition: transform 620ms cubic-bezier(.22, .68, .3, 1), filter 620ms ease;
  will-change: transform;
}
/* The render shows the box's left side, so turning further left is the
   direction that reads as picking it up. */
.boxshot:hover,
a:hover .boxshot {
  transform: perspective(1500px) rotateY(7deg) translateY(-8px) scale(1.015);
  filter: drop-shadow(0 38px 62px rgba(22, 17, 10, 0.34));
}
@media (prefers-reduced-motion: reduce) {
  .boxshot, .boxshot:hover, a:hover .boxshot { transition: none; transform: none; }
}

/* Per-context sizing. */
.cg-hero-product .boxshot { width: min(300px, 27vw); }
@media (max-width: 900px) { .cg-hero-product .boxshot { width: min(260px, 56vw); } }
.cg-final-art .boxshot { width: min(232px, 22vw); }
@media (max-width: 900px) { .cg-final-art .boxshot { width: min(210px, 48vw); } }

/* On the homepage card the artwork slot changes height with the viewport,
   so the box is filled to it rather than given a width. inset + object-fit
   for the usual reason: a percentage height resolves against an auto-sized
   box and lets the artwork grow through the label. */
.product-card .boxart .boxshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

/* ----- BUY ----- */
.cg-buy { margin-top: clamp(22px, 3.2vh, 34px); }
.btn-buy {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 38px;
  border-radius: 7px;
  background: #16140f;
  color: #f6f1e8;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 220ms ease;
}
.btn-buy:hover { transform: translateY(-2px); background: #2b2720; }
.btn-buy .arrow { transition: transform 220ms; }
.btn-buy:hover .arrow { transform: translateX(3px); }

/* ----- BEFORE / AFTER COMPARISON ----- */
.compare-wrap { max-width: 1000px; margin: clamp(26px, 4vh, 44px) auto 0; }
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  aspect-ratio: auto;  /* never let a global img aspect-ratio squash these */
}
/* The graded frame sits on top and is clipped to the divider position */
.compare .after { clip-path: inset(0 0 0 var(--split, 50%)); }

.compare .divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 3;
}
.compare .handle {
  position: absolute;
  top: 50%;
  left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(22,20,15,0.10);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  display: grid; place-items: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #16140f;
  pointer-events: none;
  z-index: 4;
}
.compare:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Swap cover. Both frames are exchanged behind this, so the change is never
   seen half-done — which is what made switching cameras look broken: the two
   images were assigned separately and each painted whenever its own request
   returned.

   Sits ABOVE the two photographs and BELOW the slider's own furniture, so the
   divider, handle and camera label stay visible and continuous through the
   flash. Z-order in this box: images (auto) < flash (2) < divider (3) <
   handle (4) < label (5). */
.compare-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flash-out, 260ms) ease-out;
}
.compare.flashing .compare-flash {
  opacity: 1;
  transition: opacity var(--flash-in, 130ms) ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .compare-flash, .compare.flashing .compare-flash { transition: none; }
}

/* Camera-type label. Sits above every layer including the divider, so it
   stays put and unchanged while the comparison is dragged across it. */
.compare-label {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 5;
  padding: 6px 11px;
  border-radius: 6px;
  background: rgba(10, 9, 7, 0.46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .compare-label { top: 9px; left: 9px; font-size: 9.5px; padding: 5px 9px; }
}

/* The same label on each thumbnail, so the three read as camera types
   before anyone clicks one. */
.compare-thumb-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 6px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 600px) { .compare-thumb-label { font-size: 8.5px; letter-spacing: 0.06em; } }

/* Columns come from however many pairs are in PAIRS, rather than a hard four
   — the list went from four placeholders to three real ones and a fixed
   `repeat(4, 1fr)` would have left a gap where the fourth used to be. */
.compare-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(14px, 2.2vh, 20px);
}
@media (max-width: 600px) {
  .compare-thumbs { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}
.compare-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-3);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.compare-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.compare-thumb:hover { opacity: 0.92; transform: translateY(-2px); }
.compare-thumb.active { opacity: 1; border-color: var(--ink); }
.compare-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ----- FORMAT CHIPS (dark band) -----
   One chip per camera format, six across on a wide screen. */
.formats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  max-width: 1000px;
  margin: clamp(26px, 4vh, 40px) auto 0;
}
@media (max-width: 900px) { .formats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .formats { grid-template-columns: repeat(2, 1fr); } }
.format-cell {
  background: rgba(10,9,7,0.46);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 15px 12px;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Deliberately no :hover — these are compatibility labels, and highlighting
   them made them read as buttons that lead somewhere. Nothing does. */
.format-cell .brandname {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.format-cell .fmt {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 5px;
  color: var(--ink-3);
}
.cg-apps {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: clamp(20px, 3vh, 30px) auto 0;
  max-width: 62ch;
}

/* ----- PRODUCT FILM ----- */
.cg-film {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  margin: clamp(24px, 3.6vh, 38px) auto 0;
  max-width: 1000px;
  display: block;
}
.cg-film video {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  /* Ambient loop, not a player. Without this the browser still offers a
     context menu and a cursor change on hover even with `controls` off. */
  pointer-events: none;
}

/* ----- THREE STEPS ----- */
.cg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: clamp(26px, 4vh, 44px) auto 0;
}
.cg-step { padding: 0 clamp(14px, 2.4vw, 30px); text-align: center; }
.cg-step + .cg-step { border-left: 1px solid var(--line); }
.cg-step .ico {
  width: 30px; height: 30px;
  margin: 0 auto 14px;
  color: var(--ink);
}
.cg-step .ico svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cg-step h3 {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.cg-step p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .cg-steps { grid-template-columns: 1fr; }
  .cg-step + .cg-step {
    border-left: none;
    border-top: 1px solid var(--line);
    margin-top: 26px;
    padding-top: 26px;
  }
}

/* ----- FINAL PURCHASE — product left, copy right ----- */
.cg-final-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(52px, 8vh, 96px) var(--pad-x);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  text-align: left;
}
.cg-final-copy h2 {
  font-family: var(--sans);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 14px 0 0;
  max-width: 13ch;
  text-wrap: balance;
}
.cg-final-copy .sub {
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--ink-2);
  margin: 14px 0 0;
  font-weight: 500;
}
@media (max-width: 900px) {
  .cg-final-inner { grid-template-columns: 1fr; text-align: center; }
  .cg-final-copy h2 { margin-inline: auto; max-width: 16ch; }
}

/* ----- PAGE HEAD -----
   For pages with no hero. Replaces the old `.page-top`, which only pushed
   the first section down far enough to clear the fixed nav and left the
   gap it created empty. */
.page-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(30px, 5vh, 62px)) var(--pad-x) clamp(26px, 4vh, 46px);
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  text-wrap: balance;
}
.page-head h1 .em { font-style: italic; color: var(--accent-2); }
.page-head p {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* A section that follows the masthead doesn't need its own full top pad. */
.section--tight { padding-top: clamp(20px, 3vh, 36px); }