:root{
  --wine:#7b1730; --rose:#d96c7d; --cream:#fff4ec; --blush:#f8d8d9;
  --ink:#2b1715; --gold:#c99a4a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia,'Times New Roman',serif;background:var(--cream);color:var(--ink)}
a{text-decoration:none;color:inherit}
.topbar{background:var(--wine);color:white;padding:10px 6%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:15px}
nav{background:#140b09;color:white;padding:14px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:10}
.logo{font-size:28px;color:#ffd6cf;font-style:italic}
.navlinks{display:flex;gap:18px;flex-wrap:wrap}
.navlinks a:hover{color:#ffb7c1}
.btn{display:inline-block;background:var(--rose);color:white;padding:13px 22px;border-radius:6px;border:1px solid #ffc5c5;font-weight:bold;letter-spacing:.5px}
.btn.dark{background:#23110d}
.hero{min-height:78vh;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25)),url('assets/gloria-jeans-design.png') center/cover no-repeat;color:white;padding:80px 6%;display:flex;align-items:center}
.hero-content{max-width:620px}
.hero h1{font-size:62px;line-height:1.02;margin:0 0 18px}
.script{font-style:italic;color:#ffb7c1}
.hero p{font-size:22px;line-height:1.5}
.section{padding:60px 6%}
.section h2{text-align:center;font-size:44px;color:var(--wine);font-style:italic;margin:0 0 10px}
.section .sub{text-align:center;max-width:760px;margin:0 auto 36px;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:white;border:1px solid #e1b8a5;border-radius:14px;padding:24px;box-shadow:0 8px 20px rgba(70,20,20,.08)}
.card h3{color:var(--wine);font-size:26px;margin:0 0 10px}
.price{font-size:34px;color:var(--wine);font-weight:bold}
ul{padding-left:20px;line-height:1.8}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;background:#fff8f3;padding:28px 6%;border-top:1px solid #e4b9aa;border-bottom:1px solid #e4b9aa}
.feature{font-weight:bold;color:var(--wine)}
.gallery img,.hero-shot{width:100%;border-radius:14px;border:4px solid white;box-shadow:0 8px 22px rgba(0,0,0,.2)}
form{max-width:720px;margin:auto;background:white;padding:28px;border-radius:14px;border:1px solid #e1b8a5}
input,select,textarea{width:100%;padding:13px;margin:8px 0 16px;border:1px solid #d6b2a5;border-radius:6px;font-size:16px}
footer{background:var(--wine);color:white;text-align:center;padding:35px 6%}
.banner{background:linear-gradient(90deg,var(--blush),#fff3e8);text-align:center;padding:35px 6%;font-size:28px;color:var(--wine);font-style:italic}
@media(max-width:700px){.hero h1{font-size:42px}.hero{padding:60px 6%}.navlinks{font-size:14px}.topbar{font-size:13px}}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reference-page {
  min-width: 320px;
  background: #3a1419;
}

.reference-shell {
  width: 100%;
  min-height: 100vh;
}

.reference-canvas {
  position: relative;
  width: min(100%, 1024px);
  margin: 0 auto;
  overflow: hidden;
  background: #f8e8dc;
  box-shadow: 0 0 70px rgba(20, 5, 7, 0.58);
  animation: artwork-reveal 700ms ease-out both;
}

.reference-artwork {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspots {
  position: static;
  display: block;
  padding: 0;
  background: transparent;
}

.section-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 1rem;
}

.home-anchor { top: 0; }
.about-anchor { top: 35.6%; }
.services-anchor { top: 39.8%; }
.packages-anchor { top: 61.8%; }
.gallery-anchor { top: 81%; }
.testimonials-anchor { top: 81%; }
.contact-anchor { top: 93.2%; }

.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 0.35rem;
  outline: 0 solid transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hotspot:hover {
  background: rgba(255, 225, 219, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 225, 0.28);
}

.hotspot:focus-visible {
  background: rgba(255, 236, 232, 0.16);
  box-shadow: 0 0 0 3px #fff3ed, 0 0 0 6px #a62745;
}

.hotspot:active {
  transform: scale(0.98);
}

.home-link { left: 25.4%; top: 2.8%; width: 5.8%; height: 2.5%; }
.about-link { left: 31.2%; top: 2.8%; width: 6.6%; height: 2.5%; }
.services-link { left: 37.8%; top: 2.8%; width: 6.8%; height: 2.5%; }
.packages-link { left: 44.5%; top: 2.8%; width: 7.1%; height: 2.5%; }
.menu-link { left: 51.7%; top: 2.8%; width: 13.7%; height: 2.5%; }
.gallery-link { left: 65.4%; top: 2.8%; width: 6.8%; height: 2.5%; }
.testimonials-link { left: 72.2%; top: 2.8%; width: 8.6%; height: 2.5%; }
.contact-link { left: 80.8%; top: 2.8%; width: 6.8%; height: 2.5%; }
.phone-link { left: 72.1%; top: 0.1%; width: 10.1%; height: 2.2%; }
.email-link { left: 82.2%; top: 0.1%; width: 14.7%; height: 2.2%; }
.top-quote-link { left: 82.3%; top: 5.1%; width: 15.1%; height: 2.6%; }
.hero-quote-link { left: 4.3%; top: 32.5%; width: 17.4%; height: 2.8%; }
.hero-book-link { left: 22.4%; top: 32.5%; width: 18.7%; height: 2.8%; }
.bottom-quote-link { left: 67.4%; top: 96.8%; width: 18.4%; height: 2.6%; }

@keyframes artwork-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reference-canvas { animation: none; }
  .hotspot { transition: none; }
}