/* Inset carousel tiles, each with three approved individual gemstone photographs. */
.hero-banner{height:650px;position:relative;isolation:isolate;background:var(--paper);color:#faf8f0;overflow:hidden;touch-action:pan-y}
.hero-slides{position:absolute;inset:24px 0 86px}
.hero-slide{position:absolute;top:0;bottom:0;left:50%;width:min(1280px,calc(100% - 144px));opacity:0;visibility:hidden;transform:translateX(-50%);transition:transform .85s ease,opacity .85s ease,visibility .85s;overflow:hidden;pointer-events:none;background:var(--scene-colour);border-radius:12px;box-shadow:0 8px 24px #443c3b12}
.hero-slide:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 25%,#ffffff18,transparent 60%),linear-gradient(0deg,#392f2d33,transparent 50%)}
.hero-slide.is-prev{opacity:.55;visibility:visible;transform:translateX(calc(-150% - 20px))}
.hero-slide.is-next{opacity:.55;visibility:visible;transform:translateX(calc(50% + 20px))}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);z-index:1}
.hero-banner-inner{position:relative;height:100%;width:calc(100% - 80px);display:flex;align-items:center;pointer-events:none;z-index:2}
.hero-banner .hero-copy{padding:0;max-width:540px;width:43%;pointer-events:auto}
.hero-banner .eyebrow{color:#f0dfb8;margin-bottom:25px;font-size:16px;letter-spacing:1.4px}
.hero-banner .small-line{background:#e2c892}
.hero-banner-title{font-size:clamp(48px,4.4vw,70px);line-height:1.08;color:#faf8f0;letter-spacing:-.035em}
.hero-banner-title em{color:#e2c892;font-weight:400}
.hero-banner .hero-copy .button{margin-top:32px;background:#f6f3e8;color:var(--accent);border-color:#f6f3e8}
.hero-banner .hero-copy .button:hover{background:#e7dfcd;border-color:#e7dfcd}
.hero-mosaic{position:absolute;inset:40px 4% 40px 47%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center;pointer-events:none}
.mosaic-photo{height:75%;overflow:hidden;box-shadow:0 15px 50px #392f2d50;background:#fff;position:relative}
.mosaic-photo:after{content:'';position:absolute;inset:0;border:1px solid #f5e7c750;pointer-events:none}
.mosaic-photo img{width:100%;height:100%;object-fit:contain;transform:scale(1.015);object-position:center}
.mosaic-photo-1{transform:rotate(-5deg);height:65%}.mosaic-photo-2{height:90%;transform:translateY(-12px)}.mosaic-photo-3{height:72%;transform:rotate(5deg) translateY(20px)}
.mosaic-2{gap:14px}.mosaic-2 .mosaic-photo-1{height:78%;transform:translateY(20px) rotate(-3deg)}.mosaic-2 .mosaic-photo-2{height:auto;aspect-ratio:1;border-radius:50%;transform:translateY(-45px);box-shadow:0 0 0 9px #f1d99d40,0 15px 50px #392f2d50}.mosaic-2 .mosaic-photo-3{height:85%;transform:rotate(3deg)}
.mosaic-3 .mosaic-photo-1{height:87%;transform:rotate(-4deg)}.mosaic-3 .mosaic-photo-2{height:63%;transform:translateY(35px)}.mosaic-3 .mosaic-photo-3{height:82%;transform:rotate(4deg) translateY(-20px)}
.mosaic-4 .mosaic-photo-1{height:74%;transform:rotate(-4deg) translateY(-20px)}.mosaic-4 .mosaic-photo-2{height:90%;transform:translateY(14px)}.mosaic-4 .mosaic-photo-3{height:67%;transform:rotate(4deg)}
.hero-slide.is-active .mosaic-photo img{animation:hero-drift 4s ease-out both}
.hero-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;z-index:4;padding:3px 8px}
.hero-controls button{color:var(--accent);border:0;background:transparent;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%}
.hero-controls button:hover{background:#65545212}.hero-arrow{font-size:24px}.hero-dots{display:flex;gap:0}.hero-dots button{min-width:36px}
.hero-dots span{display:block;width:7px;height:7px;border-radius:50%;background:#65545255;transition:width .3s,background .3s}
.hero-dots [aria-pressed=true] span{width:22px;border-radius:5px;background:var(--accent)}
@keyframes hero-drift{from{transform:scale(1.015)}to{transform:scale(1.085)}}
@media(min-width:1700px){.hero-banner{height:700px}.hero-slide{width:calc(100% - 220px);max-width:1600px}.hero-banner-title{font-size:76px}.hero-mosaic{gap:25px}}
@media(max-width:1050px){.hero-banner{height:600px}.hero-slide{width:calc(100% - 80px)}.hero-banner-inner{width:calc(100% - 56px)}.hero-banner-title{font-size:48px}.hero-banner .eyebrow{font-size:15px;letter-spacing:.9px}.hero-mosaic{left:49%;right:3%;gap:13px}.hero-banner .hero-copy .button{font-size:16px;padding-inline:20px;gap:18px}}
@media(max-width:760px){
  .hero-banner{height:710px}.hero-slides{inset:16px 0 84px}.hero-slide{width:calc(100% - 40px);border-radius:10px}
  .hero-slide.is-prev{transform:translateX(calc(-150% - 10px))}.hero-slide.is-next{transform:translateX(calc(50% + 10px))}
  .hero-banner-inner{align-items:flex-end;text-align:center;width:100%}
  .hero-banner .hero-copy{max-width:none;width:100%;padding:0 20px 36px}
  .hero-banner .eyebrow{font-size:15px;letter-spacing:.7px;margin-bottom:14px}.hero-banner .small-line{display:none}
  .hero-banner-title{font-size:clamp(37px,8vw,52px)}.hero-banner .hero-copy .button{margin-top:22px}
  .hero-mosaic,.mosaic-2{inset:24px 20px auto;height:280px;gap:13px}
  .mosaic-photo-1{height:65%}.mosaic-photo-2{height:88%}.mosaic-photo-3{height:70%}
  .hero-controls{bottom:18px;gap:2px;padding:4px 7px;max-width:calc(100% - 30px)}.hero-dots button{min-width:32px}
}
@media(max-width:360px){.hero-banner{height:685px}.hero-mosaic{inset-inline:16px;gap:10px;height:250px}.hero-banner .hero-copy{padding-inline:16px}.hero-banner-title{font-size:36px}.hero-controls button{min-width:38px}.hero-dots button{min-width:28px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-dots span{transition:none}.hero-slide.is-active .mosaic-photo img{animation:none}}
