/* ==========================================================================
   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);

  /* --- 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: "Jost", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  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); }

.brands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.4vw, 3.25rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  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--vc img     { max-width: 168px; max-height: 42px; }
.brand--fpj img    { max-width: 132px; max-height: 50px; }
.brand--ap img     { max-width: 64px;  max-height: 48px; }
.brand--jacob img  { max-width: 66px;  max-height: 50px; }
/* 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; }

.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: "Fraunces", Georgia, serif;
  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; }

/* 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: "Fraunces", Georgia, serif;
  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
   ========================================================================== */

.footer {
  background: var(--ink-deep);
  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: "Fraunces", Georgia, serif;
  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); }

.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); }

/* ==========================================================================
   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: "Fraunces", Georgia, serif;
  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; }

.quote-layout { display: grid; gap: clamp(var(--s7), 6vw, var(--s9)); align-items: start; }
@media (min-width: 980px) { .quote-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); } }

.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; }

.field-row { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
/* Dial code stays narrow; the number takes the room it needs. */
.field-row--phone { grid-template-columns: minmax(0, 8rem) 1fr; gap: var(--s4); }

.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; }

/* ==========================================================================
   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; }
}