/* ==========================================================================
   Huebury shade finder landing page: tokens, base and components.
   One stylesheet, no framework. Colour, type and motion come from the tokens
   below; components reference them rather than hardcoding values.
   ========================================================================== */

/* Instrument Sans, SIL Open Font License, self-hosted. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/instrument-sans-700.woff2") format("woff2"); }

:root {
  /* Colour */
  --paper: #f7f5f0;
  --ink: #161616;
  --accent: #c4572f;       /* terracotta: primary buttons, codes, focus */
  --accent-dark: #9e4222;  /* accent text on paper */
  --btn-text: #ffffff;
  --studio: #2b2c2f;       /* the preview card, matched to the base photos */
  --footer-bg: #161616;
  --border: rgba(22, 22, 22, 0.1);
  --border-soft: rgba(22, 22, 22, 0.06);

  /* Type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-line-height: 1.25;
  --font-body-letter-spacing: 0;
  --font-heading-weight: 600;
  --font-heading-letter-spacing: -0.01em;

  /* Motion */
  --animation-smooth: 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  --animation-fast: 0.3s cubic-bezier(0.7, 0, 0.3, 1);
  --animation-short: 0.2s cubic-bezier(0.7, 0, 0.3, 1);

  /* Type scale (fluid) */
  --h1: clamp(2.25rem, 1.4rem + 3.6vw, 3rem);
  --h1-hero: clamp(2.5rem, 1.2rem + 5.2vw, 4.25rem);
  --h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);

  /* Radii */
  --radius-input: 8px;
  --radius-card: clamp(12px, 0.6rem + 0.6vw, 20px);
  --radius-pill: 3.75rem;

  /* Layout */
  --page-width: 1440px;
  --gutter: clamp(20px, 3vw, 40px);
  --grid-gap: clamp(40px, 4vw, 64px);
  --section-y: clamp(56px, 6vw, 104px);
}

/* --------------------------------- reset --------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* No overflow-x here: clipping html would turn body into its own scroll
     container and break the sticky header. Body clips instead. */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* headings */
h1 {
  font-size: var(--h1);
  font-weight: var(--font-heading-weight);
  line-height: 1.1;
  letter-spacing: var(--font-heading-letter-spacing);
}
h2 {
  font-size: var(--h2);
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
  letter-spacing: var(--font-heading-letter-spacing);
}
h3 {
  font-size: var(--h3);
  font-weight: var(--font-heading-weight);
  line-height: 1.4;
  letter-spacing: var(--font-heading-letter-spacing);
}

/* --------------------------------- layout -------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------- buttons --------------------------------- */
/* Pill: 60px radius, 2px border, fill-on-hover invert. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-transform: none;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  padding: 0.9rem 1.5rem;
  background: var(--accent);
  color: var(--btn-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--lg {
  padding: 1.2rem 2rem;
  font-size: 1.0625rem;
}
.btn:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn--ink:hover {
  background: transparent;
  color: var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: #fff;
}

/* Components below reuse the tokens above. */

/* --- derived tokens (definitions, not component magic numbers) --- */
:root {
  --header-h: 62px;
  --surface: #ffffff;          /* white card on warm paper (theme behavior) */
  --ink-soft: #3a3733;         /* softened ink for body copy */
  --ink-mut: #6f6a62;          /* captions / meta */
  --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--paper));
  --on-dark: rgba(255, 255, 255, 0.7);
  --on-dark-soft: rgba(255, 255, 255, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- shared bits --- */
.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================ hero =============================== */
/* Full-bleed lifestyle banner: image fills the section, text sits on top of a
   transparent scrim that keeps the left side legible and fades to fully clear
   so the banner shows through on the right. The <img> is the eager LCP. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 66vh, 720px);
  padding-block: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__media {
  /* the media layer owns the absolute fill and the clipping for the zoom-out */
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(247, 246, 243, 0.94) 0%,
    rgba(247, 246, 243, 0.78) 34%,
    rgba(247, 246, 243, 0.3) 62%,
    rgba(247, 246, 243, 0) 82%
  );
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero__text {
  max-width: 40rem;
}
.hero__title {
  margin: 0.5rem 0 0;
  font-size: var(--h1-hero);
  font-weight: var(--font-heading-weight);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 16ch;
}
.hero__sub {
  margin-top: 1.4rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* ============================ responsive =========================== */
@media (max-width: 860px) {
  /* mobile: STACKED, not overlaid. A landscape banner cropped into a portrait
     viewport zooms in hard and puts the headline over the busiest part of the
     photo, so below 860px the banner shows in full and the copy sits beneath. */
  .hero {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(2rem, 7vw, 2.75rem);
  }
  .hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 1600 / 713;
  }
  .hero__bg {
    object-fit: contain; /* whole banner, no crop */
    object-position: center;
  }
  /* nothing sits over the image now, so the legibility scrim goes; a soft
     fade on the media itself blends the banner's bottom edge into the paper
     instead of hard-cutting it */
  .hero .hero__scrim { display: none; }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 24%;
    background: linear-gradient(
      180deg,
      rgba(247, 246, 243, 0) 0%,
      rgba(247, 246, 243, 0.8) 68%,
      rgba(247, 246, 243, 1) 100%
    );
  }
  .hero__inner {
    padding-top: clamp(1.25rem, 4.5vw, 1.75rem);
  }
  .hero__text { max-width: none; }
  .hero__title { max-width: none; }
}

/* ============================ motion / a11y ======================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Shade Finder ===== */
.finder {
  background: var(--paper);
}
.finder__inner {
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* trimmed top: the intro above hands off directly into the finder */
  padding-block: clamp(32px, 4vw, 56px) var(--section-y);
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  gap: var(--grid-gap);
  align-items: start;
}
/* Preview column: sticky beside the controls on desktop. The card itself is
   styled in the tint block at the end of this file. */
.finder__stage {
  position: sticky;
  top: 132px;
}
.finder__title {
  font-size: var(--h2);
  font-weight: 700;
  margin: 0 0 1rem;
}
.finder__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.finder__select {
  width: 100%;
  max-width: 22rem;
  font: inherit;
  font-size: var(--body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 0.6em 0.9em;
  margin-bottom: 1.25rem;
}
/* Case type row (finish + MagSafe pills) sits above the color groups */
.finder__case {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-bottom: 1.25rem;
}
.finder__case-group .finder__label {
  margin-bottom: 0.4rem;
}
.finder__case-pills {
  display: flex;
  gap: 8px;
}
.optpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background var(--animation-short), color var(--animation-short);
}
.optpill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.finder__meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.finder__shade {
  color: var(--accent-dark);
}
.finder__price {
  font-weight: 700;
}
.finder__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.grouppill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background var(--animation-short), color var(--animation-short);
}
.grouppill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.finder__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.finder__swatch {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: box-shadow var(--animation-short);
}
.finder__swatch.is-selected {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.finder__buyrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.finder__buy {
  background: var(--ink);
  color: #fff;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  transition: opacity var(--animation-short);
}
.finder__buy:hover {
  opacity: 0.85;
}
.finder__view {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ---- Complete the set: add-on rail --------------------------------------
   Sits between the shade grid and the buy row so the basket is assembled
   before the single add button. Tint tiles are painted in the CURRENT shade,
   so the row restyles itself as the shade changes. */
.addons {
  margin-bottom: 1.25rem;
}
.addons__head {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 0.6rem;
}
.addons__hint {
  color: var(--ink-mut);
  font-weight: 400;
}
.addons__list {
  display: grid;
  gap: 8px;
}
.addon {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: #fff;
  transition: border-color var(--animation-short), box-shadow var(--animation-short);
}
.addon:hover:not(.is-soldout):not(.is-blocked) {
  border-color: rgba(23, 23, 23, 0.28);
}
.addon.is-on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.addon__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.addon.is-soldout .addon__pick,
.addon.is-blocked .addon__pick {
  cursor: not-allowed;
}
.addon.is-soldout,
.addon.is-blocked {
  opacity: 0.55;
}
/* square check, drawn in CSS so no icon font or inline handler is needed */
.addon__check {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid rgba(23, 23, 23, 0.35);
  border-radius: 4px;
  background: #fff;
  cursor: inherit;
  position: relative;
  transition: background var(--animation-short), border-color var(--animation-short);
}
.addon__check:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.addon__check:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.addon__check:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.addon__thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-soft);
}
.addon__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.addon__body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.addon__title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}
.addon__blurb {
  font-size: 0.8125rem;
  color: var(--ink-mut);
  line-height: 1.3;
}
.addon__price {
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.addon.is-soldout .addon__price {
  font-weight: 500;
  color: var(--ink-mut);
}
.addon__opt {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 0.35em 0.6em;
  margin: 0 14px 12px calc(20px + 52px + 24px);
}
.addons__blocked {
  font-size: 0.8125rem;
  color: var(--ink-mut);
  margin: 0.6rem 0 0;
}

/* ---- basket total ------------------------------------------------------ */
.finder__total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1rem;
}
.finder__total-label {
  font-size: 0.9375rem;
  color: var(--ink-mut);
}
.finder__total-value {
  font-size: 1.25rem;
  font-weight: 700;
}
.finder__total-note {
  font-size: 0.8125rem;
  color: var(--ink-mut);
}

/* ---- USP accordions ---------------------------------------------------- */
.uspacc {
  border-top: 1px solid var(--border);
}
.uspacc__item {
  border-bottom: 1px solid var(--border);
}
.uspacc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.uspacc__sum::-webkit-details-marker {
  display: none;
}
/* chevron drawn from a rotated border box, rotates open */
.uspacc__sum::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--animation-short);
}
.uspacc__item[open] .uspacc__sum::after {
  transform: translateY(2px) rotate(-135deg);
}
.uspacc__sum:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.uspacc__body {
  padding: 0 0 0.95rem;
}
.uspacc__body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
/* Sticky buy bar: mirrors the live selection, shown only while the inline
   add button is scrolled out of view (finder.js toggles it). */
.finder__sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.finder__sticky.is-visible {
  display: flex;
}
.finder__sticky-info {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.finder__sticky-info [data-shade-name-sticky] {
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finder__sticky-info [data-price-sticky] {
  font-weight: 700;
}
.finder__sticky-buy {
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  padding: 0.75em 1.4em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--animation-short);
}
.finder__sticky-buy:hover {
  opacity: 0.85;
}
@media (min-width: 901px) {
  .finder__sticky { display: none !important; }
}
@media (max-width: 900px) {
  .finder__inner {
    grid-template-columns: 1fr;
  }
  .finder__stage {
    position: static;
    margin-inline: auto;
    width: 100%;
    max-width: 34rem;
  }
  /* comfortable tap targets for the finish / MagSafe / family pills */
  .optpill,
  .grouppill {
    min-height: 40px;
  }
  .finder__buyrow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .finder__buy {
    display: block;
    width: 100%;
    text-align: center;
  }
  /* breathing room so the sticky bar never covers the footer */
  body {
    padding-bottom: 64px;
  }
}

/* ===== CRO sections ===== */

/* --- intro (between hero and finder) --- */
/* Tighter than the standard section rhythm: it hands off straight into the
   finder, so the bottom padding is trimmed to pull the two together. */
.intro {
  padding-block: clamp(40px, 4.5vw, 64px) clamp(24px, 2.5vw, 36px);
  text-align: center;
}
.intro h2 {
  max-width: 36ch;
  margin-inline: auto;
}
.intro p {
  max-width: 62ch;
  margin: 1.1rem auto 0;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- trust row (band under the finder) ---
   Desktop keeps the single centered row. Below 1024px the five facts no
   longer fit on one line and used to wrap into a ragged block, so the row
   turns into a one-line marquee slider there (see the mobile block below).
   The track doubles as the centered container on desktop. */
.trust {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.trustrow__track {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* the duplicate group + set exist only to feed the mobile loop */
.trustrow__group + .trustrow__group,
.trustrow + .trustrow {
  display: none;
}
.trustrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.75rem 2rem;
  padding-block: 1.15rem;
  margin: 0;
  list-style: none;
}
.trustrow__item {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  /* one clean line that scrolls itself, reusing the promobar mechanic:
     two identical groups translated -50% for a seamless loop */
  .trust {
    overflow: hidden;
  }
  .trustrow__track {
    display: flex;
    width: max-content;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    animation: usp-marquee 30s linear infinite;
    will-change: transform;
  }
  .trustrow__group,
  .trustrow__group + .trustrow__group,
  .trustrow,
  .trustrow + .trustrow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }
  .trustrow {
    padding-block: 1.05rem;
  }
  .trustrow__item {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.9rem;
  }
  /* dot between every item, so the loop seam is invisible */
  .trustrow__item::after {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    margin-left: 1.8rem;
    border-radius: 50%;
    background: var(--accent);
  }
  .trust:hover .trustrow__track {
    animation-play-state: paused;
  }
}

/* Reduced motion on mobile: no animation, but do NOT go back to the ragged
   wrap - keep one line and let the reader swipe it. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .trustrow__track {
    animation: none;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trustrow__track::-webkit-scrollbar {
    display: none;
  }
  .trustrow__group + .trustrow__group,
  .trustrow + .trustrow {
    display: none;
  }
  .trustrow__item {
    scroll-snap-align: center;
  }
  .trustrow__item:last-child::after {
    display: none;
  }
}

/* --- finishes --- */
/* Heading + lead centered (shared section rhythm); the 3-up card grid below
   keeps its own left-aligned card copy. */
.finishes {
  padding-block: var(--section-y);
  background: var(--surface);
  border-block: 1px solid var(--border-soft);
  text-align: center;
}
.finishes h2 {
  max-width: 30ch;
  margin-inline: auto;
}
.finishes__intro {
  margin-top: 0.9rem;
  margin-inline: auto;
  max-width: 60ch;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink-soft);
}
.finishes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.finish-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper);
  text-align: left;
}
.finish-card h3 {
  font-size: var(--h3);
}
.finish-card p {
  margin-top: 0.7rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.finishes__note {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: 1rem;
  color: var(--ink-mut);
}
@media (max-width: 767px) {
  .finishes__grid {
    grid-template-columns: 1fr;
  }
}

/* --- palette (dark break) --- */
/* Deliberately deeper than the standard rhythm: this is the page's one dark
   statement band and needs to read as a section, not a divider. */
.palette {
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.palette__eyebrow {
  color: var(--accent);
}
.palette h2 {
  color: #fff;
  max-width: 30ch;
  margin-inline: auto;
}
.palette__sub {
  max-width: 56ch;
  margin: 1.1rem auto 0;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--on-dark);
}

/* --- bundle --- */
.bundle {
  padding-block: var(--section-y);
  background: var(--accent-tint);
  color: var(--ink);
  text-align: center;
}
.bundle h2 {
  max-width: 30ch;
  margin-inline: auto;
}
.bundle p {
  max-width: 60ch;
  margin: 1.1rem auto 1.6rem;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- faq (plain-summary structure) --- */
/* Centered column: heading centered above a constrained accordion list, so
   the section never reads as left-hugging inside the wide container. */
.faq h2 {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.faq__list {
  max-width: 760px;
  margin-inline: auto;
}
.faq__item {
  max-width: none;
}
.faq__item .faq__a {
  max-width: none; /* the column itself is the measure */
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
  margin-top: -4px;
}
.faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* ======================= discount promo marquee ===================== */
/* Ink band below the hero carrying the live discount offers. Same seamless
   -50% translate loop as the USP strip (reuses @keyframes usp-marquee):
   two identical groups, each repeating the offer set past any viewport
   width. Pauses on hover, static + wrapped under prefers-reduced-motion.
   The strip clips its own overflow; the page never scrolls sideways. */
.promobar {
  overflow: hidden;
  background: var(--ink);
  border-block: 1px solid var(--border-soft);
}
.promobar__track {
  display: flex;
  width: max-content;
  animation: usp-marquee 32s linear infinite;
  will-change: transform;
}
.promobar__group,
.promobar__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.promobar__item {
  display: inline-flex;
  align-items: center;
  padding-block: 0.8rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.promobar__item::after {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-left: 3rem;
  border-radius: 50%;
  background: var(--accent);
}
.promobar__code {
  margin-left: 0.4em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.promobar:hover .promobar__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .promobar__track {
    animation: none;
    width: 100%;
  }
  .promobar__group {
    width: 100%;
  }
  .promobar__group + .promobar__group {
    display: none;
  }
  .promobar__set {
    display: none;
  }
  .promobar__set:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .promobar__item::after {
    display: none;
  }
}

/* ============================ demo badge =========================== */
.demobadge {
  background: #0f2438;
  color: #fff;
  padding: 12px var(--gutter);
}
.demobadge__inner {
  margin: 0 auto;
  max-width: var(--page-width);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.demobadge__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.demobadge__dot {
  opacity: 0.5;
  margin: 0 8px;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
}

/* ============================ announcement ========================= */
.topbar {
  background: var(--accent);
  color: #fff;
}
.topbar__inner {
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 42px;
}
.topbar__slides {
  display: grid;
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
}
.topbar__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  padding-block: 0.6rem;
}
.topbar__slide.is-active {
  opacity: 1;
  transform: none;
}
.topbar__arrow {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.topbar__arrow:hover { color: #fff; }

/* =============================== header ============================ */
.siteheader {
  position: sticky;
  top: 0;
  z-index: 95;
  background: rgba(247, 245, 240, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}
.siteheader__brand { color: var(--ink); display: inline-flex; }
.logo { display: block; height: 34px; width: auto; }
.logo--footer { height: 32px; color: #fff; }
.siteheader__nav {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 500;
  font-size: 1rem;
}
.siteheader__nav a,
.siteheader__subnav a {
  position: relative;
  padding-block: 0.35rem;
}
.siteheader__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.siteheader__nav a:hover::after { transform: scaleX(1); }
.siteheader__icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.siteheader__locale {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mut);
}
.siteheader__basket {
  position: relative;
  display: inline-flex;
  color: var(--ink);
}
.siteheader__count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.siteheader__count.is-bump { animation: bump 0.35s var(--ease); }
@keyframes bump {
  40% { transform: scale(1.35); }
}
.siteheader__subnav {
  display: none;
}
@media (max-width: 900px) {
  .siteheader__nav,
  .siteheader__locale { display: none; }
  .siteheader__inner { min-height: 60px; }
  .logo--header { height: 28px; }
  .siteheader__subnav {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.55rem var(--gutter) 0.65rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .siteheader__subnav::-webkit-scrollbar { display: none; }
  .finder__stage { top: auto; }
}

/* ============================== reveals ============================ */
/* The hidden state only exists under html.js, which js-flag.js sets before
   first paint. No script, no hidden content. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0, 0, 0.3, 1), transform 0.7s cubic-bezier(0, 0, 0.3, 1);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.hero__bg {
  animation: hero-zoom 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ================== tinted product photography ===================== */
/* One white base photograph, painted in the chosen shade.
   Layer 1 the photo. Layer 2 a flat fill of --shade, multiplied onto the
   photo and confined to the product by a mask derived from the same photo,
   so the shade inherits the photo's light and shadow. Layer 3 the brightest
   highlights screened back on top, which is what makes gloss read as gloss.
   `isolation` keeps both blends inside the card. */
.tint {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--studio);
  --shade: #cccccc;
}
.tint__photo,
.tint__paint,
.tint__glint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tint__photo {
  object-fit: cover;
  display: block;
}
.tint__paint {
  background: var(--shade);
  mix-blend-mode: multiply;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.35s ease;
}
.tint__glint {
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.18;
  transition: opacity 0.35s ease;
}
.tint--gloss .tint__glint { opacity: 0.85; }

.finder__preview {
  aspect-ratio: 1000 / 870;
  border-radius: var(--radius-card);
  box-shadow: 0 40px 80px -50px rgba(22, 22, 22, 0.55);
}
.finder__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
}
.finder__caption-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--shade);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.finder__caption-spec {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

/* family pills carry a dot of a mid tone from their family */
.grouppill__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.45em;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12);
}
.grouppill.is-active .grouppill__dot {
  box-shadow: 0 0 0 1.5px #fff;
}
.finder__swatch {
  transition: box-shadow var(--animation-short), transform var(--animation-short);
}
.finder__swatch:hover { transform: scale(1.12); }

/* add-on thumbnails: tinted tiles sit on the studio tone like the preview */
.addon__thumb.tint { background: var(--studio); border-color: transparent; }
.addon__thumb--plain img { object-fit: cover; }
.addon__opt { max-width: calc(100% - 20px - 52px - 38px); }

/* the add button is a <button> here, so reset its native chrome */
.finder__buy,
.finder__sticky-buy {
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.finder__buy { background: var(--accent); }
.finder__buy:hover { opacity: 1; background: var(--accent-dark); }
.finder__added {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-input);
  background: #eaf2ea;
  color: #1f3b25;
  font-size: 0.875rem;
  line-height: 1.5;
}
.finder__sticky-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  align-self: center;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.15);
}
.finder__sticky-buy { background: var(--accent); }

/* palette statement: a fanned strip of shades under the headline */
.palette__chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 48rem;
  padding-inline: 0;
  margin: 2.5rem auto 0;
}
.palette__chips span {
  width: clamp(24px, 7.4vw, 30px);
  height: clamp(44px, 13vw, 52px);
  border-radius: 8px;
  transition: transform 0.3s var(--ease);
}
.palette__chips span:hover { transform: translateY(-6px); }

/* ================================ footer =========================== */
.sitefooter {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(56px, 6vw, 88px) 32px;
  font-size: 0.9375rem;
}
.sitefooter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.sitefooter__brand p {
  margin-top: 1rem;
  max-width: 34ch;
  line-height: 1.6;
}
.sitefooter__heading {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
}
.sitefooter ul { display: grid; gap: 0.65rem; }
.sitefooter a:hover { color: #fff; }
.sitefooter__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.newsletter-form {
  display: flex;
  max-width: 24rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  padding: 0.7rem 0;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.newsletter-form button {
  background: none;
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 0 0.7rem 1rem;
}
.sitefooter__formnote { font-size: 0.8125rem; }
.sitefooter__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
  .sitefooter__grid { grid-template-columns: 1fr 1fr; }
  .sitefooter__brand { grid-column: 1 / -1; }
}

/* ================================= faq ============================= */
.faq {
  padding-block: var(--section-y);
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__a {
  padding: 0 0 1.35rem;
}
.faq__a p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}