/* ── HERO SLIDER ── */
/* Height is the LARGER of two things:
     --hero-fit  the viewport minus the header (--bdk-header-offset, header.css),
                 so on a roomy screen the whole banner is on screen at rest;
     --hero-min  the flattest shape the photographs can take.
   The second one matters: the slider photos are 1898x940 (2.02:1), and a laptop
   window is often only ~500px tall under the 224px header — a 3:1 letterbox.
   object-fit:cover then has to throw away a third of the picture's height, which
   is exactly where the jewellery is (measured on the sources: bracelet y 31-81%,
   diamond drop y 26-85%, sapphire chandelier y 15-93%). Capping the flatness at
   2.4:1 leaves ~84% of the picture height visible, enough for every piece to
   stay whole; on a short window the banner then runs slightly past the fold
   instead, and --hero-overflow (below) keeps the copy and dots on screen.
   svh, not vh, so mobile browser chrome can't crop it either. */
.hero {
  position:relative;
  height:calc(100vh - var(--bdk-header-offset));
  overflow:hidden;
  --hero-overflow:0px;
}
@supports (height: max(1svh, 1px)) {
  .hero {
    --hero-fit: calc(100svh - var(--bdk-header-offset));
    --hero-min: calc(100vw / 2.4);
    /* How far the banner runs past the fold, 0 whenever it fits. */
    --hero-overflow: max(0px, calc(var(--hero-min) - var(--hero-fit)));
    height: max(var(--hero-fit), var(--hero-min));
  }
}

/* Below the desktop breakpoint the header bar is fixed over the page and
   reserves no flow space of its own, so the hero starts below it explicitly. */
@media (max-width:1279px) {
  .hero { margin-top:var(--bdk-nav-h-m); }
}
.slide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.3s ease;
  display:flex; align-items:flex-end;
}
.slide.active { opacity:1; }

.slide-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.slide-bg-1 { background:linear-gradient(135deg, #2A1F10 0%, #4A3520 40%, #1C1410 100%); }
.slide-bg-2 { background:linear-gradient(135deg, #0A1520 0%, #1A2D40 45%, #0C1828 100%); }
.slide-bg-3 { background:linear-gradient(135deg, #1A0A0A 0%, #3A1515 45%, #120808 100%); }
.slide-bg-4 { background:linear-gradient(135deg, #0D1F14 0%, #1A3D2B 45%, #0A1810 100%); }

.slide-img-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center;
}
.slide-img-label span {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.4em;
  color:rgba(255,255,255,.2); text-transform:uppercase; display:block;
}
.slide-img-label .img-icon { font-size:28px; opacity:.15; margin-bottom:10px; display:block; }

.slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(14,12,9,.72) 0%, rgba(14,12,9,.3) 55%, rgba(14,12,9,.05) 100%);
}
.slide-overlay-r {
  position:absolute; inset:0;
  background:linear-gradient(to left, rgba(14,12,9,.72) 0%, rgba(14,12,9,.3) 55%, rgba(14,12,9,.05) 100%);
}
.slide-overlay-c {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,12,9,.8) 0%, rgba(14,12,9,.2) 50%, transparent 80%);
}
.slide-content {
  /* Lifted by whatever runs past the fold, so the headline and the CTA are
     still on screen at rest on a short window. 0 on a roomy one. */
  position:absolute; bottom:calc(13% + var(--hero-overflow, 0px)); left:8%;
  max-width:520px;
  opacity:0; transform:translateY(22px);
  transition:opacity 1s ease .5s, transform 1s ease .5s;
}
/* Slide 1's headline has a longer line than the others ("Three Generations"),
   which wrapped inside the default 520px block and turned three lines into
   five. Only this slide needs the extra width, and it is the one slide with no
   jewellery in frame for the copy to run into. */
.hero > .slide:nth-child(1) .slide-content { max-width:660px; }

.slide-content-r { left:auto; right:8%; text-align:right; }
/* .slide-sub is narrower than the copy block, so on a right-aligned slide it
   has to be pushed to the right edge or it drifts back under the jewellery. */
.slide-content-r .slide-sub { margin-left:auto; }
.slide-content-c { left:50%; transform:translateX(-50%) translateY(22px); text-align:center; max-width:620px; bottom:10%; }
.slide.active .slide-content { opacity:1; transform:translateY(0); }
.slide.active .slide-content-c { opacity:1; transform:translateX(-50%) translateY(0); }

.slide-eyebrow {
  font-family:'Cormorant SC', serif; font-size:11px; letter-spacing:.38em;
  color:var(--gold-light); text-transform:uppercase; display:block; margin-bottom:16px;
}
.slide-title {
  font-family:'Cormorant Garamond', serif; font-size:clamp(44px,6vw,78px);
  font-weight:300; color:var(--white); line-height:1.05; margin-bottom:16px;
}
.slide-title em { font-style:italic; color:var(--gold-light); }
.slide-sub {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:17px; color:rgba(253,251,247,.72); line-height:1.75;
  display:block; margin-bottom:34px; max-width:400px;
}
.slide-sub-c { max-width:500px; margin-left:auto; margin-right:auto; }
.slide-btn {
  display:inline-block; font-family:'Cormorant SC', serif;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--white); border:1px solid rgba(255,255,255,.4);
  padding:12px 34px; text-decoration:none; cursor:none; transition:all .4s;
}
.slide-btn:hover { background:var(--gold); border-color:var(--gold); }

.slider-arrow {
  /* Centred on the part of the banner that is actually on screen. */
  position:absolute; top:calc(50% - var(--hero-overflow, 0px) / 2); transform:translateY(-50%);
  background:var(--gold); border-color:1px solid var(--gold); color:var(--white);
 font-size:16px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  cursor:none; z-index:10; transition:all .35s;
}
.slider-arrow:hover {  background:transparent; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65);}
.slider-prev { left:22px; }
.slider-next { right:22px; }
.slider-dots { position:absolute; bottom:calc(26px + var(--hero-overflow, 0px)); left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }

/* Short laptop screens (1366x768, 1280x720 …). The hero is now the viewport
   minus the header rather than a full 100vh that ran past the fold, so on these
   the copy block has ~540px to live in instead of ~770px — and slide 1's
   three-line headline no longer cleared the top of the frame. Tighten the block
   for short viewports only; 1440x900 and up are untouched. */
@media (min-width:769px) and (max-height:860px) {
  .slide-content { bottom:calc(7% + var(--hero-overflow, 0px)); }
  .slide-title   { font-size:clamp(38px,4.4vw,56px); }
  .slide-sub     { font-size:16px; margin-bottom:26px; }
}
.dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); cursor:none; transition:all .4s; border:none; }
.dot.active { background:var(--gold); width:26px; border-radius:3px; }

/* ── GEMSTONE COLLECTIONS ── */
/* padding-bottom was 0, so the last row of panels butted directly against
   whatever section follows (the dark founder-photo block) with no
   breathing room at all — looked like the sections had merged by mistake. */
.section-gems { background:var(--white); padding:96px 0 72px; }
.sec-header { text-align:center; padding:0 40px 52px; }
.sec-eyebrow {
  font-family:'Cormorant SC', serif; font-size:11px; letter-spacing:.44em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:16px;
}
.sec-title {
  font-family:'Cormorant Garamond', serif; font-size:clamp(30px,3.5vw,44px);
  font-weight:300; color:var(--ink); line-height:1.15;
}
.sec-title em { font-style:italic; }
.gold-rule { width:48px; height:1px; background:var(--gold); margin:18px auto 0; opacity:.55; }

/* Carousel — was a fixed 5-column grid, so on narrow screens the orphaned
   5th (Pearl) panel needed an nth-child hack just to span the row. A
   scroll-snap track keeps everything in one row at any width instead,
   and matches the same carousel pattern used on the bridal pages'
   "Explore the Collections" panels (see initGridCarousel in header.js). */
.gems-carousel { position:relative; max-width:1600px; margin:0 auto; padding:0 4px; }
.gems-row {
  display:flex;
  gap:2px;
  height:450px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gems-row::-webkit-scrollbar { display:none; }
.gems-carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  /* Solid, not translucent — a 90%-opacity cream circle read as part of
     the photo, not a control, against bright jewellery imagery. */
  background:var(--gold); border:2px solid #fff;
  color:#fff; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:20; transition:all .3s;
  box-shadow:0 4px 20px rgba(20,18,15,.35);
}
.gems-carousel-arrow:hover { background:var(--ink); border-color:var(--gold); }
.gems-carousel-arrow:disabled { opacity:.4; pointer-events:none; }
.gems-carousel-prev { left:18px; }
.gems-carousel-next { right:18px; }
.gem-panel {
  /* 4 in view (not 5/20%) so there's always one panel to reveal by
     scrolling — otherwise all 5 fit exactly and the arrows never do
     anything on a normal desktop width. */
  flex:0 0 calc(25% - 2px);
  scroll-snap-align:start;
  position:relative; overflow:hidden; cursor:none;
  border-right:1px solid rgba(184,150,62,.12);
}
.gem-panel:last-child { border-right:none; }
a.gem-panel { text-decoration: none; color: inherit; display: block; outline: none; }
/*.gem-overlay{ */
/*       content: "";*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    z-index: 1;*/
/*    background: #0000004a; */
/*} */

.gem-sapphire { background:linear-gradient(170deg, #1A2A4A 0%, #0D1825 50%, #243558 100%); }
.gem-diamond { background:linear-gradient(170deg, #1A1A1A 0%, #2A2A2A 50%, #111 100%); }
.gem-ruby { background:linear-gradient(170deg, #3A0D0D 0%, #5C1A1A 50%, #280808 100%); }
.gem-emerald { background:linear-gradient(170deg, #0D2419 0%, #1A3D2B 50%, #0A1810 100%); }
.gem-pearl { background:linear-gradient(170deg, #C8BAAA 0%, #E8DDCC 50%, #B8A898 100%); }
.gem-sapphire {
  --gem-bg: linear-gradient(170deg, #1A2A4A 0%, #0D1825 50%, #243558 100%);
}

.gem-diamond {
  --gem-bg: linear-gradient(170deg, #1A1A1A 0%, #2A2A2A 50%, #111 100%);
}

.gem-ruby {
  --gem-bg: linear-gradient(170deg, #3A0D0D 0%, #5C1A1A 50%, #280808 100%);
}

.gem-emerald {
  --gem-bg: linear-gradient(170deg, #0D2419 0%, #1A3D2B 50%, #0A1810 100%);
}

.gem-pearl {
  --gem-bg: linear-gradient(170deg, #C8BAAA 0%, #E8DDCC 50%, #B8A898 100%);
}
.gem-info{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:26px 20px;
  z-index:2;
  overflow:hidden;
      height: 100%;
    display: flex;
    flex-direction: column;
        justify-content: end;
     background:linear-gradient(359deg,rgba(0, 0, 0, 0.9) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    
}
.is-desktop,
.is-mobile{
   display:none;
}

@media (min-width:1001px){
   .is-desktop{
      display:block;
   }
}

@media (max-width:1000px){
   .is-mobile{
      display:block;
   }
}
.gem-info::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gem-bg);
  opacity:0;
  transition:opacity .45s ease;
  z-index:-1;
  
}

.gem-panel:hover .gem-info::before{
  opacity:1;
}
.gem-name {
  font-family:'Cormorant SC', serif; font-size:12px; letter-spacing:.28em;
  color:var(--white); text-transform:uppercase; display:block; margin-bottom:7px;
}
/*.gem-pearl .gem-name { color:var(--ink); }*/
.gem-tagline {
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px;
  color:rgba(240,228,195,.65); line-height:1.5; display:block;
  margin-bottom:14px; opacity:0; transform:translateY(10px);
  transition:opacity .4s ease .1s, transform .4s ease .1s;
}
/*.gem-pearl .gem-tagline { color:rgba(40,35,28,.55); }*/
.gem-panel:hover .gem-tagline { opacity:1; transform:translateY(0); }
.gem-cta {
  font-family:'Cormorant SC', serif; font-size:8.5px; letter-spacing:.35em;
  color:var(--gold-light); text-decoration:none; text-transform:uppercase;
  opacity:0; transition:opacity .4s ease .2s; display:inline-flex; align-items:center; gap:7px;
  cursor:none;
}
.gem-cta::after { content:'→'; }
.gem-panel:hover .gem-cta { opacity:1; }

/* ── FOUNDER ── */
.section-founder { display:grid; grid-template-columns:1fr 1fr; min-height:660px; }
.founder-img-block {
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, #2A1F14 0%, #3D2E1C 50%, #1C1409 100%);
  display:flex; align-items:center; justify-content:center;
}
.founder-text-block {
  background:var(--cream); display:flex; flex-direction:column;
  justify-content:center; padding:80px 70px 80px 64px;
}
.founder-h2 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(32px,3.2vw,46px);
  font-weight:300; color:var(--ink); line-height:1.15; margin-bottom:8px;
}
.founder-body {
  font-family:'EB Garamond', serif; font-size:18px; line-height:1.85;
  color:var(--ink-mid); margin-bottom:18px;
}


.founder-text-block {
  background:var(--cream); display:flex; flex-direction:column;
  justify-content:center; padding:80px 70px 80px 64px;
}
.founder-ornament { display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.fo-line { width:50px; height:1px; background:linear-gradient(to right, var(--gold), transparent); }
.fo-dot { width:4px; height:4px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }
.fo-label {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.38em;
  color:var(--gold); text-transform:uppercase;
}
.founder-h2 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(32px,3.2vw,46px);
  font-weight:300; color:var(--ink); line-height:1.15; margin-bottom:8px;
}
.founder-h2 em { font-style:italic; }
.founder-sub {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.3em;
  color:var(--gold); text-transform:uppercase; margin-bottom:26px; display:block;
}
.founder-rule { width:44px; height:1px; background:var(--gold); opacity:.45; margin-bottom:26px; }
.founder-body {
  font-family:'EB Garamond', serif; font-size:18px; line-height:1.85;
  color:var(--ink-mid); margin-bottom:18px;
}
.founder-body-i {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:16px; color:var(--ink-light); line-height:1.8; margin-bottom:38px;
}
/* ── EXCLUSIVE COLLECTIONS ── */
.section-excl { background:var(--white); padding:96px 0 0; }
.excl-header { text-align:center; padding:0 40px 52px; }

.excl-split { display:grid; grid-template-columns:1fr 1fr; min-height:580px; }
.excl-split-rev { direction:rtl; }
.excl-split-rev > * { direction:ltr; }

.excl-img {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-size: cover; background-position: center;
}

.excl-body {
  display:flex; flex-direction:column; justify-content:center;
  padding:72px 64px;
}
.excl-body-cream { background:var(--cream); }
.excl-body-white { background:var(--white); }

.excl-eyebrow {
  font-family:'Cormorant SC', serif; font-size:11px; letter-spacing:.36em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:18px;
}
.excl-h3 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(28px,3vw,42px);
  font-weight:300; color:var(--ink); line-height:1.1; margin-bottom:8px;
}
.excl-h3 em { font-style:italic; }
.excl-subtitle {
  font-family:'Cormorant SC', serif; font-size:11px; letter-spacing:.25em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:24px;
}
.excl-rule { width:40px; height:1px; background:var(--gold); opacity:.45; margin-bottom:24px; }
.excl-text {
  font-family:'EB Garamond', serif; font-size:17.5px; line-height:1.85;
  color:var(--ink-mid); margin-bottom:34px;
}
.excl-btn {
  display:inline-block; font-family:'Cormorant SC', serif;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(184,150,62,.4);
  padding:12px 30px; text-decoration:none; cursor:none; transition:all .4s; width:fit-content;
}
.excl-btn:hover { background:var(--gold); color:var(--white); }

/* Bridal — full bleed dark */
.excl-bridal {
  position:relative; min-height:580px; overflow:hidden;
  background-size: cover; background-position: center;
  align-items:center;
  background: linear-gradient(170deg, #1A0808 0%, #2A0F0F 50%, #0D0505 100%);
}
.excl-bridal-content {
  position:relative; z-index:2; padding:80px 8% 80px;
  max-width:560px;
}
.excl-bridal-eyebrow {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.45em;
  color:var(--gold-light); text-transform:uppercase; display:block; margin-bottom:20px;
}
.excl-bridal-title {
  font-family:'Cormorant Garamond', serif; font-size:clamp(38px,4.5vw,58px);
  font-weight:300; color:var(--white); line-height:1.08; margin-bottom:8px;
}
.excl-bridal-title em { font-style:italic; color:var(--gold-light); }
.excl-bridal-rule { width:44px; height:1px; background:rgba(184,150,62,.5); margin:22px 0; }
.excl-bridal-text {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:18px; color:rgba(253,251,247,.72); line-height:1.8; margin-bottom:36px;
}
.excl-bridal-btn {
  display:inline-block; font-family:'Cormorant SC', serif;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--white); border:1px solid rgba(255,255,255,.35);
  padding:13px 36px; text-decoration:none; cursor:none; transition:all .4s;
}
.excl-bridal-btn:hover { background:var(--gold); border-color:var(--gold); }
.text-link {
  font-family:'Cormorant SC', serif; font-size:10px; letter-spacing:.3em;
  color:var(--gold); text-decoration:none; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; transition:gap .3s; cursor:none;
}
.text-link:hover { gap:16px; }
.text-link::after { content:'→'; }
/* ── FINE JEWELLERY ── */
.section-fine { background:var(--cream); padding:96px 0; }
.fine-header { text-align:center; padding:0 40px 52px; }
.fine-panels { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.fine-panel {
  position:relative; height:520px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  cursor:none;
  background-size: cover; background-position: center;
}
.fine-panel .fine-panel-overlay { background:linear-gradient(359deg,rgba(0, 0, 0, 0.9) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); }
.fine-panel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
  transition: background .4s;
}
.fine-panel-label {
  position:absolute; bottom:28px; left:28px; right:28px;
}
.fine-panel-label-name {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:20px; color:var(--white); display:block; margin-bottom:4px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.fine-panel-label-sub {
  font-family:'Cormorant SC', serif; font-size:10.5px; letter-spacing:.25em;
  color:var(--gold-light); text-transform:uppercase; opacity:.9;
}
.excl-block-img {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ── CRAFTSMAN ── */
.section-craft { background:var(--white); }
.craft-grid { display:grid; grid-template-columns:1fr 1fr; }
.craft-img {
  min-height:320px; position:relative; overflow:hidden;
  background-size: cover; background-position: center;
}
.craft-text {
  background:var(--dark); display:flex; flex-direction:column;
  justify-content:center; padding:80px 68px; position:relative; overflow:hidden;
}
.craft-text::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:360px; height:360px; border-radius:50%;
  border:1px solid rgba(184,150,62,.05);
}
.craft-text::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:240px; height:240px; border-radius:50%;
  border:1px solid rgba(184,150,62,.04);
}
.craft-bg-num {
  font-family:'Cormorant Garamond', serif; font-size:130px;
  font-weight:300; color:rgba(184,150,62,.05); line-height:1;
  position:absolute; top:20px; right:30px; pointer-events:none;
}
.craft-eyebrow {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.45em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:20px;
}
.craft-h2 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(30px,3.2vw,44px);
  font-weight:300; color:var(--white); line-height:1.18; margin-bottom:8px;
}
.craft-h2 em { font-style:italic; color:var(--gold-light); }
.craft-sub {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.3em;
  color:rgba(184,150,62,.6); text-transform:uppercase; display:block; margin-bottom:26px;
}
.craft-rule { width:40px; height:1px; background:rgba(184,150,62,.35); margin-bottom:26px; }
.craft-body {
  font-family:'EB Garamond', serif; font-size:17.5px; line-height:1.85;
  color:rgba(253,251,247,.62); margin-bottom:16px;
}
.craft-body-i {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15px; color:rgba(184,150,62,.5); line-height:1.75; margin-bottom:38px;
}
.craft-link {
  font-family:'Cormorant SC', serif; font-size:10px; letter-spacing:.3em;
  color:var(--gold); text-decoration:none; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; transition:gap .3s; cursor:none;
}
.craft-link:hover { gap:16px; }
.craft-link::after { content:'→'; }

/* ── CLOSING CTA ── */
.section-cta {
  background:var(--cream); padding:116px 40px 100px;
  text-align:center; position:relative;
}
.section-cta::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:70px; background:linear-gradient(to bottom, transparent, var(--gold));
}

.cta-eyebrow {
  font-family:'Cormorant SC', serif; font-size:9px; letter-spacing:.55em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:28px;
}
.cta-h2 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(36px,4.5vw,58px);
  font-weight:300; color:var(--ink); line-height:1.1; margin-bottom:10px;
}
.cta-h2 em { font-style:italic; }
.cta-rule { width:1px; height:55px; background:linear-gradient(to bottom, var(--gold), transparent); margin:32px auto; }
.cta-text {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:18.5px; color:var(--ink-light); max-width:480px;
  margin:0 auto 48px; line-height:1.82;
}
.cta-btn {
  display:inline-block; font-family:'Cormorant SC', serif;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  background:var(--ink); color:var(--white);
  padding:16px 54px; text-decoration:none; cursor:none; transition:background .4s;
}
.cta-btn:hover { background:var(--gold); }
.cta-note {
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:13px; color:rgba(60,55,48,.33); margin-top:26px;
}


/* Base styles (applied to all screen sizes) */
.founder-img-edge img {
  display: block; /* Removes bottom alignment gaps */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:top;
}

.slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focal points — whatever cover still has to trim, trim it off the empty
   background rather than the piece. Measured on the 1898x940 sources:
   bracelet x 56-98% / y 31-81%; sapphire chandelier x 66-79% / y 15-93%.
   The bracelet sits hard against the right edge, so a narrow frame (tablet
   landscape) has to hold that edge; the sapphire hangs low, so a flat frame
   has to hold the bottom. The diamond slide sits mid-frame and needs neither.
   Phone crops are re-anchored separately in the mobile block below. */
.hero > .slide:nth-child(2) .slide-img { object-position: 100% 50%; }
.hero > .slide:nth-child(4) .slide-img { object-position: 50% 75%; }
.fine-panel {
  position: relative;
  overflow: hidden;
}

.fine-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-img {
  position: relative;
  overflow: hidden;
}

.craft-img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.excl-img-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1024px) { 
  .founder-img-edge img {
    position: absolute; 
    top: 0; 
    left: 0; 
  }

  .founder-img-edge { 
  height: 600px; 

  overflow: hidden; /* Recommended: clips any image overlap */
}

.excl-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.excl-bridal{ 
 display:flex;    
}
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gems-row { height: 260px; }
  .gem-panel { flex-basis: calc(33.333% - 2px); }
  .section-founder { grid-template-columns: 1fr; }
  .excl-split { grid-template-columns: 1fr; }
  .fine-panels { grid-template-columns: 1fr; }
  .craft-grid { grid-template-columns: 1fr; }
  .excl-block-img {
    height: 380px;
  } 
}
  
@media (max-width: 768px) {
  .gems-carousel { padding: 0 4px; }
  .gems-row { height: 320px; }
  .gem-panel { flex-basis: 74%; }
  .gems-carousel-arrow { width: 36px; height: 36px; font-size: 13px; }
  .section-gems { padding-bottom: 56px; }

  .slide-content { left: 5%; right: 5%; text-align: center; }
  .slide-title { font-size: 36px; }
  .excl-body { padding: 40px 24px; }
  .craft-text { padding: 40px 24px; }
  .section-cta { padding: 80px 24px 60px; }

  /* Hero slider — object-fit:cover defaults to a centred crop, which on a
     tall/narrow phone screen cuts off jewellery that isn't horizontally
     centred in the source photo (earrings hanging off to one side, a
     bracelet sitting in the right two-thirds of its frame). Re-anchor the
     crop per slide so the piece itself stays in frame. */
  /* Re-measured directly against the live 1898×940 source photos (pixel
     bounding box of the piece itself, not eyeballed) so the jewellery
     lands centred in the mobile crop rather than off to one side. */
  .hero > .slide:nth-child(2) .slide-img { object-position: 100% 50%; }  /* bracelet — sits hard against the right edge of its frame */
  .hero > .slide:nth-child(3) .slide-img { object-position: 28% 50%; }  /* diamond earring */
  .hero > .slide:nth-child(4) .slide-img { object-position: 85% 50%; }  /* sapphire earring */

  /* The three product slides — copy below the jewellery, not on top of it,
     and a frame wide enough to hold the whole piece.

     On desktop these carry their copy on the empty side of the frame (see
     .slide-content-r in home-content.php). A phone frame has no empty side to
     use: cropped to portrait, a full-height slide shows only ~25% of the
     picture's width, which cuts the bracelet off at both ends, and the drop
     earrings fill the frame top to bottom with the bottom-anchored copy landing
     straight across the stones. Splitting the slide instead — photograph above,
     copy on its own ground below — gives the photograph a landscape-ish box
     (~44% of the width in frame, enough for every piece) and keeps copy and
     jewellery apart at any phone size, because the copy takes the height it
     needs and the photograph takes the rest. */
  .hero > .slide:nth-child(2),
  .hero > .slide:nth-child(3),
  .hero > .slide:nth-child(4) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;   /* .slide's flex-end alignment would shrink-wrap the photo */
    background: var(--dark);
  }
  .hero > .slide:nth-child(2) .slide-media,
  .hero > .slide:nth-child(3) .slide-media,
  .hero > .slide:nth-child(4) .slide-media {
    position: relative;
    inset: auto;
  }
  /* Dissolve the foot of the photograph into that ground so the split reads as
     one composition rather than two stacked blocks. */
  .hero > .slide:nth-child(2) .slide-media::after,
  .hero > .slide:nth-child(3) .slide-media::after,
  .hero > .slide:nth-child(4) .slide-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(20, 18, 15, 0), var(--dark));
  }
  .hero > .slide:nth-child(2) .slide-content,
  .hero > .slide:nth-child(3) .slide-content,
  .hero > .slide:nth-child(4) .slide-content {
    position: relative;
    inset: auto;
    max-width: none;
    padding: 26px 5% 58px;   /* bottom clears the slider dots */
  }
}

/* ── Gemstone tiles on phones (homepage + collections page) ──────────────
   A 2 × 2 grid with the fifth tile (Pearl) full width underneath, instead
   of a sideways carousel. Taglines and "Explore" are always visible — a
   phone has no hover to reveal them — and "Collection" is dropped from the
   link text so it fits the narrower tiles. */
@media (max-width: 768px) {
  .section-gems .gems-carousel { padding: 0 4px; }
  .section-gems .gems-carousel-arrow { display: none; }
  .section-gems .gems-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .section-gems .gem-panel {
    flex: none;
    aspect-ratio: 5 / 6;
    border-right: none;
  }
  .section-gems .gem-panel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
  .section-gems .gem-info { padding: 22px 16px; }
  /* Text sits higher on these shorter tiles, so the dark fade behind it
     reaches further up than on desktop to keep the tagline readable. */
  .section-gems .gem-info {
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,0) 78%);
  }
  .section-gems .gem-tagline,
  .section-gems .gem-cta { opacity: 1; transform: none; }
  .section-gems .gem-cta-more { display: none; }
}

/* Hero: "One Unbroken Standard" always on a single line. On the smallest
   phones the line scales down with the screen instead of wrapping. */
.slide-title-line { white-space: nowrap; color: var(--gold-light); }  /* "One" in the same gold as "Unbroken Standard" */
@media (max-width: 768px) {
  .slide-title-line { font-size: min(1em, 9.6vw); }
}

/* Tablet and desktop: all five gemstone tiles in one row, so Pearl is no
   longer hidden off to the right behind a carousel arrow. */
@media (min-width: 769px) {
  .section-gems .gem-panel { flex: 1 1 0; min-width: 0; }
  .section-gems .gems-carousel-arrow { display: none; }
}

/* Tablets (touch, no hover): the tagline and "Explore" only ever appear on
   hover, yet their invisible space differed per tile (longer taglines wrap),
   so the five gemstone names sat at different heights. Without hover they
   are never shown, so take them out and the names line up in one row. */
@media (min-width: 769px) and (hover: none) {
  .section-gems .gem-tagline,
  .section-gems .gem-cta { display: none; }
}