/* ==========================================================================
   SherAbou Inc. — wholesale showcase
   Tokens mirror SherAbou-Design-System/tokens.css. Do not drift from them.
   ========================================================================== */

:root {
  /* Surfaces */
  --sa-page:      #040310;
  --sa-dark-1:    #0c0a1a;
  --sa-dark-2:    #050410;
  --sa-card:      #13112a;
  --sa-card-lite: #e9e6ef;

  /* Gold */
  --sa-gold-1: #F7E3A1;
  --sa-gold-2: #D4AF55;
  --sa-gold-3: #9C7A2E;
  --sa-gold-gradient: linear-gradient(135deg, #F7E3A1 0%, #D4AF55 50%, #9C7A2E 100%);

  /* Silver */
  --sa-silver-1: #FFFFFF;
  --sa-silver-2: #D8DEE6;
  --sa-silver-3: #A7B0BC;

  /* Text */
  --sa-grey: #8b8d96;
  --sa-grey-bright: #a9abb4;

  /* Lines */
  --sa-line:      rgba(212, 175, 85, 0.22);
  --sa-line-soft: rgba(212, 175, 85, 0.10);

  /* Type */
  --sa-font-display: "Gloock", "Didot", Georgia, serif;
  --sa-font-body:    "Jura", "Avenir Next", system-ui, sans-serif;
  --sa-font-accent:  "Instrument Serif", Georgia, serif;

  /* Tracking */
  --sa-track-wide:  0.42em;
  --sa-track-label: 0.28em;

  /* Rhythm */
  --sa-gutter: clamp(20px, 5vw, 56px);
  --sa-maxw: 1280px;
}

/* --------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(212, 175, 85, 0.075), transparent 62%),
    var(--sa-page);
  background-attachment: fixed;
  color: var(--sa-silver-2);
  font-family: var(--sa-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--sa-gold-2);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 8px;
  transform: translate(-50%, -200%);
  background: var(--sa-dark-1); color: var(--sa-gold-1);
  border: 1px solid var(--sa-line);
  padding: 10px 18px; z-index: 100;
  font-size: 12px; letter-spacing: var(--sa-track-label); text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ------------------------------------------------------ shared elements --- */

.wrap {
  max-width: var(--sa-maxw);
  margin: 0 auto;
  padding-inline: var(--sa-gutter);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: var(--sa-track-wide);
  text-transform: uppercase;
  color: var(--sa-gold-2);
  margin: 0;
}

/* The one divider in the system: gold hairline, centre diamond. */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(340px, 70%);
  margin-inline: auto;
}
.rule::before,
.rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(156,122,46,0) 0%, #E8C96B 50%, rgba(156,122,46,0) 100%);
}
.rule__diamond {
  width: 9px; height: 9px;
  flex: none;
  rotate: 45deg;
  background: linear-gradient(135deg, var(--sa-gold-1), var(--sa-gold-3));
}

.gold-text {
  background: var(--sa-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-family: var(--sa-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sa-gold-1);
  background: transparent;
  border: 1px solid var(--sa-line);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.btn:hover {
  border-color: var(--sa-gold-2);
  background: rgba(212, 175, 85, 0.06);
  color: var(--sa-gold-1);
}
.btn__arrow { transition: transform 0.25s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------- nav --- */

.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--sa-gutter);
  background: rgba(4, 3, 16, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sa-line-soft);
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { height: 26px; width: auto; }
.nav__mark {
  font-family: var(--sa-font-display);
  font-size: 21px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.nav__mark .sher { background: var(--sa-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav__mark .abou { background: linear-gradient(135deg,#FFFFFF 0%,#D8DEE6 55%,#A7B0BC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav__pill {
  font-size: 10px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-gold-1);
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  padding: 8px 14px;      /* 30px tall — a real tap target, not a label */
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav__pill:hover {
  background: rgba(212, 175, 85, 0.08);
  border-color: var(--sa-gold-2);
}

/* --------------------------------------------------------------- hero --- */

.hero {
  padding: clamp(56px, 11vh, 116px) 0 0;
  text-align: center;
}
.hero__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--sa-gutter); }

.hero__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 6.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--sa-silver-1);
  margin: 26px 0 0;
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--sa-font-accent);
  font-style: italic;
  background: var(--sa-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  color: var(--sa-grey-bright);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  max-width: 54ch;
  margin: 24px auto 0;
  text-wrap: pretty;
}

.hero__rule { margin-block: 34px; }
.hero__cta { margin-bottom: clamp(48px, 8vh, 84px); }

/* ----------------------------------------------------------- spectrum --- */
/* The signature. One bar per SKU, in that product's own dominant colour. */

.spectrum {
  --bar-h: clamp(72px, 13vh, 132px);
  padding-bottom: 12px;
}

.spectrum__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--bar-h);
  padding-inline: 2px;
}

.spectrum__bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, var(--c1, #333) 0%, var(--c2, #333) 100%);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.28s ease;
}
.spectrum__bar:hover,
.spectrum__bar:focus-visible {
  transform: scaleY(1.16);
  filter: brightness(1.28);
}
.spectrum__bar:focus-visible { outline-offset: 1px; }

/* Load-in: bars rise from the baseline, left to right. */
@media (prefers-reduced-motion: no-preference) {
  .spectrum__bar {
    animation: bar-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--i) * 7ms);
  }
  @keyframes bar-rise {
    from { transform: scaleY(0.04); opacity: 0; }
    to   { transform: scaleY(1);    opacity: 1; }
  }
}

.spectrum__readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  min-height: 30px;
  margin-top: 14px;
  padding-inline: var(--sa-gutter);
  font-size: 11px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
}
.spectrum__name { color: var(--sa-silver-2); }
.spectrum__line { color: var(--sa-gold-2); }
.spectrum__hint { color: var(--sa-grey); }

/* ------------------------------------------------------------ sections --- */

.section { padding-top: clamp(64px, 10vh, 118px); }

.section__head { text-align: center; margin-bottom: 40px; }
.section__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  color: var(--sa-silver-1);
  margin: 14px 0 20px;
  line-height: 1.15;
}

/* ------------------------------------------------------------- lineup --- */
/* One panel per line. Image left, colours right. */

.lineup {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--sa-line-soft);
  border-radius: 10px;
  background: var(--sa-dark-1);
}

.showcase__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;                 /* the photo carries its own margin */
  border: 0;
  border-radius: 8px;
  cursor: zoom-in;
  overflow: hidden;
}
/* The photos have pure #000 / #fff backgrounds baked in. Match them exactly, or a
   seam appears where the image meets the stage. */
.showcase__stage--dark { background: #000; }
.showcase__stage--light { background: #fff; }

.showcase__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.18s ease;
}

/* While the next colour decodes, dim the outgoing image rather than blanking the
   stage. On a warm cache this never becomes visible. */
.showcase__stage.is-loading .showcase__img { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .showcase__img { transition: none; }
}

.showcase__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: var(--sa-silver-1);
  margin: 14px 0 14px;
}
.showcase__desc {
  margin: 0 0 22px;
  max-width: 44ch;
  color: var(--sa-grey-bright);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The selected colour's name. Reserve its line so the swatches never jump. */
.showcase__current {
  margin: 0 0 16px;
  min-height: 1.6em;
}
.showcase__cname {
  font-family: var(--sa-font-accent);
  font-size: 1.35rem;
  color: var(--sa-gold-1);
}

/* ------------------------------------------------------------ swatches --- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 7px;
  max-width: 460px;
}

.swatches__s {
  aspect-ratio: 2 / 3;   /* echoes the slab's proportions */
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%) padding-box,
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%) border-box;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.swatches__s:hover { transform: translateY(-2px); }

.swatches__s--on {
  box-shadow: 0 0 0 1px var(--sa-page), 0 0 0 2.5px var(--sa-gold-2);
}
.swatches__s:focus-visible {
  outline: 2px solid var(--sa-gold-1);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .swatches__s:hover { transform: none; }
}

@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase__stage { max-width: 400px; margin-inline: auto; }
  .swatches { max-width: none; }
}

/* ----------------------------------------------------------- lightbox --- */

/* A modal <dialog> is absolutely positioned by the UA, so far down a long page it
   would render at the scroll offset instead of over the viewport. Pin it. */
.lb {
  position: fixed;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--sa-silver-2);
}
.lb::backdrop { background: rgba(3, 2, 12, 0.93); backdrop-filter: blur(6px); }

.lb__stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 64px 16px;
  overflow-y: auto;   /* short viewports: scroll the caption rather than clip it */
}

.lb__figure { margin: 0; text-align: center; max-width: 620px; }

.lb__imgwrap {
  /* The viewport-width term is load-bearing: without it this resolves to 480px on a
     390px phone and `overflow:hidden` silently crops ~100px off every product. */
  width: min(62vh, 480px, calc(100vw - 32px));
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
/* Match the photos' baked-in backgrounds exactly — see .showcase__stage. */
.lb__imgwrap--dark  { background: #000; }
.lb__imgwrap--light { background: #fff; }
.lb__imgwrap img { width: 100%; height: 100%; object-fit: contain; }

.lb__caption { margin-top: 26px; }
.lb__name {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  color: var(--sa-silver-1);
  margin: 0 0 12px;
}
.lb__meta {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
}
.lb__sku { color: var(--sa-gold-2); }
.lb__line { color: var(--sa-grey); }
.lb__dot { width: 3px; height: 3px; background: var(--sa-gold-3); border-radius: 50%; }
.lb__note { font-size: 11px; letter-spacing: var(--sa-track-label); text-transform: uppercase; color: var(--sa-grey); margin-top: 18px; }

.lb__btn {
  position: absolute;
  background: transparent;
  border: 1px solid var(--sa-line-soft);
  color: var(--sa-silver-3);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lb__btn:hover { color: var(--sa-gold-1); border-color: var(--sa-line); }
.lb__close { top: 18px; right: 18px; }
.lb__prev  { top: 50%; left: 18px;  transform: translateY(-50%); }
.lb__next  { top: 50%; right: 18px; transform: translateY(-50%); }

/* ----------------------------------------------------- dealer's choice --- */
/* Nearly every order is this one. It gets a framed panel, not a footnote. */

.dealers {
  position: relative;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(38px, 6vw, 66px) clamp(22px, 5vw, 60px);
  border: 1px solid var(--sa-line-soft);
  border-bottom: 0;                  /* the facts strip closes the panel */
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(560px 260px at 50% 0%, rgba(212, 175, 85, 0.055), transparent 70%),
    var(--sa-dark-1);
}

/* A sample assortment. Deliberately smaller and quieter than the hero spectrum —
   that strip is the page's signature and this must not compete with it. */
.mix {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
}
.mix__chip {
  width: 15px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .mix__chip {
    animation: chip-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--i) * 40ms);
  }
  @keyframes chip-rise {
    from { transform: scaleY(0.2); opacity: 0; }
    to   { transform: scaleY(1);   opacity: 1; }
  }
}

.dealers__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  color: var(--sa-silver-1);
  margin: 16px 0 20px;
}

.dealers__lede {
  color: var(--sa-silver-2);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  max-width: 56ch;
  margin: 28px auto 0;
  text-wrap: pretty;
}

.dealers__alt {
  color: var(--sa-grey);
  font-size: 0.9375rem;
  max-width: 52ch;
  margin: 16px auto 32px;
  text-wrap: pretty;
}

/* The three questions a wholesale buyer asks before they email. No icons — the
   labels are the structure. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 780px;
  margin: 1px auto 0;
  padding: 0;
  background: var(--sa-line-soft);   /* becomes the hairlines between cells */
  border: 1px solid var(--sa-line-soft);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.facts__item {
  background: var(--sa-dark-2);
  padding: 22px 20px 24px;
  text-align: center;
}
.facts__k {
  font-size: 10px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-gold-2);
  margin-bottom: 9px;
}
.facts__v {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sa-silver-2);
  text-wrap: balance;
}

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

/* ----------------------------------------------------------- other lines --- */

.lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

/* Blurbs run to different lengths, so stretch the tiles and let the caption absorb
   the difference — otherwise the row's bottom edge is ragged. */
.line { display: flex; }
.line__fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.line__body { flex: 1; }

.line__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--sa-line-soft);
  border-radius: 6px 6px 0 0;
  border-bottom: 0;
  overflow: hidden;
  /* scripts/build_lines.py letterboxes every acrylic photo onto one shared
     canvas (#eae5ee) so the row reads as a set. Match it exactly or a seam
     appears where the image meets the tile. This is NOT the TPU stage colour:
     those product photos have pure #fff baked in and must stay #fff. */
  background: #eae5ee;
}
.line__media img { width: 100%; height: 100%; object-fit: contain; }

/* An honest empty state, in the brand's own mark — not a grey skeleton. */
.line__media--empty { background: var(--sa-dark-2); }
.line__pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--sa-gold-3);
  font-size: 10px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
}
.line__pending span { color: var(--sa-grey); }

.line__body {
  padding: 18px 18px 22px;
  border: 1px solid var(--sa-line-soft);
  border-radius: 0 0 6px 6px;
  background: var(--sa-card);
}
.line__name {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--sa-silver-1);
  margin: 0 0 8px;
}
.line__blurb {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sa-grey-bright);
}

.lines__note {
  text-align: center;
  margin: 30px 0 0;
  font-size: 11px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-grey);
}

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

/* --------------------------------------------------- custom / private label --- */
/* Same frame as the dealer's choice panel: they are the two ways to buy beyond
   the catalogue, and should read as siblings. */

.custom {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(38px, 6vw, 66px) clamp(22px, 5vw, 60px);
  border: 1px solid var(--sa-line-soft);
  border-radius: 8px;
  background:
    radial-gradient(560px 260px at 50% 0%, rgba(212, 175, 85, 0.055), transparent 70%),
    var(--sa-dark-1);
}
.custom__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  color: var(--sa-silver-1);
  margin: 16px 0 20px;
}
.custom__lede {
  color: var(--sa-silver-2);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  max-width: 56ch;
  margin: 28px auto 0;
  text-wrap: pretty;
}
.custom__alt {
  color: var(--sa-grey);
  font-size: 0.9375rem;
  max-width: 52ch;
  margin: 16px auto 32px;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- about --- */

.about { text-align: center; }
.about__body {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--sa-grey-bright);
  text-wrap: pretty;
}
.about__body p + p { margin-top: 18px; }

/* ------------------------------------------------------------ contact --- */

.contact {
  text-align: center;
  padding-block: clamp(72px, 12vh, 130px) clamp(48px, 7vh, 80px);
}
.contact__title {
  font-family: var(--sa-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  color: var(--sa-silver-1);
  margin: 18px 0 16px;
  line-height: 1.1;
}
.contact__lede { color: var(--sa-grey-bright); max-width: 48ch; margin: 0 auto 34px; }
/* Two ways in, given equal weight. Email and Instagram are both real channels. */
.contact__channels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 34px;
}

.contact__email {
  font-family: var(--sa-font-accent);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--sa-silver-3);
  text-decoration: none;
  border-bottom: 1px solid var(--sa-line-soft);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact__email:hover { color: var(--sa-gold-1); border-color: var(--sa-gold-3); }

.contact__pair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Quiet on purpose: the mailto button above is the primary action. */
.copy-btn {
  background: transparent;
  border: 1px solid var(--sa-line-soft);
  border-radius: 3px;
  color: var(--sa-grey);
  font-family: var(--sa-font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.copy-btn:hover { color: var(--sa-silver-2); border-color: var(--sa-line); }
.copy-btn--done { color: var(--sa-gold-1); border-color: var(--sa-gold-3); }

.contact__or {
  font-size: 10px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-grey);
}

.contact__ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sa-font-accent);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--sa-silver-3);
  text-decoration: none;
  border-bottom: 1px solid var(--sa-line-soft);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact__ig:hover { color: var(--sa-gold-1); border-color: var(--sa-gold-3); }
.contact__ig-mark { flex: none; }

.footer__links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__link {
  color: var(--sa-grey);
  text-decoration: none;
  letter-spacing: 0.16em;
  transition: color 0.2s ease;
}
.footer__link:hover { color: var(--sa-gold-1); }
.footer__sep { color: var(--sa-gold-3); }

/* ------------------------------------------------------------- footer --- */

.footer {
  border-top: 1px solid var(--sa-line-soft);
  margin-top: clamp(48px, 8vh, 90px);
  padding: 30px var(--sa-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sa-grey);
}

/* -------------------------------------------------------------- small --- */

@media (max-width: 640px) {
  /* Kept visible: it is the only call to action in the nav, and phone traffic
     (Instagram) is where it matters most. */
  .nav__pill { font-size: 9px; padding: 8px 11px; letter-spacing: 0.18em; }
  .mix__chip { width: 12px; height: 28px; }
  .footer__links { order: 3; width: 100%; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
  .spectrum__bars { gap: 1px; }
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__stage { padding: 72px 12px 28px; }

  /* At this width each bar is ~4px — far below a usable tap target, and the
     hover readout has no meaning on touch. The strip stays as a static
     statement of the colour range. */
  .spectrum__bar { pointer-events: none; }
  .spectrum__readout { display: none; }
  .spectrum { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ quote form --- */
/* Posts to our own Worker (see worker/index.js). No third-party form service, so no
   third-party script and no CSP exception — which is the whole point. */

.qf { margin: 0 auto; max-width: 720px; text-align: left; }

.qf__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.qf__field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.qf__field--wide { grid-column: 1 / -1; }

.qf__label {
  font-size: 11px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-grey-bright);
}
.qf__opt { color: var(--sa-grey); letter-spacing: 0.06em; text-transform: none; }

.qf__input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sa-line-soft);
  border-radius: 4px;
  color: var(--sa-silver-1);
  font-family: var(--sa-font-body);
  font-size: 15px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.qf__input::placeholder { color: #5c5e68; }
.qf__input:hover { border-color: var(--sa-line); }
.qf__input:focus {
  outline: none;
  border-color: var(--sa-gold-2);
  background: rgba(255, 255, 255, 0.05);
}
.qf__textarea { resize: vertical; min-height: 84px; }

/* The native select arrow is drawn by the OS and ignores colour, so it shows up as a black
   wedge on the dark field. Draw our own instead. */
.qf__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sa-gold-2) 50%),
                    linear-gradient(135deg, var(--sa-gold-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 14px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qf__select option { background: var(--sa-dark-1); color: var(--sa-silver-1); }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden fields, and a
   few screen readers would announce a display:none field anyway. aria-hidden + tabindex=-1
   keep it away from real people. */
.qf__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qf__foot {
  display: flex;
  align-items: center;
  gap: 18px 24px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.qf__submit { flex: none; }
.qf__consent {
  margin: 0;
  flex: 1 1 240px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sa-grey);
}
.qf__consent a { color: var(--sa-grey-bright); text-decoration: underline; text-underline-offset: 2px; }
.qf__consent a:hover { color: var(--sa-gold-1); }

.qf__status { margin: 16px 0 0; font-size: 14px; min-height: 1.2em; }
.qf__status.is-working { color: var(--sa-grey-bright); }
.qf__status.is-ok      { color: var(--sa-gold-1); }
.qf__status.is-error   { color: #f0a3a3; }
.qf__status a { color: inherit; text-decoration: underline; }

.qf.is-sending .qf__submit { opacity: 0.55; pointer-events: none; }
/* On success the fields go away entirely. A cleared form reads as "nothing happened", and
   people submit a second time. */
.qf.is-sent .qf__grid,
.qf.is-sent .qf__foot { display: none; }

.contact__or-line {
  margin: 34px 0 14px;
  font-size: 11px;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  color: var(--sa-grey);
}

@media (max-width: 640px) {
  .qf__grid { grid-template-columns: 1fr; }
  .qf__foot { flex-direction: column; align-items: stretch; }
  .qf__consent { text-align: center; }
}

/* ------------------------------------------- worker reply + privacy pages --- */
.reply { max-width: 640px; margin: 0 auto; text-align: center; padding: 40px 0 20px; }
.reply__body { color: var(--sa-silver-3); line-height: 1.75; margin: 0 0 30px; }
.reply__body a { color: var(--sa-gold-1); }

.legal { max-width: 720px; margin: 0 auto; text-align: left; }
.legal h2 {
  font-family: var(--sa-font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--sa-gold-1);
  margin: 38px 0 12px;
}
.legal p, .legal li { color: var(--sa-silver-3); line-height: 1.8; font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--sa-gold-1); }
.legal__updated { color: var(--sa-grey); font-size: 13px; }

/* ----------------------------------------------------------- language switch --- */
/* Québec's Charter of the French Language expects a commercial site from a Québec
   business to be available in French, no less prominently than English. So this sits in
   the nav at every scroll depth, not buried in the footer, and the two languages are
   given equal visual weight — the active one is marked, not favoured. */
.nav__lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sa-line-soft);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.nav__lang a {
  padding: 7px 12px;                /* 30px tall, matches .nav__pill — a real tap target */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--sa-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sa-grey);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav__lang a:hover { color: var(--sa-gold-1); background: rgba(212, 175, 85, 0.06); }
.nav__lang a[aria-current="true"] {
  color: var(--sa-gold-1);
  background: rgba(212, 175, 85, 0.10);
}
.nav__lang-sep {
  width: 1px;
  align-self: stretch;
  background: var(--sa-line-soft);
}

.nav__actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 520px) {
  /* The wordmark is the first thing to give ground — the language switch and the CTA
     both have to survive on a 320px phone. */
  .nav__mark { font-size: 18px; }
  .nav__pill { padding: 8px 11px; }
  .nav__lang a { padding: 7px 9px; }
}