/* ============================================================
   VELMORA — Homepage
   Section order is fixed: Hero · Gold strip · Promise · Trust ·
   Our Collection · Art of Fine Diamonds · 4Cs · Footer
   ============================================================ */

/* ---------- 1. HERO SLIDER ---------- */
.hero{position:relative;width:100%;height:clamp(430px,52vw,620px);overflow:hidden;background:#123;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease);}
.hero__slide.is-active{opacity:1;}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__slide.is-active .hero__media{animation:kenburns 11s ease-out forwards;}
@keyframes kenburns{from{transform:scale(1.045);}to{transform:scale(1.11);}}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,30,32,.30) 0%,rgba(20,30,32,.14) 42%,rgba(20,30,32,.38) 100%);}
.hero__inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;padding:clamp(38px,6.4vw,78px) 24px 0;}
.hero__title{font-family:var(--serif);font-size:clamp(30px,4.35vw,55px);line-height:1.12;color:#fff;
  font-weight:400;text-shadow:0 2px 26px rgba(0,0,0,.34);letter-spacing:.005em;}
.hero__meta{margin-top:clamp(20px,3.3vw,42px);font-size:clamp(9.5px,1vw,12px);letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.94);font-weight:500;
  text-shadow:0 1px 14px rgba(0,0,0,.44);}
.hero__meta i{font-style:normal;opacity:.7;margin:0 10px;}
.hero__sub{margin-top:clamp(8px,1.1vw,14px);font-family:var(--serif);
  font-size:clamp(19px,2.55vw,33px);color:#fff;font-weight:400;letter-spacing:.012em;
  text-shadow:0 2px 22px rgba(0,0,0,.36);}
.hero__cta{margin-top:clamp(20px,2.6vw,32px);display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero__cta .btn--glass{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.6);
  backdrop-filter:blur(7px);}
.hero__cta .btn--glass:hover{background:#fff;color:var(--ink);border-color:#fff;}

.hero__slide[data-kind="ad"] .hero__badge{display:inline-block;background:var(--gold);color:#fff;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:6px 15px;margin-bottom:16px;
  font-weight:600;}

.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:50%;
  backdrop-filter:blur(5px);transition:all .32s var(--ease);opacity:0;}
.hero:hover .hero__arrow{opacity:1;}
.hero__arrow:focus-visible{opacity:1;}
.hero__arrow:hover{background:rgba(255,255,255,.26);}
.hero__arrow--prev{left:22px;}
.hero__arrow--next{right:22px;}
.hero__arrow svg{width:19px;height:19px;stroke-width:1.6;}
.hero__dots{position:absolute;left:0;right:0;bottom:22px;z-index:5;display:flex;gap:9px;
  justify-content:center;}
.hero__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42);
  transition:all .32s var(--ease);border:0;padding:0;}
.hero__dot.is-active{background:#fff;width:26px;border-radius:5px;}

/* ---------- 2. GOLD INFO STRIP ---------- */
.goldstrip{background:var(--gold);color:#fff;text-align:center;padding:11px 24px;}
.goldstrip p{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;line-height:1.65;}

/* ---------- 3. BRAND PROMISE + SPARK SHIMMER ---------- */
.promise{text-align:center;padding:66px 0 60px;background:#fff;}
.promise .eyebrow{margin-bottom:20px;font-size:12.5px;font-weight:800;letter-spacing:.26em;
  color:var(--gold-dark);}
.promise__title{font-size:clamp(32px,4.1vw,50px);line-height:1.16;font-weight:400;margin-bottom:14px;}

/* CRITICAL: live sweeping diamond-glint shimmer across "Spark"
   background-position must stay within 0%–100% or the over-sized gradient
   slides off the text box entirely and the letters render transparent. */
.spark{position:relative;display:inline-block;
  background-image:linear-gradient(100deg,
     var(--ink) 0%, var(--ink) 38%,
     #D8BC90 45%, #F6E9D2 50%, #FFFFFF 52%, #F6E9D2 54%, #D8BC90 59%,
     var(--ink) 66%, var(--ink) 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sparkSweep 4.6s var(--ease) infinite;}
@keyframes sparkSweep{
  0%{background-position:100% 0;}
  60%,100%{background-position:0% 0;}
}
/* Safety net: if background-clip:text is unsupported, keep the word legible */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .spark{-webkit-text-fill-color:var(--ink);color:var(--ink);background:none;animation:none;}
  .spark::after{display:none;}
}
/* twinkling glint that rides across the word */
.spark::after{content:'';position:absolute;top:-8%;left:0;width:16px;height:116%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,245,225,.5) 42%,transparent 72%);
  filter:blur(.4px);opacity:0;animation:sparkGlint 4.2s var(--ease) infinite;}
@keyframes sparkGlint{
  0%{left:104%;opacity:0;transform:scale(.5);}
  8%{opacity:.9;transform:scale(1);}
  46%{opacity:.9;transform:scale(1);}
  55%{left:-8%;opacity:0;transform:scale(.5);}
  100%{left:-8%;opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .spark{animation:none;-webkit-text-fill-color:var(--ink);color:var(--ink);background:none;}
  .spark::after{display:none;}
}

.promise__sub{font-family:var(--serif-alt);font-size:23px;font-style:italic;font-weight:600;
  color:var(--ink);margin-bottom:32px;letter-spacing:.015em;}
.promise__cta{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}

/* ---------- 4. TRUST LOGOS ROW ---------- */
.trust{background:var(--bg-soft);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);padding:22px 0;}
.trust__row{display:flex;align-items:center;justify-content:center;gap:clamp(26px,5.4vw,74px);
  flex-wrap:wrap;}
.trust__item{display:flex;align-items:center;gap:11px;}
.trust__logo{height:34px;width:auto;flex-shrink:0;}
.trust__name{font-family:var(--serif);font-size:20px;letter-spacing:.03em;line-height:1;color:var(--ink);}
.trust__cert{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);
  display:block;margin-top:3px;}
/* Shipping + experience badges ~20% larger than the cert logos */
.trust__item--lg .trust__logo{height:41px;}
.trust__item--lg .trust__t1{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink);
  text-transform:uppercase;line-height:1.3;}
.trust__item--lg .trust__t2{font-size:11px;font-weight:600;letter-spacing:.11em;color:var(--ink-55);
  text-transform:uppercase;display:block;margin-top:2px;}

/* ---------- 5. OUR COLLECTION ---------- */
.collection{padding:56px 0 76px;background:#fff;}
.collection__head{text-align:center;margin-bottom:34px;}
.collection__head .eyebrow{margin-bottom:11px;}
.collection__head h2{font-size:clamp(27px,3.1vw,37px);}

.coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;}
.tile{position:relative;overflow:hidden;display:block;background:var(--bg-soft);
  aspect-ratio:16/9.35;}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease);}
.tile:hover img{transform:scale(1.055);}
.tile__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,0) 34%,rgba(20,20,20,.52) 100%);}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;z-index:2;display:block;}
.tile__title{display:block;font-family:var(--serif);font-size:clamp(19px,2.05vw,25px);color:#fff;
  font-weight:400;margin-bottom:5px;line-height:1.25;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.tile__desc{display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,.95);letter-spacing:.03em;
  margin-bottom:15px;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.4);}
.tile__link{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.72);
  padding:9px 16px;transition:all .32s var(--ease);background:rgba(255,255,255,.06);
  backdrop-filter:blur(3px);}
.tile:hover .tile__link{background:#fff;color:var(--ink);border-color:#fff;}

.story{padding:6px 34px 0 4px;display:flex;flex-direction:column;justify-content:center;}
.story .eyebrow{font-size:9.5px;letter-spacing:.24em;margin-bottom:13px;}
.story__title{font-size:clamp(23px,2.6vw,31px);line-height:1.28;margin-bottom:16px;font-weight:400;}
.story__title em{font-style:italic;color:var(--gold);}
.story__text{font-size:14px;line-height:1.95;color:var(--ink-70);margin-bottom:24px;max-width:450px;}
.story__stats{display:flex;gap:52px;padding:18px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);margin-bottom:18px;max-width:430px;}
.story__num{font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;display:block;
  margin-bottom:5px;}
.story__lab{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-55);}
.story__learn{margin-bottom:22px;}
.story__cta{display:flex;gap:13px;flex-wrap:wrap;}
.coll-photo{overflow:hidden;background:var(--bg-soft);}
.coll-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease);}
.coll-photo:hover img{transform:scale(1.04);}

/* ---------- 6. ART OF FINE DIAMONDS (infinite marquee) ---------- */
.shapes{background:var(--bg-soft);padding:52px 0 60px;overflow:hidden;}
.shapes__head{text-align:center;margin-bottom:30px;}
.shapes__head .eyebrow{margin-bottom:11px;}
.shapes__head h2{font-size:clamp(25px,2.95vw,35px);}
.shapes__viewport{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.shapes__track{display:flex;gap:18px;width:max-content;animation:shapeScroll 78s linear infinite;
  will-change:transform;}
.shapes__viewport:hover .shapes__track,
.shapes__track:focus-within{animation-play-state:paused;}
@keyframes shapeScroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.shape-card{width:230px;flex-shrink:0;text-align:center;}
.shape-card__img{width:100%;aspect-ratio:1;background:#161618;overflow:hidden;display:block;
  border:1px solid rgba(255,255,255,.06);}
.shape-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.shape-card:hover .shape-card__img img{transform:scale(1.09);}
.shape-card__label{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);padding:14px 0 0;transition:color .28s;}
.shape-card:hover .shape-card__label{color:var(--gold);}
.shapes__foot{text-align:center;margin-top:34px;}

/* ---------- 7. UNDERSTANDING THE 4Cs ---------- */
.edu{padding:74px 0 82px;background:#fff;}
.edu__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center;}
.edu__img{overflow:hidden;background:var(--bg-soft);aspect-ratio:16/11.2;}
.edu__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.edu__img:hover img{transform:scale(1.045);}
.edu__body .eyebrow{margin-bottom:13px;font-size:10px;letter-spacing:.26em;}
.edu__title{font-size:clamp(25px,2.85vw,34px);margin-bottom:16px;font-weight:400;}
.edu__text{font-size:14.5px;line-height:1.95;color:var(--ink-70);margin-bottom:28px;max-width:450px;}
.edu__list{display:grid;grid-template-columns:repeat(4,auto);gap:10px;margin-bottom:28px;
  justify-content:start;}
.edu__pill{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
  border:1px solid rgba(197,168,128,.5);padding:6px 13px;background:var(--gold-wash);}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .coll-grid{grid-template-columns:1fr;}
  .story{padding:4px 0;order:3;}
  .coll-photo{order:4;aspect-ratio:16/9.6;}
  .edu__grid{gap:44px;}
}
@media (max-width:900px){
  .hero{height:clamp(360px,64vw,470px);}
  .edu__grid{grid-template-columns:1fr;gap:32px;}
  .edu__img{aspect-ratio:16/10;}
  .promise{padding:50px 0 46px;}
  .trust__row{gap:24px 34px;}
  .shape-card{width:190px;}
  .story__stats{gap:36px;}
}
@media (max-width:600px){
  .hero__arrow{display:none;}
  .hero__meta i{display:block;height:0;overflow:hidden;margin:3px 0;}
  .promise__cta .btn,.story__cta .btn{width:100%;}
  .edu__list{grid-template-columns:repeat(2,auto);}
  .tile__body{padding:20px;}
  .shape-card{width:158px;}
  .trust__row{gap:18px 26px;}
  .trust__logo{height:28px;}
  .trust__name{font-size:16px;}
}

/* Certification tile (replaces the pendant photo in Our Collection) */
.coll-photo--cert{position:relative;display:block;background:#FBF7F1;overflow:hidden;}
.coll-photo--cert img{object-fit:cover;padding:0;}
.coll-photo--cert:hover img{transform:scale(1.03);}
.coll-photo__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;display:block;
  background:linear-gradient(180deg,rgba(20,18,14,0) 0%,rgba(20,18,14,.52) 45%,rgba(16,14,11,.82) 100%);}
.coll-photo__t{display:block;font-family:var(--serif);font-size:22px;color:#fff;
  font-weight:400;margin-bottom:4px;text-shadow:0 1px 14px rgba(0,0,0,.5);}
.coll-photo__d{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.5);}
.coll-photo__labs{display:flex;gap:7px;margin-top:12px;}
.coll-photo__labs span{font-size:10px;font-weight:800;letter-spacing:.14em;color:#fff;
  border:1px solid rgba(255,255,255,.55);padding:4px 11px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(3px);}
@media (max-width:600px){
  .coll-photo__t{font-size:16px;}
  .coll-photo__d{font-size:11px;}
}

/* ══════════════════════════════════════════════════════════════════
   STORY VIDEO SLOT  ("A legacy of brilliance, crafted in trust.")
   The <video> only appears once it has enough data to play, so a
   missing or slow file never leaves a black rectangle — the still
   photo underneath simply stays visible.
   ══════════════════════════════════════════════════════════════════ */
.coll-photo--media{position:relative;overflow:hidden;}
.coll-photo--media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .6s var(--ease);z-index:2;}
.coll-photo--media.has-video video{opacity:1;}
.coll-photo--media.has-video picture{opacity:0;transition:opacity .6s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .coll-photo--media video{display:none;}
  .coll-photo--media.has-video picture{opacity:1;}
}

/* ---------- "A better way to buy" ---------- */
.smarter{padding:70px 0;background:linear-gradient(180deg,#FBF8F3,#fff);
  border-top:1px solid var(--line);text-align:center;}
.smarter__k{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-bottom:14px;}
.smarter__h{font-family:Georgia,serif;font-size:36px;line-height:1.25;color:var(--ink);
  margin-bottom:16px;font-weight:400;}
.smarter__p{font-size:15px;color:var(--ink-70);max-width:560px;margin:0 auto 34px;line-height:1.7;}
.smarter__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:840px;margin:0 auto 34px;}
.smarter__s{display:flex;gap:13px;align-items:flex-start;text-align:left;}
.smarter__s b{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gold);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;}
.smarter__s span{font-size:14px;color:var(--ink);line-height:1.55;padding-top:4px;}
.smarter__cmp{font-size:16px;color:var(--ink);line-height:1.8;margin-bottom:28px;}
.smarter__cmp b{color:var(--gold-deep);}
@media(max-width:820px){
  .smarter{padding:48px 0;}
  .smarter__h{font-size:27px;}
  .smarter__steps{grid-template-columns:1fr;gap:16px;max-width:380px;}
}

/* ------------------------------------------------------------------
   HERO ON A PHONE — the two lines under the headline
   Reported 8 Aug 2026: "Worldwide Shipping" and "30 Years" came out
   almost as large as the headline itself.

   Why: both sizes use clamp() with a vw middle value. On a 390px
   screen 2.55vw is only 10px, so clamp falls back to its MINIMUM —
   19px for the subtitle. The headline meanwhile lands near 30px.
   19 against 30 is not a hierarchy, it is two headlines fighting.

   Fixed sizes below that width, set against the headline rather than
   guessed. Must come after the base rules to win on source order.
   ------------------------------------------------------------------ */
@media (max-width:600px){
  .hero__title{font-size:29px;line-height:1.18;}
  .hero__sub{font-size:15.5px;margin-top:7px;letter-spacing:.02em;}
  .hero__meta{font-size:9px;letter-spacing:.2em;margin-top:16px;line-height:1.7;}
}
@media (max-width:400px){
  .hero__title{font-size:25px;}
  .hero__sub{font-size:14px;}
  .hero__meta{font-size:8.5px;letter-spacing:.16em;}
}