/* ==========================================================================
   THE BEZEL SPOT — site.css
   Light, warm, gallery-like: ivory ground, near-black wordmark, gold accent.
   Two deliberate dark moments (the cinematic band and the footer) invert the
   text tokens rather than redefining components — see .inverse.
   ========================================================================== */

:root {
  /* --- Ground & surface ------------------------------------------------ */
  --paper:      #FFFFFF;   /* clean white — luxury retail ground           */
  --paper-2:    #F6F4F0;   /* barely-there warm grey for alternating bands */
  --paper-3:    #ECE8E1;   /* inset fills                                  */

  /* --- Type ------------------------------------------------------------ */
  --ink:        #1A1A1A;   /* neutral charcoal — retail, not warm cream    */
  --ink-soft:   #4A4A4A;   /* body copy                                    */
  --muted:      #767676;   /* labels and meta (4.5:1 on white)             */

  /* --- Accent ----------------------------------------------------------- */
  --gold:       #8C6D2F;   /* accent TEXT — dark enough to pass AA         */
  --gold-line:  #B99A5B;   /* decorative rules and dots only, never text   */

  /* --- Lines ------------------------------------------------------------ */
  --rule:       rgba(26, 26, 26, 0.16);
  --rule-soft:  rgba(26, 26, 26, 0.08);

  /* --- Inverted set (used inside .inverse) ------------------------------ */
  --ink-deep:     #111111;
  --on-dark:      #FFFFFF;
  --on-dark-dim:  #C6C0B4;   /* bright enough to hold over moving footage */
  --rule-dark:    rgba(255, 255, 255, 0.18);

  /* --- Button roles (flip inside .inverse) ------------------------------ */
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  /* --- Family ----------------------------------------------------------- */
  /* HOUSE RULE: one typeface, everywhere. Marcellus carries headings and
     running copy alike. Nothing on this site is set in a second face, so
     these two tokens are deliberately the same value — anything that needs a
     font reaches for one of them and lands in the same place. */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-sans:    "Marcellus", Georgia, "Times New Roman", serif;

  /* --- Type scale ------------------------------------------------------- */
  --display-xl: clamp(2.6rem, 6.4vw, 5.5rem);
  --display-l:  clamp(1.9rem, 3.9vw, 3.25rem);
  --display-m:  clamp(1.35rem, 2.1vw, 1.75rem);
  --body:       1.0625rem;
  --body-s:     0.9375rem;
  --label:      0.6875rem;

  /* --- Space scale ------------------------------------------------------ */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --measure: 62ch;
  --shell: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --enter: 700ms;

  color-scheme: light;
}

/* Token-level inversion. Any component placed inside picks this up. */
.inverse {
  --paper:     var(--ink-deep);
  --paper-2:   var(--ink-deep);
  --paper-3:   rgba(255, 255, 255, 0.06);
  --ink:       var(--on-dark);
  --ink-soft:  var(--on-dark-dim);
  --muted:     var(--on-dark-dim);
  --gold:      var(--gold-line);
  --rule:      var(--rule-dark);
  --rule-soft: rgba(255, 255, 255, 0.10);
  --btn-bg:    var(--on-dark);
  --btn-fg:    var(--ink-deep);
  color: var(--on-dark);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}
.label--brass { color: var(--gold); }

.lede {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: var(--measure);
  font-weight: 300;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.section { padding-block: clamp(var(--s8), 11vw, var(--s10)); background: var(--paper); }
.section--tint { background: var(--paper-2); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-bottom: clamp(var(--s6), 5vw, var(--s8));
  max-width: var(--measure);
}

/* --- Logo -------------------------------------------------------------- */
.logo { display: block; height: auto; width: clamp(112px, 12vw, 150px); }
.logo--hero { width: clamp(200px, 24vw, 320px); }
.logo--footer { width: clamp(160px, 17vw, 210px); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 56px;
  padding: 0 2.25rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background 320ms var(--ease), color 320ms var(--ease),
              border-color 320ms var(--ease);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.inverse .btn:hover { color: var(--ink-deep); background: var(--gold-line); border-color: var(--gold-line); }

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

.btn__arrow { transition: transform 380ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
}
.masthead--solid {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
/* Home: the hero carries the full lockup, so the masthead holds only the link. */
.masthead__row--end { justify-content: flex-end; }

.masthead__link {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  padding-block: 0.75rem;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.masthead__link:hover { color: var(--gold); border-bottom-color: currentColor; }

/* ==========================================================================
   Hero — the one cropped asset: an abstract dial macro, safe to crop.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(86vh, 900px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink-deep);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.46) 46%, rgba(10,10,10,0.30) 74%, rgba(10,10,10,0.52) 100%),
    rgba(10, 10, 10, 0.30);
}

.hero__inner {
  position: relative;
  padding-block: clamp(var(--s8), 12vh, var(--s10)) clamp(var(--s7), 8vh, var(--s9));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s5), 3vw, var(--s6));
  align-items: flex-start;
}

/* Constrain the headline itself, never the whole hero block. */
.hero h1 { font-size: var(--display-xl); letter-spacing: -0.025em; max-width: 17ch; }
.hero__sub { max-width: 42ch; font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); color: var(--on-dark-dim); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }


.js .hero__inner > * { opacity: 0; transform: translateY(18px); }
.js .is-ready .hero__inner > * { animation: rise var(--enter) var(--ease) forwards; }
.js .is-ready .hero__inner > *:nth-child(1) { animation-delay: 80ms; }
.js .is-ready .hero__inner > *:nth-child(2) { animation-delay: 200ms; }
.js .is-ready .hero__inner > *:nth-child(3) { animation-delay: 320ms; }
.js .is-ready .hero__inner > *:nth-child(4) { animation-delay: 440ms; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Brand strip — real maker's marks, set monochrome so seven different
   logos read as one row rather than seven competing identities.
   ========================================================================== */

.brands { background: var(--paper-2); border-block: 1px solid var(--rule-soft); }

/* The viewport clips to the section width; the track inside it is twice
   that width (two copies of the same row) and slides left by exactly one
   copy's width, so it can loop forever with no visible seam. */
.brands__viewport { overflow: hidden; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.brands__track {
  display: flex;
  width: max-content;
  animation: brands-scroll 30s linear infinite;
}
.brands__viewport:hover .brands__track,
.brands__viewport:focus-within .brands__track { animation-play-state: paused; }
@keyframes brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; }
}

.brands__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.4vw, 3.25rem);
  padding-inline: clamp(1.5rem, 3.4vw, 3.25rem);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex: 0 0 auto;
  opacity: 0.62;
  transition: opacity 420ms var(--ease);
}
.brand:hover { opacity: 1; }

.brand img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Optical sizing, per mark. A 15:1 wordmark and a 1:1 monogram cannot
   share one box and still carry equal weight. */
.brand--rm img     { max-width: 210px; max-height: 22px; }
.brand--fpj img    { max-width: 132px; max-height: 50px; }
.brand--ap img     { max-width: 64px;  max-height: 48px; }
/* Stacked lockups carry a mark above the wordmark, so they need more
   height than a plain wordmark to hold equal presence in the row. */
.brand--patek img  { max-width: 112px; max-height: 58px; }
.brand--rolex img  { max-width: 100px; max-height: 58px; }
.brand--vc img     { max-width: 150px; max-height: 40px; }
.brand--jc img     { max-width: 96px;  max-height: 62px; }

.brands__note { padding-bottom: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.brands__note--top { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: 0; }

/* ==========================================================================
   Editorial showcase — full-watch clips keep native 9:16, never cropped.
   ========================================================================== */

.showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s6), 5vw, var(--s8)) clamp(var(--s5), 3vw, var(--s7));
}
@media (min-width: 760px) {
  .showcase__grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .piece--feature { grid-column: 1 / span 6; }
  .piece--tall    { grid-column: 8 / span 5; margin-bottom: clamp(2rem, 7vw, 5.5rem); }
  .piece--offset  { grid-column: 3 / span 5; margin-top: clamp(1rem, 4vw, 3rem); }
}

.piece { display: flex; flex-direction: column; gap: var(--s4); margin: 0; }

.piece__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--paper-3) center/cover no-repeat;
  border: 1px solid var(--rule-soft);
  cursor: zoom-in;
  padding: 0;
  display: block;
  color: inherit;
  font: inherit;
}
.piece__frame video,
.piece__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* frame matches source ratio, so nothing is lost */
  transition: transform 900ms var(--ease), opacity 600ms var(--ease);
}
.piece__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,11,9,0.38), transparent 46%);
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .piece__frame:hover video,
  .piece__frame:hover img { transform: scale(1.035); }
  .piece__frame:hover::after { opacity: 1; }
  .piece__frame:hover .piece__expand { opacity: 1; transform: none; }
}

.piece__expand {
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 2;
  font-size: var(--label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(12, 11, 9, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  padding: 0.6rem 0.9rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}
@media (hover: none) { .piece__expand { opacity: 1; transform: none; } }

.piece__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.piece__model {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--display-m);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.piece__key {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  align-self: center;
}
.piece__val {
  font-size: var(--body-s);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.piece__val--poa {
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--label);
}

/* ==========================================================================
   Cinematic band — dark moment, abstract macro, safe to crop
   ========================================================================== */

.band {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 52vh, 620px);
  display: grid;
  align-items: center;
  isolation: isolate;
  background: var(--ink-deep);
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media video, .band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,11,9,0.92) 0%, rgba(12,11,9,0.70) 44%, rgba(12,11,9,0.30) 100%);
}
/* Keep the shell full width so band copy aligns to the page gutter; the
   headline and lede carry their own measure. */
.band__inner {
  padding-block: clamp(var(--s7), 8vw, var(--s9));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  align-items: flex-start;
}
.band h2 { max-width: 15ch; }
.band .lede { max-width: 46ch; }
.band h2 { font-size: var(--display-l); }

/* Wallpaper bands run taller, so a 9:16 film keeps more of the watch in
   frame and reads as a macro detail rather than a thin sliver. */
.band--tall { min-height: clamp(440px, 74vh, 800px); }

/* Centred variant — used where the band carries a call to action. */
.band--center .band__inner {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.band--center h2 { max-width: 20ch; }
.band--center .lede { max-width: 48ch; }
.band--center .band__scrim {
  background: linear-gradient(to bottom, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.58) 50%, rgba(10,10,10,0.78) 100%);
}
.band--center .lede { margin-inline: auto; }

/* A still whose subject sits mid-frame: nudge it into the bright right-hand
   side so the copy keeps the dark half to itself. Type and watch each get
   their own space instead of fighting over the middle. */
.band--subject-right .band__media img { object-position: 68% 50%; }
/* Shorter measure than a normal band so the last words stop before the
   bracelet rather than sitting on it. */
.band--subject-right .lede { max-width: 38ch; }

/* Narrow screens can't spare a column for the watch, so the subject re-centres
   and the scrim turns vertical. This dial is bright and busy, so the middle
   stop is held dark — the watch still reads, the type never competes with it. */
@media (max-width: 760px) {
  .band--subject-right .band__media img { object-position: 60% 50%; }
  .band--subject-right .band__scrim {
    background: linear-gradient(to bottom, rgba(12,11,9,0.88) 0%, rgba(12,11,9,0.78) 46%, rgba(12,11,9,0.90) 100%);
  }
}

/* ==========================================================================
   Detail row — three macros under the authentication claim. Abstract copy
   ("case, movement, dial verified") is easy to write; these show the actual
   surfaces a specialist reads. Caption sits on the image, not beneath it.
   ========================================================================== */
.detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: clamp(var(--s6), 6vw, var(--s8));
  list-style: none;
  padding: 0;
}
@media (min-width: 700px) { .detail-row { grid-template-columns: repeat(3, 1fr); } }

.detail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-deep);
}
.detail img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* This frame's subject — the stone setting — sits down the left edge of the
   source, which a centred 4:5 crop throws away. Without it the frame is just
   another green dial. */
.detail--bezel img { object-position: 18% 50%; }


/* Parallax only ever moves the media, never the type. */
.hero__media video, .hero__media img,
.band__media video, .band__media img { will-change: transform; }

/* ==========================================================================
   Editorial columns — one system, shared by the verification steps and the
   How We Work blocks. Hairline dividers, no boxes.
   ========================================================================== */

.cols {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cols > * + * {
  margin-top: clamp(2rem, 5vw, 2.5rem);
  padding-top: clamp(2rem, 5vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 820px) {
  .cols { grid-template-columns: repeat(3, 1fr); }
  .cols > * { padding-inline: clamp(1.5rem, 3vw, 2.75rem); }
  .cols > * + * {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--rule-soft);
  }
  .cols > *:first-child { padding-left: 0; }
  .cols > *:last-child { padding-right: 0; }
}

.col { display: flex; flex-direction: column; gap: var(--s3); }
.col__rule {
  width: 28px;
  height: 1px;
  background: var(--gold-line);
  margin-bottom: var(--s3);
}
.col h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.18;
  color: var(--ink);
}
.col p { color: var(--ink-soft); font-size: var(--body-s); line-height: 1.72; }

/* --- Markets spec bar -------------------------------------------------- */
.specbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.25rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  border-block: 1px solid var(--rule);
  margin-bottom: clamp(var(--s7), 6vw, var(--s8));
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}
@media (min-width: 720px) { .specbar { gap: 0; justify-content: space-between; } }

/* ==========================================================================
   Closing
   ========================================================================== */

.closing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.closing h2 { font-size: var(--display-l); max-width: 18ch; }
.closing .lede { text-align: center; }

/* ==========================================================================
   Footer — the second dark moment
   ========================================================================== */

/* The footer is the page's own ground: white, with a hairline to separate it
   from whatever section ends above it. */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(var(--s7), 7vw, var(--s9)) var(--s6);
}
.footer__top {
  display: grid;
  gap: clamp(var(--s6), 5vw, var(--s7));
  padding-bottom: clamp(var(--s6), 5vw, var(--s7));
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 820px) { .footer__top { grid-template-columns: 1fr auto; align-items: start; } }

.footer__brand { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }

.contact { display: flex; flex-direction: column; gap: var(--s4); }
.contact__row { display: flex; flex-direction: column; gap: var(--s1); }
.contact__link {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 320ms var(--ease), border-color 320ms var(--ease);
  align-self: flex-start;
  word-break: break-word;
}
.contact__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* The arrow says "this opens WhatsApp" without printing a number. */
.contact__arrow {
  display: inline-block;
  white-space: nowrap;
  margin-left: 0.35em;
  transition: transform 320ms var(--ease);
}
.contact__link:hover .contact__arrow { transform: translateX(4px); }

/* WhatsApp mark, in its own colours. It lifts on hover rather than
   recolouring — the green is the brand's, not ours to restyle. */
.contact__wa {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 50%;
  transition: transform 320ms var(--ease), filter 320ms var(--ease);
}
.contact__wa:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.contact__wa:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Instagram mark, in its own colours — same lift-on-hover treatment as
   WhatsApp rather than a recolour. */
.contact__ig {
  display: inline-flex;
  align-self: flex-start;
  transition: transform 320ms var(--ease), filter 320ms var(--ease);
}
.contact__ig:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.contact__ig:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.contact__ig img { display: block; }

.footer__base {
  padding-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  justify-content: space-between;
  align-items: center;
}
.footer__fine { font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.footer__legal {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 320ms var(--ease);
}
.footer__legal:hover { color: var(--gold); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }

/* ==========================================================================
   Lightbox — stays dark: a lit object against a dark room
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(12, 11, 9, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: clamp(1rem, 2.4vw, 1.75rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.lightbox__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(1rem, 2vw, 1.375rem);
  color: var(--ink);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__close {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  transition: border-color 320ms var(--ease), color 320ms var(--ease);
}
.lightbox__close:hover { border-color: var(--gold); color: var(--gold); }

.lightbox__stage {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) clamp(1.5rem, 4vw, 3rem);
  gap: var(--s5);
  grid-template-rows: minmax(0, 1fr) auto;
}
.lightbox__frame {
  min-height: 0;
  max-width: min(100%, 46vh);
  aspect-ratio: 9 / 16;
  width: 100%;
  place-self: center;
  border: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.lightbox__frame video { width: 100%; height: 100%; object-fit: cover; }

.lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: center;
  align-items: baseline;
  text-align: center;
}
.lightbox__meta div { display: flex; gap: var(--s3); align-items: baseline; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--enter) var(--ease), transform var(--enter) var(--ease);
}
.js .reveal.is-in.d1 { transition-delay: 90ms; }
.js .reveal.is-in.d2 { transition-delay: 180ms; }
.js .reveal.is-in.d3 { transition-delay: 270ms; }

/* ==========================================================================
   Quote page
   ========================================================================== */

.page-head {
  padding-block: clamp(var(--s8), 12vw, calc(var(--s10) + 2rem)) clamp(var(--s6), 5vw, var(--s7));
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
/* Quote header carried on footage, same treatment as the home bands. */
.page-head--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-deep);
  border-bottom: 0;
}
.page-head--media .band__scrim {
  background: linear-gradient(to bottom, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.62) 55%, rgba(10,10,10,0.86) 100%);
}

.page-head__inner { position: relative; display: flex; flex-direction: column; gap: var(--s4); }
.page-head h1 { font-size: var(--display-l); max-width: 16ch; }
.page-head .lede { max-width: 54ch; }

/* ==========================================================================
   Legal prose — one measured column. Nothing here should feel like a wall.
   ========================================================================== */
.prose { max-width: 68ch; margin-inline: 0; }
.prose h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p {
  color: var(--ink-soft);
  font-size: var(--body-s);
  line-height: 1.75;
  margin-top: var(--s4);
  max-width: 62ch;
}
.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose__meta {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.quote-layout { display: grid; gap: clamp(var(--s7), 6vw, var(--s9)); align-items: start; }
/* Two columns only while there is something in the second one. The form now
   stands alone, so it keeps a comfortable measure instead of a dead gutter. */
@media (min-width: 980px) {
  .quote-layout:has(.aside) { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); }
  .quote-layout:not(:has(.aside)) { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
}

.form { display: flex; flex-direction: column; gap: clamp(var(--s6), 4vw, var(--s7)); }

.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s5); }
.fieldset__legend {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  padding: 0 0 var(--s4);
  border-bottom: 1px solid var(--rule);
  width: 100%;
  margin-bottom: var(--s2);
}

.fieldset--plain {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}

.form-note {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  margin-top: var(--s4);
  font-size: var(--body-s);
  color: var(--ink-soft);
  outline: none;
}
.form-note--sent {
  border: 1px solid var(--rule);
  border-top-color: var(--gold-line);
  border-top-width: 2px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: 0;
  background: var(--paper-2);
}
.form-note--sent h2 { margin-bottom: var(--s3); }
.form-note--failed a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.form-note--sent .btn { margin-top: var(--s3); }

.field-row { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.field > label, .field__label {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.field__hint { font-size: var(--body-s); color: var(--muted); }

.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--body);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.85rem 0 0.85rem;
  min-height: 52px;
  transition: border-color 320ms var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.75; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--gold); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.textarea { resize: vertical; min-height: 132px; line-height: 1.65; padding-top: 0.6rem; }

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}
.select option { background: var(--paper); color: var(--ink); }

.choice { display: flex; flex-wrap: wrap; gap: var(--s3); }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.choice__opt span {
  display: block;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--rule);
  font-size: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color 300ms var(--ease), color 300ms var(--ease), background 300ms var(--ease);
}
.choice__opt input:hover + span { border-color: var(--muted); }
.choice__opt input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(194, 163, 107, 0.12); }
.choice__opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.field-error { font-size: var(--body-s); color: #9E2A2A; min-height: 0; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-bottom-color: #9E2A2A; }

.form__foot { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.form__fine { font-size: var(--body-s); color: var(--muted); max-width: 48ch; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside { display: flex; flex-direction: column; gap: var(--s6); }
.aside__card {
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.aside__card h2 { font-size: 1.375rem; }
.aside__card p { color: var(--ink-soft); font-size: var(--body-s); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule-soft);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step__key {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.step p { font-size: var(--body-s); color: var(--ink-soft); line-height: 1.7; }

/* ==========================================================================
   Primary navigation — the same set of tabs on every page
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.25rem);
}
.nav__link {
  position: relative;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  padding-block: 0.75rem;
  white-space: nowrap;
  transition: color 300ms var(--ease);
}
.nav__link:hover { color: var(--gold); }
/* The current tab keeps a brass underline so you always know where you are. */
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35rem;
  height: 1px;
  background: var(--gold-line);
}
/* Over the homepage hero the bar is transparent, so the tabs invert. */
.masthead--over .nav__link { color: var(--on-dark-dim); }
.masthead--over .nav__link:hover,
.masthead--over .nav__link[aria-current="page"] { color: var(--on-dark); }

/* Below ~620px the logo and three tabs can't share one line without the tabs
   running off-screen, so the row wraps and the tabs take their own line. The
   wordmark stays hard left on every width — centring it on phones would put
   it somewhere different from where it sits on a laptop. */
@media (max-width: 620px) {
  .masthead__row { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 1rem; }
  .masthead__row .logo { flex: 0 0 auto; }
  .nav {
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: clamp(0.9rem, 4vw, 1.5rem);
  }
  .nav__link { letter-spacing: 0.12em; font-size: 0.625rem; padding-block: 0.4rem; }
  .nav__link[aria-current="page"]::after { bottom: 0.1rem; }
}

/* ==========================================================================
   Catalogue
   ========================================================================== */

.cat-filters {
  position: sticky;
  /* The masthead's height changes with viewport and font loading, so it is
     measured at runtime into --masthead-h; the fallback only covers the gap
     before that script runs. */
  top: var(--masthead-h, 144px);
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: var(--s4);
}
/* One scrolling row rather than four stacked ones — on a phone that puts the
   watches on screen immediately instead of below a wall of buttons. */
.cat-filters__row {
  display: flex;
  gap: var(--s3);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-filters__row::-webkit-scrollbar { display: none; }
.cat-chip {
  font-family: inherit;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: border-color 280ms var(--ease), color 280ms var(--ease), background 280ms var(--ease);
  white-space: nowrap;
}
.cat-chip:hover { border-color: var(--gold); color: var(--gold); }
.cat-chip.is-active { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.cat-chip__count { color: var(--muted); margin-left: 0.4em; }
.cat-chip.is-active .cat-chip__count { color: var(--ink-soft); }

/* Label text that only a screen reader needs. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Search ------------------------------------------------------------- */
/* Sits where the brand chips used to: a collector usually arrives knowing the
   model or the reference, so searching is the faster route in. Brand browsing
   moves to the foot of the page for the people who'd rather scroll. */
.cat-search__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.cat-search__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 22rem;
  min-width: 0;
}
.cat-search__input {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.85rem 2.6rem 0.85rem 1.1rem;
  transition: border-color 280ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.cat-search__input::-webkit-search-cancel-button { display: none; }
.cat-search__input:focus { outline: none; border-color: var(--gold); }
.cat-search__input::placeholder { color: var(--muted); }
.cat-search__clear {
  position: absolute;
  right: 0.55rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
}
.cat-search__clear:hover { color: var(--ink); }
.cat-search__count {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Brand filter, page foot -------------------------------------------- */
.cat-filters--foot {
  position: static;
  background: var(--paper-2);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 0;
  padding-block: var(--s7);
}
.cat-filters--foot .cat-filters__row {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
}
.cat-filters__label {
  width: 100%;
  text-align: center;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: var(--s4);
}

.cat-brand-section { padding-block: clamp(var(--s7), 7vw, var(--s9)); }
.cat-brand-section + .cat-brand-section { border-top: 1px solid var(--rule-soft); }
.cat-brand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: clamp(var(--s6), 4vw, var(--s7));
}
.cat-brand-head h2 { font-size: var(--display-m); }
.cat-brand-head__count {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  white-space: nowrap;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--s5), 2.5vw, var(--s6)) clamp(var(--s4), 2vw, var(--s5));
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px)  { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }

.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  color: inherit;
}
.cat-card__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  overflow: hidden;
}
.cat-card__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 500ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover .cat-card__frame img { transform: scale(1.06); }
}
.cat-card__body { display: flex; flex-direction: column; gap: 0.25rem; }
.cat-card__brand {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.cat-card__model {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.25;
  color: var(--ink);
}
.cat-card__ref {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* Not yet confirmed — deliberately reads as absent, never as a value. */
.cat-card__ref--pending { color: var(--muted); font-style: italic; }

/* Rarity is the thing a collector scans for, so it carries the brass. */
.cat-card__rarity {
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 0.35rem;
}
.cat-card__price {
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.cat-card__enquire {
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 280ms var(--ease), border-color 280ms var(--ease);
}
.cat-card:hover .cat-card__enquire { color: var(--gold); border-color: var(--gold); }

.cat-empty {
  text-align: center;
  padding-block: var(--s8);
  color: var(--muted);
  display: none;
}
.cat-empty.is-visible { display: block; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .hero__inner > * { opacity: 1; transform: none; animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .piece__frame:hover video, .piece__frame:hover img { transform: none; }
}

/* ==========================================================================
   Split — a photograph carrying half a section, so a block of copy never
   has to stand on its own. Media side alternates down the page: right in
   the collection block, left under How We Work. That alternation is the
   rhythm; it is not decoration, and each frame captions what it is proof of.
   ========================================================================== */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first .split__media { order: -1; }
}
.split__media { margin: 0; }
.split__body > * + * { margin-top: var(--s4); }
.split__body .btn { margin-top: var(--s5); }
.split__media .detail { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .split__media .detail { aspect-ratio: 3 / 4; } }

/* A split sitting above the steps it introduces. */
.split + .cols { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Three short steps in a half-width lane stack; the 3-across rule assumes
   the full shell. */
.cols.cols--stack { grid-template-columns: 1fr; }
.cols.cols--stack > * { padding-inline: 0; }
.cols.cols--stack > * + * {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
  border-left: 0;
}

/* A single detail run full width — the closing image of a dense section,
   where three tiles would out-weigh the words they follow. */
.detail--wide {
  aspect-ratio: 4 / 3;
  margin-top: clamp(var(--s6), 6vw, var(--s8));
}
/* 2:1, not wider: the source is 3:2, and a thinner band slices the dial
   into an arbitrary strip instead of a composition. */
@media (min-width: 760px) { .detail--wide { aspect-ratio: 2 / 1; } }

/* ==========================================================================
   Featured six — a filmstrip from the collection, not the collection. Six
   across only once the viewport can give each frame room; the full grid
   lives on the collection page.
   ========================================================================== */
/* Two examples, not six — kept to two columns at every width and capped so
   the pair reads as a considered pairing rather than stretching to fill a
   grid built for more cards than it holds. */
.cat-grid--feature {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 860px) { .cat-grid--feature { max-width: 760px; } }

.feature-foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.feature-foot a {
  font-size: var(--body-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.feature-foot a:hover { color: var(--gold); border-color: var(--gold); }

/* Six cards in one row share a baseline: a piece whose reference is its
   model name (every Richard Mille) has one line less, so the feet are
   pinned to the bottom rather than floating up. */
.cat-grid--feature .cat-card__body { flex: 1 1 auto; }
.cat-grid--feature .cat-card__foot { margin-top: auto; padding-top: var(--s3); }

/* ==========================================================================
   Photograph + words as one object
   --------------------------------------------------------------------------
   A short centred hairline under a headline, and captions that read as a
   title rather than a footnote pinned to a corner. One motif, used wherever
   words sit on or beside an image, so the pairing is deliberate everywhere.
   ========================================================================== */
.rule-c {
  width: 56px;
  height: 1px;
  background: var(--gold-line);
  border: 0;
  margin: var(--s4) 0 0;
}
.rule-c--center { margin-inline: auto; }


/* A statement carried by words alone is centred and given the same rule, so
   it belongs to the same page as the frames around it. */
.statement { text-align: center; align-items: center; margin-inline: auto; }
.statement .lede { margin-inline: auto; }
.statement .rule-c { margin-inline: auto; margin-block: 0; }


/* --------------------------------------------------------------------------
   Ordered steps. The number replaces the decorative rule: in a sequence the
   position is information, a gold dash is not.
   -------------------------------------------------------------------------- */
.col__num {
  font-size: var(--label);
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.steps .col { gap: var(--s2); }
.steps .col p { margin-top: var(--s1); }

/* A run of five steps is taller than any sensible photograph, so the frame
   beside it stretches to the column rather than floating centred in it. */
@media (min-width: 900px) {
  .split--stretch { align-items: stretch; }
  .split--stretch .split__media .detail { aspect-ratio: auto; height: 100%; }
}

/* ==========================================================================
   HOUSE STYLE — sampled from Ahmed Seddiqi, adopted site-wide
   --------------------------------------------------------------------------
   Colours read straight off their pages: the warm near-black behind their
   dark sections (#1B110E), the bronze their headings and filled buttons run
   on (#A0816B), on white. No neutral grey.

   Type: they set everything in a flared humanist — Optima or a relative.
   Neither is on Google Fonts, so the whole site runs on the closest one
   available, Marcellus, headings and body alike. It ships a single weight,
   which is faithful — their pages never go bold. Headings are caps, tracked,
   in the bronze; that one move is most of the voice.

   Everything here is token-level, plus the heading treatment. Not one
   component is redefined.
   ========================================================================== */
:root {
  /* One family, everywhere. Marcellus carries the headings and the running
     copy alike; nothing on the page is set in a second typeface. */
  --paper:      #FFFFFF;
  --paper-2:    #FAF8F6;
  --paper-3:    #F1ECE7;

  --ink:        #1B110E;   /* their dark, doubling as the text colour  */
  --ink-soft:   #4A3B33;
  --muted:      #7A675C;

  --gold:       #876B53;   /* bronze text: 4.9:1 on white, 4.7:1 on the
                              tint, so small brass labels clear AA      */
  --gold-line:  #A0816B;   /* their button bronze — rules and marks only */

  --rule:       rgba(27, 17, 14, 0.16);
  --rule-soft:  rgba(27, 17, 14, 0.08);

  --ink-deep:   #1B110E;   /* dark bands and the footer                 */
  --on-dark:    #FFFFFF;
  --on-dark-dim:#D6C9BF;
  --rule-dark:  rgba(255, 255, 255, 0.22);

  /* Caps set wider than sentence case at the same size, so the display
     scale comes down a step. */
  --display-xl: clamp(2.05rem, 4.9vw, 4.15rem);
  --display-l:  clamp(1.55rem, 3.0vw, 2.5rem);
  --display-m:  clamp(1.2rem, 1.8vw, 1.5rem);

  --heading:    #876B53;

  --btn-bg:     #876B53;
  --btn-fg:     #FFFFFF;
}
.inverse { --heading: var(--on-dark); }

h1, h2, .display {
  text-transform: uppercase;
  letter-spacing: 0.055em;
  line-height: 1.24;
  font-variation-settings: normal;
  color: var(--heading);
}
.hero h1 { letter-spacing: 0.05em; }
.col h3, .cat-card__model { letter-spacing: 0.02em; }
.label { letter-spacing: 0.22em; }
.btn { letter-spacing: 0.18em; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

/* Tenor Sans has one weight and a large x-height; it needs more leading than
   Jost did or the paragraphs set too tight. */
body { letter-spacing: 0.012em; }
p, .lede { line-height: 1.76; }
:root { --body: 1.125rem; --body-s: 1rem; }

/* ==========================================================================
   Band, mirrored — subject left, words right
   --------------------------------------------------------------------------
   The puzzle-dial frame puts the watch left of centre, so the standard band
   (which assumes subject-right) would set the copy straight over the dial.
   The offset is padding rather than a margin because .band__inner is also
   .shell, and .shell's auto margins are what centre the whole band.
   ========================================================================== */
.band--subject-left .band__scrim {
  background: linear-gradient(to left,
    rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.82) 30%,
    rgba(10,10,10,0.52) 58%, rgba(10,10,10,0.14) 100%);
}
@media (min-width: 900px) {
  .band--subject-left .band__inner { padding-left: 50%; }
}
.band--subject-left .lede { max-width: 40ch; }
/* On a phone the crop has nowhere to hide the subject, so the scrim goes
   bottom-up and the copy sits under the watch rather than across it. */
@media (max-width: 899px) {
  .band--subject-left .band__scrim {
    background: linear-gradient(to bottom,
      rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.62) 45%, rgba(10,10,10,0.90) 100%);
  }
}

/* ==========================================================================
   Filter — one control, both pages
   ========================================================================== */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.filter-toggle:hover,
.filter-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.filter-toggle svg { display: block; flex: 0 0 auto; }

.filter-panel {
  margin-top: var(--s5);
  padding: var(--s5) 0 var(--s4);
  border-top: 1px solid var(--rule-soft);
}
/* The panel lives inside the sticky search bar, which does not scroll with
   the page — opened, anything past the fold was unreachable. Cap the bar at
   the height left under the masthead and let the panel scroll inside it. */
.cat-filters { display: flex; flex-direction: column; }
.cat-filters:has(.filter-panel:not([hidden])) {
  max-height: calc(100vh - var(--masthead-h, 144px));
  max-height: calc(100dvh - var(--masthead-h, 144px));
}
.filter-panel__wrap { display: flex; flex-direction: column; min-height: 0; }
.filter-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.filter-panel[hidden] { display: none; }
.filter-group + .filter-group { margin-top: var(--s5); }
.filter-group__label {
  font-size: var(--label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s3);
}
.filter-set { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.filter-opt {
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: 0;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 260ms var(--ease), border-color 260ms var(--ease),
              background 260ms var(--ease);
}
.filter-opt:hover { color: var(--gold); border-color: var(--gold); }
.filter-opt.is-active {
  color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg);
}

/* The one inline link in a page-head: underlined so it reads as a link over
   photography, where colour alone is not enough to mark one. */
.page-head__link {
  color: var(--on-dark);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.page-head__link:hover { color: var(--gold-line); }

/* ==========================================================================
   Filter groups — checkboxes, two columns, each group foldable
   ========================================================================== */
.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 var(--s3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  text-transform: uppercase;
  letter-spacing: 0.055em;
  text-align: left;
  cursor: pointer;
}
.filter-group__chev { transition: transform 300ms var(--ease); color: var(--muted); }
.filter-group__head[aria-expanded="false"] .filter-group__chev { transform: rotate(180deg); }

.filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-top: var(--s4);
}
@media (min-width: 620px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
.filter-grid[hidden] { display: none; }

/* The model list is read under brand headings, so a visitor who ignores the
   brand filter still has somewhere to look. Sub-groups fold away with their
   brand when one is ticked above. */
.filter-body[hidden], .filter-sub[hidden] { display: none; }
.filter-sub + .filter-sub { margin-top: var(--s4); }
.filter-sub__head {
  margin: 0;
  padding-top: var(--s4);
  font-size: var(--label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-sub__head + .filter-grid { padding-top: var(--s3); }

.filter-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  font-size: var(--body-s);
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.filter-check input:checked {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  /* the tick, drawn rather than loaded */
  background-image: linear-gradient(45deg, transparent 46%, #FFF 46%, #FFF 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 60%, #FFF 60%, #FFF 70%, transparent 70%);
  background-size: 10px 10px, 10px 10px;
  background-position: 2px 6px, 5px 2px;
  background-repeat: no-repeat;
}
.filter-check:hover { color: var(--gold); }
.filter-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.filter-panel__foot { margin-top: var(--s5); }
.filter-clear {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: color 260ms var(--ease), border-color 260ms var(--ease);
}
.filter-clear:hover { color: var(--gold); border-color: var(--gold); }

/* A count on the toggle, so a collapsed panel still says it is doing work. */
.filter-toggle[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  margin-left: 0.1rem;
  padding: 0 4px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.625rem;
  letter-spacing: 0;
}

/* Safari and Firefox draw a dropdown affordance on a search input bound to a
   datalist; the list is gone, and so is the arrow it drew. */
.cat-search__input::-webkit-calendar-picker-indicator { display: none !important; }

/* ==========================================================================
   Enquire dialog — form or WhatsApp, for one named piece
   ========================================================================== */
.enquire { position: fixed; inset: 0; z-index: 200; }
.enquire[hidden] { display: none; }
.enquire__scrim { position: absolute; inset: 0; background: rgba(12, 8, 6, 0.72); }
.enquire__panel {
  position: relative;
  max-width: 520px;
  margin: max(8vh, 2rem) auto 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(12, 8, 6, 0.35);
}
.enquire__title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  margin: var(--s3) 0 0;
}
.enquire__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s5);
}
.enquire__actions .btn { width: 100%; }
.btn--wa { background: #25D366; border-color: #25D366; color: #0B3D23; }
.btn--wa:hover { background: #1EB858; border-color: #1EB858; color: #FFFFFF; }
.enquire__fine { margin-top: var(--s4); font-size: var(--body-s); color: var(--muted); }
.enquire__close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: none; border: 0; padding: 0.35rem 0.5rem;
  font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.enquire__close:hover { color: var(--gold); }

/* ==========================================================================
   Steps over a photograph
   --------------------------------------------------------------------------
   The three steps sit on the case macro rather than beside it. Three columns
   on a wide screen, stacked on a phone, with the scrim carrying the whole
   frame rather than one side of it.
   ========================================================================== */
/* Three columns of copy have to hold over a moving, brightly-lit movement,
   so this scrim runs heavier and flatter than a picture band's would. */
.band--steps .band__media img,
.band--steps .band__media video { object-position: 50% 50%; }
.band--steps .band__scrim {
  background: linear-gradient(to bottom,
    rgba(12,10,8,0.90) 0%, rgba(12,10,8,0.86) 50%, rgba(12,10,8,0.92) 100%);
}
.band--steps .band__inner { max-width: var(--shell); }

.steps--band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 880px) {
  .steps--band { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.steps--band .col { gap: var(--s2); }
.steps--band .col__num { color: var(--gold-line); }
.steps--band h3 { color: var(--on-dark); }
.steps--band p { color: var(--on-dark-dim); font-size: var(--body-s); line-height: 1.72; }

/* Form controls do not inherit a family on their own; the clear "x" and the
   filter checkboxes were the last two things on the page still set in Arial. */
.cat-search__clear,
.filter-check input,
input, select, textarea, button { font-family: inherit; }


/* A statement band whose picture is texture rather than subject: the scrim
   runs heavy and even so centred copy never lands on a bright highlight. */
.band--quiet .band__media img { object-position: 50% 62%; }
.band--quiet .band__scrim {
  background: linear-gradient(to bottom,
    rgba(16,11,9,0.88) 0%, rgba(16,11,9,0.80) 45%, rgba(16,11,9,0.90) 100%);
}

/* The four markets sit with the contact details, where a firm's reach
   normally lives, rather than floating unlabelled under a heading. */
.footer__markets { margin-top: var(--s5); }
.footer__cities {
  margin: var(--s2) 0 0;
  color: var(--ink-soft);
  font-size: var(--body-s);
  letter-spacing: 0.04em;
}

/* The day window is the point of this frame, so the scrim clears the right
   half entirely and does its darkening under the copy on the left. */
.band--arabic .band__media img { object-position: 50% 50%; }
.band--arabic .band__scrim {
  background: linear-gradient(to right,
    rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.86) 30%,
    rgba(10,10,10,0.48) 62%, rgba(10,10,10,0.12) 100%);
}
@media (max-width: 760px) {
  .band--arabic .band__scrim {
    background: linear-gradient(to bottom,
      rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.66) 48%, rgba(10,10,10,0.92) 100%);
  }
}

/* A band that carries its own heading: the title sits top-left above the
   columns, with the same rule under it the rest of the page uses. */
.band__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
/* A section title, not a statement line: it wants one line, so the 15ch
   measure the statement bands use does not apply here. */
.band__head h2 { margin: 0; max-width: none; }

/* Breathing room between the page's big blocks. Two bands butted together
   read as one; a gap of paper tells you a new thought has started. */
.rule-gap {
  height: clamp(3.5rem, 9vw, 7.5rem);
  background: var(--paper);
}


/* --- Jump control, catalogue -------------------------------------------- */
/* 216 pieces is a long scroll. One control does both ends of it: it offers
   the end of the collection on the way down and the top on the way back. */
.jump {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(27, 17, 14, 0.10);
  transition: color 280ms var(--ease), border-color 280ms var(--ease),
              transform 280ms var(--ease);
}
.jump:hover { color: var(--gold); border-color: var(--gold); }
.jump:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.jump[hidden] { display: none; }
.jump__arrow { display: block; flex: 0 0 auto; transition: transform 320ms var(--ease); }
.jump[data-dir="up"] .jump__arrow { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .jump, .jump__arrow { transition: none; }
}


/* --- Quoted wording inside a legal page --------------------------------- */
/* The deposit confirmation in the terms is wording a client actually signs,
   so it is set apart from our own prose rather than run into it. */
.prose blockquote.pull {
  margin: var(--s5) 0;
  padding: var(--s4) 0 var(--s4) var(--s4);
  border-left: 2px solid var(--gold-line);
  color: var(--ink);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
}


/* --- Numbered clauses, legal pages -------------------------------------- */
/* Formal structure, plain sentences: the clause number sits in its own
   column so the prose keeps an even left edge down the whole page. */
.prose .clause {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0 0.4rem;
}
.prose .clause__n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prose blockquote.pull { margin-left: 3.5rem; }
@media (max-width: 640px) {
  .prose .clause { grid-template-columns: 2.6rem 1fr; }
  .prose blockquote.pull { margin-left: 0; }
}


/* The RM 88 clip is a vertical frame in a wide band, so it is the horizontal
   middle we see. Pull the crop left of centre: this band sets its copy on the
   right, and the dial belongs clear of it. */
/* --- A band with no photograph behind it -------------------------------- */
/* How We Work reads as three plain steps on paper. No media, no scrim, no
   inverted tokens — the section carries its own light ground. */
.band--plain {
  background: var(--paper);
  min-height: 0;
}
.band--plain .band__inner { padding-block: clamp(var(--s7), 7vw, var(--s8)); }
/* .steps--band was written for an inverted band and paints its own light
   text. On paper those three rules have to come back to the ink tokens. */
.band--plain .steps--band h3 { color: var(--ink); }
.band--plain .steps--band p { color: var(--ink-soft); }
.band--plain .steps--band .col__num { color: var(--gold); }
.band--plain .band__head h2 { color: var(--heading); }

/* --- A plain, centred section heading (e.g. "Examples" above the home
   page's two feature cards) — not tied to a .band, just a simple intro. --- */
.feature-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.feature-head h2 { margin: 0 auto; }
.feature-head .rule-c { margin-inline: auto; }

/* --- "How We Work" heading, now sitting above three photo bands rather
   than above a plain three-column list --------------------------------- */
.band--steps-head {
  background: var(--paper);
  padding-block: clamp(var(--s7), 7vw, var(--s8)) 0;
}
.band--steps-head .band__head { margin-bottom: 0; }
.band--steps-head { padding-bottom: clamp(var(--s6), 5vw, var(--s7)); }

/* A slimmer paper gap that splits the three How We Work photo bands, so
   steps 01, 02 and 03 each read as their own block rather than one wall. */
.rule-gap--steps { height: clamp(1.5rem, 4vw, 3rem); }

/* A step number placed directly inside a photographed .band__inner (rather
   than inside a .steps .col) needs to be a block of its own so its margin
   actually creates space above the heading that follows it. */
.band__inner > .col__num { display: block; }



/* Framing the two page-head clips.
   ------------------------------------------------------------------------
   Both are shot 9:16 and sit in a band twice as wide as it is tall, so the
   width always fills and only the vertical crop is ours to choose. A phone's
   band is far taller in proportion, so it wants a different number from a
   laptop's — hence one value per page, per breakpoint, rather than one rule
   trying to serve four situations. */
.page-head--media .band__media video { object-position: 50% 24%; }

@media (min-width: 900px) {
  /* Taller band, so more of a vertical clip survives the crop. */
  .page-head--collection { min-height: min(88vh, 800px); }
  /* 26% holds the smile and the movement bridge together; higher loses the
     dial entirely, lower blows the face up past recognition. */
  .page-head--collection .band__media video { object-position: 50% 26%; }
  /* The quote-page hero is now a still photo (Aquanaut chronograph flat-lay,
     4:5) rather than the cloisonné-dial video it replaced; the watch sits
     mid-frame either way, so dead centre is still right. */
  .page-head--quote .band__media video,
  .page-head--quote .band__media img { object-position: 50% 50%; }
  /* The clasp is the subject and sits high in a portrait frame. */
  .band--quiet .band__media img { object-position: 50% 38%; }
}