/* ==========================================================================
   Dial Reserve — Design Tokens (brand board)
   ========================================================================== */

:root {
  --black: #0B0B0D;        /* primary black */
  --charcoal: #1A1A1D;     /* secondary charcoal */
  --champagne: #C8A56A;    /* gold / champagne accent — use sparingly */
  --cream: #E8E4DC;        /* warm neutral */
  --offwhite: #F5F3EF;     /* warm off-white */

  /* text on dark */
  --text-dark-heading: var(--offwhite);
  --text-dark-body: #A8A29B;      /* muted warm grey, sits quietly on black */
  --text-dark-faint: #6E6A63;

  /* text on light */
  --text-light-heading: var(--black);
  --text-light-body: #5B564D;     /* muted warm grey on cream/offwhite */

  --hairline-dark: rgba(245, 243, 239, 0.14);
  --hairline-light: rgba(11, 11, 13, 0.12);

  --font-display: 'Playfair Display', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  --max-width: 1400px;
  --section-pad: 106px;
}

@media (max-width: 640px) {
  :root { --section-pad: 76px; }
}

/* Global reduced-motion override — collapses every transition/animation
   sitewide to effectively instant, without hiding or disabling any content
   or functionality. !important is intentional here: this is the one
   sanctioned global safety-net exception, meant to win over every other
   transition/animation declaration in the file. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--black);
  color: var(--text-dark-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-dark-heading);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--champagne);
  color: var(--black);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 20px; top: 20px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 20px;
}
.eyebrow-center { text-align: center; }
.eyebrow-light { color: var(--champagne); }

.section-intro {
  max-width: 560px;
  text-align: center;
  margin: 18px auto 0;
  font-size: 1.05rem;
  font-style: italic;
  font-family: var(--font-display);
}

.placeholder-note {
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  margin-top: 48px;
}

.placeholder-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne);
  border: 1px solid var(--hairline-light);
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ==========================================================================
   Section color variants — applied per <section>
   ========================================================================== */

.section-on-dark { color: var(--text-dark-body); }
.section-on-light {
  background: var(--offwhite);
  color: var(--text-light-body);
}
.section-on-light h1, .section-on-light h2, .section-on-light h3 {
  color: var(--text-light-heading);
}
.section-on-light .eyebrow { color: var(--champagne); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  border: 1px solid transparent;
  transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
  cursor: pointer;
}
.btn:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--champagne);
  color: var(--black);
  border-color: var(--champagne);
}
.btn-primary:hover { background: transparent; color: var(--champagne); }

.btn-ghost {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--hairline-dark);
}
.btn-ghost:hover { border-color: var(--champagne); color: var(--champagne); }

.btn-outline {
  background: transparent;
  color: var(--offwhite);
  border-color: var(--champagne);
  font-size: 0.72rem;
  padding: 11px 26px;
}
.btn-outline:hover { background: var(--champagne); color: var(--black); }

.btn-gold {
  background: transparent;
  color: var(--champagne);
  border-color: var(--champagne);
}
.btn-gold:hover { background: var(--champagne); color: var(--black); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 32px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/*
  Monogram placeholder — styled after the brand board's interlocking D/R
  mark (overlapping serif letterforms, no container box). Replace with the
  real vector logo asset when available.
*/
.monogram {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  width: 30px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--champagne);
}
.monogram-d, .monogram-r {
  position: absolute;
  top: 0;
  line-height: 1;
  font-size: 1.5rem;
}
.monogram-d { left: 0; }
.monogram-r { left: 11px; opacity: 0.82; }

.footer-brand .monogram { color: var(--champagne); }

.wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--offwhite);
  white-space: nowrap;
}

/* Brand lockup — DR monogram as a standalone image (images/branding/
   dial-reserve-monogram.png) beside the live "DIAL RESERVE" .wordmark text
   above. Gives the monogram real presence while the wordmark stays crisp
   HTML type. Monogram sized by height only; width:auto keeps its square
   ratio. .brand-lockup's own `gap` and `align-items:center` set the spacing
   and vertical alignment. The .monogram (CSS letterform) rules above are
   left in place but are no longer used by any live page. */
.brand-monogram {
  display: block;
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* Footer — smaller, so it reads as intentional without dominating. */
.brand-monogram--footer {
  height: 28px;
}

.main-nav {
  display: flex;
  gap: 36px;
  margin: 0 auto;
}

.main-nav a {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dark-body);
  transition: color 0.2s ease-out;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--champagne); }
.main-nav a:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 3px;
}

.nav-cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--offwhite);
  width: 32px;
}

@media (max-width: 1024px) {
  /* Widened from 860px (2026-10-05): with 5 nav items the desktop flex row
     needs ~968px to fit without wrapping/overflowing — between 861-967px
     neither the hamburger nor the full row was showing correctly. This
     block is self-contained (nav + its own CTA/toggle only) and does not
     affect the other six unrelated @media(max-width:860px) blocks
     elsewhere in this file (hero, overview, sourcing, footer, etc.),
     which keep their own 860px threshold unchanged. */
  .main-nav { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    border-bottom: 1px solid var(--hairline-dark);
    padding: 24px 32px 32px;
    gap: 12px;
  }

  /* Vertical padding grows the tap target without changing the visual
     gap between links (parent gap reduced from 20px to 12px to compensate). */
  .main-nav.is-open a {
    padding: 8px 0;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--black);
}

/* One integrated stage: the photo fills the whole section, .hero-scrim
   darkens its left side, and .hero-copy-wrap sits on top of both via
   normal stacking (each is position:absolute or a later sibling, so DOM
   order alone puts copy above the scrim above the photo — no z-index
   juggling needed except to be explicit). */
.hero-watch-stage {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.hero-watch-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  filter: brightness(0.94);
}

/* Adapted from the previous narrow-column fade/vignette: same technique
   (gradient dissolve to --black, no blur filter, soft off-center vignette),
   re-tuned to cover the full-width stage now that copy sits directly over
   the photo's left side. Strong through the text zone, fading out well
   before the watch so its own exposure stays natural there. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--black) 0%, rgba(11, 11, 13, 0.88) 18%, rgba(11, 11, 13, 0.5) 36%, rgba(11, 11, 13, 0.14) 52%, rgba(11, 11, 13, 0.1) 100%),
    linear-gradient(to top, rgba(11, 11, 13, 0.5) 0%, rgba(11, 11, 13, 0) 22%),
    radial-gradient(ellipse 80% 85% at 72% 40%, rgba(11, 11, 13, 0) 45%, rgba(11, 11, 13, 0.32) 100%);
}

.hero-copy-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-copy { max-width: 560px; }

.hero-copy h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.16;
  margin-bottom: 20px;
  max-width: 17ch;
}

/* Required so each word can be transformed independently by the hero load
   reveal (js/homepage-motion.js) — inline elements can't be translated
   reliably. Visually identical to plain inline text otherwise. */
.hero-copy h1 .word { display: inline-block; }

/* Pre-hide for the hero load reveal — only active once js-anim-ready is on
   <html> (set synchronously in <head>, and only when motion is allowed), so
   there's no flash of visible-then-hidden content and no permanently-hidden
   content if JS/GSAP never runs. See index.html and js/homepage-motion.js. */
html.js-anim-ready .hero-copy .eyebrow,
html.js-anim-ready .hero-copy h1 .word,
html.js-anim-ready .hero-sub,
html.js-anim-ready .hero-actions {
  opacity: 0;
}

.hero-sub {
  color: var(--text-dark-body);
  font-size: 0.98rem;
  max-width: 42ch;
  margin-bottom: 28px;
}

.hero-actions { display: flex; gap: 22px; flex-wrap: wrap; }

/* ==========================================================================
   Hero — desktop editorial refinement (2026-09-09)
   Scoped to >=861px only, i.e. the overlaid split composition. The stacked
   layout (<=860px) and the phone tier (<=600px, set by the mobile pass)
   are deliberately left untouched.
   ========================================================================== */
@media (min-width: 861px) {
  /* Lift the copy column above dead-centre in the stage — a little more
     editorial tension, copy no longer sits low. -30px translate nets to
     roughly a 25px upward shift once the tighter headline re-centres.
     Transform only, so the image, scrim, stage height and header are all
     unaffected. */
  .hero-copy { transform: translateY(-30px); }

  /* Tighter leading so the 3-line headline reads as one strong unit rather
     than three stacked lines. Size / family / weight / colour unchanged. */
  .hero-copy h1 { line-height: 1.09; }

  /* Body copy: a hair more contrast against the scrim so it reads more
     deliberately. Measure stays at its current ~42ch (already in target
     range). Still quiet and clearly subordinate — well short of white
     (#F5F3EF). */
  .hero-sub { color: #B4AEA4; }

  /* CTAs: trim the vertical padding so they read less landing-page-large;
     horizontal padding stays generous, hierarchy/borders/hover unchanged. */
  .hero-actions { gap: 18px; }
  .hero-actions .btn { padding-top: 13px; padding-bottom: 13px; }
}

/* Below 861px the desktop's overlaid split can't hold, so the mobile hero
   is typography-only: confident left-aligned editorial type on the black
   field, no photo, no scrim, then straight into The Ledger. The
   .hero-watch-photo / .hero-scrim are simply hidden here — every desktop
   rule that uses them (>=861px) is untouched. */
@media (max-width: 860px) {
  .hero-watch-stage {
    display: block;
    align-items: initial;
    justify-content: initial;
    min-height: 0;
    padding: 64px 0 60px;
  }
  .hero-watch-photo,
  .hero-scrim { display: none; }

  /* keeps .container's 0 20px side gutter — only the alignment changes */
  .hero-copy-wrap { text-align: left; }

  .hero-copy { max-width: 34rem; margin: 0; }
  /* ch tracks the headline's own size, so the 3-line break holds as the
     clamp() grows it on wider phones. */
  .hero-copy h1 { max-width: 17ch; margin: 0 0 18px; }
  .hero-sub { max-width: 34ch; margin: 0 0 30px; color: var(--text-dark-body); }
  .hero-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* Smaller phones: a little less vertical breathing room. */
  .hero-watch-stage { padding: 52px 0 50px; }
}

/* ==========================================================================
   Overview — three-column alternating panels (replaces the old trust strip)
   ========================================================================== */

/* Own (minimal) section padding rather than the shared --section-pad tier
   used by Ledger/Reviews/Approach — the panels are the section now (no
   standalone header band above them), so padding only needs to keep them
   from touching the neighboring sections, not create a light "band". */
/* No outer padding — the three panels form the entire section now, with no
   header band or surrounding light frame. The sections before/after carry
   the breathing room. */
/* One continuous cream field for the whole section — the left/right
   columns no longer carry their own background (see .panel-light below),
   so there's no visible seam between "column" and "section". */
.overview { background: var(--cream); padding: 64px 0; }

/* Narrower than the sitewide 1400px --max-width so the triptych reads as
   one compact composition rather than spreading across the full viewport.
   Reuses .container's own centering/side-padding — only max-width differs. */
.overview-container { max-width: 1300px; }

/* Compact editorial header row: label + hairline, sharing the same 44px
   inset as the panels' own text (.overview-panel's padding) so "Services"
   lines up with the headings below it. */
.overview-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 44px;
  margin-bottom: 30px;
}
.overview-header .eyebrow { margin-bottom: 0; white-space: nowrap; }
.overview-header-line {
  flex: 1;
  height: 1px;
  background: var(--hairline-light);
}

/* Real editorial gutters, not a seamless touching strip — the left/right
   columns are plain text on the shared cream field now (no card
   background), so they need real space around them to read as columns
   rather than a cramped block. */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: start;
  gap: 40px;
}

.overview-panel {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 48px 44px;
  text-decoration: none;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Shared interactive-card treatment — same response on hover and keyboard
   focus, since these panels are real links (unlike Ledger/Review cards). */
a.overview-panel:hover,
a.overview-panel:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--champagne);
}

/* Text sits in its own stacking context so it always reads above the
   decorative background art / photo overlay. */
.panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.overview-panel h3 {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* Very subtle decorative overlays, unique per light panel — replaced the
   old hand-drawn inline SVG motifs with the real assets in
   images/overlays/. Targeted positionally (:first-child / :last-child)
   rather than a new class, since panel order (light/dark/light) is fixed.
   ::before sits behind .panel-content (z-index 0 vs 1) and is clipped by
   .overview-panel's own overflow:hidden, same as the SVGs were, so the
   oversized background bleeds off the panel edge instead of looking like a
   contained icon. */
.overview-panel:first-child::before,
.overview-panel:last-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The source PNGs are already soft/antialiased line art (their own alpha
     averages well under 50% even on the visible strokes, unlike a crisp
     SVG stroke), so a literal 0.07 compounds with that softness down to
     ~1-2% and reads as fully invisible. 0.14 is the smallest opacity that
     actually reads at a comparable "quiet texture" weight to the previous
     SVG motifs at this same panel scale — verified by rendering both. */
  opacity: 0.14;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Globe / worldwide-sourcing motif — biased bottom-right, away from the
   text column at top-left. */
.overview-panel:first-child::before {
  background-image: url('../images/overlays/services-globe-web.png');
  background-size: 100%;
  background-position: 100% 100%;
}

/* Watch blueprint motif — biased top-right, clear of the heading, feature
   list, and CTA. */
.overview-panel:last-child::before {
  background-image: url('../images/overlays/services-watch-blueprint-web.png');
  background-size: 200%;
  background-position: 100% 0%;
}

/* Compact feature list — kept small and tight so the panel doesn't grow
   more than necessary. */
.panel-features {
  margin: 4px 0 0;
}
.panel-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
}
.panel-features li:last-child { margin-bottom: 0; }

.panel-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--champagne);
}

.overview-cta {
  display: block;
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* Cream against the section's offwhite, plus a full hairline border, so
   these read as their own panels instead of blending into the section
   background (previously both were the exact same --offwhite). */
/* No background of its own — sits directly on .overview's shared cream
   field, which is what keeps it from reading as a separate boxed card. */
.panel-light {
  color: var(--text-light-body);
}
.panel-light h3 { color: var(--text-light-heading); }

/*
  Real photo added 2026-08-24: a dark, moody private lounge shot with a
  lit watch-display shelf. background-position is biased right/upper to
  frame that shelf (the most on-theme part of the image) rather than the
  plain wall on the left. background-color stays as a fallback in case the
  file is ever removed — background-image degrades silently if missing
  (no "broken image" glyph, unlike an <img>). The gradient is the
  readability overlay; the source photo is already very dark so it stays
  restrained rather than crushing the image to black.
*/
/* Fixed height (not min-height) so the photo stays a contained visual
   anchor rather than stretching to match the text columns' natural
   height and overpowering them. */
.panel-dark {
  height: 350px;
  color: var(--text-dark-body);
  background-color: var(--charcoal);
  background-image:
    linear-gradient(180deg, rgba(11, 11, 13, 0.6) 0%, rgba(11, 11, 13, 0.82) 100%),
    url('../images/backgrounds/private-appointments.png');
  background-size: cover;
  background-position: 82% 45%;
}
.panel-dark h3 { color: var(--text-dark-heading); }

@media (max-width: 860px) {
  .overview { padding: 40px 0; }
  .overview-header { padding-left: 28px; }
  .overview-grid { grid-template-columns: 1fr; gap: 32px; }
  .overview-panel { padding: 40px 28px; }
  .panel-dark { height: 280px; }
}

/* ==========================================================================
   Section Heading Pattern (shared)
   ========================================================================== */

/* Anchor-jump offset for the sticky header (.site-header) — independent of
   each section's own padding, which varies (--section-pad vs .overview's own
   value) and isn't reliable as an anchor buffer on its own. */
#ledger, #reviews, #services, #approach {
  scroll-margin-top: 100px;
}

.ledger, .process, .about, .reviews { padding: var(--section-pad) 0; }

.ledger h2, .process h2, .about h2 {
  text-align: center;
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  letter-spacing: 0.02em;
}

/* The section-intro headings (.ledger-intro h2 / .reviews-intro h2) each
   carry line-height 1.2; the two headings that use this shared rule as-is
   ("Private by design." and — via the addition below — the final CTA) had
   no explicit line-height and fell back to the 1.7 body value. Bring them
   into the same system. */
.about-inner h2,
.final-cta h2 { line-height: 1.2; }

/* ==========================================================================
   The Ledger — dark, editorial
   ========================================================================== */

.ledger { background: var(--offwhite); color: var(--text-light-body); }

/*
  Premium marketplace/archive layout: a fixed intro column on the left
  (label, heading, copy, "View Full Ledger" link) beside a compact grid of
  four equal transaction cards on the right. No card is enlarged or
  featured — compactness and restraint are the point here, not big photography.
*/
.ledger-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .ledger-layout { grid-template-columns: 1fr; gap: 40px; }
}

.ledger-intro h2 {
  color: var(--text-light-heading);
  text-align: left;
  font-size: clamp(1.7rem, 2.7vw, 2.25rem);
  line-height: 1.2;
  margin: 12px 0 20px;
}

.ledger-intro-copy {
  color: var(--text-light-body);
  font-size: 0.92rem;
  max-width: 34ch;
  margin-bottom: 28px;
}

.ledger-view-all {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.ledger-view-all:hover { border-bottom-color: var(--champagne); }

/* One horizontal row of four on large desktop — closer to the reference
   archive/carousel density. Steps back to 2×2 on tablet, 1-up on phones. */
.ledger-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

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

@media (max-width: 560px) {
  .ledger-cards { grid-template-columns: 1fr; }
}

/* Compact, boxed marketplace card: dark fill, hairline border, small fixed
   image area up top, padded metadata below. */
.ledger-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline-dark);
}

/*
  Fixed, modest image height (not a hero photo) with object-fit: cover.
  Per-watch object-position keeps each watch centered in that compact frame;
  some glove staying visible is expected and fine. No image files are
  modified — CSS positioning only. Used as an empty
  <div class="ledger-image placeholder"> for watches with no photo yet, or
  <div class="ledger-image"><img class="ledger-photo" src="..."></div> once
  a real photo exists.
*/
.ledger-image {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.ledger-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.25s ease-out;
}

.ledger-card:hover .ledger-photo { transform: scale(1.02); }

/* Per-watch framing — estimated by eye; nudge further if needed. */
.ledger-photo--rolex   { object-position: 50% 35%; }
.ledger-photo--tudor   { object-position: 50% 40%; }
.ledger-photo--cartier { object-position: 50% 40%; }
.ledger-photo--iwc     { object-position: 50% 38%; }

.ledger-image.placeholder {
  background: linear-gradient(160deg, var(--charcoal), var(--black));
}

.ledger-details {
  padding: 14px 14px 16px;
}

.ledger-brand {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 4px;
}

.ledger-details h3 {
  font-size: 0.92rem;
  line-height: 1.25;
  margin-bottom: 3px;
  color: var(--text-dark-heading);
}

/* Optional dial/variant detail — sits quietly between model and reference */
.ledger-variant {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.76rem;
  color: var(--text-dark-faint);
  margin-bottom: 4px;
}

.ledger-ref {
  font-size: 0.7rem;
  color: var(--text-dark-faint);
}

/* Understated status label — inline with the reference, not a badge/button */
.ledger-status {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
}
.ledger-status::before {
  content: '·\00A0';
  color: var(--text-dark-faint);
}

/* ==========================================================================
   Sourcing — light panel
   ========================================================================== */

.sourcing {
  background: var(--offwhite);
  color: var(--text-light-body);
  padding: var(--section-pad) 0;
}

.sourcing-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

.sourcing-copy h2 {
  color: var(--text-light-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.15rem);
  margin-bottom: 22px;
  max-width: 14ch;
}

.sourcing-copy p {
  max-width: 48ch;
  margin-bottom: 34px;
}

.sourcing-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-light);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-light-heading);
}
.sourcing-list li:first-child { border-top: 1px solid var(--hairline-light); }

.sourcing-list .num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--champagne);
  letter-spacing: 0.05em;
}

@media (max-width: 860px) {
  .sourcing-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Private Appointments — dark
   ========================================================================== */

.appointments {
  background: var(--charcoal);
  color: var(--text-dark-body);
  padding: 116px 0;
  text-align: center;
}

.appointments-inner { max-width: 600px; margin: 0 auto; }

.appointments h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  margin-bottom: 20px;
}

.appointments p { margin-bottom: 40px; }

/* ==========================================================================
   Reviews — light panel for contrast after the dark Ledger
   ========================================================================== */

/* Reduced independently of the shared section padding — this section reads
   as a compact intro + cards composition, not a tall standalone section. */
.reviews {
  background: var(--charcoal);
  color: var(--text-dark-body);
}

/*
  Two-column composition in the spirit of The Ledger: a fixed intro column
  (eyebrow, heading, copy, "Read All Reviews" link, "Leave a Review" CTA)
  beside three compact review cards. Mirrors .ledger-layout's breakpoints.
*/
.reviews-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .reviews-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* Matches .ledger-intro h2 exactly (this section is built "in the spirit of
   The Ledger") — only the heading colour differs, for the dark background.
   The bottom margin had drifted to 16px vs the Ledger's 20px. */
.reviews-intro h2 {
  color: var(--text-dark-heading);
  text-align: left;
  font-size: clamp(1.7rem, 2.7vw, 2.25rem);
  line-height: 1.2;
  margin: 12px 0 20px;
}

/* Same 28px as .ledger-intro-copy — was 20px. */
.reviews-intro-copy {
  font-size: 0.92rem;
  max-width: 34ch;
  margin-bottom: 28px;
}

.reviews-cta {
  display: block;
  width: fit-content;
  margin-top: 20px;
}

.reviews-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .reviews-cards { grid-template-columns: 1fr; }
}

.review-card {
  border: 1px solid var(--hairline-light);
  padding: 26px 24px;
  background: var(--cream);
}

.review-stars {
  color: var(--champagne);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.review-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-light-heading);
  margin-bottom: 16px;
}

.review-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.review-meta cite {
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-light-heading);
}

.review-location {
  font-size: 0.76rem;
  color: var(--text-light-body);
}
.review-location::before { content: '— '; }

.review-extra {
  font-size: 0.72rem;
  color: var(--text-light-body);
  opacity: 0.8;
  margin-top: 6px;
}

/* Shared "quiet text link with arrow" pattern, used here and in The Ledger
   (kept as a separate class so this section never touches Ledger's rule).
   `display: inline-block` matches .ledger-view-all — without it this link
   was pure-inline, giving it a different box height from its Ledger twin
   and making the mobile tap-target padding a no-op. */
.view-all-link {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.view-all-link:hover { border-bottom-color: var(--champagne); }

/* ==========================================================================
   Leave a Review — light panel, follows Reviews above it
   ========================================================================== */

.leave-review {
  background: var(--offwhite);
  color: var(--text-light-body);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline-light);
}

.leave-review-inner {
  max-width: 640px;
  margin: 0 auto;
}

.leave-review-intro {
  text-align: center;
  margin-bottom: 48px;
}

.leave-review-intro h1 {
  color: var(--text-light-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.15rem);
  margin-bottom: 16px;
}

.leave-review-intro p {
  max-width: 46ch;
  margin: 0 auto;
}

.leave-review-form {
  background: var(--cream);
  border: 1px solid var(--hairline-light);
  padding: 40px;
}

.form-standalone-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light-body);
  margin-bottom: 8px;
}

/* CSS-only 1–5 star picker. Markup is deliberately reverse-ordered
   (5,4,3,2,1) with flex-direction: row-reverse so it reads left-to-right,
   letting the sibling combinator fill stars up to the hovered/checked one. */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 4px;
}
.star-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star-rating label {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(11, 11, 13, 0.18);
  transition: color 0.15s ease;
}
.star-rating label::before { content: '★'; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: var(--champagne);
}

.form-field label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-light-heading);
  font-weight: 400;
  cursor: pointer;
}
.form-field label.checkbox input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--champagne);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .leave-review-form { padding: 28px 22px; }
}

/* Small permanent note near the submit button — distinct from #reviewFormNote
   (the post-submit thank-you message, hidden until the form is submitted).
   This one is always visible; it exists so submitting is never mistaken for
   immediate publication. */
.form-verification-note {
  margin-top: 14px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-light-body);
}

/* ==========================================================================
   Reviews — dedicated page (reviews.html)
   Light/ivory throughout — mirrors the structure of ledger.html's dedicated-
   page section (page intro / filter / grid / bottom CTA) but with light
   tokens instead of dark, so this page reads as the Ledger's contrast pair.
   ========================================================================== */

.reviews-page-intro {
  background: var(--offwhite);
  color: var(--text-light-body);
  padding: 64px 0 48px;
  text-align: center;
}

.reviews-page-intro h1 {
  color: var(--text-light-heading);
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  margin: 12px 0 18px;
}

.reviews-page-copy {
  max-width: 52ch;
  margin: 0 auto;
  font-size: 0.95rem;
}
.reviews-page-copy--secondary {
  margin-top: 10px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.full-reviews {
  background: var(--offwhite);
  padding: 16px 0 var(--section-pad);
  border-top: 1px solid var(--hairline-light);
}

.full-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .full-reviews-grid { grid-template-columns: 1fr; }
}
.full-reviews-grid:empty { display: none; }

/* Optional "View Transaction" link for a review card once a real Ledger
   match exists — reuses the same quiet-link-with-arrow language as
   .view-all-link. */
.review-transaction-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.review-transaction-link:hover { border-bottom-color: var(--champagne); }

/* Tasteful empty/development state — shown whenever there are zero reviews
   to display (today: always, since #reviewsGrid has no real cards yet;
   later: also reused by the filter JS for "no reviews match this filter"). */
.reviews-empty-state {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 32px;
  border: 1px solid var(--hairline-light);
  background: var(--cream);
}
.reviews-empty-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-light-heading);
  margin-bottom: 10px;
}
.reviews-empty-copy {
  font-size: 0.9rem;
  margin-bottom: 22px;
}

/* ==========================================================================
   Homepage Reviews carousel (2026-09-13) — scoped entirely under
   #homeReviewPreview / .home-reviews-carousel, injected by
   js/home-reviews.js. Every card inside is the same shared .review-card/
   .review-stars/.review-quote/.review-meta/.review-location/.review-extra
   markup reviews.html uses (js/reviews.js's cardHtml()) — these rules only
   resize/lay it out here via descendant selectors. reviews.html, the
   Ledger, and the base .review-card/.review-quote rules above are
   untouched by anything in this block.
   ========================================================================== */

/* min-width: 0 on all three ancestors overrides the default min-width:auto
   that grid/flex items get — without it, the track's oversized natural
   content width (all cards laid end to end) inflates the .reviews-layout
   grid track itself instead of staying contained and internally
   scrollable, causing page-level horizontal overflow on narrow viewports. */
#homeReviewPreview { min-width: 0; }

.home-reviews-carousel { position: relative; min-width: 0; }

.home-reviews-viewport { overflow: hidden; min-width: 0; }

.home-reviews-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px; /* room for the focus outline below, not clipped by the viewport */
}
.home-reviews-track::-webkit-scrollbar { display: none; }
.home-reviews-track:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

/* Ledger-scaled: compact, consistent height, footer metadata pinned to the
   bottom regardless of review length (line-clamped below) rather than
   stretched with awkward gaps. */
.home-reviews-track > .review-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.home-reviews-track > .review-card .review-meta { margin-top: auto; padding-top: 12px; }

@media (min-width: 560px) {
  .home-reviews-track > .review-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (min-width: 1300px) {
  .home-reviews-track > .review-card { flex-basis: calc((100% - 32px) / 3); }
}

/* Long reviews clamp instead of stretching the card — keeps every card the
   same compact height. Normal-length reviews are well under 6 lines here. */
.home-reviews-track .review-quote {
  font-size: 0.88rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline-light);
  background: var(--cream);
  color: var(--charcoal);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.home-reviews-arrow:hover,
.home-reviews-arrow:focus-visible {
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--black);
}
.home-reviews-arrow--prev { left: -14px; }
.home-reviews-arrow--next { right: -14px; }

@media (max-width: 560px) {
  .home-reviews-arrow { width: 30px; height: 30px; font-size: 1rem; }
  .home-reviews-arrow--prev { left: -6px; }
  .home-reviews-arrow--next { right: -6px; }
}

/* ==========================================================================
   Process (How We Work) — dark
   ========================================================================== */

.process { background: var(--black); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-top: 68px;
}

.process-steps li {
  border-top: 1px solid var(--champagne);
  padding-top: 26px;
}

.roman {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--champagne);
  margin-bottom: 16px;
}

.process-steps h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.process-steps p {
  font-size: 0.85rem;
}

@media (max-width: 960px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sell or Trade
   Two zones: a dominant dark "cinematic" teaser, and a quieter, condensed
   form beneath it — deliberately secondary so the form doesn't dominate.
   ========================================================================== */

/* Background photo: same file used behind the homepage Final CTA. Overlay
   is intentionally strong (darker than .final-cta's) so it reads as a
   subtle cinematic backdrop, not the focal point — this section is mostly
   text on a near-black field. background-image degrades silently if the
   file is ever missing (no "broken image" glyph, unlike an <img>). */
.sell-teaser {
  color: var(--offwhite);
  background-color: var(--black);
  background-image:
    linear-gradient(rgba(11, 11, 13, 0.86), rgba(11, 11, 13, 0.92)),
    url('../images/backgrounds/sell-watch-banner.png');
  background-size: cover;
  background-position: center 55%;
  padding: 108px 0;
  text-align: center;
}

.sell-teaser-inner { max-width: 560px; margin: 0 auto; }

.sell-teaser h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  margin-bottom: 16px;
}

.sell-teaser-sub {
  max-width: 42ch;
  margin: 0 auto 32px;
  color: var(--text-dark-body);
}

.sell-benefits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 44px;
}

.sell-benefits li {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--text-dark-body);
  position: relative;
  padding-left: 18px;
}
.sell-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: var(--champagne);
}

/* Accounts for the sticky header so anchor-jumps don't land underneath it */
#source-request,
#leave-review,
.sell-form-wrap {
  scroll-margin-top: 100px;
}

.sell-form-wrap {
  background: var(--offwhite);
  color: var(--text-light-body);
  padding: 75px 0;
}

.sell-form-container {
  max-width: 640px;
  margin: 0 auto;
}

.sell-form-note-intro {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto 48px;
}

.sell-form {
  background: var(--cream);
  border: 1px solid var(--hairline-light);
  padding: 40px;
}

/* Compact cinematic banner (sell-or-trade.html) — short dark band above the
   form, distinct from the taller .sell-teaser (kept for the future-pages
   draft). Same background photo, stronger overlay since there's less
   content to carry it. */
.sell-banner {
  color: var(--offwhite);
  background-color: var(--black);
  background-image:
    linear-gradient(rgba(11, 11, 13, 0.82), rgba(11, 11, 13, 0.88)),
    url('../images/backgrounds/sell-watch-banner.png');
  background-size: cover;
  background-position: center 55%;
  padding: 64px 0;
  text-align: center;
}

.sell-banner-inner { max-width: 520px; margin: 0 auto; }

.sell-banner h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 12px;
}

.sell-banner-sub {
  color: var(--text-dark-body);
  font-size: 0.95rem;
  max-width: 42ch;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .sell-banner { padding: 40px 0; }
  .sell-banner .eyebrow { margin-bottom: 14px; }
}

/* Photo upload — whole element is a <label for="photos">, so clicking
   anywhere in it opens the file picker without any JS. The real input
   stays visible at the bottom rather than hidden, so nothing about its
   accessibility semantics changes from a plain <input type="file">. */
.upload-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 1px dashed var(--hairline-light);
  background: var(--offwhite);
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-field:hover,
.upload-field:focus-within {
  border-color: var(--champagne);
  background: var(--cream);
}

.upload-icon {
  width: 22px;
  height: 22px;
  color: var(--champagne);
  margin-bottom: 6px;
}

.upload-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light-heading);
}

.upload-hint {
  font-size: 0.8rem;
  color: var(--text-light-body);
}

.upload-field input[type="file"] {
  width: 100%;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-light-body);
  cursor: pointer;
}
.upload-field input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--champagne);
  border: none;
  padding: 8px 16px;
  margin-right: 12px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .upload-field { padding: 18px; }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.form-field-full { grid-column: 1 / -1; }

.form-field label,
.form-field legend {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light-body);
  margin-bottom: 8px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--hairline-light);
  background: transparent;
  padding: 10px 2px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--text-light-heading);
}
.form-field textarea {
  resize: vertical;
  min-height: 90px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
}

.form-field input[type="file"] {
  width: 100%;
  font-size: 0.82rem;
  padding: 16px;
  border: 1px dashed var(--hairline-light);
  background: var(--offwhite);
  cursor: pointer;
}
.form-field input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--champagne);
  border: none;
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
}

.form-field-inline {
  display: flex;
  gap: 32px;
}
.form-field-inline fieldset {
  border: none;
  padding: 0;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-right: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-light-heading);
  font-weight: 400;
}

.form-divider {
  height: 1px;
  background: var(--hairline-light);
  margin: 8px 0 28px;
}

.form-note {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--champagne);
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .sell-form { padding: 28px 22px; }
  .sell-teaser { padding: 90px 0; }
  .source-form { padding: 28px 22px; }
}

/* ==========================================================================
   Source a Watch (request) — light panel, follows Sourcing above it
   ========================================================================== */

.source-request {
  background: var(--offwhite);
  color: var(--text-light-body);
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline-light);
}

.source-request-inner {
  max-width: 640px;
  margin: 0 auto;
}

.source-request-intro {
  text-align: center;
  margin-bottom: 48px;
}

.source-request-intro h1 {
  color: var(--text-light-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.15rem);
  margin-bottom: 16px;
}

.source-request-intro p {
  max-width: 46ch;
  margin: 0 auto;
}

.source-form {
  background: var(--cream);
  border: 1px solid var(--hairline-light);
  padding: 40px;
}

/* Compact trust row under the form — reuses .panel-icon so the icon
   language stays consistent with the homepage service panels. */
.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-light);
}
.trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light-body);
}

/* ==========================================================================
   Cross-sell CTA (source-a-watch.html) — compact black band pointing to
   the sell/trade flow, distinct from .final-cta's homepage copy/photo.
   ========================================================================== */

.cross-cta {
  background: var(--black);
  color: var(--offwhite);
  text-align: center;
  padding: 56px 0;
  border-top: 1px solid rgba(200, 165, 106, 0.25);
}

.cross-cta-inner { max-width: 480px; margin: 0 auto; }

.cross-cta-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--offwhite);
  margin-bottom: 22px;
}

/* ==========================================================================
   About — light panel
   ========================================================================== */

/* On the homepage this section sits directly below Services, which is also
   a --cream field, with no contrast shift between them — the transition
   read as accidental empty space. A hairline top border is the same
   adjacent-light-section divider already used by .leave-review and
   .source-request. */
.about {
  background: var(--cream);
  color: var(--text-light-body);
  border-top: 1px solid var(--hairline-light);
}

.about-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.about-inner h2 {
  color: var(--text-light-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.15rem);
}
/* The :not() guards keep this off the eyebrow and the small-caps closing
   line — both are also <p> inside .about-inner. Without them this rule
   cascaded onto the eyebrow (0.7rem -> 1.05rem, ~50% larger than every
   other eyebrow on the site) — the known "Our Approach eyebrow" bug. The
   body paragraph is unchanged. Matches the guard already used in the
   mobile block. */
.about-inner p:not(.eyebrow):not(.about-supporting) { margin-top: 22px; font-size: 1.05rem; }

/* Short closing statement under the body copy — reuses the same small-caps,
   tracked, champagne treatment as .eyebrow so it reads as part of the same
   typographic system rather than a new visual idea. margin-top is stated
   explicitly here now that the broad `.about-inner p` rule above no longer
   supplies it (same 22px it was already getting). */
.about-inner .about-supporting {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 22px;
}

/* ==========================================================================
   Final CTA — short closing statement before the footer
   ========================================================================== */

/*
  Background photo: a dark Miami-at-night skyline/car shot, used purely as a
  mood backdrop — the overlay is intentionally strong since this is a short,
  text-first closing banner, not a photo section. background-position is
  nudged down slightly to favor the skyline/reflections over the empty sky.
*/
.final-cta {
  color: var(--offwhite);
  text-align: center;
  background-color: var(--black);
  background-image:
    linear-gradient(rgba(11, 11, 13, 0.78), rgba(11, 11, 13, 0.86)),
    url('../images/backgrounds/sell-watch-banner.png');
  background-size: cover;
  background-position: center 55%;
  padding: 40px 0;
  /* Thin champagne dividers, brought back from the brand board's rule-line
     treatment (seen under the wordmark and flanking it at the page foot) —
     kept faint on purpose, not a heavy border. */
  border-top: 1px solid rgba(200, 165, 106, 0.25);
  border-bottom: 1px solid rgba(200, 165, 106, 0.25);
}

.final-cta-inner { position: relative; max-width: 560px; margin: 0 auto; }

/* Optional decorative flanking lines, matching the brand board's
   "— DIAL RESERVE —" rule-line motif. Only shown where there's real room
   beside the centered content, so they never crowd the text. */
@media (min-width: 861px) {
  .final-cta-inner::before,
  .final-cta-inner::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 64px;
    height: 1px;
    background: rgba(200, 165, 106, 0.35);
  }
  .final-cta-inner::before { right: 100%; margin-right: 32px; }
  .final-cta-inner::after { left: 100%; margin-left: 32px; }
}

.final-cta h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 20px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--black);
  color: var(--text-dark-body);
  padding-top: 66px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--hairline-dark);
}

.footer-brand { margin-bottom: 14px; }

.footer-wordmark { font-size: 1.16rem; }

.footer-tagline { font-size: 0.85rem; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 18px;
}

.footer-col p { font-size: 0.85rem; margin-bottom: 8px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--offwhite); }

/* Very subtle champagne column dividers, desktop only — swaps for a
   horizontal rule once columns stack (see the 860px breakpoint below). */
.footer-col:not(:last-child) {
  border-right: 1px solid rgba(200, 165, 106, 0.18);
}

.footer-bottom {
  padding: 24px 32px;
  font-size: 0.72rem;
  color: var(--text-dark-faint);
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(200, 165, 106, 0.18);
    padding-bottom: 16px;
  }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The Ledger — dedicated page (ledger.html)
   Reuses .ledger-card / .ledger-image / .ledger-photo / .ledger-brand /
   .ledger-variant / .ledger-ref / .ledger-status from the homepage Ledger
   as-is (same dark cards, hairline borders, champagne accents, Playfair
   model names) — only page-specific layout/sizing lives here.
   ========================================================================== */

.ledger-page-intro {
  background: var(--black);
  padding: 64px 0 48px;
  text-align: center;
}

.ledger-page-intro h1 {
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  margin: 12px 0 18px;
}

.ledger-page-copy {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-dark-body);
  font-size: 0.95rem;
}
.ledger-page-copy--secondary {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-dark-faint);
}

.full-ledger {
  background: var(--black);
  padding: 16px 0 var(--section-pad);
}

/* Restrained text-button filter row — no borders/boxes, just weight + color
   to show the active state. Works with JS; every card stays visible if JS
   is unavailable (see js/script.js). */
.ledger-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 4px;
  margin-bottom: 48px;
}

.ledger-filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark-faint);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ledger-filter-btn:hover { color: var(--text-dark-body); }
.ledger-filter-btn.is-active {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
}

.ledger-filter-btn:not(:last-child)::after {
  content: '·';
  margin-left: 12px;
  color: var(--hairline-dark);
}

/* Cards are the same design as the homepage Ledger, just given more room —
   a taller image and a touch more breathing space — since this page exists
   to show them, not summarize them. */
.full-ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.full-ledger-grid .ledger-image { height: 220px; }

@media (max-width: 1200px) {
  .full-ledger-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .full-ledger-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .full-ledger-grid { grid-template-columns: 1fr; }
}

.ledger-filter-empty {
  text-align: center;
  color: var(--text-dark-faint);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 40px;
}

/* Reserved for a future optional per-transaction review — unused today,
   no content is ever fabricated here. Kept quiet/understated on purpose,
   consistent with the homepage review cards' restraint. */
.ledger-card-review {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-dark);
}
.ledger-card-review .review-stars { font-size: 0.7rem; margin-bottom: 6px; }
.ledger-card-review .review-quote {
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.ledger-bottom-cta {
  background: var(--charcoal);
  padding: 56px 0;
  text-align: center;
}
.ledger-bottom-cta-inner { max-width: 480px; margin: 0 auto; }
.ledger-bottom-cta h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 14px;
}
.ledger-bottom-cta p {
  color: var(--text-dark-body);
  font-size: 0.92rem;
  margin-bottom: 28px;
}

/* ==========================================================================
   Form submission — honeypot, inline validation errors, success panel
   (added 2026-09-08 with the n8n form wiring; used on source-a-watch.html,
   sell-or-trade.html, leave-a-review.html)
   ========================================================================== */

/* Honeypot: off-screen rather than display:none — some bots skip
   display:none / visibility:hidden fields. aria-hidden + tabindex="-1" on
   the input keep it out of the tab order and the accessibility tree. */
.dr-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sell/Trade — calm helper line where the photo upload used to be. */
.form-photo-note {
  margin: 4px 0 24px;
  font-size: 0.85rem;
  color: var(--text-light-body);
}

/* Inline field error. Muted oxblood — the brand palette has no error colour;
   this is kept deliberately restrained and is never the only signal (the
   field also gets .has-error and a text message). */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
fieldset.has-error legend {
  border-bottom-color: #9E2B25;
  color: #9E2B25;
}
fieldset.has-error { outline: none; }
.form-field-error {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #9E2B25;
  text-transform: none;
  letter-spacing: normal;
}

/* Error summary under the submit button (reuses the old #…Note element). */
.form-error-summary {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 2px solid #9E2B25;
  background: rgba(158, 43, 37, 0.06);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-light-body);
}
.form-error-summary a {
  color: var(--text-light-heading);
  text-decoration: underline;
}

/* Submit button while the request is in flight. */
button.btn.is-loading,
button.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* Success panel — replaces the <form> after a successful submission. */
.form-success {
  border: 1px solid var(--hairline-light);
  border-left: 2px solid var(--champagne);
  background: var(--cream);
  padding: 32px 28px;
}
.form-success:focus { outline: none; }
.form-success h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-light-heading);
  margin-bottom: 10px;
}
.form-success p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-light-body);
  max-width: 54ch;
}

/* ==========================================================================
   Mobile / responsive QA pass (2026-09-08)
   Tap-target sizing + small-screen refinements only. No desktop rules change
   (everything here is scoped to <= 560px, plus one flex-shrink guard on the
   already-mobile-only hamburger). No colour, type, or layout redesign.
   ========================================================================== */

/* Hamburger: was collapsing from 40px to ~32px wide inside the header flex
   row at the narrowest widths, and 40px is under a comfortable thumb size. */
.nav-toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

@media (max-width: 560px) {
  /* Tighter header gutters/gap so the logo + hamburger never crowd at 320px
     (header height unchanged). */
  .header-inner { gap: 16px; padding: 20px 20px; }

  /* Star rating — larger glyphs + padding so each star is an easy tap. */
  .star-rating { gap: 10px; padding-top: 6px; }
  .star-rating label { font-size: 2rem; padding: 4px 0; }

  /* Ledger brand-filter buttons — taller hit area. */
  .ledger-filter { gap: 6px 2px; }
  .ledger-filter-btn { padding: 10px 12px; }

  /* Sell/Trade Box & Papers radios — bigger label hit area + bigger control. */
  .form-field-inline { gap: 24px; }
  .form-field-inline .radio {
    padding: 8px 4px 8px 0;
    min-height: 40px;
    margin-right: 8px;
  }
  .form-field-inline input[type="radio"] { width: 18px; height: 18px; }

  /* Review consent / initials checkboxes — bigger control + a little padding. */
  .form-field label.checkbox { padding: 6px 0; }
  .form-field label.checkbox input[type="checkbox"] { width: 18px; height: 18px; }

  /* Form submit buttons go full-width on phones — standard mobile CTA. Trim the
     side padding too so the longest label ("Submit Your Watch") stays on one
     line even at 320px. */
  .source-form > button.btn,
  .sell-form > button.btn,
  .leave-review-form > button.btn {
    display: block;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  /* Small text links / footer links — a touch of vertical padding for tapping. */
  .footer-col a { display: inline-block; padding: 4px 0; }
  .ledger-view-all,
  .view-all-link { padding: 6px 0; }
}

/* Footer: the 3 columns in a 2-col grid (561–860px) left a lone "Contact"
   column with dead space beside it. Stack to one column for the whole
   tablet+phone range instead — reads as intentional, no orphan. The
   existing champagne bottom-hairline between stacked columns is kept. */
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Mobile editorial compression pass (2026-09-08)

   Goal: same premium identity with the vertical excess removed — mobile
   should read as one designed editorial layout, not desktop sections
   stacked. Everything here is inside a max-width media query (mostly
   <=600px, the phone range; a few layout-stack tweaks at <=860px already
   existed), so the approved desktop design is untouched. No colour or
   font-family changes. Type sizes only shrink on small screens.

   The single biggest lever is the --section-pad mobile token below; the
   rest is a coherent small-screen scale (headings, eyebrow, paragraph
   leading, button padding) plus per-section spacing and component
   tightening (Ledger cards, Services panels, Reviews empty state, forms,
   footer). No functional markup, form, or JS behaviour is touched.
   ========================================================================== */

/* --- Mobile rhythm token -------------------------------------------------
   Feeds .ledger / .reviews / .about / .sourcing / .source-request /
   .leave-review and the dedicated ledger/reviews pages. 76 -> 54 removes
   44px of stacked padding from every one of those sections. */
@media (max-width: 640px) {
  :root { --section-pad: 54px; }
}

@media (max-width: 600px) {

  /* --- Small-screen type scale ---------------------------------------- */
  .eyebrow { margin-bottom: 12px; }

  .hero-copy h1 {
    font-size: clamp(1.72rem, 7vw, 2rem);
    line-height: 1.12;
    margin-bottom: 16px;
  }
  .hero-sub { font-size: 0.9rem; margin-bottom: 26px; }

  .ledger h2, .process h2, .about h2,
  .about-inner h2 { font-size: 1.5rem; }
  .ledger-intro h2, .reviews-intro h2 { font-size: 1.4rem; margin: 6px 0 10px; }
  .source-request-intro h1, .leave-review-intro h1, .sell-banner h1,
  .ledger-page-intro h1, .reviews-page-intro h1 { font-size: 1.5rem; }
  .final-cta h2 { font-size: 1.4rem; margin-bottom: 14px; }
  .cross-cta-label { font-size: 1.15rem; margin-bottom: 16px; }
  .ledger-bottom-cta h2 { font-size: 1.4rem; }

  /* Editorial paragraph rhythm — a touch tighter than the 1.7 body default,
     so multi-line copy blocks stop feeling like presentation slides. */
  .hero-sub,
  .ledger-intro-copy,
  .reviews-intro-copy,
  .reviews-empty-copy,
  .about-inner p,
  .source-request-intro p,
  .leave-review-intro p,
  .sell-banner-sub,
  .sell-form-note-intro,
  .ledger-page-copy,
  .reviews-page-copy { line-height: 1.55; }

  /* Consistent mobile button — a little less horizontal bulk, same height feel. */
  .btn { padding: 14px 26px; }
  .btn-outline { padding: 11px 22px; }

  /* --- 1. Header — modestly shorter, logo + 44px hamburger unchanged --- */
  .header-inner { padding: 12px 20px; }
  /* The desktop consistency pass took the wordmark to 1.3rem for more
     presence beside the monogram; at the phone header width that runs the
     "DIAL RESERVE" text into the hamburger at 320px. Keep the phone
     wordmark at its previous 1.2rem — desktop stays 1.3rem. */
  .wordmark { font-size: 1.2rem; }

  /* --- 2. Hero — the integrated cinematic composition (full-bleed photo +
     vertical scrim + copy over the dark lower field) lives in the <=860px
     block above. Phone tier only tunes the button stack. --- */
  .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-actions .btn { width: 100%; text-align: center; }

  /* --- 3. Ledger (home) — refined catalogue, still one column -------- */
  .ledger-layout { gap: 22px; }
  .ledger-intro-copy { margin-bottom: 16px; }
  .ledger-cards { gap: 12px; }
  .ledger-image { height: 150px; }
  .ledger-details { padding: 12px 14px 14px; }

  /* --- 4. Reviews (home) — understated empty state ------------------- */
  .reviews-layout { gap: 10px; }               /* was 20px — tighten the CTA -> empty-state gap */
  .reviews-intro-copy { margin-bottom: 14px; }
  /* Only the button centres on mobile — the intro above it stays left. */
  .reviews-cta { margin-top: 12px; margin-left: auto; margin-right: auto; }
  /* Keep the card (hairline + cream fill) but shrink it toward a footnote:
     tighter vertical padding, a small title->body gap, and no trailing
     space when the copy is the last thing in the card (homepage — the
     reviews.html version still has a "Leave a Review" button after it). */
  .reviews-empty-state { max-width: 380px; padding: 18px 18px; }
  .reviews-empty-title { font-size: 1.05rem; margin-bottom: 6px; }
  .reviews-empty-copy { margin-bottom: 12px; }
  .reviews-empty-copy:last-child { margin-bottom: 0; }

  /* --- 5. Services — compressed triptych, no full-screen panels ----- */
  .overview { padding: 36px 0; }
  .overview-header { padding-left: 4px; margin-bottom: 16px; gap: 14px; }
  /* Tighter grid gap + trimmed panel top/bottom padding so the three
     modules read as one continuous section (module -> module drops from
     ~66px to ~42px). Internal content and the dark panel's role as the
     visual anchor are unchanged. */
  .overview-grid { gap: 6px; }
  .overview-panel { padding: 18px 22px; }
  .overview-panel h3 { font-size: 1.2rem; margin-bottom: 10px; }
  .panel-features li { margin-bottom: 5px; }
  .overview-cta { margin-top: 14px; }
  /* On mobile the panels are single-column, so the dark panel no longer
     needs a fixed height to avoid out-growing its siblings — min-height
     keeps it a solid photo band without clipping the text over it. */
  .panel-dark {
    height: auto;
    min-height: 200px;
    background-position: 64% 42%;
  }

  /* --- 6. Our Approach — editorial: eyebrow + heading stay centered
     (via .about-inner's text-align), the body paragraph goes left-aligned
     in a readable centred column so it stops reading as a slide. The
     :not() guards keep this off the eyebrow and the small-caps closing
     line — both are also <p> inside .about-inner. Desktop is unaffected. */
  .about-inner p:not(.eyebrow):not(.about-supporting) {
    margin: 14px auto 0;
    font-size: 0.95rem;
    text-align: left;
    max-width: 42ch;
  }
  .about-inner .about-supporting { margin-top: 14px; }

  /* --- 7. Final CTA — shorter closing band ------------------------- */
  .final-cta { padding: 32px 0; }

  /* --- 9. Forms — tighter shell, same fields/behaviour ------------- */
  .source-request-intro, .leave-review-intro { margin-bottom: 26px; }
  .sell-form-note-intro { margin-bottom: 26px; }
  .sell-form-wrap { padding: 44px 0; }        /* had no mobile override — was 75px */
  .sell-banner { padding: 34px 0; }
  .source-form, .sell-form, .leave-review-form { padding: 24px 18px; }
  .form-row { margin-bottom: 18px; }
  .form-divider { margin-bottom: 20px; }
  .form-photo-note { margin-bottom: 18px; }
  .trust-row { margin-top: 26px; padding-top: 22px; }
  .cross-cta { padding: 40px 0; }
  .form-success { padding: 24px 20px; }

  /* --- Dedicated Ledger / Reviews pages --------------------------- */
  .ledger-page-intro, .reviews-page-intro { padding: 40px 0 26px; }
  .full-ledger, .full-reviews { padding-top: 8px; }
  .ledger-filter { margin-bottom: 26px; }
  .full-ledger-grid { gap: 16px; }
  .full-ledger-grid .ledger-image { height: 168px; }
  .ledger-bottom-cta { padding: 40px 0; }

  /* --- 10. Footer — trimmed vertical spacing, still one column ----
     A second, lighter compression: the stacked groups sit closer, the
     bottom padding is smaller. Left alignment, hairlines between groups,
     logo/wordmark sizing and the mailto link are all unchanged. */
  .site-footer { padding-top: 36px; }
  .footer-brand { margin-bottom: 10px; }
  .footer-inner { gap: 12px; padding-bottom: 26px; }
  .footer-col h4 { margin-bottom: 9px; }
  .footer-col:not(:last-child) { padding-bottom: 10px; }
  .footer-bottom { padding: 12px 20px; }
}

/* ==========================================================================
   Available Watches — dedicated page (available.html, added 2026-09-29)
   A close visual sibling of The Ledger: same dark section, same
   .ledger-page-intro used as-is for the header block, same card language
   (charcoal fill, hairline border, fixed-height cover photo, champagne
   accents, Playfair model name) reproduced here under its own .watch-*
   classes rather than sharing .ledger-card directly — so a future Ledger-
   only visual tweak can never accidentally bleed into this page, and vice
   versa. Photography-forward: no filter bar, no extra chrome, 3/2/1 columns.
   ========================================================================== */

.available-section {
  background: var(--black);
  padding: 16px 0 var(--section-pad);
}

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

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

.watch-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline-dark);
  display: flex;
  flex-direction: column;
}

.watch-image {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.watch-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.25s ease-out;
}
.watch-card:hover .watch-photo { transform: scale(1.02); }

/* Tasteful, not a loud "SALE"-style ribbon — same restrained language as
   .ledger-status, just promoted onto the photo since this is the one status
   a visitor actively needs to notice before reading the details below. */
.watch-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 11, 13, 0.74);
  border: 1px solid rgba(200, 165, 106, 0.4);
  padding: 5px 10px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
}
.watch-badge-dot {
  width: 5px;
  height: 5px;
  background: var(--champagne);
  transform: rotate(45deg);
}

.watch-details {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.watch-brand {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 4px;
}

.watch-details h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 4px;
  color: var(--text-dark-heading);
}

.watch-ref {
  font-size: 0.72rem;
  color: var(--text-dark-faint);
}

.watch-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-dark-body);
}

.watch-price {
  margin-top: 14px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--champagne);
}
.watch-price--request {
  font-size: 0.78rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-dark-body);
}

.watch-cta-row {
  margin-top: auto;
  padding-top: 18px;
}
.watch-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 18px;
}

.available-empty {
  text-align: center;
  color: var(--text-dark-faint);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .available-grid { gap: 16px; }
  .watch-image { height: 260px; }
  .watch-details { padding: 16px 16px 18px; }
}