/* ============================================================
   MARGALLA GEMSTONES — homepage
   ------------------------------------------------------------
   PHOTOGRAPHY
   Every image is Margalla's own: the cut-out stones in
   assets/stones/, the hero composites in assets/hero/ built from
   those stones, and the jewellery detail in assets/jewellery/
   cropped from the studio photographs. Regenerate them with the
   scripts noted in assets/img/README.md.

   SPACING
   Vertical rhythm is driven by --sec-y (section padding) and
   --gap (grid gutters). Raise those two values and the whole
   page opens up further; nothing else needs touching.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ivory:#F2EDE3;
  --ivory-deep:#E7E0D2;
  --ink:#141412;
  --ink-soft:#4A4A42;
  --forest:#12301F;
  --forest-deep:#0A1B11;
  --mineral:#C7DCBC;
  --mineral-bright:#DCEBD2;
  --sage:#DAE3D0;
  --mint:#E7EFE1;
  --stone:#B9A288;
  --white:#fff;

  /* breathing room */
  --pad: clamp(1.5rem, 5.5vw, 7rem);
  --sec-y: clamp(3.6rem, 7vw, 7.5rem);
  --gap: clamp(1.3rem, 2.6vw, 2.8rem);
}

@property --lx { syntax:'<percentage>'; inherits:false; initial-value:26%; }
@property --ly { syntax:'<percentage>'; inherits:false; initial-value:20%; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--stone);outline-offset:3px}

/* ---------- type roles ---------- */
.italic{font-family:"Instrument Serif",Georgia,serif;font-style:italic;letter-spacing:.005em;line-height:1.3}
.label{
  font-size:clamp(0.7rem,0.56vw,0.78rem);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
}
.caption{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(0.773rem,0.693vw,0.773rem);opacity:.72}

/* ---------- dotted rules ---------- */
.rule{height:1px;width:100%;background-image:repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 7px);opacity:.45}
.rule-v{width:1px;align-self:stretch;min-height:1.1em;background-image:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 7px);opacity:.5}

/* ---------- fitted display type (never overflows) ---------- */
.fit{display:block;width:100%;height:auto;overflow:visible}
.fit text{
  font-family:"Jost",sans-serif;font-weight:500;
  letter-spacing:-.03em;
  fill:currentColor;
}

/* ---------- scroll progress hairline ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  background:var(--mineral);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;mix-blend-mode:difference;pointer-events:none;
}

/* ---------- image blocks ---------- */
.stone{
  display:block;position:relative;margin:0;overflow:hidden;isolation:isolate;
  background:#1b1b18;
}
.stone img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .7s ease;
}
.stone::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(40% 36% at var(--lx) var(--ly), rgba(255,255,255,.30), rgba(255,255,255,.04) 55%, transparent 74%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  background-size:cover,150px 150px;
  mix-blend-mode:soft-light;
  transition:--lx 1.5s cubic-bezier(.3,.6,.2,1),--ly 1.5s cubic-bezier(.3,.6,.2,1);
}
.stone:hover img,.stone:focus-within img{transform:scale(1.06)}
.stone:hover::after,.stone:focus-within::after{--lx:76%;--ly:70%}

/* tinted loading fields */
.t-dark{background:linear-gradient(150deg,#3a3a33,#14140f)}
.t-green{background:linear-gradient(150deg,#1b6e51,#04150f)}
.t-blue{background:linear-gradient(150deg,#3b6ba8,#050b17)}
.t-rose{background:linear-gradient(150deg,#c9738d,#2a0f1b)}
.t-warm{background:linear-gradient(150deg,#c9bba2,#2b271f)}
.t-pale{background:linear-gradient(150deg,#e3e6e4,#4d565c)}

/* crop marks */
.marks{position:absolute;inset:.75rem;pointer-events:none;z-index:3}
.marks span{position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.5)}
.marks span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.marks span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.marks span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.marks span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ============================================================
   0 · HEADER — utilities · navigation · wordmark
   ============================================================ */
.topbar{
  position:fixed;z-index:60;top:0;left:0;right:0;
  padding:clamp(.9rem,1.9vw,1.6rem) var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1rem,3vw,3rem);
  color:var(--white);
  transition:background .5s ease,color .5s ease,border-color .5s ease,padding .5s ease;
  border-bottom:1px solid transparent;
}
body.scrolled .topbar{
  background:rgba(242,237,227,.94);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  color:var(--ink);
  border-bottom-color:rgba(20,20,18,.1);
  padding-block:clamp(.7rem,1.3vw,1.05rem);
}

.util{display:flex;align-items:center;gap:clamp(.6rem,1.1vw,.9rem);justify-self:end}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.icon-btn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 55%,transparent);transform:translateY(-2px)}
.icon-btn .count{
  position:absolute;top:-.2rem;right:-.2rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  border-radius:999px;background:var(--mineral);color:var(--forest);
  font-size:.6rem;font-weight:700;letter-spacing:.02em;display:grid;place-items:center;
}

.wordmark{justify-self:start;display:block;line-height:0}
.wordmark .logo{display:block}
.wordmark .logo img{display:block;width:auto;height:clamp(2rem,2.9vw,2.6rem)}
/* the lettering in the mark is near-black, so the header swaps to an ivory
   cut whenever it is floating over a dark hero rather than sitting on ivory */
.wordmark .logo--onLight{display:none}
body.scrolled .wordmark .logo--onDark,
body.chrome-solid .wordmark .logo--onDark{display:none}
body.scrolled .wordmark .logo--onLight,
body.chrome-solid .wordmark .logo--onLight{display:block}
.overlay .wordmark .logo img{height:clamp(1.9rem,2.6vw,2.3rem)}

/* ---- primary navigation ---- */
.nav-wrap{justify-self:center}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.9rem)}
.nav > li{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 0;position:relative;
  font-size:clamp(0.7rem,0.56vw,0.78rem);font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:.42rem;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after,.nav > li[data-open="true"] > .nav-link::after{transform:scaleX(1)}
.chev{width:.5rem;height:.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .35s ease}
.nav > li[data-open="true"] .nav-link > .chev{transform:rotate(180deg)}

.panel{
  position:absolute;top:calc(100% + .85rem);left:50%;min-width:18rem;
  transform:translate(-50%,-8px);
  background:var(--ivory);color:var(--ink);
  border:1px solid rgba(20,20,18,.1);
  padding:.75rem;
  box-shadow:0 30px 70px -25px rgba(10,25,16,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;
}
.panel::before{content:"";position:absolute;left:0;right:0;top:-.9rem;height:.9rem}
li[data-open="true"] > .panel{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}

.panel li{position:relative}
.panel a,.panel .sub-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;
  padding:.6rem .85rem;font-size:.84rem;line-height:1.35;text-align:left;
  transition:background .28s ease,padding-left .28s ease;
}
.panel a:hover,.panel .sub-toggle:hover,.panel li[data-open="true"] > .sub-toggle{
  background:var(--mint);padding-left:1.25rem;
}
.panel .sub-toggle .chev{transform:rotate(-90deg);opacity:.55}
.panel-sep{height:1px;margin:.55rem .9rem;background:rgba(20,20,18,.12)}

/* nested flyout */
.sub{
  position:absolute;top:-.75rem;left:calc(100% + .5rem);min-width:14.5rem;
  transform:translateX(-6px);
  background:var(--ivory);border:1px solid rgba(20,20,18,.1);padding:.6rem;
  box-shadow:0 30px 70px -25px rgba(10,25,16,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;
}
.sub::before{content:"";position:absolute;top:0;bottom:0;left:-.6rem;width:.6rem}
.panel li[data-open="true"] > .sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.sub a{font-size:.82rem;padding:.5rem .75rem}

.menu-btn{display:none;align-items:center;gap:.7rem;justify-self:end}
.menu-btn .bars{display:grid;gap:4px;width:22px}
.menu-btn .bars i{display:block;height:1px;background:currentColor;transition:transform .35s}
.menu-btn:hover .bars i:nth-child(2){transform:translateX(6px)}

/* ============================================================
   1 · OPENING
   ============================================================ */
.hero{position:relative;height:100svh;min-height:36rem;display:flex;flex-direction:column;justify-content:flex-end;color:var(--white);overflow:hidden}
.hero-media{position:absolute;inset:-14% 0 -14% 0;z-index:0;will-change:transform}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,12,8,.55) 0%,rgba(4,12,8,.05) 26%,rgba(3,10,6,.12) 48%,rgba(3,10,6,.8) 100%);
}
.hero-inner{position:relative;z-index:2;padding:0 var(--pad) clamp(2.4rem,4.5vw,4rem)}
.hero-tags{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem);flex-wrap:wrap;margin-bottom:clamp(2.4rem,10vh,7rem)}
.hero-tags a{opacity:.9;transition:opacity .3s}
.hero-tags a:hover{opacity:1}
.h-sub{display:block;margin-bottom:clamp(.9rem,1.8vw,1.5rem);opacity:.88;font-size:clamp(.76rem,.86vw,.9rem)}

/* stacked wordmark — display line + serif second name */
.h-main{display:block;width:clamp(15rem,44vw,36rem)}
.h-line{display:block;overflow:hidden}
.h-line > *{display:block;transform:translateY(102%);transition:transform 1.3s cubic-bezier(.16,.9,.24,1)}
.h-line--two > *{transition-delay:.14s}
body.ready .h-line > *{transform:none}
/* second line of the lockup — same family as MARGALLA, tracked out and set
   with textLength so it spans exactly the same width as the line above */
.mark2{
  display:block;margin-top:clamp(.4rem,.9vw,.9rem);
  font-size:clamp(1.15rem,2.3vw,2rem);font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;opacity:.94;
}
.hero-blurb{
  margin-top:clamp(1.1rem,2vw,1.7rem);max-width:46ch;
  font-size:clamp(0.92rem,1.05vw,1.05rem);line-height:1.62;opacity:.88;
}

.hero-foot{margin-top:clamp(1.8rem,3.2vw,2.6rem);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.9rem;background:var(--ink);color:var(--white);
  padding:.85rem 1.3rem;font-size:clamp(0.7rem,0.56vw,0.78rem);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s,gap .3s;
}
.btn:hover{background:var(--mineral);color:var(--ink);gap:1.4rem}
.hero-note{max-width:25ch;font-size:clamp(.86rem,.95vw,.98rem);opacity:.85;text-align:right}

/* specimen plate on hero */
.plate{
  position:absolute;z-index:2;right:var(--pad);top:clamp(6.5rem,16vh,10rem);
  color:var(--white);text-align:right;opacity:0;transform:translateY(10px);
  transition:opacity 1s ease .9s,transform 1s ease .9s;
}
body.ready .plate{opacity:.85;transform:none}
.plate .rule{margin:.55rem 0 .5rem;opacity:.4}
.plate .italic{font-size:1rem}

/* announcement strip */
.strip{background:var(--mineral);color:var(--forest);overflow:hidden;padding:1.15rem 0;border-block:1px solid rgba(18,48,31,.14)}
.strip-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.strip-track span{padding:0 3rem;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   2 · INTRODUCTION + THREE DOORWAYS
   ============================================================ */
.intro{padding:var(--sec-y) var(--pad);text-align:center}
.intro h2{max-width:20ch;margin:0 auto;font-size:clamp(1.596rem,3.3vw,2.52rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.intro .lede{margin-top:clamp(1.4rem,2.2vw,2rem);font-size:clamp(0.966rem,1.254vw,1.08rem);color:var(--ink-soft)}

.trio{margin-top:clamp(4rem,8vw,8rem);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left}
/* two cards rather than three — keep them the smaller of the two widths, centred */
.trio--duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:44rem;margin-inline:auto;gap:clamp(1.2rem,2.4vw,2.4rem)}
.trio a{display:block}
.trio .stone{aspect-ratio:4/5}
.trio h3{
  margin-top:clamp(1.2rem,1.9vw,1.7rem);
  font-size:clamp(0.882rem,0.957vw,0.882rem);font-weight:600;letter-spacing:-.01em;line-height:1.25;
}
.trio .browse{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(.8rem,1.3vw,1.1rem);
  padding-bottom:.4rem;border-bottom:1px solid currentColor;transition:gap .3s ease;
}
.trio a:hover .browse{gap:1.1rem}

/* ============================================================
   3 · DIRECTORY — explore by stone
   ============================================================ */
/* Stones laid out like a display case: each one is a photograph clipped to a
   cut silhouette, floating on white and grounded by its own contact shadow.
   The drop-shadow sits on the wrapper, so it follows the clipped shape rather
   than the image's square box.

   If you have true cut-out PNGs (stone on transparency), drop them straight
   in and remove the .gem--step / --round / --cab modifier: the alpha channel
   then drives the silhouette and the shadow follows it automatically. */
.stones{background:var(--white);padding:var(--sec-y) var(--pad)}
.gem-grid{
  --gg:clamp(1.2rem,3vw,3rem);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(2.6rem,4.5vw,4.5rem) var(--gg);
  margin-top:clamp(2.8rem,5vw,4.8rem);
}
.gem-grid > li{width:calc((100% - 3 * var(--gg)) / 4)}
/* five families read better as a single row than four-plus-an-orphan */
.gem-grid--five > li{width:calc((100% - 4 * var(--gg)) / 5)}
.gem-tile{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1vw,1rem);text-align:center}
.gem-figure{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1}
.gem{
  position:relative;display:block;width:54%;aspect-ratio:1/1;
  filter:drop-shadow(0 8px 11px rgba(14,34,24,.2));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}
.gem img{width:100%;height:100%;object-fit:contain;display:block}
.gem-tile:hover .gem,.gem-tile:focus-visible .gem{
  transform:translateY(-10px) scale(1.03);
  filter:drop-shadow(0 20px 18px rgba(14,34,24,.24));
}
.gem-name{
  position:relative;font-size:clamp(0.72rem,0.6vw,0.8rem);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.gem-name::after{
  content:"";position:absolute;left:0;right:0;bottom:-.45rem;height:1px;background:currentColor;
  transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.gem-tile:hover .gem-name::after,.gem-tile:focus-visible .gem-name::after{transform:scaleX(1)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   4 · FEATURED STONES
   ============================================================ */
.featured{background:var(--mint);padding:var(--sec-y) var(--pad)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,2.6vw,2.4rem)}
.sec-head h2{font-size:clamp(1.344rem,2.904vw,2.28rem);font-weight:500;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(2.6rem,5vw,4.5rem)}
/* the cut-out stones are wider than they are tall, so a 4:5 frame was
   padding them out with empty space and making every card taller */
.product .stone{aspect-ratio:1/1}
.product .alt{opacity:0}
.product:hover .alt{opacity:1}
.product:hover .base{opacity:0}
.badge{position:absolute;z-index:4;top:1rem;left:1rem;background:var(--ivory);color:var(--ink);padding:.42rem .6rem;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.badge--ink{background:var(--ink);color:var(--mineral)}
.p-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:1.3rem}
.p-meta h3{font-size:clamp(0.84rem,0.891vw,0.84rem);font-weight:600;letter-spacing:-.01em}
.p-meta .italic{color:var(--ink-soft);font-size:.86rem;margin-top:.15rem}
.p-price{font-size:clamp(0.84rem,0.858vw,0.84rem);font-weight:600;white-space:nowrap}
.p-price s{opacity:.4;font-weight:400;margin-right:.5rem}

/* ============================================================
   5 · CATEGORIES
   ============================================================ */
.cat{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.cat > .stone{aspect-ratio:1/1;min-height:22rem;width:100%;min-width:0}
.cat-panel{min-width:0}
.cat-panel{padding:clamp(2.6rem,5.5vw,6rem);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2.2rem,4vw,4rem)}
.cat-panel h3{font-size:clamp(1.512rem,2.376vw,1.92rem);font-weight:500;letter-spacing:-.03em;line-height:1;text-transform:uppercase;margin-top:1.2rem}
.cat-panel .italic{margin-top:1.1rem;font-size:clamp(0.924rem,1.122vw,0.96rem);max-width:20ch}
.cat-bottom{display:flex;align-items:flex-end;justify-content:flex-start;gap:1.5rem}
.more{display:inline-flex;align-items:center;gap:.6rem;padding-bottom:.4rem;border-bottom:1px solid currentColor;transition:gap .3s}
.more:hover{gap:1.1rem}
.cat--green{background:var(--mineral);color:var(--forest)}
.cat--cream{background:var(--ivory-deep);color:var(--ink)}
.cat--sage{background:var(--sage);color:var(--forest)}
.cat--flip .stone{order:2}
.cat--flip .cat-panel{order:1}

/* ============================================================
   6 · BRAND STORY COLLAGE
   ============================================================ */
.story{background:var(--forest);color:var(--mineral);padding:var(--sec-y) var(--pad)}
.story-head{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(2rem,4vw,4rem);flex-wrap:wrap}
.story h2{max-width:13ch;font-size:clamp(1.764rem,3.96vw,3.24rem);font-weight:500;letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.story-note{max-width:26ch;font-size:clamp(0.84rem,0.858vw,0.84rem);opacity:.8;padding-top:.6rem}
.collage{margin-top:clamp(3.5rem,6vw,6rem);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.1rem,2.2vw,2.6rem)}
.c1{grid-column:1/5;aspect-ratio:4/5}
.c2{grid-column:6/9;aspect-ratio:1/1;align-self:end}
.c3{grid-column:10/13;aspect-ratio:3/4.4;margin-top:clamp(1rem,4vw,4.5rem)}
.c4{grid-column:2/6;aspect-ratio:5/3;margin-top:clamp(.5rem,2vw,2rem)}
.c5{grid-column:7/11;aspect-ratio:4/3;margin-top:clamp(2rem,6vw,7rem)}
.collage figcaption{margin-top:.7rem;color:var(--mineral);opacity:.6}

/* ============================================================
   7 · TYPOGRAPHIC INTERLUDE
   ============================================================ */
.interlude{background:var(--ivory);color:var(--mineral);padding:var(--sec-y) var(--pad);position:relative;overflow:hidden}
.interlude ul{display:grid;grid-template-columns:repeat(12,1fr);row-gap:clamp(2rem,5.5vw,5.5rem);align-items:center}
.interlude li{font-size:clamp(1.848rem,5.28vw,4.44rem);font-weight:500;letter-spacing:-.02em;line-height:.95;text-transform:uppercase;will-change:transform}
.interlude li:nth-child(1){grid-column:1/7}
.interlude li:nth-child(2){grid-column:8/13;text-align:right}
.interlude li:nth-child(3){grid-column:3/9;text-align:center}
.interlude li:nth-child(4){grid-column:1/6}
.interlude li:nth-child(5){grid-column:9/13;text-align:right}
.interlude .lede{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ink-soft);font-size:clamp(0.84rem,0.924vw,0.84rem);text-align:center;max-width:24ch}

/* ============================================================
   8 · FOOTER
   ============================================================ */
footer{background:#000;color:var(--mineral);padding:var(--sec-y) var(--pad) clamp(2.5rem,4vw,3.5rem);overflow:hidden}
footer h2{max-width:18ch;font-size:clamp(1.596rem,3.432vw,2.88rem);font-weight:500;letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.f-cols{margin-top:clamp(3.5rem,6.5vw,6.5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,3.5vw,3.5rem)}
.f-cols h4{margin:0 0 1.4rem;opacity:.55}
.f-cols li{margin-bottom:.75rem;font-size:clamp(0.773rem,0.693vw,0.773rem)}
.f-cols a{opacity:.85;transition:opacity .25s}
.f-cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:.28em}
.f-links{margin-top:clamp(3rem,5.5vw,5rem);padding-bottom:clamp(2rem,3.5vw,3rem);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.f-links ul{display:flex;gap:clamp(1.2rem,2.5vw,2.4rem);flex-wrap:wrap}

/* ============================================================
   MENU OVERLAY (small screens)
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:90;background:var(--forest-deep);color:var(--mineral);
  padding:clamp(1rem,2.2vw,1.9rem) var(--pad) var(--pad);
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
}
.overlay[data-open="true"]{opacity:1;visibility:visible;transform:none}
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ov-body{flex:1;display:flex;align-items:center;padding-block:clamp(2.5rem,7vw,5rem)}
.ov-body > ul{display:grid;gap:clamp(2rem,4vw,3rem);width:100%}
.ov-group > .label{opacity:.5}
.ov-group h3{
  font-size:clamp(1.428rem,3.96vw,2.04rem);font-weight:500;
  letter-spacing:-.035em;line-height:1;text-transform:uppercase;margin:.5rem 0 .9rem;
}
.ov-group ul{display:grid;gap:.55rem}
.ov-group ul a{font-size:.92rem;opacity:.8;transition:opacity .3s,transform .3s;display:inline-block}
.ov-group ul a:hover{opacity:1;transform:translateX(.4rem);color:var(--mineral-bright)}
.ov-foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;opacity:.7}
body[data-lock="true"]{overflow:hidden}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .h-line > *{transform:none}
  .plate{opacity:.85;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .topbar{grid-template-columns:auto 1fr auto}
  .nav-wrap{display:none}
  .menu-btn{display:flex}
  .wordmark{justify-self:start}
  .trio{grid-template-columns:1fr;gap:clamp(2.5rem,6vw,3.5rem);max-width:34rem;margin-inline:auto}
  .trio .stone{aspect-ratio:4/3}
}
@media (max-width:1000px){
  .cat{grid-template-columns:1fr}
  .cat--flip .stone,.cat--flip .cat-panel{order:0}
  .cat .stone{aspect-ratio:4/3;min-height:0}
  .collage{grid-template-columns:repeat(6,1fr)}
  .c1{grid-column:1/4}
  .c2{grid-column:4/7}
  .c3{grid-column:1/4;margin-top:0}
  .c4{grid-column:4/7;margin-top:0}
  .c5{grid-column:1/7;margin-top:0}
  .f-cols{grid-template-columns:repeat(2,1fr)}
  .interlude .lede{position:static;transform:none;margin-top:2.5rem}
  .interlude li:nth-child(3){text-align:left}
  .plate{display:none}
  .gem-grid > li{width:calc((100% - 2 * var(--gg)) / 3)}
}
@media (max-width:720px){
  .hero-note{text-align:left;max-width:26ch}
  .hero-foot{align-items:flex-start;flex-direction:column-reverse}
  .h-main{width:100%}
  .grid3{grid-template-columns:1fr;gap:2.8rem}
  .interlude ul{grid-template-columns:1fr;row-gap:.6rem}
  .interlude li:nth-child(n){grid-column:auto;text-align:left}
  .gem-grid > li{width:calc((100% - var(--gg)) / 2)}
  .collage{grid-template-columns:repeat(2,1fr)}
  .c1,.c2,.c3,.c4{grid-column:span 1;aspect-ratio:3/4}
  .c5{grid-column:span 2;aspect-ratio:4/3}
  .p-meta{flex-direction:column;gap:.35rem}
  .icon-btn{width:2.3rem;height:2.3rem}
}
@media (max-width:520px){
  .wordmark .logo img{height:1.85rem}
  .menu-btn span:first-child{display:none}
}

/* ============================================================
   PAGE HEAD — the opening frame shared by every inner page:
   full-bleed photograph, description set to the right
   ============================================================ */
.pagehead{position:relative;min-height:min(80svh,46rem);display:flex;align-items:flex-end;overflow:hidden;color:var(--white)}
.pagehead-media{position:absolute;inset:0;z-index:0}
.pagehead-media img{width:100%;height:100%;object-fit:cover;display:block}
.pagehead::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,12,8,.62) 0%,rgba(4,12,8,.12) 30%,rgba(3,10,6,.28) 56%,rgba(3,10,6,.85) 100%);
}
.pagehead-inner{
  position:relative;z-index:2;width:100%;
  padding:clamp(9rem,20vh,13rem) var(--pad) clamp(3rem,6vw,5rem);
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
}
.crumbs{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;justify-content:flex-end;opacity:.72}
.crumbs a:hover{opacity:1;text-decoration:underline;text-underline-offset:.3em}
.crumbs span[aria-hidden]{opacity:.5}
.pagehead h1{
  margin-top:clamp(1.1rem,2vw,1.8rem);
  font-size:clamp(1.764rem,3.564vw,2.76rem);font-weight:500;letter-spacing:-.035em;line-height:.95;text-transform:uppercase;
}
.pagehead .lede{
  margin-top:clamp(1.1rem,2vw,1.7rem);max-width:38ch;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(0.966rem,1.254vw,1.05rem);line-height:1.35;opacity:.93;
}
.pagehead .meta{margin-top:clamp(1.4rem,2.4vw,2.2rem);display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem);flex-wrap:wrap;justify-content:flex-end;opacity:.8}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.panel a[aria-current="page"]{background:var(--mint)}

/* ============================================================
   SHOP — search, filters, results
   ============================================================ */
.shop{padding:var(--sec-y) var(--pad)}
.shop-layout{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start;margin-top:clamp(1.8rem,3vw,2.6rem)}
/* a section with no filter rail gives its grid the whole width */
.shop-layout--full{grid-template-columns:minmax(0,1fr)}
.filters{
  position:sticky;top:7.5rem;
  max-height:calc(100svh - 10rem);overflow-y:auto;overscroll-behavior:contain;
  padding-right:.7rem;scrollbar-width:thin;scrollbar-color:rgba(20,20,18,.28) transparent;
}
.filters::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-thumb{background:rgba(20,20,18,.26);border-radius:99px}
.filters::-webkit-scrollbar-track{background:transparent}
.filters > .label{display:block;margin-bottom:1.1rem;opacity:.55}
.fgroup{padding-block:clamp(1.2rem,1.9vw,1.6rem)}
.fgroup:first-of-type{padding-top:0}
.fgroup + .fgroup{border-top:1px solid rgba(20,20,18,.12)}
.fgroup h3{margin-bottom:.9rem;opacity:.55}
.check{display:flex;align-items:center;gap:.7rem;padding:.26rem 0;cursor:pointer;font-size:.86rem;transition:opacity .25s}
.check:hover{opacity:.7}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;position:relative;
  width:1.02rem;height:1.02rem;border:1px solid rgba(20,20,18,.35);background:transparent;
  transition:background .25s,border-color .25s;
}
.check input:checked{background:var(--forest);border-color:var(--forest)}
.check input:checked::after{
  content:"";position:absolute;left:.28rem;top:.13rem;width:.3rem;height:.54rem;
  border:solid var(--mineral);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.check .swatch{width:.85rem;height:.85rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);flex:none}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,2rem);flex-wrap:wrap;padding-bottom:clamp(1rem,1.6vw,1.4rem)}
.searchbox{display:flex;align-items:center;gap:.8rem;flex:1 1 18rem;max-width:26rem;border-bottom:1px solid rgba(20,20,18,.28);padding-bottom:.55rem;transition:border-color .3s}
.searchbox:focus-within{border-bottom-color:var(--ink)}
.searchbox svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55}
.searchbox input{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;outline:none}
.shop-tools{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);flex-wrap:wrap}
.res-count{opacity:.6}
.sortwrap{display:flex;align-items:center;gap:.6rem}
.sortwrap select{
  font:inherit;font-size:.9rem;color:inherit;cursor:pointer;
  background:none;border:0;border-bottom:1px solid rgba(20,20,18,.28);padding:.3rem 1.3rem .3rem 0;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23141412' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:.62rem;
}
.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:clamp(.9rem,1.5vw,1.2rem)}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.55rem;background:var(--mint);color:var(--forest);padding:.45rem .7rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.chip button{line-height:1;opacity:.55;transition:opacity .2s}
.chip button:hover{opacity:1}
.chip--clear{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,20,18,.25)}
/* Every product grid sizes its cards the same way, whatever column it sits in:
   fill the row with tracks of about 13rem. A stone card carries one small
   photograph and two lines of type, so it does not need more, and the shop,
   the family pages, Featured Stones and the related strips all end up
   agreeing on one card size instead of four different ones. */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));
  gap:clamp(1.1rem,2vw,2rem);margin-top:clamp(1.5rem,2.6vw,2.4rem);
}
.shop-grid .p-meta h3{font-size:clamp(.78rem,.82vw,.82rem)}
.shop-grid .p-meta .italic{font-size:.8rem}
/* the shop page keeps its filter rail, so it has one column less of room */
.shop-grid .product[hidden]{display:none}
.empty{padding:clamp(3rem,7vw,6rem) 0;text-align:center}
.empty h3{font-size:clamp(1.008rem,1.32vw,1.02rem);font-weight:500}
.empty p{margin-top:.8rem;color:var(--ink-soft)}

/* ============================================================
   STONE-BY-STONE LIST (Gemstones by Type)
   ============================================================ */
.tlist{padding:var(--sec-y) var(--pad)}
.trow{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,5.5rem);align-items:center;padding:clamp(2.4rem,4.6vw,4.4rem) 0}
.trow--flip .trow-media{order:2}
.trow-media{width:100%;max-width:15rem;margin-inline:auto}
.trow-media .gem{width:78%}
.trow-body .idx{opacity:.45}
.trow-body h2{margin-top:.65rem;font-size:clamp(1.428rem,2.31vw,1.74rem);font-weight:500;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.trow-body .tsub{margin-top:.6rem;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(0.882rem,0.924vw,0.882rem);color:var(--ink-soft)}
.trow-body p{margin-top:clamp(.8rem,1.2vw,1.1rem);max-width:56ch;color:var(--ink-soft);font-size:clamp(0.84rem,0.739vw,0.84rem)}
.spec{margin-top:clamp(1.2rem,2vw,1.7rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem clamp(1rem,2vw,2rem);max-width:34rem}
.spec dt{margin-bottom:.3rem;opacity:.5}
.spec dd{margin:0;font-size:.86rem}
.trow-body .more{margin-top:clamp(1.3rem,2.2vw,1.9rem)}

/* ============================================================
   COLOUR GRID (three across) + tile subtitle
   ============================================================ */
.gem-grid--three > li{width:calc((100% - 2 * var(--gg)) / 3)}
.gem-copy{display:block;text-align:center}
.gem-sub{display:block;margin-top:.4rem;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:.85rem;color:var(--ink-soft)}

/* ============================================================
   BROKERING — lead, steps, contact, terms
   ============================================================ */
.brk-lead{padding:var(--sec-y) var(--pad) clamp(2.5rem,5vw,4rem);text-align:center}
.brk-lead h2{max-width:26ch;margin:0 auto;font-size:clamp(1.512rem,2.838vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.brk-lead p{margin:clamp(1.2rem,2vw,1.8rem) auto 0;max-width:64ch;color:var(--ink-soft);font-size:clamp(0.857rem,0.825vw,0.857rem)}
.steps{background:var(--mint);padding:var(--sec-y) var(--pad)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3.2rem);margin-top:clamp(2.2rem,4vw,3.4rem)}
.step .n{font-size:clamp(1.764rem,2.508vw,1.92rem);font-weight:500;letter-spacing:-.03em;line-height:1;opacity:.3}
.step h3{margin-top:.55rem;font-size:clamp(0.857rem,0.891vw,0.857rem);font-weight:600}
.step p{margin-top:.6rem;color:var(--ink-soft);font-size:.88rem}

.contact{background:var(--forest);color:var(--mineral);padding:var(--sec-y) var(--pad)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact h2{font-size:clamp(1.512rem,2.772vw,1.98rem);font-weight:500;letter-spacing:-.035em;line-height:.98;text-transform:uppercase}
.contact-side .italic{margin-top:clamp(1rem,1.8vw,1.5rem);max-width:32ch;font-size:clamp(0.882rem,0.99vw,0.882rem);opacity:.82}
.contact-details{margin-top:clamp(1.4rem,2.4vw,2rem);display:grid;gap:.5rem;font-size:.9rem;opacity:.85}
.contact-details a:hover{text-decoration:underline;text-underline-offset:.28em}
.field{display:block;margin-bottom:clamp(1.3rem,2.2vw,1.9rem)}
.field > span{display:block;margin-bottom:.55rem;opacity:.65}
.field input,.field textarea{
  width:100%;font:inherit;color:inherit;background:transparent;
  border:0;border-bottom:1px solid rgba(199,220,188,.32);padding:.7rem 0;outline:none;
  transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field textarea:focus{border-bottom-color:var(--mineral)}
.field input::placeholder,.field textarea::placeholder{color:rgba(199,220,188,.42)}
.btn--light{background:var(--mineral);color:var(--forest)}
.btn--light:hover{background:var(--mineral-bright);color:var(--forest)}
.form-note{margin-top:1rem;max-width:46ch;font-size:.85rem;opacity:.55}
.form-ok{margin-top:1.1rem;font-size:.95rem;color:var(--mineral-bright)}
.follow{margin-top:clamp(2.2rem,4vw,3rem)}
.follow > p{margin-bottom:.9rem;opacity:.65}
.social{display:flex;gap:.7rem}

.terms{background:var(--ivory-deep);padding:var(--sec-y) var(--pad)}
.terms-body{margin-top:clamp(1.8rem,3.2vw,2.8rem);columns:2;column-gap:clamp(2.5rem,5vw,5rem)}
.terms-body section{break-inside:avoid;margin-bottom:clamp(1.4rem,2.4vw,2rem)}
.terms-body h3{margin-bottom:.45rem;font-size:.97rem;font-weight:600}
.terms-body p{font-size:.84rem;line-height:1.7;color:var(--ink-soft)}

/* ============================================================
   REDIRECT INTERSTITIAL
   ============================================================ */
.redirect{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--pad)}
.redirect h1{font-size:clamp(1.26rem,1.98vw,1.44rem);font-weight:500;letter-spacing:-.03em;text-transform:uppercase}
.redirect .italic{margin-top:1rem;font-size:clamp(0.924rem,1.122vw,0.924rem);color:var(--ink-soft)}
.redirect .more{margin-top:2.2rem}

/* ============================================================
   RESPONSIVE — inner pages
   ============================================================ */
@media (max-width:1100px){
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static}
  .filters-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,3rem)}
  .fgroup{padding-top:clamp(1.2rem,1.9vw,1.6rem)}
  .fgroup + .fgroup{border-top:0}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .gem-grid--three > li{width:calc((100% - var(--gg)) / 2)}
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .trow{grid-template-columns:1fr;gap:1.2rem;padding-block:clamp(2rem,5vw,3rem)}
  .trow--flip .trow-media{order:0}
  .trow-media{max-width:15rem}
  .spec{grid-template-columns:repeat(2,1fr)}
  .terms-body{columns:1}
}
@media (max-width:720px){
  .pagehead-inner{align-items:flex-start;text-align:left}
  .crumbs,.pagehead .meta{justify-content:flex-start}
  .pagehead{min-height:min(72svh,34rem)}
}
@media (max-width:560px){
  .filters-inner{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .gem-grid--three > li{width:100%}
}

/* ============================================================
   STONE ON A PLINTH — product cards showing a cut-out stone
   rather than a cropped photograph
   ============================================================ */
.stone--plinth{background:transparent}
.stone--plinth::after{display:none}
.stone--plinth img{
  position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;
  filter:drop-shadow(0 9px 11px rgba(14,34,24,.2));
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s ease;
}
.product:hover .stone--plinth img{
  transform:translateY(-7px) scale(1.04);
  filter:drop-shadow(0 18px 16px rgba(14,34,24,.22));
}
.stone--plinth::after{mix-blend-mode:multiply;opacity:.5}
.trow-media .gem{width:60%}
.gem picture{display:block;width:100%;height:100%}

/* ============================================================
   SEARCH — a white bar that drops from the top of the screen
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:88;background:rgba(8,16,11,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s ease;
}
.scrim[data-on="true"]{opacity:1}
.searchpop{
  position:fixed;z-index:92;top:0;left:0;right:0;
  background:var(--white);color:var(--ink);
  box-shadow:0 30px 60px -30px rgba(8,20,12,.5);
  transform:translateY(-101%);visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.85,.2,1),visibility 0s linear .5s;
}
.searchpop[data-open="true"]{transform:none;visibility:visible;transition-delay:0s,0s}
.searchpop-inner{padding:clamp(1.1rem,2.2vw,1.8rem) var(--pad) clamp(1.4rem,2.6vw,2.2rem)}
.searchpop-bar{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.3rem);
  border-bottom:1px solid rgba(20,20,18,.16);padding-bottom:clamp(.7rem,1.3vw,1rem)}
.searchpop-bar svg{width:1.3rem;height:1.3rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.5}
.searchpop-bar input{
  flex:1;min-width:0;border:0;background:none;outline:none;color:inherit;
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.092rem,1.98vw,1.44rem);line-height:1.2;
}
.searchpop-bar input::placeholder{color:rgba(20,20,18,.3)}
.searchpop-bar button{flex:none;opacity:.55;transition:opacity .25s}
.searchpop-bar button:hover{opacity:1}
.searchpop-body{max-height:min(58svh,30rem);overflow-y:auto;overscroll-behavior:contain;margin-top:clamp(1rem,1.8vw,1.4rem)}
.searchpop-hint{opacity:.45}
.searchpop-results{display:grid;gap:.2rem;margin-top:.9rem}
.searchpop-results a{
  display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.3rem);
  padding:.7rem .8rem;transition:background .25s ease,padding-left .25s ease;
}
.searchpop-results a:hover,.searchpop-results a:focus-visible{background:var(--mint);padding-left:1.2rem}
.sr-thumb{
  width:3rem;height:3rem;flex:none;overflow:hidden;
  background:transparent;display:grid;place-items:center;
}
.sr-thumb img{width:88%;height:88%;object-fit:contain;display:block}
.sr-text{min-width:0}
.sr-text strong{display:block;font-weight:600;font-size:.9rem;letter-spacing:-.01em}
.sr-text span{font-size:.78rem;opacity:.5;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.sr-none{padding:1.2rem .8rem;color:var(--ink-soft)}
body[data-search="true"]{overflow:hidden}

/* ============================================================
   PRODUCT PAGE — gallery + buy column
   ============================================================ */
.pdp{padding-top:clamp(6.5rem,13vh,9rem)}
.pdp-crumbs{padding:0 var(--pad);justify-content:flex-start;opacity:.6}
.pdp-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.6rem) var(--pad) var(--sec-y);
}
.gallery{position:relative;overflow:hidden;background:transparent}
.gal-track{display:flex;transition:transform .55s cubic-bezier(.2,.85,.2,1);touch-action:pan-y}
.gal-slide{flex:0 0 100%;aspect-ratio:4/5}
.gal-slide img{width:100%;height:100%;object-fit:contain;display:block}
.gal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:2.8rem;height:2.8rem;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.82);color:var(--ink);font-size:1rem;
  box-shadow:0 6px 18px -8px rgba(8,20,12,.5);
  transition:background .3s,transform .3s;
}
.gal-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal-prev{left:clamp(.6rem,1.4vw,1.1rem)}
.gal-next{right:clamp(.6rem,1.4vw,1.1rem)}
.gal-dots{position:absolute;z-index:3;left:0;right:0;bottom:clamp(.8rem,1.6vw,1.2rem);display:flex;justify-content:center;gap:.5rem}
.gal-dot{width:.5rem;height:.5rem;border-radius:999px;background:rgba(20,20,18,.24);transition:background .3s,transform .3s}

/* the jewellery page runs a gallery inside each row rather than one per page,
   so it needs the photograph to fill the frame and the controls to shrink */
.gallery--inline{border-radius:2px;outline-offset:3px}
.gallery--inline .gal-slide{aspect-ratio:4/5}
.gallery--inline .gal-slide img{object-fit:cover}
.gallery--inline .gal-arrow{width:2rem;height:2rem;font-size:.8rem;opacity:0;transition:opacity .3s,background .3s,transform .3s}
.gallery--inline:hover .gal-arrow,
.gallery--inline:focus-within .gal-arrow{opacity:1}
.gallery--inline .gal-dots{bottom:.6rem;gap:.36rem}
.gallery--inline .gal-dot{width:.38rem;height:.38rem;background:rgba(255,255,255,.55)}
.gallery--inline .gal-dot.is-on{background:#fff}
@media (hover:none){ .gallery--inline .gal-arrow{opacity:1} }
.gal-dot.is-on{background:var(--forest);transform:scale(1.3)}
.pdp-body{padding-top:clamp(.5rem,1.5vw,1.5rem)}
.pdp-body .idx{opacity:.5}
.pdp-body h1{
  margin-top:.7rem;font-size:clamp(1.512rem,2.508vw,1.86rem);font-weight:500;letter-spacing:-.03em;line-height:1;text-transform:uppercase;
}
.pdp-sub{margin-top:.7rem;font-size:clamp(0.882rem,0.924vw,0.882rem);color:var(--ink-soft)}
.pdp-price{margin-top:clamp(1rem,1.8vw,1.5rem);font-size:clamp(1.092rem,1.32vw,1.092rem);font-weight:600}
.pdp-price s{opacity:.4;font-weight:400;margin-right:.6rem}
.pdp-copy{margin-top:clamp(1.1rem,1.9vw,1.5rem);color:var(--ink-soft);max-width:52ch}
.pdp-buy{margin-top:clamp(1.6rem,2.8vw,2.4rem);display:flex;gap:.8rem;flex-wrap:wrap}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,20,18,.3)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.pdp-note{margin-top:1rem;color:var(--forest)}
.pdp-assure{margin-top:clamp(1.8rem,3vw,2.6rem);display:grid;gap:.6rem;border-top:1px solid rgba(20,20,18,.14);padding-top:clamp(1.2rem,2vw,1.7rem)}
.pdp-assure li{font-size:.86rem;color:var(--ink-soft);padding-left:1.2rem;position:relative}
.pdp-assure li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--mineral)}
.spec--wide{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin-top:clamp(1.6rem,2.6vw,2.2rem)}

/* ============================================================
   CART
   ============================================================ */
.cartpage{padding-top:clamp(6.5rem,13vh,9rem)}
.cart-wrap{padding:clamp(1.6rem,3vw,2.6rem) var(--pad) var(--sec-y)}
.cart-empty{padding:clamp(3rem,7vw,6rem) 0;text-align:center}
.cart-empty h3{font-size:clamp(1.092rem,1.584vw,1.2rem);font-weight:500}
.cart-empty p{margin-top:.8rem;color:var(--ink-soft)}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(2rem,4vw,4rem);align-items:start;margin-top:clamp(1.8rem,3vw,2.6rem)}
.cart-lines{display:grid;gap:0}
.cart-line{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:clamp(1rem,2vw,1.8rem);align-items:center;padding:clamp(1.1rem,2vw,1.6rem) 0;border-bottom:1px solid rgba(20,20,18,.12)}
.cart-line:first-child{border-top:1px solid rgba(20,20,18,.12)}
.cart-thumb{width:5.5rem;aspect-ratio:4/5;background:transparent;overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cart-line h3{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.cart-line .italic{color:var(--ink-soft);margin-top:.2rem}
.cart-qty{display:inline-flex;align-items:center;gap:.9rem;margin-top:.7rem}
.cart-qty button{width:1.7rem;height:1.7rem;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(20,20,18,.24);transition:background .25s}
.cart-qty button:hover{background:var(--mint)}
.cart-qty span{min-width:1.2rem;text-align:center;font-variant-numeric:tabular-nums}
.cart-line .p-price{text-align:right}
.cart-line .drop{display:block;margin-top:.6rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.45;transition:opacity .25s}
.cart-line .drop:hover{opacity:1}
.cart-sum{background:var(--mint);padding:clamp(1.4rem,2.4vw,2rem)}
.cart-sum h3{margin-bottom:1.1rem;opacity:.6}
.cart-total{display:grid;gap:.7rem}
.cart-total > div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}
.cart-total dt{color:var(--ink-soft)}
.cart-total dd{margin:0;font-weight:600}
.cart-note{margin:clamp(1rem,1.7vw,1.35rem) 0;font-size:.88rem;color:var(--ink-soft)}
.cart-sum .btn{width:100%;justify-content:center}

/* ============================================================
   JEWELLERY / LIBRARY / FAQ
   ============================================================ */
.trow--photo .trow-media{max-width:none;margin:0}
.trow--photo .trow-media.stone{aspect-ratio:4/5;background:#1b1b18}
/* a lone photograph fills its frame absolutely; a gallery must not, or all
   three slides stack on top of each other */
.trow--photo .trow-media.stone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trow--photo .trow-media.gallery--inline{max-width:25rem;margin-inline:auto;background:#131311}
.library{padding:var(--sec-y) var(--pad)}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.2rem);margin-top:clamp(2rem,3.6vw,3rem)}
.lib-item .stone{aspect-ratio:4/5}
.lib-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-meta{margin-top:clamp(1rem,1.6vw,1.4rem)}
.lib-meta h3{font-size:clamp(0.882rem,0.924vw,0.882rem);font-weight:600;letter-spacing:-.01em}
.lib-meta .label{margin-top:.4rem;opacity:.5}
.lib-meta .italic{margin-top:.6rem;color:var(--ink-soft);font-size:.88rem}
.faqs{padding:var(--sec-y) var(--pad)}
.faq-list{margin-top:clamp(1.6rem,2.6vw,2.2rem);max-width:64rem}
.faq{border-bottom:1px solid rgba(20,20,18,.14)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.6rem) 0;cursor:pointer;list-style:none;
  font-size:clamp(0.857rem,0.99vw,0.857rem);font-weight:500;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--forest)}
.faq-mark{position:relative;flex:none;width:.9rem;height:.9rem}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:currentColor;transition:transform .35s ease,opacity .35s ease}
.faq-mark::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.faq-mark::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.faq[open] .faq-mark::after{transform:scaleY(0);opacity:0}
.faq-body{padding-bottom:clamp(1.1rem,2vw,1.6rem);max-width:70ch}
.faq-body p{color:var(--ink-soft);font-size:.9rem}

/* ============================================================
   RESPONSIVE — new pages
   ============================================================ */
@media (max-width:1000px){
  .pdp-grid{grid-template-columns:1fr;gap:1.8rem}
  .cart-layout{grid-template-columns:1fr}
  .lib-grid{grid-template-columns:repeat(2,1fr)}
  .spec--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .trow--photo .trow-media{max-width:none}
}
@media (max-width:620px){
  .lib-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:4.5rem minmax(0,1fr);row-gap:.6rem}
  .cart-line .p-price{grid-column:2;text-align:left}
  .searchpop-bar button{display:none}
}

/* Pages that open on a light background need the header solid from the start,
   otherwise the white chrome sits invisibly on ivory. */
body.chrome-solid .topbar{
  background:rgba(242,237,227,.94);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  color:var(--ink);
  border-bottom-color:rgba(20,20,18,.1);
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* The homepage hero is a wide photograph with the stone to the right of centre.
   A portrait viewport centre-crops it out of frame, so anchor the crop there. */
@media (max-width:900px){
  .hero-media img{object-position:68% center}
}

/* ---------- product spec sheet ---------- */
.pdp-spec{margin-top:clamp(1.6rem,2.6vw,2.2rem);display:grid}
.pdp-spec > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.62rem 0;border-bottom:1px solid rgba(20,20,18,.1);
}
.pdp-spec dt{color:var(--ink-soft);font-size:.85rem}
.pdp-spec dd{margin:0;text-align:right;font-size:.85rem;font-weight:500}

/* ============================================================
   DISPLAY FACE
   Voga is a commercial typeface and is not served by Google Fonts.
   Playfair Display stands in for it: the same Didone thick/thin
   contrast, but with real weight behind the stems, which Bodoni
   Moda at 500 did not have.

   To switch to licensed Voga, drop the files into assets/fonts/,
   uncomment the @font-face below, and nothing else changes.

   @font-face{
     font-family:"Voga";
     src:url("fonts/Voga-Bold.woff2") format("woff2");
     font-weight:700;font-display:swap;
   }
   ============================================================ */
:root{ --font-display:"Voga","Playfair Display","Bodoni Moda",Didot,"Times New Roman",serif; }

.wordmark,
.pagehead h1,
.intro h2,
.sec-head h2,
.brk-lead h2,
.trow-body h2,
.cat-panel h3,
.story h2,
.interlude li,
.contact h2,
.pdp-body h1,
.cart-empty h3,
.empty h3,
footer h2,
.ov-group h3,
.h-main,
.mark2{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.01em;
}
.fit text{font-family:var(--font-display)}
.pagehead h1,.intro h2,.sec-head h2,.trow-body h2,.cat-panel h3,
.story h2,.contact h2,.pdp-body h1,footer h2{letter-spacing:.005em}

/* ---------- product cards line up across a row ---------- */
.shop-grid{align-items:stretch}
.shop-grid .product,
.grid3 .product{display:flex}
.shop-grid .product > a,
.grid3 .product > a{display:flex;flex-direction:column;width:100%}
.p-meta{margin-top:auto;padding-top:.9rem;align-items:baseline}
.p-meta > div{min-width:0}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;z-index:75;right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);display:grid;justify-items:end;gap:.6rem}
.wa-list{display:grid;gap:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s}
.wa[data-open="true"] .wa-list{opacity:1;visibility:visible;transform:none}
.wa-list a{
  display:flex;align-items:center;gap:.6rem;background:var(--white);color:var(--ink);
  padding:.55rem .8rem;font-size:.76rem;white-space:nowrap;
  box-shadow:0 10px 28px -12px rgba(8,20,12,.5);
}
.wa-list a span{opacity:.55;font-size:.68rem}
.wa-btn{
  width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;
  background:#1FA855;color:#fff;box-shadow:0 12px 30px -10px rgba(8,40,20,.6);
  transition:transform .3s ease;
}
.wa-btn:hover{transform:translateY(-2px) scale(1.04)}
.wa-btn svg{width:1.5rem;height:1.5rem;fill:currentColor}
@media (max-width:620px){ .wa-btn{width:2.7rem;height:2.7rem} }


/* ============================================================
   ENQUIRY CHOOSER
   ============================================================ */
body.no-scroll{overflow:hidden}

.enq{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:var(--pad)}
.enq[hidden]{display:none}
.enq-scrim{
  position:absolute;inset:0;background:rgba(8,18,12,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
.enq[data-open="true"] .enq-scrim{opacity:1}
.enq-card{
  position:relative;width:min(30rem,100%);background:var(--white);color:var(--ink);
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 40px 90px -40px rgba(8,20,12,.65);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.85,.2,1);
}
.enq[data-open="true"] .enq-card{opacity:1;transform:none}
.enq-x{
  position:absolute;top:.9rem;right:.9rem;width:2rem;height:2rem;border-radius:999px;
  display:grid;place-items:center;font-size:.72rem;color:var(--ink-soft);
  transition:background .3s,color .3s;
}
.enq-x:hover{background:rgba(20,20,18,.07);color:var(--ink)}
.enq-card h2{
  margin-top:.5rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:.005em;line-height:1.15;
}
.enq-about{margin-top:.5rem;color:var(--ink-soft);font-size:.9rem}
.enq-about[hidden]{display:none}

.enq-opts{margin-top:clamp(1.1rem,2vw,1.6rem);display:grid;gap:.5rem}
.enq-opt{
  display:flex;align-items:center;gap:.85rem;padding:.8rem .9rem;
  border:1px solid rgba(20,20,18,.14);
  transition:border-color .3s,background .3s,transform .3s;
}
.enq-opt:hover{border-color:rgba(20,20,18,.42);background:rgba(20,20,18,.03);transform:translateY(-1px)}
.enq-ico{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:999px;display:grid;place-items:center;background:rgba(20,20,18,.06)}
.enq-ico svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.enq-ico svg.solid{fill:currentColor;stroke:none}
.enq-opt--wa .enq-ico{background:rgba(37,211,102,.14);color:#128C4B}
.enq-t{display:grid;gap:.12rem;min-width:0}
.enq-t strong{font-weight:600;font-size:.9rem;letter-spacing:-.005em}
.enq-t em{font-style:normal;font-size:.78rem;color:var(--ink-soft);overflow-wrap:anywhere}
.enq-foot{margin-top:clamp(1rem,1.8vw,1.4rem);opacity:.5;font-size:.68rem}

/* ---------- build credit ---------- */
/* the build credit sits under the copyright, not beside it */
.f-credit{display:grid;gap:.45rem;justify-items:end;text-align:right}
.built-by{display:inline-flex;align-items:center;gap:.5rem;opacity:.5;transition:opacity .3s}
.built-by:hover{opacity:.9}
.built-by img{display:block;width:auto;height:1.05em}
@media (max-width:720px){ .f-credit{justify-items:start;text-align:left} }

.brk-cta{padding:0 var(--pad) var(--sec-y);text-align:center}
.brk-cta .italic{color:var(--ink-soft)}
.brk-cta p + p{margin-top:1.1rem}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{margin-top:clamp(1.2rem,2vw,1.6rem);display:grid;gap:.85rem}
.co-field{display:grid;gap:.3rem}
.co-field label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.co-field input,.co-field textarea,.co-field select{
  width:100%;padding:.6rem .1rem;border:0;border-bottom:1px solid rgba(20,20,18,.22);
  background:transparent;color:var(--ink);font:inherit;font-size:.9rem;border-radius:0;
  transition:border-color .3s;
}
.co-field select{appearance:none;padding-right:1.4rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) 58%,calc(100% - 5px) 58%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.co-field textarea{resize:vertical;line-height:1.5}
.co-field input:focus,.co-field textarea:focus,.co-field select:focus{outline:0;border-bottom-color:var(--ink)}
.co-two{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.co-note{margin-top:.35rem;font-size:.78rem;color:var(--ink-soft);line-height:1.5}
.co-err{color:#8C1C2B;font-size:.82rem}
.co-send{margin-top:clamp(1.2rem,2vw,1.6rem);display:flex;gap:.6rem;flex-wrap:wrap}
.co-alt{margin-top:.9rem;opacity:.6;font-size:.68rem}
.co-link{border-bottom:1px solid currentColor;font:inherit;letter-spacing:inherit;text-transform:inherit}
.co-done{
  margin-top:1rem;padding:.8rem 1rem;background:rgba(27,122,78,.1);
  border-left:2px solid var(--forest);font-size:.86rem;line-height:1.5;
}
@media (max-width:560px){ .co-two{grid-template-columns:1fr} }

/* Featured Stones carries .shop-grid so the hydrator can find it, and now
   takes that grid's sizing too rather than stretching three cards across the
   whole page. */
.grid3.shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}