/* ================================================================
   Divya Stones — PREMIUM polish + fixes
   Loaded LAST (after style.css + mobile-fixes.css). Override layer.
   Goals: premium look, crisp media, fixed family videos,
   balanced contact page, refined mobile. No base files rewritten.
   ================================================================ */

/* ---------------- 1. Refined design tokens ---------------- */
:root{
  --gold:        #b08d57;   /* warm bronze accent, used sparingly */
  --gold-soft:   #c9a877;
  --ink:         #0c0c0d;
  --line:        #e6e4df;
  --bg:          #f7f6f3;   /* warmer ivory */
  --bg-2:        #efece6;
  --surface:     #ffffff;

  --shadow-sm:   0 1px 2px rgba(22,18,12,.05), 0 4px 14px rgba(22,18,12,.06);
  --shadow-md:   0 12px 38px rgba(22,18,12,.12);
  --shadow-lg:   0 36px 90px rgba(12,10,6,.24);

  --radius:      4px;
  --radius-lg:   12px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* Crisper rendering everywhere; kill sub-pixel softness on transforms */
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--bg); letter-spacing:.002em; }
img, video{
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Media that animates/scales must stay sharp on retina */
.coll-card__video,
.coll-card::before,
.hero__slide-img,
.gallery__img,
.prod__img,
.m-hero__pop-img{
  transform:translateZ(0);
  will-change:transform;
}

/* ---------------- 2. Premium typography ---------------- */
.display{ letter-spacing:-.025em; text-wrap:balance; }
.display em{ color:var(--gold); font-style:italic; }
.display--light em{ color:var(--gold-soft); }
.eyebrow{ color:var(--gold); font-weight:600; }
.eyebrow::before{ width:34px; background:var(--gold); opacity:.9; }
.eyebrow--light{ color:var(--gold-soft); }
.lede{ line-height:1.72; }

/* Selection + focus */
::selection{ background:var(--gold); color:#fff; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:3px;
}

/* Refined custom scrollbar (desktop) */
@media (hover:hover){
  *{ scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:999px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-track{ background:transparent; }
}

/* ---------------- 3. Premium buttons ---------------- */
.btn{ transition:transform .3s var(--ease), background .3s var(--ease),
       color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn--primary{ background:var(--ink); box-shadow:0 6px 20px rgba(12,10,6,.16); }
.btn--primary:hover{
  background:var(--gold); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(176,141,87,.4);
}
.btn--ghost:hover{ background:var(--ink); color:#fafafa; transform:translateY(-2px); }
.link-arrow:hover{ color:var(--gold); }

/* ---------------- 4. Premium cards / sections ---------------- */
.coll-card, .prod, .gallery__item, .industry, .t-card, .blog-card, .cat-card{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.coll-card{ box-shadow:var(--shadow-sm); }
.coll-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prod:hover, .blog-card:hover, .cat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.industry{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.industry:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }

/* Hairline gold top-accent on the dark CTA band */
.cta-band{ position:relative; }
.cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.55;
}

/* Smoother reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ================================================================
   5. FIX — "Five families, one obsession" videos visible + crisp
   Force the video layer above the poster ::before, fade in cleanly.
   ================================================================ */
#collections .coll-card{ background:#1b1b1d; }
#collections .coll-card::before{ z-index:0; }        /* poster image, ALWAYS visible base */
#collections .coll-card__video{
  z-index:1 !important;
  opacity:1;
  object-fit:cover;
  background:transparent;   /* never paint over the poster if the video can't render */
}
#collections .coll-card::after{ z-index:2; }   /* gradient over media */
#collections .coll-card__num,
#collections .coll-card__body{ z-index:3; }
/* Reduced-motion users still see the poster image */
@media (prefers-reduced-motion:reduce){
  #collections .coll-card__video{ display:none; }
}

/* ================================================================
   6. FIX — Contact page: kill the dead/left-out space, balance cols
   ================================================================ */
#contact.cta{ padding-top:clamp(56px,6vw,90px); padding-bottom:clamp(56px,6vw,90px); }
.cta__grid{
  grid-template-columns:1.05fr 1fr;
  gap:clamp(36px,4.5vw,72px);
  align-items:stretch;            /* columns share height — no orphan gap */
}
.cta__copy{ display:flex; flex-direction:column; }
/* Push contact details to fill the column height instead of floating up */
.contact-list{ margin-top:auto; padding-top:28px; }
.contact-list li{ padding-bottom:18px; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:0; }
.contact-list__lbl{ color:var(--gold); }
.cta__form{
  box-shadow:var(--shadow-md);
  border-color:var(--line);
  align-self:stretch;
}
/* Map cards: give the section room, equal-height cards */
.section--cream .industries__grid{ gap:24px; align-items:stretch; }
.section--cream .industry{
  background:var(--surface); padding:28px; border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

/* ---------------- 7. Footer: shipping badge + polish ---------------- */
.footer__ship{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:18px !important;
}
.footer__ship .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(176,141,87,.18);
}
.footer__col a{ transition:color .25s var(--ease); }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ================================================================
   8. MOBILE — comprehensive responsive pass
   ================================================================ */

/* Global overflow guard */
html, body{ max-width:100%; overflow-x:hidden; }

@media (max-width:1100px){
  :root{ --pad-x:20px; }
  .nav__list{ gap:2px; }
}

/* ---- Tablet / small laptop ---- */
@media (max-width:1100px){
  /* Mobile drawer: full-height, scrollable, premium spacing */
  .site-header .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(86vw,380px);
    background:var(--bg);
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    padding:96px 0 40px;
    overflow-y:auto;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    display:block;
  }
  .site-header .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; padding:0 14px; }
  .site-header .nav.is-open .nav__link{
    font-size:17px; padding:14px 16px; justify-content:space-between;
  }
  .nav__sub{
    position:static; opacity:1; pointer-events:auto; transform:none;
    box-shadow:none; border:none; background:transparent; min-width:0;
  }
  /* Hide quote button overflow on small header, keep hamburger */
  .header__cta .btn--ghost{ display:none; }
  .hamburger{ display:block; }
  .header__inner{ gap:16px; }
}

/* ---- Phones ---- */
@media (max-width:760px){
  :root{ --header-h:68px; --pad-x:18px; }

  .section{ padding-top:clamp(48px,9vw,72px); padding-bottom:clamp(48px,9vw,72px); }
  .section-head{ margin-bottom:34px; }
  .display{ font-size:clamp(30px,8vw,44px); }
  .lede{ font-size:15.5px; }

  /* Hero readability on phones */
  .hero{ min-height:74vh; }
  .hero__title{ font-size:clamp(34px,11vw,52px); }
  .hero__content{ padding-bottom:48px; }

  /* Family / collections: clean 2-up then stacked */
  #collections .coll-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .coll-card{ aspect-ratio:3/4; }

  /* Generic 2+ col grids collapse */
  .field-row{ grid-template-columns:1fr; }
  .cta__grid{ grid-template-columns:1fr; gap:36px; }
  .cta__form{ order:2; }
  .industries__grid{ grid-template-columns:1fr !important; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; gap:24px; text-align:left; }
  .cta-band__actions{ width:100%; }
  .cta-band__actions .btn{ width:100%; }

  /* Footer stacks neatly, generous spacing */
  .footer{ padding:56px 0 22px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:34px 28px; padding-bottom:40px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bot{ flex-direction:column; gap:8px; text-align:center; align-items:center; }

  /* Bigger tap targets */
  .nav__link, .btn, .footer__col a, .contact-list a{ min-height:44px; }
}

@media (max-width:480px){
  #collections .coll-grid{ grid-template-columns:1fr !important; }
  .coll-card{ aspect-ratio:16/11; }
  .footer__top{ grid-template-columns:1fr; }
  .display{ font-size:clamp(28px,9vw,38px); }
  .btn{ --pad-x:20px; font-size:12px; }
}

/* ---------------- 9. Inner-hero clearance after announce removal ---- */
/* Topbar no longer has the announce strip, so inner heroes need a touch
   less top padding to avoid an oversized gap under the fixed header. */
.hero--inner .hero__content--inner{ padding-top:clamp(120px,16vh,168px); }
@media (max-width:760px){
  .hero--inner .hero__content--inner{ padding-top:108px; }
}


/* ================================================================
   About — certifications: two-column (copy left, marks right)
   Fills the empty right-hand space on desktop; stacks on mobile.
   ================================================================ */
@media (min-width:921px){
  #certifications .wrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(48px,6vw,90px);
    align-items:center;
  }
  #certifications .certs__copy{ margin:0 !important; max-width:none !important; }
  #certifications .certs-grid{
    grid-template-columns:repeat(3,1fr) !important;
    max-width:none !important;
    margin:0 !important;
    gap:clamp(18px,1.6vw,30px) !important;
  }
}
.qc-list{ margin:26px 0 0; display:grid; gap:12px; }
.qc-list li{
  position:relative; padding-left:26px;
  color:#cfcdc8; font-size:15px; line-height:1.55;
}
.qc-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:1px; background:var(--gold);
}

/* ================================================================
   ROUND 2 FIXES — specimen mobile, scroll performance, robustness
   ================================================================ */

/* --- Products "Specimen / Stone of the season": stop the 3-col grid
       overflowing (getting cut) on tablet/phone — stack it cleanly. --- */
@media (max-width:900px){
  .specimen--products{ overflow:hidden; }
  .specimen--products .specimen__inner{
    grid-template-columns:1fr !important;
    gap:26px !important;
    text-align:center;
    padding-top:clamp(44px,8vw,72px) !important;
    padding-bottom:clamp(44px,8vw,72px) !important;
  }
  .specimen--products .specimen__rail--left{ display:none !important; }
  .specimen--products .specimen__rail--right{ padding-top:0 !important; }
  .specimen--products .specimen__stage{ max-width:68% !important; margin:0 auto !important; }
  .specimen--products .specimen__specs{ max-width:340px; margin:18px auto 0; }
  .specimen--products .specimen__specs > div{ justify-content:center; }
}
@media (max-width:480px){
  .specimen--products .specimen__stage{ max-width:84% !important; }
}

/* --- Family cards: bullet-proof poster so a card is NEVER blank/black.
       The ::before background image is the always-visible base; video
       only sits on top when it actually plays. --- */
#collections .coll-card::before{
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  opacity:1 !important;
}
#collections .coll-card__video{ background:transparent !important; }

/* ================================================================
   SCROLL PERFORMANCE — kill the jank
   ================================================================ */

/* Promote heavy media to their own layers so scrolling doesn't repaint them */
.hero, .coll-card, .gallery__item, .specimen__stage{ contain:layout paint; }

/* The frosted (backdrop-filter blur) header is the #1 scroll cost on phones.
   Use a solid translucent bar on mobile instead — visually similar, far cheaper. */
@media (max-width:1100px){
  .topbar.is-stuck{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(247,246,243,.98) !important;
  }
}

/* Continuous Ken-Burns drifts repaint every frame — disable on touch/phones.
   Static posters look just as premium and scroll is smooth. */
@media (max-width:1100px){
  .coll-card--motion::before,
  .gallery__item--motion .gallery__img,
  .specimen__stage,
  .specimen__ground{
    animation:none !important;
  }
}

/* Lighten reveal transitions on mobile (no large translate repaint) */
@media (max-width:760px){
  .reveal{ transform:translateY(14px); transition-duration:.5s; }
}