/* Diamond Concierge Inc. — Warm Classic art direction */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ivory:#FBF8F3;
  --ivory-2:#F6F1E8;
  --ivory-3:#EFE8DB;
  --char:#2B2724;
  --char-2:#5B534A;
  --char-3:#726A60;
  --gold:#B8975A;
  --gold-deep:#7F6430;
  --gold-soft:#E4D6BB;
  --line:rgba(43,39,36,.14);
  --line-gold:rgba(184,151,90,.45);
  --white:#FFFDFA;

  --font-display:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --font-body:'Inter','Inter',-apple-system,'Segoe UI',sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.5rem; --text-2xl:2.125rem; --text-3xl:3rem; --text-hero:4.25rem;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem;
  --sp-8:4rem; --sp-12:6rem; --sp-16:8rem;

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--char);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;margin:0;color:var(--char)}
h1{font-size:clamp(2.4rem,5.2vw,var(--text-hero));line-height:1.04}
h2{font-size:clamp(1.9rem,3.6vw,var(--text-3xl));line-height:1.1}
h3{font-size:clamp(1.35rem,2vw,var(--text-xl));line-height:1.2}
p{margin:0 0 1em}
h1+p,h2+p,h3+p{margin-top:.95rem}
::selection{background:var(--gold-soft);color:var(--char)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* ---------- utilities ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.section{padding:clamp(3.5rem,8vw,var(--sp-16)) 0}
.section--tight{padding:clamp(2.5rem,5vw,var(--sp-8)) 0}
.bg-2{background:var(--ivory-2)}
.bg-3{background:var(--ivory-3)}
.center{text-align:center}
.rule{height:1px;background:var(--line-gold);border:0;margin:0}
.eyebrow{
  font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;margin:0 0 var(--sp-2);
}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--char-2);line-height:1.75;max-width:62ch}
.muted{color:var(--char-2)}
.small{font-size:var(--text-sm);color:var(--char-2)}
.serif-quote{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.4;font-style:italic}
.gold-mark{display:block;width:34px;height:1px;background:var(--gold);margin:0 0 var(--sp-3)}
.center .gold-mark{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:var(--text-sm);letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:1rem 1.9rem;border:1px solid var(--char);background:var(--char);color:var(--ivory);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  border-radius:1px;text-align:center;
}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--char);border-color:var(--char)}
.btn--ghost:hover{background:var(--char);color:var(--ivory);border-color:var(--char)}
.btn--gold{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn--gold:hover{background:var(--char);border-color:var(--char)}
.btn--sm{padding:.7rem 1.2rem;font-size:var(--text-xs)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.link-gold{
  display:inline-block;font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;border-bottom:1px solid var(--line-gold);padding-bottom:.3rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link-gold:hover{color:var(--char);border-color:var(--char)}

/* ---------- header ---------- */
.topstrip{
  background:var(--char);color:var(--ivory-3);font-size:var(--text-xs);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:.6rem 1rem;
}
.topstrip span{opacity:.85}
.topstrip .dot{color:var(--gold);margin:0 .6rem}
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(251,248,243,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:78px}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--char);flex:0 0 auto}
.brand svg{width:38px;height:38px;color:var(--gold-deep);flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-size:1.28rem;line-height:1.05;letter-spacing:.02em;white-space:nowrap}
/* "New York Metro" is longer than the old "New Jersey", so the tracking comes in
   a notch and the line is pinned to one row - a wrapped lockup reads as a bug. */
.brand-sub{display:block;font-family:var(--font-body);font-size:.56rem;letter-spacing:.19em;text-transform:uppercase;color:var(--char-3);white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav a{
  font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--char-2);
  padding:.4rem 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav a:hover{color:var(--char);border-color:var(--gold)}
.nav a.active{color:var(--char);border-color:var(--gold)}
/* On real desktop widths the eight nav labels fit on one row; letting "The
   Collection" and "Symbols of Faith" wrap made the header look broken. Below
   1280px they are allowed to wrap again, and under 1040px the nav is replaced
   by the drawer. */
@media (min-width:1280px){
  .nav{gap:1.05rem}
  .nav a{white-space:nowrap;letter-spacing:.13em}
}
.header-actions{display:flex;align-items:center;gap:.75rem}
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--line);
  padding:.55rem .9rem;border-radius:1px;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .3s,background .3s;
}
.cart-btn:hover{border-color:var(--gold);background:var(--white)}
.cart-count{
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--gold-deep);color:#fff;
  font-size:.65rem;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;
}
.burger{display:none;background:none;border:1px solid var(--line);padding:.55rem .7rem;border-radius:1px}
.burger span{display:block;width:18px;height:1px;background:var(--char);margin:4px 0}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--ivory)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:1rem 0;border-bottom:1px solid var(--line);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase}
.mobile-nav a:last-child{border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ivory-2);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:min(78vh,660px)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,4vw,4rem)}
.hero-copy h1 em{font-style:italic;color:var(--gold-deep)}
.hero-copy .lede{margin-top:1.3rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-media{position:relative;min-height:340px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-gold);
}
.hero-badges div{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--char-2)}
.hero-badges strong{display:block;font-family:var(--font-display);font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--char);font-weight:500}

/* ---------- marquee value bar ---------- */
.valuebar{background:var(--char);color:var(--ivory-2);padding:1.6rem 0}
.valuebar .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:center;align-items:center}
.valuebar span{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.valuebar span::before{content:'◆';color:var(--gold);margin-right:.7rem;font-size:.6rem;vertical-align:middle}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{margin:.8rem 0 0}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center .lede{text-align:center}

/* ---------- category tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.5rem)}
.tile{position:relative;display:block;overflow:hidden;background:var(--ivory-3)}
.tile-img{aspect-ratio:3/4;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile-cap{padding:1.1rem .2rem .2rem}
.tile-cap h3{font-size:1.3rem}
.tile-cap span{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.step{border-top:1px solid var(--line-gold);padding-top:1.4rem}
.step-num{font-family:var(--font-display);font-size:2.2rem;color:var(--gold);line-height:1;display:block;margin-bottom:.6rem}
.step h3{margin-bottom:.5rem}
.step p{color:var(--char-2);margin:0}
.steps--4{grid-template-columns:repeat(4,1fr)}

/* ---------- product cards ---------- */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}
.grid-products--3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.pcard:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(43,39,36,.4)}
.pcard-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ivory-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.04)}
/* Status label. Deliberately NOT absolutely positioned over .pcard-img: on a square
   crop the piece frequently sits in the top-left of the frame and the label hid it. */
.pcard-tag{
  color:var(--gold-deep);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
}
.pcard-meta--split{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pcard-meta--split>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){
  .pcard-meta--split{flex-direction:column;gap:.2rem}
  .pcard-meta--split>span:first-child{white-space:normal}
}
.pcard-body{padding:1.15rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard-body h3{font-size:1.16rem;line-height:1.25}
.pcard-meta{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--char-3)}
.pcard-price{font-family:var(--font-display);font-size:1.22rem;color:var(--char);margin-top:.15rem}
.pcard-price small{font-family:var(--font-body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--char-3);display:block;margin-top:.15rem}
.pcard-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.9rem}
.pcard-actions .btn{flex:1;padding:.72rem .5rem;font-size:.68rem;letter-spacing:.12em}

/* ---------- shop filters ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.5rem,3vw,3.5rem);align-items:start}
.filters{position:sticky;top:100px;border:1px solid var(--line);background:var(--white);padding:1.5rem}
.filter-group{margin-bottom:1.6rem}
.filter-group:last-of-type{margin-bottom:1rem}
.filter-group h4{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--char-3);margin:0 0 .8rem;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  background:transparent;border:1px solid var(--line);padding:.45rem .75rem;border-radius:99px;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--char-2);
  transition:all .28s var(--ease);
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--char);border-color:var(--char);color:var(--ivory)}
.filter-bar-mobile{display:none}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.shop-toolbar .small{margin:0}
select.sortsel{
  font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;
  background:var(--white);border:1px solid var(--line);padding:.6rem .8rem;color:var(--char-2);border-radius:1px;
}
.empty-state{border:1px dashed var(--line-gold);padding:3rem 1.5rem;text-align:center;background:var(--white)}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(43,39,36,.42);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--ivory);z-index:90;
  transform:translateX(103%);transition:transform .45s var(--ease);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(43,39,36,.5);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.5rem;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.35rem}
.icon-btn{background:none;border:0;padding:.35rem;line-height:0;color:var(--char-2)}
.icon-btn:hover{color:var(--char)}
.drawer-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem}
.drawer-foot{border-top:1px solid var(--line);padding:1.25rem 1.5rem;background:var(--ivory-2)}
.citem{display:grid;grid-template-columns:76px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.citem img{aspect-ratio:1/1;object-fit:cover;background:var(--ivory-3)}
.citem h4{font-family:var(--font-display);font-size:1.05rem;margin:0 0 .2rem;font-weight:500}
.citem .small{margin:0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:.5rem}
.qty button{background:none;border:0;width:28px;height:28px;line-height:1;color:var(--char-2)}
.qty button:hover{color:var(--gold-deep)}
.qty span{min-width:26px;text-align:center;font-size:var(--text-sm)}
.citem-top{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.remove{background:none;border:0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--char-3);padding:0;margin-top:.55rem}
.remove:hover{color:var(--gold-deep)}
.subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.subtotal strong{font-family:var(--font-display);font-size:1.4rem;font-weight:500}

/* ---------- modal ---------- */
.modal{
  position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:1.25rem;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{
  background:var(--ivory);max-width:520px;width:100%;padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--line-gold);transform:translateY(12px);transition:transform .4s var(--ease);
  max-height:88vh;overflow-y:auto;
}
.modal.open .modal-card{transform:none}
.demo-flag{
  display:inline-block;background:var(--gold-soft);color:var(--gold-deep);font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.4rem .7rem;margin-bottom:1rem;font-weight:500;
}
.modal-card ul{padding-left:1.1rem;margin:0 0 1.25rem;color:var(--char-2)}
.modal-card li{margin-bottom:.45rem}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.5rem)}
.quote{background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1rem}
.quote .stars{color:var(--gold);letter-spacing:.25em;font-size:.8rem}
.quote p{margin:0;font-family:var(--font-display);font-size:1.16rem;line-height:1.5;font-style:italic;color:var(--char)}
.quote footer{margin-top:auto;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--char-3)}

/* ---------- IG grid ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.ig-grid a{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:var(--ivory-3)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.ig-grid a:hover img{transform:scale(1.07);opacity:.9}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,4.5rem);align-items:center}
.split--wide-img{grid-template-columns:1.15fr 1fr}
.split img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-copy h2{margin-bottom:1rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;border-top:1px solid var(--line-gold);padding-top:1.5rem}
.stat strong{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;font-weight:500}
.stat span{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--char-3)}

/* ---------- email capture ---------- */
.capture{background:var(--char);color:var(--ivory-2)}
.capture h2{color:var(--ivory)}
.capture .lede{color:rgba(251,248,243,.72)}
.capture form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.75rem;max-width:520px}
.capture input{
  flex:1 1 240px;background:transparent;border:1px solid rgba(251,248,243,.34);color:var(--ivory);
  padding:1rem 1.1rem;font-family:var(--font-body);font-size:var(--text-sm);border-radius:1px;
}
.capture input::placeholder{color:rgba(251,248,243,.5)}
.capture input:focus{outline:none;border-color:var(--gold)}
.capture .btn{background:var(--gold);border-color:var(--gold);color:var(--char)}
.capture .btn:hover{background:var(--ivory);border-color:var(--ivory);color:var(--char)}
.capture .form-note{color:rgba(251,248,243,.6)}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.75rem,4vw,4rem);align-items:start}
/* ---------- PDP gallery ----------
   The frame reserves its own space with aspect-ratio, so switching photographs can never
   shift the page. Slides are stacked in the same grid cell and crossfaded; the first slide
   carries .is-active in the markup, so with CSS but no JavaScript the lead photograph is
   still visible and nothing collapses. */
.gallery{display:block}
.gallery-main{background:var(--ivory-2);overflow:hidden;aspect-ratio:1/1;display:grid;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gslide{grid-area:1/1;opacity:0;transition:opacity .62s var(--ease);will-change:opacity}
.gslide.is-active{opacity:1}
.gallery:not([data-gallery]) .gslide{opacity:1}
.gallery-bar{margin-top:.6rem}
/* flex rather than a fixed column count: a two-photograph piece gets two modest thumbnails
   instead of two stretched ones, and a five-photograph piece divides the row evenly. */
.thumbs{display:flex;flex-wrap:nowrap;gap:.6rem}
.thumbs .gthumb{flex:1 1 0;min-width:0;max-width:132px;padding:0;border:1px solid var(--line);background:none;overflow:hidden;aspect-ratio:1/1;cursor:pointer;position:relative;transition:border-color .3s var(--ease),opacity .3s var(--ease);opacity:.72}
.thumbs .gthumb:hover{opacity:1}
.thumbs .gthumb.is-active{border-color:var(--gold-deep);opacity:1}
.thumbs .gthumb:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-cap{display:flex;align-items:baseline;gap:.75rem;margin:.75rem 0 0;font-size:var(--text-xs);color:var(--char-3);letter-spacing:.08em;min-height:1.2em}
.gcount{font-variant-numeric:tabular-nums;letter-spacing:.16em;color:var(--gold-deep);flex:none}
.gcap-track{position:relative;display:grid;flex:1}
.gcap-item{grid-area:1/1;opacity:0;transition:opacity .4s var(--ease)}
.gcap-item.is-active{opacity:1}
@media (max-width:560px){
  .thumbs{gap:.4rem}
  .gallery-cap{font-size:.68rem;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .gslide,.gcap-item{transition:none}
}
.pdp-price{font-family:var(--font-display);font-size:2rem;margin:.6rem 0 .2rem;font-weight:500}
.spec-table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.spec-table th,.spec-table td{text-align:left;padding:.75rem .25rem;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.spec-table th{font-family:var(--font-body);font-weight:500;color:var(--char-3);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;width:45%}
.pdp-actions{display:flex;flex-direction:column;gap:.6rem;margin:1.5rem 0}
.trust-list{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--line-gold);padding-top:1.25rem}
.trust-list li{font-size:var(--text-sm);color:var(--char-2);padding-left:1.4rem;position:relative;margin-bottom:.5rem}
.trust-list li::before{content:'◆';position:absolute;left:0;color:var(--gold);font-size:.6rem;top:.35rem}
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{padding:1rem 0;cursor:pointer;font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'+';color:var(--gold-deep)}
.accordion details[open] summary::after{content:'–'}
.accordion p{color:var(--char-2);font-size:var(--text-sm);margin:0 0 1rem}

/* ---------- forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--char-3);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--ivory);border:1px solid var(--line);padding:.9rem 1rem;
  font-family:var(--font-body);font-size:var(--text-base);color:var(--char);border-radius:1px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--white)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.err{display:none;color:#9a3b28;font-size:var(--text-xs);margin-top:.4rem;letter-spacing:.04em}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#b8543c;background:#fdf6f4}
.field.invalid .err{display:block}
.form-note{font-size:var(--text-xs);color:var(--char-3);line-height:1.7}
.form-note a{border-bottom:1px solid var(--line-gold)}
.success{
  display:none;border:1px solid var(--line-gold);background:var(--ivory-2);padding:1.5rem;text-align:center;
}
.success.show{display:block;animation:fade .5s var(--ease) both}
.success .mark{width:44px;height:44px;border:1px solid var(--gold);border-radius:99px;display:grid;place-items:center;margin:0 auto .9rem;color:var(--gold-deep)}
.success h3{margin-bottom:.4rem}
.success p{margin:0;color:var(--char-2);font-size:var(--text-sm)}
form.hidden{display:none}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- contact aside ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.75rem,4vw,4rem);align-items:start}
.info-block{border-top:1px solid var(--line-gold);padding-top:1.25rem;margin-bottom:1.75rem}
.info-block h4{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--char-3);margin:0 0 .5rem;font-weight:500}
.info-block p{margin:0;color:var(--char-2)}
.info-block a{border-bottom:1px solid var(--line-gold)}
.info-block a:hover{color:var(--gold-deep)}
.callout{background:var(--ivory-3);padding:clamp(1.5rem,3vw,2rem);border-left:2px solid var(--gold)}
.callout h3{margin-bottom:.5rem}

/* ---------- footer ---------- */
.site-footer{background:var(--char);color:rgba(251,248,243,.7);padding:clamp(3rem,6vw,4.5rem) 0 2rem;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,3vw,3rem)}
.site-footer .brand{color:var(--ivory)}
.site-footer .brand svg{color:var(--gold)}
.site-footer .brand-sub{color:rgba(251,248,243,.5)}
.site-footer h4{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem;font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.6rem;font-size:var(--text-sm)}
.site-footer a:hover{color:var(--ivory)}
.site-footer p{font-size:var(--text-sm);line-height:1.75}
.footer-bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.5rem;border-top:1px solid rgba(251,248,243,.14);font-size:var(--text-xs);letter-spacing:.06em;
}

/* ---------- reveal motion ---------- */
/* ---------- scroll reveal ----------
   Hiding is scoped to .js, which an inline script in <head> sets before first paint. Without
   JavaScript every block is visible immediately and nothing below the fold is lost. Only
   opacity and transform animate, so there is no layout shift at any point.
   Photographs additionally settle from 1.04 to 1.0 inside their own frame — the frame itself
   never moves, the image just stops growing. */
:root{--ease-lux:cubic-bezier(.16,.84,.28,1)}
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity 980ms var(--ease-lux),transform 980ms var(--ease-lux)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal>picture,.js .reveal>img,
.js .reveal .pcard-img,.js .reveal .tile-img,.js .reveal .gallery-main,
.js .reveal>.inv-video,.js .ig-grid.reveal a{overflow:hidden}
.js .reveal>picture>img,.js .reveal>img,
.js .reveal .pcard-img img,.js .reveal .tile-img img,
.js .reveal .gallery-main .gslide,.js .ig-grid.reveal a img{
  transform:scale(1.04);transition:transform 1080ms var(--ease-lux)}
.js .reveal.in>picture>img,.js .reveal.in>img,
.js .reveal.in .pcard-img img,.js .reveal.in .tile-img img,
.js .reveal.in .gallery-main .gslide,.js .ig-grid.reveal.in a img{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .js .reveal>picture>img,.js .reveal>img,.js .reveal .pcard-img img,
  .js .reveal .tile-img img,.js .reveal .gallery-main .gslide,
  .js .ig-grid.reveal a img{transform:none;transition:none}
  [data-parallax]{transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- real inventory photography ---------- */
picture{display:block}
.pcard-img picture,.ig-grid picture,.tile-img picture,.gallery-main picture,.hero-media picture,.proof-media picture{width:100%;height:100%}
.pcard-img picture img,.ig-grid picture img,.tile-img picture img{width:100%;height:100%;object-fit:cover}
.gallery-main picture img{width:100%;height:100%;object-fit:cover}
.pcard-price--request{font-size:1.1rem;color:var(--gold-deep)}
.inv-note{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.inv-note::before{content:'\25C6';margin-right:.5rem;font-size:.55rem;vertical-align:middle}

/* proof band — loose certified stones in hand */
.proof{background:var(--ivory-3)}
.proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.proof-media{overflow:hidden;background:var(--ivory-2);border:1px solid var(--line-gold)}
.proof-media img{width:100%;height:auto;display:block}
.proof-stack{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.proof-cap{font-size:var(--text-xs);letter-spacing:.1em;color:var(--char-3);margin:.7rem 0 0;text-transform:none}

/* judaica feature band */
.judaica{background:var(--ivory-2);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.judaica-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2rem,4vw,3rem)}
.judaica-lead picture,.judaica-lead img{width:100%}
.judaica-lead .proof-media img{aspect-ratio:4/5;object-fit:cover}
.judaica-points{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.85rem}
.judaica-points li{padding-left:1.4rem;position:relative;color:var(--char-2);font-size:var(--text-sm)}
.judaica-points li::before{content:'\25C6';position:absolute;left:0;top:.28em;color:var(--gold);font-size:.55rem}

/* inquiry-only pdp */
.request-band{border:1px solid var(--line-gold);background:var(--ivory-2);padding:1.25rem 1.4rem;margin:0 0 1.5rem}
.request-band strong{font-family:var(--font-display);font-size:1.35rem;display:block}
#inquiry-piece-note{display:inline-block;margin-bottom:1.25rem;padding:.45rem .8rem;border:1px solid var(--line-gold);background:var(--ivory-2);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.tiles--5{grid-template-columns:repeat(5,1fr)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .tiles,.tiles--5{grid-template-columns:repeat(2,1fr)}
  .grid-products{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
  .burger{display:block}
  .shop-layout{grid-template-columns:1fr}
  .filters{display:none}
  .filter-bar-mobile{display:block}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1;aspect-ratio:16/11;min-height:0}
  .hero-media img{position:relative}
  .steps,.steps--4,.quotes,.stat-row{grid-template-columns:1fr}
  .steps--4{gap:1.5rem}
  .split,.pdp,.contact-grid,.split--wide-img,.proof-grid,.judaica-lead{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .grid-products,.grid-products--3{grid-template-columns:repeat(2,1fr)}
  .quotes{gap:1rem}
  .stat-row{grid-template-columns:repeat(3,1fr);gap:1rem}
  .stat strong{font-size:1.5rem}
}
@media (max-width:560px){
  :root{--text-hero:2.6rem}
  .topstrip{font-size:.6rem;letter-spacing:.1em}
  .topstrip .hide-sm{display:none}
  .topstrip span:nth-of-type(n+2){display:none}
  .header-inner{height:66px}
  .brand svg{width:30px;height:30px}
  .brand-name{font-size:1.02rem;white-space:nowrap}
  .brand-sub{font-size:.48rem;letter-spacing:.14em}
  .site-footer .brand-name{font-size:1.15rem}
  .cart-btn span:not(.cart-count){display:none}
  .cart-btn{padding:.55rem .7rem}
  .grid-products,.grid-products--3,.tiles,.tiles--5{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-badges{gap:1rem 1.5rem}
  .valuebar .wrap{flex-direction:column;gap:.6rem}
  .btn{width:100%}
  .hero-cta .btn{width:100%}
  .pcard-actions{flex-direction:column}
  .pcard-actions .btn{width:100%}
  .capture .btn{width:100%}
}

/* ---------- motion: the bracelet film ----------
   Portrait 9:16 source. Always paired with a poster; the still fallback below is what a
   reduced-motion visitor sees instead of the loop. */
.inv-video{margin:0;position:relative;background:var(--ivory-2);border:1px solid var(--line-gold);overflow:hidden}
.inv-video video,.inv-video>.inv-video-fallback{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.inv-video>.inv-video-fallback{display:none}
.inv-video figcaption,.inv-video .proof-cap{padding:.7rem 1rem 1rem;margin:0}
.inv-video--pdp{max-width:340px}
.inv-video--tall video,.inv-video--tall>.inv-video-fallback{aspect-ratio:3/5}
/* The batch-4 cushion film is near-square (720x700) because its frame was cropped down to
   remove a third-party brand mark from the background. Forcing the default 9/16 on it would
   crop the ring straight out of shot, so it gets its own ratio and a wider box. */
.inv-video--wide{max-width:420px}
.inv-video--wide video,.inv-video--wide>.inv-video-fallback{aspect-ratio:36/35}
.inv-video--pdp.inv-video--wide{max-width:420px}
.motion-grid--flip .inv-video{max-width:300px}
.motion-band{background:var(--ivory-3);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.motion-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.motion-grid .inv-video{max-width:300px}
@media (prefers-reduced-motion:reduce){
  .inv-video video{display:none}
  .inv-video>.inv-video-fallback{display:block}
}
/* Six categories reads better as two rows of three than one thin row of six. */
.tiles--6{grid-template-columns:repeat(3,1fr);row-gap:clamp(1.5rem,3vw,2.5rem)}
.tiles--6 .tile-img{aspect-ratio:4/5}
@media (max-width:1040px){
  .tiles--6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .motion-grid{grid-template-columns:1fr;justify-items:center}
  .motion-grid .inv-video{max-width:260px}
  .motion-grid>div:last-child{justify-self:stretch}
}
@media (max-width:560px){
  .tiles--6{grid-template-columns:1fr}
  .inv-video--pdp{max-width:100%}
}

/* two-up product grid — used where a section holds exactly two pieces */
.grid-products--pair{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
/* Grouped shop grid: the catalog is broken into labeled category runs so a
   visitor scanning for bracelets is not scrolling past twenty engagement rings. */
/* Solo variant: a specialty band with no photograph of its own. Given a framed,
   two-column editorial treatment so it reads as an intentional panel rather than
   a section with a missing image. */
.judaica-lead--solo{display:block;max-width:none;margin-bottom:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2rem,4.5vw,3.25rem) 0}
.judaica-lead--solo>div{display:grid;grid-template-columns:minmax(0,46ch) minmax(0,1fr);
  column-gap:clamp(1.75rem,5vw,4.5rem);row-gap:0;align-items:start}
.judaica-lead--solo .eyebrow,.judaica-lead--solo h2,.judaica-lead--solo .lede{grid-column:1}
.judaica-lead--solo h2{margin-bottom:1.15rem}
.judaica-lead--solo .hero-cta{grid-column:1;margin-top:1.75rem;align-self:start}
.judaica-lead--solo .hero-cta .btn{flex:1 1 auto;justify-content:center;text-align:center}
.judaica-lead--solo .judaica-points{grid-column:2;grid-row:1 / span 4;margin:0;
  row-gap:1.1rem;align-self:center}
@media (max-width:900px){
  .judaica-lead--solo>div{grid-template-columns:1fr}
  .judaica-lead--solo .eyebrow,.judaica-lead--solo h2,.judaica-lead--solo .lede,
  .judaica-lead--solo .hero-cta,.judaica-lead--solo .judaica-points{grid-column:1;grid-row:auto}
  .judaica-lead--solo>div{row-gap:0}
  .judaica-lead--solo .judaica-points{margin-top:1.5rem}
}
.cat-group + .cat-group{margin-top:clamp(3rem,6vw,5rem)}
.cat-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-bottom:.9rem;margin-bottom:clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.cat-group-head h3{font-size:clamp(1.25rem,2vw,1.6rem);margin:0;letter-spacing:-.01em}
.cat-group-head .cat-group-n{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;white-space:nowrap}
@media (max-width:560px){.cat-group-head{flex-direction:column;gap:.3rem}}
@media (max-width:560px){.grid-products--pair{grid-template-columns:1fr}}


/* ---------- full-bleed proposal band ----------
   A single deliberate color moment. The photograph is the only place on the site where
   saturated red appears; every catalog thumbnail of the same ring stays on linen, marble
   or black lacquer so the ivory grid is never contaminated. */
.proposal-band{position:relative;isolation:isolate;overflow:hidden;background:#2a0d10;
  min-height:clamp(520px,80vh,780px);display:grid;align-items:end}
.proposal-media{grid-area:1/1;align-self:stretch;justify-self:stretch;position:relative;overflow:hidden;height:100%;will-change:transform}
.proposal-media picture,.proposal-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* the parallax layer is oversized so a translate can never expose an edge */
.proposal-media img{transform:scale(1.1)}
/* The rose sits center-left in the frame, so the copy is parked in a right-hand column with
   its own scrim. Nothing is printed across the stone. */
.proposal-band::after{content:'';grid-area:1/1;align-self:stretch;justify-self:stretch;z-index:1;
  background:
    linear-gradient(to left,rgba(16,4,6,.90) 0%,rgba(16,4,6,.74) 26%,rgba(16,4,6,.30) 46%,rgba(16,4,6,0) 66%),
    linear-gradient(to top,rgba(16,4,6,.55) 0%,rgba(16,4,6,.20) 26%,rgba(16,4,6,0) 55%)}
.proposal-inner{grid-area:1/1;z-index:2;align-self:center;width:100%;display:grid;justify-items:end;
  padding-block:clamp(2.5rem,6vw,4.5rem)}
.proposal-copy{max-width:27rem;margin-left:auto;color:#fdf7f3;text-shadow:0 1px 20px rgba(12,3,4,.55)}
.proposal-copy .eyebrow{color:var(--gold)}
.proposal-copy h2{color:#fff;margin:.5rem 0 1rem;font-size:clamp(1.6rem,2.6vw,2.3rem)}
.proposal-copy .lede{color:rgba(255,255,255,.88)}
.proposal-copy .link-gold{color:var(--gold)}
/* On a phone the ring sits dead center of the frame and any overlaid copy lands straight on
   the stone, so the band stops being an overlay and becomes a stack: photograph, then copy on
   a solid deep ground. Same editorial moment, nothing printed across the diamond. */
@media (max-width:860px){
  .proposal-band{display:block;min-height:0;background:#160406}
  .proposal-media{height:auto;aspect-ratio:1/1}
  .proposal-media img{transform:none}
  .proposal-band::after{display:none}
  .proposal-inner{padding-block:clamp(1.75rem,7vw,2.5rem)}
  .proposal-copy{max-width:none;margin-left:0;text-shadow:none}
}

/* Bridal Sets feature band on the homepage. A matched ring-and-band pair is the highest-intent
   thing a bridal client arrives looking for, so it gets a full band rather than only a tile. */
.bridal-band{background:var(--ivory-3);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.bridal-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.bridal-grid figure{margin:0}
.bridal-grid img{display:block;width:100%;height:auto;border-radius:2px}
.bridal-pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:860px){.bridal-grid{grid-template-columns:1fr}}

/* personalized commissions band on the bespoke page */
.personal-band{background:var(--ivory-3);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.motion-grid--flip{grid-template-columns:300px 1fr}
@media (max-width:860px){.motion-grid--flip{grid-template-columns:1fr}}


/* ---------- laboratory-grown vertical ---------- */
.hero--lab .hero-grid{grid-template-columns:1.1fr .9fr}
.hero-media--art{display:flex;align-items:center;justify-content:center;background:var(--ivory-3);
  padding:clamp(1.5rem,3vw,3rem);min-height:420px;aspect-ratio:auto}
.lab-figure{margin:0;max-width:400px;width:100%}
.lab-art{display:block;width:100%;height:auto}
.lab-figure figcaption{margin-top:1.4rem;font-size:var(--text-xs);line-height:1.7;color:var(--char-3);
  text-align:center;border-top:1px solid var(--line-gold);padding-top:1rem}
.disclose{margin-top:2.2rem;padding:1rem 1.15rem;background:var(--white);border-left:2px solid var(--gold);
  font-size:var(--text-sm);line-height:1.65;color:var(--char-2)}
.disclose strong{color:var(--char);font-weight:500}

.growth-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.growth{margin:0;background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2.25rem)}
.growth svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.growth figcaption{margin-top:1.4rem;border-top:1px solid var(--line-gold);padding-top:1.25rem}
.growth figcaption h3{margin-bottom:.55rem}
.growth figcaption p{margin:0;color:var(--char-2);font-size:var(--text-sm);line-height:1.75}

.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:collapse;background:var(--white);min-width:720px}
.compare caption{caption-side:bottom;text-align:left;padding-top:1rem}
.compare thead th{
  font-family:var(--font-display);font-size:1.35rem;font-weight:500;text-align:left;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--gold-soft);background:var(--ivory-2);
}
.compare thead th:last-child{background:var(--ivory-3)}
.compare tbody th{
  text-align:left;vertical-align:top;padding:1.15rem 1.25rem;width:19%;
  font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;
}
.compare tbody td{vertical-align:top;padding:1.15rem 1.25rem;font-size:var(--text-sm);
  line-height:1.75;color:var(--char-2);width:40.5%}
.compare tbody td:last-child{background:rgba(184,151,90,.05)}
.compare tbody tr+tr th,.compare tbody tr+tr td{border-top:1px solid var(--line)}

.accordion--lab summary{text-transform:none;letter-spacing:0;font-family:var(--font-display);
  font-size:1.15rem;line-height:1.45;gap:1.5rem;align-items:flex-start}
.accordion--lab summary::after{margin-top:.2rem}
.accordion--lab p{line-height:1.8;padding-right:2rem}

.source-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.source-list li{font-size:var(--text-sm);padding-left:1.1rem;position:relative}
.source-list li::before{content:'\2192';position:absolute;left:0;color:var(--gold)}

@media (max-width:1040px){
  .hero--lab .hero-grid{grid-template-columns:1fr}
  /* Copy before diagram on narrow screens: the disclosure and the H1 must be the first
     thing read, and the diagram is supporting material. Also kills the 16/11 aspect-ratio
     the shared .hero-media picks up at 860px, which clipped the figure caption. */
  .hero-media--art{order:0;min-height:0;aspect-ratio:auto;padding:2.5rem 1.25rem 3rem}
  .lab-figure{max-width:340px}
  .compare tbody th{width:24%}
}
@media (max-width:860px){
  .growth-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .compare{min-width:560px}
  .compare thead th{font-size:1.15rem;padding:.9rem 1rem}
  .compare tbody th,.compare tbody td{padding:.9rem 1rem}
  .accordion--lab summary{font-size:1.05rem}
  .accordion--lab p{padding-right:0}
}

.accordion--lab summary::after{font-family:var(--font-body);font-size:1.3rem;line-height:1.25}
.source-list a.link-gold{text-transform:none;letter-spacing:0;font-size:var(--text-sm)}

/* The comparison table cannot side-scroll on a phone: half the point of the page is that the
   two columns sit next to each other, and a hidden column reads as a hidden answer. Below
   700px each row becomes a labelled card, natural above laboratory-grown, using data-col. */
@media (max-width:700px){
  .compare-wrap{overflow:visible}
  .compare{min-width:0}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare caption{display:block;width:100%;padding:0 0 1.25rem}
  .compare tbody tr{border:1px solid var(--line);background:var(--white);margin-bottom:1rem}
  .compare tbody tr+tr th,.compare tbody tr+tr td{border-top:0}
  .compare tbody th{width:auto;background:var(--ivory-2);border-bottom:1px solid var(--gold-soft)}
  .compare tbody td{width:auto}
  .compare tbody td+td{border-top:1px solid var(--line)}
  .compare tbody td::before{
    content:attr(data-col);display:block;font-family:var(--font-display);font-size:1.05rem;
    color:var(--char);margin-bottom:.45rem;
  }
}