/* ==========================================================================
   CENDROVA Fine Jewelry — trade showroom
   Layout: ivory editorial paper, emerald velvet bands, gold hairline system.
   The hero portrait breaks the band edge; everything else stays quiet.
   ========================================================================== */

:root {
  /* Brand palette — fixed by the CENDROVA brand system (single visual world) */
  --ivory:        #F5F0E8;
  --ivory-lift:   #FAF7F1;
  --ivory-sink:   #ECE5D9;
  --emerald:      #122B24;
  --emerald-deep: #0B1A15;
  --emerald-lift: #1C3B32;
  --onyx:         #171717;
  --gold:         #B59A6A;   /* hairlines, borders, and text on the dark grounds */
  --gold-ink:     #7D6A49;   /* gold TEXT on ivory. #B59A6A reads 2.37:1 there, this one 4.58:1 */
  --gold-lift:    #D7C09A;
  --stone:        #9D968D;
  --stone-deep:   #6E675F;
  --alert:        #8C3B2E;   /* form errors only — kept warm so it sits in the palette */

  /* Type */
  --display: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Rhythm */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --band: clamp(5rem, 10vw, 9.5rem);
  --measure: 34rem;

  color-scheme: light;
}

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

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

/* Keep this above every component rule. The [hidden] attribute is only
   display:none in the browser's own stylesheet, so a component that sets
   its own display silently overrides it and stays on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--onyx);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height:auto is required — the HTML width/height attributes would otherwise
   win over aspect-ratio and stretch every figure to its intrinsic pixel height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
figure { margin: 0; }   /* the UA 40px inline margin narrows every figure otherwise */

/* Warm paper grain — the "morno" in the direction */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Band painted behind the phone status bar */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 55;
  background: var(--emerald);
}

/* ---------- type scale ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.band--emerald .eyebrow, .band--deep .eyebrow, .hero .eyebrow, .on-dark .eyebrow {
  color: var(--gold-lift);
}
.eyebrow--stone { color: var(--stone-deep); }

.display-xl { font-size: clamp(2.7rem, 5.4vw, 5.6rem); letter-spacing: -0.012em; }
.display-l  { font-size: clamp(2.3rem, 4.8vw, 4rem); }
.display-m  { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.display-s  { font-size: clamp(1.35rem, 2vw, 1.75rem); }

.lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.7;
  max-width: var(--measure);
  color: var(--stone-deep);
}
.on-dark .lede, .band--emerald .lede, .band--deep .lede { color: rgba(245, 240, 232, 0.76); }

em, .italic { font-style: italic; }

/* ---------- layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.wrap--narrow { max-width: 980px; }

.band { padding-block: var(--band); position: relative; }
.band--emerald { background: var(--emerald); color: var(--ivory); }
.band--deep    { background: var(--emerald-deep); color: var(--ivory); }
.band--sink    { background: var(--ivory-sink); }
.band--tight   { padding-block: clamp(3.5rem, 6vw, 6rem); }

/* Gold hairline that draws itself in */
.rule {
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  width: 100%;
  transform-origin: left center;
}
.js-reveal .rule { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.js-reveal .is-in .rule, .js-reveal .rule.is-in { transform: scaleX(1); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.section-head .rule { max-width: 4.5rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .5s ease, border-color .5s ease;
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn--gold { color: var(--gold-lift); border-color: var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--emerald); }
.btn--ink { color: var(--emerald); border-color: var(--emerald); }
.btn--ink:hover, .btn--ink:focus-visible { color: var(--ivory); }
.btn--solid {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--ivory);
}
.btn--solid::before { background: var(--gold); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--emerald); border-color: var(--gold); }

/* Quiet text link with a gold underline that extends */
.link {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--gold);
  transition: color .35s ease, border-color .35s ease;
}
.link:hover, .link:focus-visible { color: var(--gold-ink); }
.band--emerald .link:hover, .band--deep .link:hover, .hero .link:hover,
.band--emerald .link:focus-visible, .band--deep .link:focus-visible, .hero .link:focus-visible {
  color: var(--gold-lift);
}

.actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--emerald);
  border-bottom: 1px solid rgba(181, 154, 106, 0.22);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 78px;
  padding-block: 0.75rem;
}
.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(158px, 17vw, 212px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.35rem); }
.nav a {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 240, 232, 0.82);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .3s ease, border-color .3s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--gold-lift); }
.nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--gold); }
.nav .btn { padding: 0.8rem 1.5rem; font-size: 0.65rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(181, 154, 106, 0.45);
  color: var(--ivory);
  width: 46px; height: 46px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle span {
  display: block; width: 18px; height: 1px;
  background: currentColor; position: relative;
  transition: background .3s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px;
  background: currentColor; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--emerald-deep);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 4rem var(--gutter);
    z-index: 49;
  }
  .nav[hidden] { display: none !important; }
  .nav a { font-size: 0.95rem; letter-spacing: 0.22em; }
  .nav .btn { font-size: 0.72rem; padding: 1rem 2rem; }
}

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

.hero { background: var(--emerald); color: var(--ivory); position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-top: clamp(4rem, 8vw, 7.5rem);
}
.hero__copy { display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: clamp(4.5rem, 8vw, 8rem); min-width: 0; }
.hero__copy .rule { max-width: 5rem; }
.hero h1 { color: var(--ivory); }
.hero h1 .line2 { display: block; font-style: italic; color: var(--gold-lift); }
.hero__lede { max-width: 30rem; color: rgba(245, 240, 232, 0.74); }

.hero__figure {
  position: relative;
  margin-bottom: clamp(-7rem, -6vw, -2rem);
  z-index: 2;
  min-width: 0;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  object-position: 52% 38%;
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0.9rem;
  border: 1px solid rgba(215, 192, 154, 0.5);
  pointer-events: none;
}
.hero__caption {
  position: absolute;
  left: 0;
  bottom: -2.6rem;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-deep);
}

.hero-after { padding-top: clamp(7rem, 13vw, 13rem); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; }
  .hero__copy { padding-bottom: 0; }
  .hero__figure { margin-bottom: -3.25rem; }
  .hero__figure img { aspect-ratio: 4 / 5; }
  .hero-after { padding-top: 7rem; }
}

/* ---------- marquee of pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(181, 154, 106, 0.3);
  border-block: 1px solid rgba(181, 154, 106, 0.3);
}
.pillar {
  background: var(--ivory);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.pillar__no {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
  font-weight: 500;
}
.pillar p { color: var(--stone-deep); font-size: 0.9375rem; line-height: 1.7; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- split feature ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split__copy { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.split__copy .rule { max-width: 4.5rem; }
.split__media { position: relative; min-width: 0; }
.split__media img { width: 100%; object-fit: cover; }
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__media--wide img { aspect-ratio: 16 / 11; }
.split__media::after {
  content: "";
  position: absolute;
  inset: 0.85rem;
  border: 1px solid rgba(181, 154, 106, 0.45);
  pointer-events: none;
}
@media (max-width: 880px) {
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .split--flip .split__media { order: -1; }
}

/* ---------- collection grid ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  align-items: center;
  padding-block: 1.25rem;
  border-block: 1px solid rgba(157, 150, 141, 0.32);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.filters__label {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-deep);
  margin-right: 0.5rem;
}
.filter {
  background: none;
  border: 0;
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-deep);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.filter:hover { color: var(--emerald); }
.filter[aria-pressed="true"] { color: var(--emerald); border-bottom-color: var(--gold); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.5rem, 2.4vw, 2.25rem);
}
.piece { display: flex; flex-direction: column; min-width: 0; }
.piece__media {
  position: relative;
  overflow: hidden;
  background: var(--ivory-sink);
  aspect-ratio: 4 / 5;
}
.piece__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.piece__media::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(215, 192, 154, 0);
  transition: border-color .55s ease;
  pointer-events: none;
}
.piece:hover .piece__media img { transform: scale(1.055); }
.piece:hover .piece__media::after { border-color: rgba(215, 192, 154, 0.85); }
.piece__body { padding-top: 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; }
.piece__ref {
  font-size: 0.5875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 500;
}
.piece__name { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.piece__meta {
  font-size: 0.8125rem;
  color: var(--stone-deep);
  line-height: 1.6;
}
.piece__cta {
  margin-top: 0.4rem;
  min-height: 26px;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
  background: none; border: 0; padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.3rem;
  transition: color .3s ease;
}
.piece__cta:hover { color: var(--gold-ink); }

.grid__empty {
  grid-column: 1 / -1;
  padding-block: 4rem;
  text-align: center;
  color: var(--stone-deep);
  font-size: 0.9375rem;
}

/* ---------- piece dialog ---------- */

.sheet {
  border: 0;
  padding: 0;
  width: min(1040px, calc(100vw - 2.5rem));
  max-width: 100%;
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--ivory-lift);
  color: var(--onyx);
}
.sheet::backdrop { background: rgba(11, 26, 21, 0.86); }
.sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sheet__media { background: var(--ivory-sink); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.sheet__body {
  padding: clamp(1.75rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}
.sheet__body .rule { max-width: 3.5rem; }
.sheet__specs { display: flex; flex-direction: column; gap: 0; margin: 0; }
.sheet__specs div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(157, 150, 141, 0.26);
  font-size: 0.875rem;
}
.sheet__specs dt { color: var(--stone-deep); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.6875rem; padding-top: 0.2rem; }
.sheet__specs dd { margin: 0; text-align: right; min-width: 0; flex: 1 1 auto; }
.sheet__note {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--stone-deep);
  border-left: 1px solid var(--gold);
  padding-left: 1rem;
}
.sheet__close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 42px; height: 42px;
  background: var(--ivory-lift);
  border: 1px solid rgba(157, 150, 141, 0.4);
  color: var(--emerald);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 760px) {
  .sheet__grid { grid-template-columns: 1fr; }
  .sheet__media img { aspect-ratio: 4 / 3; }
}

/* ---------- process steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(181, 154, 106, 0.32);
  border: 1px solid rgba(181, 154, 106, 0.32);
}
.step {
  background: var(--ivory);
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.band--emerald .steps, .band--deep .steps { background: rgba(181, 154, 106, 0.28); border-color: rgba(181, 154, 106, 0.28); }
.band--emerald .step, .band--deep .step { background: var(--emerald); }
.band--emerald .step p, .band--deep .step p { color: rgba(245, 240, 232, 0.7); }
.step__no {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-ink);
}
.step h3 { font-size: 1.2rem; }
.step p { font-size: 0.9375rem; color: var(--stone-deep); line-height: 1.7; }

/* ---------- list of benefits ---------- */

/* No marker before the text. Each item opens with a bold lead-in and the items
   are parted by a hairline, so the list reads as a measured index rather than
   as bullets. Block, not grid: a grid list item turns each loose text run into
   its own anonymous grid item, which breaks the copy onto new rows. */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  max-width: 58ch;
  padding-block: 1.15rem;
  border-top: 1px solid rgba(181, 154, 106, 0.28);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--stone-deep);
}
.ticks li:first-child { border-top: 0; padding-top: 0; }
.ticks li:last-child { padding-bottom: 0; }
.band--emerald .ticks li, .band--deep .ticks li {
  color: rgba(245, 240, 232, 0.76);
  border-top-color: rgba(215, 192, 154, 0.24);
}
/* Short sequence inside a sidebar box: same hairlines, less air. */
.ticks--compact li { padding-block: 0.8rem; }

.ticks strong { color: var(--emerald); font-weight: 500; }
.band--emerald .ticks strong, .band--deep .ticks strong { color: var(--ivory); }

/* ---------- quote / statement ---------- */

.statement {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.3vw, 2.75rem);
  line-height: 1.26;
  font-weight: 300;
  max-width: 24ch;
}
.statement em { color: var(--gold-lift); }

/* ---------- form ---------- */

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.15rem 2rem; }
.form__lede {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--stone-deep);
  max-width: 34rem;
  margin-bottom: 0.4rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__opt {
  letter-spacing: 0.12em;
  color: var(--stone-deep);
  font-weight: 400;
  text-transform: none;
  font-style: italic;
}
.field label {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-deep);
  font-weight: 500;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--onyx);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(157, 150, 141, 0.55);
  padding: 0.8rem 0;
  border-radius: 0;
  transition: border-color .3s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
/* The underline turning gold is the quiet state for a mouse. It is not a
   focus indicator though: this rule outranks the global :focus-visible one,
   so without the second block a keyboard user gets no ring at all. */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold-ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 4px;
}
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 1.6rem;
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236E675F' stroke-width='1.3'/%3E%3C/svg%3E");
}
.field__hint { font-size: 0.75rem; color: var(--stone-deep); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.form__note { font-size: 0.8125rem; color: var(--stone-deep); max-width: 30rem; }
.form__status {
  grid-column: 1 / -1;
  border-left: 2px solid var(--gold);
  padding: 1.1rem 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--emerald);
  background: rgba(181, 154, 106, 0.1);
}
.form__status[data-tone="ok"] {
  border-left-color: var(--emerald);
  background: rgba(18, 43, 36, 0.07);
}
.form__status[data-tone="error"] {
  border-left-color: var(--alert);
  color: var(--alert);
  background: rgba(140, 59, 46, 0.07);
}

/* Bot trap: reachable to a script filling every field, invisible to a person. */
.trap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field input:user-invalid,
.field select:user-invalid { border-bottom-color: var(--alert); }

.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn[disabled]::before { transform: scaleY(0); }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }

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

.rep {
  border: 1px solid rgba(181, 154, 106, 0.45);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.rep__name { font-family: var(--display); font-size: 1.6rem; }
.rep__line { font-size: 0.9375rem; color: var(--stone-deep); }
.band--emerald .rep__line, .band--deep .rep__line { color: rgba(245, 240, 232, 0.72); }
.rep__tel {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--gold-lift);
  font-variant-numeric: tabular-nums;
}

/* ---------- closing CTA ---------- */

.closer { text-align: left; display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; }
.closer .rule { max-width: 5rem; }

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

.site-footer { background: var(--emerald-deep); color: rgba(245, 240, 232, 0.72); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(181, 154, 106, 0.22);
}
.footer__brand { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.footer__brand img { width: 204px; }
.footer__brand p { font-size: 0.875rem; line-height: 1.75; max-width: 24rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.footer__col a, .footer__col span { font-size: 0.875rem; text-decoration: none; color: rgba(245, 240, 232, 0.72); transition: color .3s ease; }
.footer__col a:hover { color: var(--gold-lift); }
.footer__bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(245, 240, 232, 0.62);
}
.footer__legal { max-width: 56rem; line-height: 1.7; }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- reveals ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.js-reveal .reveal--d1 { transition-delay: .09s; }
.js-reveal .reveal--d2 { transition-delay: .18s; }
.js-reveal .reveal--d3 { transition-delay: .27s; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .rule { transform: scaleX(1); }
}

/* ==========================================================================
   MOVEMENT

   The brief for this layer is desire, not activity. In a jewellery case the
   thing that sells a stone is time spent looking at it, so every gesture here
   is slow, singular and reversible. Nothing slides in from off screen, nothing
   bounces, nothing announces itself. Two easings carry the whole system: a
   silk curve for colour and opacity, an expo curve for anything that moves,
   which starts quickly and takes a long time to settle. That long settle is
   what reads as expensive.

   Everything below is additive. With JavaScript off, scroll timelines
   unsupported, or reduced motion requested, the page is simply still.
   ========================================================================== */

:root {
  --ease-silk: cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- page to page ----------
   A real cross-document transition, so moving between pages is one continuous
   surface instead of a white flash. The header is given a name, which makes
   the browser treat it as the same element on both sides and hold it still
   while the rest of the page changes under it. */

@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-leave .34s var(--ease-silk) both; }
  ::view-transition-new(root) { animation: vt-enter .62s var(--ease-expo) both; }
}
@keyframes vt-leave { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(16px); } }

/* ---------- headline, line by line ----------
   Each line sits in its own slot and rises out of it, the way a title card
   resolves. The slot is padded a touch below and pulled back by the same
   amount, so the italic descenders are never clipped by the mask. */

.lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.lines .line > span { display: block; }

.js-reveal .lines .line > span {
  opacity: 0;
  transform: translateY(104%);
  transition: opacity .85s var(--ease-silk), transform 1.2s var(--ease-expo);
}
.js-reveal .lines.is-in .line > span { opacity: 1; transform: none; }
.js-reveal .lines.is-in .line:nth-child(2) > span { transition-delay: .12s; }
.js-reveal .lines.is-in .line:nth-child(3) > span { transition-delay: .24s; }

/* ---------- parallax inside the frame ----------
   The photograph drifts against its own frame as the section crosses the
   viewport, which gives the stone a little depth without ever moving the
   layout. Driven by a scroll timeline, so it runs off the main thread and
   costs nothing in script. The image is scaled up first; without that the
   drift would expose the frame's edge. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .split__media, .hero__frame { overflow: hidden; }

    .split__media img,
    .hero__frame img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
@keyframes drift {
  from { transform: translate3d(0, -4.2%, 0) scale(1.1); }
  to   { transform: translate3d(0,  4.2%, 0) scale(1.1); }
}

/* ---------- reading progress ----------
   One gold hairline along the bottom edge of the header. It is the only thing
   on the page that reports anything, and it needs no element of its own. */

.site-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes read-progress { to { transform: scaleX(1); } }

/* ---------- header once the page has moved ----------
   It tightens and goes to glass rather than disappearing: on a trade site the
   inquiry button should never be more than a glance away. */

.site-header {
  transition: background-color .45s var(--ease-silk), backdrop-filter .45s ease;
}
.site-header__inner { transition: min-height .5s var(--ease-expo); }
.brand img { transition: width .5s var(--ease-expo); }

.site-header[data-stuck] {
  background-color: rgba(11, 26, 21, 0.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header[data-stuck] .site-header__inner { min-height: 60px; }
  .site-header[data-stuck] .brand img { width: clamp(136px, 13vw, 168px); }
}

/* ---------- the gleam ----------
   A single pass of light across the stone on hover, the gesture a jeweller
   makes when they tilt a piece under the lamp. It is the one effect here
   allowed to be obvious, because it is the one that sells. */

.piece__media::before {
  content: "";
  position: absolute;
  inset: -25% -65%;
  z-index: 1;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.40) 48%,
    rgba(255, 255, 255, 0.07) 56%,
    transparent 63%);
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
  transition: transform 1.3s var(--ease-silk), opacity .45s ease;
}
.piece__media::after { z-index: 2; }

.piece:hover .piece__media::before,
.piece:focus-within .piece__media::before { transform: translateX(60%); opacity: 1; }

.piece__name, .piece__ref { transition: color .4s var(--ease-silk); }
.piece:hover .piece__ref { color: var(--emerald); }

/* ---------- light in the case ----------
   A very slow drift of warm light across the hero band, on the order of half a
   minute per pass. It should never be noticed as motion, only felt as the
   difference between a lit vitrine and a flat panel of colour. */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 48% at 32% 22%, rgba(215, 192, 154, 0.13), transparent 72%);
}
.hero > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: vitrine 26s ease-in-out infinite alternate; }
}
@keyframes vitrine {
  from { transform: translate3d(-4%, -2%, 0) scale(1);    opacity: .7; }
  to   { transform: translate3d( 5%,  3%, 0) scale(1.14); opacity: 1; }
}

/* ---------- underlines that draw ---------- */

.link { position: relative; border-bottom-color: rgba(181, 154, 106, 0.4); }
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-expo);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

/* ---------- the piece sheet ----------
   Opens and closes on its own transition rather than appearing outright, which
   needs the discrete properties so the dialog is still painted on the way out. */

.sheet {
  opacity: 0;
  transform: translateY(16px) scale(.986);
  transition:
    opacity .4s var(--ease-silk),
    transform .55s var(--ease-expo),
    overlay .55s allow-discrete,
    display .55s allow-discrete;
}
.sheet[open] { opacity: 1; transform: none; }
@starting-style {
  .sheet[open] { opacity: 0; transform: translateY(16px) scale(.986); }
}

.sheet::backdrop {
  background: rgba(11, 26, 21, 0);
  transition: background .5s ease, overlay .5s allow-discrete, display .5s allow-discrete;
}
.sheet[open]::backdrop { background: rgba(11, 26, 21, 0.86); }
@starting-style {
  .sheet[open]::backdrop { background: rgba(11, 26, 21, 0); }
}

/* ---------- filtering the grid ----------
   Named so the browser can cross-fade the whole grid between two filter
   states. Without support the swap is instant, which is what it was before. */

/* Scoped to the collection's own grid. The home page showcase uses the same
   class, and naming both would pair them across a navigation and morph one
   into the other, which is not what either is for. */
[data-grid] { view-transition-name: collection-grid; }

/* ---------- reduced motion ----------
   The blanket rule earlier in this sheet zeroes durations, which a scroll
   timeline ignores because its progress comes from the scroller rather than
   from time. These have to be switched off by name. */

@media (prefers-reduced-motion: reduce) {
  .split__media img, .hero__frame img,
  .site-header::after, .hero::before { animation: none !important; }
  .site-header::after { transform: scaleX(0); }
  .js-reveal .lines .line > span { opacity: 1; transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   THE REPRESENTATIVE DOCK

   A standing offer to talk, on every page. It exists to take the name and the
   store BEFORE handing the conversation to WhatsApp or to a text message,
   because a chat that never gets answered still has to leave a lead behind.

   Deliberately not a green bubble. On a trade site for luxury retailers the
   button has to read as the house, not as a plugin, so it is the emerald and
   the gold hairline used everywhere else and it sits still until asked.
   ========================================================================== */

/* Canto inferior direito, onde a mao do visitante ja espera encontrar isso.

   Ele morou no esquerdo por um tempo: a Netlify pregava o selo dela no canto
   direito com uma prioridade que nenhum codigo do site alcanca, e o selo
   cobria este botao inteiro. Na Cloudflare nao existe selo nenhum, entao o
   canto voltou a ser nosso.

   Se um dia entrar aviso de cookie ou plugin de chat, eles vao disputar este
   mesmo canto: e so olhar antes de instalar. */
.rep-dock {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  pointer-events: none;
}
.rep-dock > * { pointer-events: auto; }

/* ---------- the tab ---------- */

.rep-dock__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.4rem;
  background: var(--emerald);
  color: var(--ivory);
  border: 1px solid rgba(181, 154, 106, 0.55);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 12px 34px rgba(11, 26, 21, 0.22);
  transition: background-color .4s var(--ease-silk), border-color .4s var(--ease-silk),
              transform .5s var(--ease-expo);
}
.rep-dock__tab:hover,
.rep-dock__tab:focus-visible { background: var(--emerald-lift); border-color: var(--gold-lift); }
.rep-dock__tab:active { transform: translateY(1px); }

/* Her face on the button rather than a chat glyph. A person is the whole
   argument for the thing: it is the difference between "contact us" and
   "speak to Raphaela", and that difference is what gets it clicked. */
.rep-dock__face {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(215, 192, 154, 0.6);
}

/* ---------- the panel ---------- */

.rep-panel {
  width: min(23rem, calc(100vw - 2.5rem));
  background: var(--ivory-lift);
  border: 1px solid rgba(181, 154, 106, 0.45);
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 24px 60px rgba(11, 26, 21, 0.26);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rep-panel .eyebrow { font-size: 0.5875rem; }

.rep-panel__close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 34px; height: 34px;
  background: none;
  border: 0;
  color: var(--stone-deep);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.rep-panel__close:hover { color: var(--emerald); }

.rep-panel__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-right: 1.75rem;
}
.rep-panel__face {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(181, 154, 106, 0.5);
  /* A ring of warm light instead of a hard edge, so the disc sits on the
     ivory rather than looking stamped onto it. */
  box-shadow: 0 0 0 4px rgba(181, 154, 106, 0.12);
}
.rep-panel__name {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--emerald);
}
.rep-panel__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--stone-deep);
  margin-bottom: 0.35rem;
}
.rep-panel__tel {
  font-size: 0.8125rem;
  color: var(--stone-deep);
  padding-top: 0.9rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(157, 150, 141, 0.3);
}
/* The number is selectable text as well as a link, because a tel: link does
   nothing on a desktop with no dialer and the visitor still needs the digits. */
.rep-panel__tel a {
  color: var(--emerald);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- the two fields ---------- */

.rep-form { display: flex; flex-direction: column; gap: 1.1rem; }
.rep-form .field label { font-size: 0.5875rem; }
.rep-form .field input { font-size: 0.9375rem; padding: 0.6rem 0; }

.rep-form__actions { display: flex; gap: 0.6rem; }
.rep-form__actions .btn { flex: 1 1 0; padding: 0.85rem 0.6rem; font-size: 0.625rem; justify-content: center; }

.rep-form__status {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--emerald);
  border-left: 2px solid var(--gold);
  padding: 0.6rem 0.85rem;
  background: rgba(181, 154, 106, 0.1);
}
.rep-form__status[data-tone="error"] {
  border-left-color: var(--alert);
  color: var(--alert);
  background: rgba(140, 59, 46, 0.07);
}

/* ---------- opening ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rep-panel {
    transform-origin: 100% 100%;
    animation: rep-in .5s var(--ease-expo) both;
  }
}
@keyframes rep-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}

/* ---------- narrow screens ----------
   The label goes and the tab becomes a disc, so it never sits across the copy
   on a phone. The panel then takes almost the full width. */

@media (max-width: 560px) {
  .rep-dock__tab { padding: 0; width: 58px; height: 58px; border-radius: 50%; justify-content: center; }
  .rep-dock__face { width: 40px; height: 40px; }
  .rep-dock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rep-panel { width: calc(100vw - 2rem); }
}

/* The mobile drawer covers the whole screen, so the dock must not float over it. */
.nav:not([hidden]) ~ * .rep-dock,
body:has(.nav-toggle[aria-expanded="true"]) .rep-dock { opacity: 0; pointer-events: none; }