/* =========================================================================
   YANTRAA by Neha Ashish Bihani — luxury bespoke Indian couture
   Brand system (from Brand Book): Burgundy Red #941113, Doe Brown #C5A059,
   Earth Brown #120a08 (the brand card stock). Type: Playfair Display + Montserrat.
   "Sacred Geometry. Timeless Luxury."
   ========================================================================= */
:root {
  --bg:        #120a08;
  --bg-2:      #190f0d;
  --bg-3:      #211410;
  --burgundy:       #941113;
  --burgundy-deep:  #4a0a0c;
  --burgundy-soft:  rgba(148, 17, 19, 0.35);
  --gold:      #c5a059;   /* Doe Brown */
  --gold-2:    #b08c45;
  --gold-bright: #e3c281;
  --cream:     #f4ede0;
  --muted:     rgba(244, 237, 224, 0.64);
  --muted-2:   rgba(244, 237, 224, 0.40);
  --line:      rgba(197, 160, 89, 0.22);
  --line-soft: rgba(244, 237, 224, 0.10);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --maxw: 1240px;
  --shadow: 0 24px 60px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
/* The browser's own [hidden]{display:none} is only a UA-level rule, so ANY
   author `display` declaration silently beats it and el.hidden = true stops
   working. This site toggles .hidden from JS in several places and has been
   bitten by that three times (.nav-avatar, then .qr-expired showing over a
   live QR, .cart-count stuck on "0", .upl-trash showing with no file
   attached). One authoritative rule instead of a per-class patch each time. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; }
h2 {
  line-height: 1.3; /* Increased to prevent clipping of letters with descenders due to background-clip */
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

/* page-wide warm grain / vignette */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(148,17,19,0.22), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(197,160,89,0.06), transparent 60%);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; position: relative; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 4px;
  font-size: 12px; font-weight: 600; color: var(--gold);
}
.lead { color: var(--muted); font-size: 18px; max-width: 640px; margin: 18px auto 0; }
.gold-text { color: var(--gold); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 12.5px; font-weight: 600; padding: 16px 32px; border: 1px solid transparent;
  cursor: pointer; transition: all .25s ease; background: none; color: var(--cream);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1208; box-shadow: 0 10px 30px rgba(197,160,89,.18);
}
.btn-gold:hover { box-shadow: 0 16px 38px rgba(197,160,89,.30); }
.btn-outline { border-color: var(--gold-2); color: var(--gold); }
.btn-outline:hover { background: rgba(197,160,89,.10); border-color: var(--gold); }
.btn-ghost { border-color: rgba(244,237,224,.25); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-block { width: 100%; }

.link-gold {
  display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase;
  letter-spacing: 2.5px; font-size: 12px; font-weight: 600; color: var(--gold);
}
.link-gold .arrow { transition: transform .25s ease; }
.link-gold:hover .arrow { transform: translateX(5px); }

/* ---------------------------------------------------------------- navbar */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: padding .3s ease;
  padding: 24px 0;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, border-color .3s ease;
}
.nav.scrolled {
  padding: 14px 0;
}
.nav.scrolled::before {
  background: rgba(18,10,8,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 46px; width: auto; display: block; }
.brand .brand-name {
  font-family: var(--font-display); font-size: 26px; color: var(--gold);
  letter-spacing: 1px; line-height: 1; font-weight: 600;
}
.brand .brand-sub {
  text-transform: uppercase; letter-spacing: 4px; font-size: 9.5px;
  color: var(--muted); margin-top: 4px;
}
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-links a.navlink {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px; color: var(--cream);
  padding-bottom: 4px; position: relative; opacity: .82; transition: color .2s, opacity .2s; font-weight: 400;
}
.nav-links a.navlink:hover { color: var(--gold); opacity: 1; }
.nav-links a.navlink.active { color: var(--gold); opacity: 1; }
.nav-links a.navlink.active::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold);
}
.nav-actions { display: flex; align-items: center; gap: 22px; }
.cart-link { position: relative; display: inline-flex; align-items: center; color: var(--cream); transition: color .2s; }
.cart-link:hover { color: var(--gold); }
.cart-link svg { width: 23px; height: 23px; }
.cart-count {
  position: absolute; top: -9px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--burgundy); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans);
  transition: transform .2s ease; box-shadow: 0 0 0 2px var(--bg);
}
.cart-count.bump { transform: scale(1.35); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); color: var(--cream);
  cursor: pointer; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; border-radius: 2px;
  transition: all .25s ease; position: relative; z-index: 220;
}
.nav-toggle:hover, .nav-toggle.active { border-color: var(--gold); color: var(--gold); background: rgba(197,160,89,.12); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(8, 5, 4, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
.nav-drawer-head { display: none; }

/* ---------------------------------------------------------------- hero */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
}
/* cinematic crossfade slideshow with Ken Burns drift */
.hero-stage { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.16);
  transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1);
}
/* video slides fill the stage exactly like a background-size:cover image */
.hero-slide.is-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* .zoom and .show are separate on purpose: opacity fades out while the zoom
   keeps running, so the transform never snaps back part-way through a fade */
.hero-slide.zoom { animation: kenburns var(--hero-zoom, 9400ms) linear forwards; }
.hero-slide.show { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.16); } to { transform: scale(1.0); } }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -5%, rgba(148,17,19,.30), transparent 55%),
    /* soft scrim only behind the centred text (keeps it readable) */
    radial-gradient(74% 62% at 50% 50%, rgba(9,6,4,.28), transparent 72%),
    /* light, even wash - no corner vignette so the red velvet shows through */
    linear-gradient(rgba(17,9,8,.05), rgba(18,10,8,.16));
}
/* warm film grain */
.hero-grain {
  position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)} 40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,1%)} }
/* floating gold embroidery flecks */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fleck { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), rgba(197,160,89,0)); opacity: 0; animation: rise linear infinite; }
@keyframes rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  85% { opacity: .5; }
  100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 1; pointer-events: none;
}
.hero-content { position: relative; z-index: 2; padding: 96px 24px 118px; max-width: 900px; }
/* Soft scrim behind the logo + headline only. One of the hero slides is nearly
   white down its left side, where cream text and the gold logo would vanish.
   This protects the text without darkening the whole stage back down. */
.hero-content::before {
  content: ''; position: absolute; inset: -6% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 54% at 50% 46%,
    rgba(12,7,6,.62), rgba(12,7,6,.34) 55%, rgba(12,7,6,0) 78%);
}
.hero-logo { display: flex; justify-content: center; }
.hero-logo img {
  width: min(600px, 84vw); height: auto; display: block;
  /* Layered shadows lift the logo off the fabric. Four stops rather than a
     single blur: a tight contact shadow for edge definition, two mid falloffs
     for depth, and a wide gold bloom so it reads as lit rather than pasted on.
     Strengthened 31 Jul - the scrim behind the hero text was swallowing the
     original values, which left the logo looking flat against the silk. */
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.72))
          drop-shadow(0 6px 14px rgba(0,0,0,.50))
          drop-shadow(0 14px 34px rgba(0,0,0,.42))
          drop-shadow(0 22px 72px rgba(197,160,89,.24));
}
.hero-by { text-transform: uppercase; letter-spacing: 6px; font-size: 12px; color: var(--muted); margin: 16px 0 30px; }
/* Hero line stays on Playfair, the site's display face - a traditional
   high-contrast serif. Set upright rather than italic, a size up and with a
   little tracking, so it reads as more deliberate than the headings without
   introducing a second display font. */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 500;
  color: var(--cream);
  letter-spacing: .04em;
  line-height: 1.2;
  margin: 18px 0 24px;
  font-style: normal;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.hero p {
  color: var(--cream); opacity: .92; font-size: 18px; max-width: 660px;
  margin: 0 auto 38px; text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
/* equal-width CTA pairs (sized to the longest label sitewide) */
.hero-cta .btn { min-width: 380px; }
@media (max-width: 860px) { .hero-cta .btn { min-width: min(380px, 88vw); } }
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: var(--muted-2); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint .dot { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; }
/* short viewports: the hint would crowd the CTAs - drop it */
@media (max-height: 820px) { .scroll-hint { display: none; } }
@keyframes scrollPulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }

/* ---------------------------------------------------------------- designer split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.designer-img { position: relative; }
.designer-img img { width: 100%; height: 540px; object-fit: cover; object-position: center 55%; border: 1px solid var(--line); }
.designer-img::after {
  content: ''; position: absolute; inset: 14px; border: 1px solid var(--gold-2); opacity: .5;
  pointer-events: none; mix-blend-mode: screen;
}
.designer-text h2 { font-size: clamp(32px, 4vw, 50px); margin: 14px 0 22px; }
.designer-text p { color: var(--muted); margin-bottom: 18px; font-size: 16.5px; }
.signature { font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--gold); margin: 8px 0 26px; }

/* ---------------------------------------------------------------- category cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.cat-card { position: relative; height: 480px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; filter: brightness(.82); }
.cat-card:hover img { transform: scale(1.07); }
.cat-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,6,5,.92) 0%, rgba(11,6,5,.15) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 32px;
}
.cat-card h3 { font-size: 34px; color: var(--cream); margin-bottom: 10px; }

/* ---------------------------------------------------------------- page head */
.page-head { padding: calc(max(170px, env(safe-area-inset-top, 0px) + 110px)) 0 40px; text-align: center; position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(34px, 6vw, 84px); color: var(--cream); margin: 12px 0 18px; text-wrap: balance; }

/* ---------------------------------------------------------------- filters */
.filters { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 8px 0 54px; }
.filter {
  background: rgba(25,15,13,.6); border: 1px solid var(--line); color: var(--muted);
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 500;
  padding: 12px 28px; cursor: pointer; transition: all .2s ease; font-family: var(--font-sans);
}
.filter:hover { color: var(--cream); border-color: var(--gold-2); }
.filter.active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1208; border-color: var(--gold); }

/* ------------------------------------------- gallery shelves (horizontal rows) */
.shelf { margin-bottom: 70px; }
.shelf:last-of-type { margin-bottom: 0; padding-bottom: 120px; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.shelf-head h2 { font-size: clamp(28px, 3.6vw, 42px); }
.shelf-tag { color: var(--muted); margin-top: 6px; font-size: 15px; }
.shelf-arrows { display: flex; gap: 10px; flex: 0 0 auto; }
.shelf-arrow {
  width: 46px; height: 46px; border: 1px solid var(--gold-2); background: rgba(25,15,13,.6);
  color: var(--gold); font-size: 18px; cursor: pointer; transition: all .2s ease;
}
.shelf-arrow:hover { background: rgba(197,160,89,.12); border-color: var(--gold); }

/* ------------------------------------------- tabs for limited edition */
.tabs-container { margin-top: 10px; }
.tabs-header { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn {
  background: rgba(25,15,13,.6); border: 1px solid var(--line); color: var(--muted);
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 500;
  padding: 12px 28px; cursor: pointer; transition: all .3s ease; font-family: var(--font-sans);
}
.tab-btn:hover { color: var(--cream); border-color: var(--gold-2); background: rgba(197,160,89,.10); }
.tab-btn.active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1208; border-color: var(--gold); }
.tabs-body { position: relative; }
.tab-content { display: none; opacity: 0; transition: opacity .4s ease; }
.tab-content.active { display: block; opacity: 1; }

.shelf-row {
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 4px 4px 18px; scrollbar-width: thin;
  scrollbar-color: var(--gold-2) transparent;
}
/* One whole tile has to sit inside the viewport, button and all. At 300px wide
   with a 380px image the card came to 707px, which never fit a 720px viewport
   once the 47px nav was accounted for. Height is reclaimed from the widths and
   the clamp below rather than by cropping harder: the photography is 1122x1402
   (exactly 4:5), so the wrap now carries that ratio instead of a fixed pixel
   height and the models are never cut off. */
.shelf-row .product { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; }
.shelf-row .product .img-wrap { height: auto; aspect-ratio: 4 / 5; }
.shelf-row::-webkit-scrollbar { height: 6px; }
.shelf-row::-webkit-scrollbar-track { background: transparent; }
.shelf-row::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 18%, var(--gold-2) 82%, transparent);
}
@media (max-width: 640px) { .shelf-arrows { display: none; } }

/* ---------------------------------------------------------------- product grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-bottom: 130px; }
.product {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-2); display: flex; flex-direction: column;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product:hover { transform: translateY(-6px); border-color: var(--gold-2); box-shadow: var(--shadow); }
.product .img-wrap { height: 420px; overflow: hidden; position: relative; cursor: pointer; }
.product .img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .8s ease; }
.product[data-id="bandhani-bridal-drape"] .img-wrap img,
.product[data-id="sunlit-charm"] .img-wrap img,
img[src*="sar.1."],
img[src*="sar.1.1"],
img[src*="iw.9."] { object-position: center 15%; }
.product:hover .img-wrap img { transform: scale(1.07); }
.product .quickview {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11,6,5,.45); opacity: 0; transition: opacity .25s ease;
}
.product .quickview span {
  border: 1px solid var(--gold); color: var(--gold); padding: 10px 20px; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; background: rgba(18,10,8,.6);
}
.product .img-wrap:hover .quickview { opacity: 1; }
.product .body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.product .tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.product h3 { font-size: 23px; margin: 8px 0 8px; color: var(--cream); }
/* Capped at three lines so every tile is the same height and the whole card
   clears the fold. The full description is one tap away in quick-view. */
.product .desc {
  color: var(--muted); font-size: 13.5px; flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
.product .fabric {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2);
}
.product .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; }
.product .price { font-family: var(--font-display); font-size: 24px; color: var(--gold); font-weight: 600; }
.btn-add {
  background: transparent; border: 1px solid var(--gold-2); color: var(--gold);
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px;
  font-weight: 600; padding: 11px 16px; cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.btn-add:hover { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1208; border-color: var(--gold); }

.empty { text-align: center; padding: 80px 0 130px; color: var(--muted); }
.empty .sym { font-family: var(--font-display); font-size: 60px; color: var(--gold-2); font-style: italic; }
.empty p { margin-top: 12px; font-size: 17px; }

/* ---------------------------------------------------------------- quick-view modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(8,5,4,.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-2); border: 1px solid var(--line); max-width: 940px; width: 100%;
  height: 650px; max-height: 90vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(20px); transition: transform .3s ease; box-shadow: var(--shadow);
}
.modal-overlay.open .modal { transform: none; }
.modal-img { position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%; background: var(--bg-2); }
.carousel-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* width + slide width are set inline by qmBuildCarousel - slide count varies by category */
.carousel-track { display: flex; width: 400%; height: 100%; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.carousel-slide { width: 25%; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Size-chart slide: show the whole document, never crop it. */
.carousel-slide.is-chart { background: #fefbf2; }
.carousel-slide.is-chart img { object-fit: contain; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(18, 10, 8, 0.4); border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 20; transition: all 0.3s ease;
}
.carousel-arrow:hover { background: rgba(18, 10, 8, 0.7); border-color: var(--gold); transform: translateY(-50%) scale(1.1); }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4);
  cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(197, 160, 89, 0.6);
}
.carousel-dot.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-2));
  transform: scale(1.25); box-shadow: 0 0 8px rgba(197, 160, 89, 0.8); border-color: transparent;
}
.modal-body { padding: 44px; position: relative; height: 100%; overflow: hidden; box-sizing: border-box; }
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 100 !important;
  width: 42px; height: 42px; min-width: 42px; min-height: 42px;
  border-radius: 50%; background: rgba(18, 10, 8, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold); color: var(--gold-bright); padding: 0; margin: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .25s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.85);
}
.modal-close svg {
  display: block; width: 18px; height: 18px; stroke: var(--gold); margin: 0; pointer-events: none;
}
.modal-close:hover { background: var(--burgundy); border-color: var(--gold-bright); transform: scale(1.08); }
.modal-close:hover svg { stroke: #ffffff; }
.modal-body .tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.modal-body h2 { font-size: 38px; margin: 10px 0 16px; }
.modal-body .m-desc { color: var(--muted); font-size: 15.5px; margin-bottom: 20px; }
.modal-body .m-meta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin-bottom: 22px; }
.modal-body .m-meta div { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.modal-body .m-meta span:first-child { color: var(--muted-2); text-transform: uppercase; letter-spacing: 1.5px; }
.modal-body .m-price { font-family: var(--font-display); font-size: 34px; color: var(--gold); margin-bottom: 24px; }

/* ---------------------------------------------------------------- style quiz */
.quiz {
  min-height: 100vh; position: relative; display: flex; align-items: center; padding: 160px 0 100px;
  overflow: hidden;
}
.quiz-bg { position: absolute; inset: 0; z-index: 0; }
.quiz-bg img { width: 100%; height: 100%; object-fit: cover; }
.quiz-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18,10,8,.84), rgba(18,10,8,.92)); }
.quiz .container { position: relative; z-index: 2; }
.quiz-card { width: 100%; max-width: 940px; margin: 0 auto; }
.quiz-progress { height: 2px; background: rgba(244,237,224,.12); margin-bottom: 46px; }
.quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .45s ease; }
.quiz-step { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.quiz h2 { font-size: clamp(30px, 4.6vw, 50px); margin: 14px 0 40px; color: var(--cream); }
.options { display: flex; flex-direction: column; gap: 14px; }
.option {
  text-align: left; background: rgba(25,15,13,.55); border: 1px solid var(--line); color: var(--cream);
  padding: 22px 26px; font-size: 16.5px; cursor: pointer; transition: all .2s ease;
  font-family: var(--font-sans); font-weight: 300; display: flex; align-items: center; gap: 16px;
}
.option .opt-mark { width: 18px; height: 18px; border: 1px solid var(--gold-2); border-radius: 50%; flex: none; transition: all .2s; }
.option:hover { border-color: var(--gold-2); background: rgba(148,17,19,.30); }
.option.selected { border-color: var(--gold); background: rgba(197,160,89,.12); box-shadow: 0 0 0 1px var(--gold) inset; }
.option.selected .opt-mark { background: var(--gold); box-shadow: 0 0 0 3px rgba(197,160,89,.25) inset; }
.quiz-nav { display: flex; gap: 16px; margin-top: 40px; }
.quiz-nav .btn-gold { flex: 1; }

.result { max-width: 1040px; margin: 0 auto; text-align: center; }
.result h2 { font-size: clamp(34px, 5vw, 58px); margin: 12px 0 16px; }
.result .rec-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 46px 0; }

/* ---------------------------------------------------------------- forms */
.form-wrap { max-width: 900px; margin: 0 auto; }
.form-card { background: var(--bg-2); border: 1px solid var(--line); padding: 52px; }
.form-section-label {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
  margin: 40px 0 22px; font-weight: 600;
}
.form-section-label:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11.5px; letter-spacing: 1.5px; color: var(--muted-2); margin-bottom: 9px; text-transform: uppercase; }
.field input, .field select, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--cream);
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 300; padding: 12px 2px; transition: border-color .2s ease;
}
.field textarea { border: 1px solid var(--line); padding: 16px; min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field select { cursor: pointer; }
.field select option { background: var(--bg-2); color: var(--cream); }
.form-submit { margin-top: 44px; }
.form-submit .btn { width: 100%; padding: 20px; }

.alert { padding: 15px 20px; border: 1px solid var(--line); margin-top: 20px; font-size: 14px; }
.alert.err { border-color: #b5535c; color: #f0b7bc; background: rgba(120,30,38,.2); }
.field-error input, .field-error textarea { border-color: #b5535c !important; }

.success-box { text-align: center; padding: 80px 40px; border: 1px solid var(--line); background: var(--bg-2); }
.success-box .sym { font-family: var(--font-display); font-size: 70px; color: var(--gold); font-style: italic; }
.success-box h2 { font-size: 42px; margin: 16px 0 14px; }
.success-box p { color: var(--muted); max-width: 480px; margin: 0 auto 26px; }

/* ---------------------------------------------------------------- cart */
.cart-wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 44px; align-items: start; padding-bottom: 120px; }
.cart-items { display: flex; flex-direction: column; gap: 18px; }
.cart-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 22px; align-items: center; border: 1px solid var(--line); background: var(--bg-2); padding: 18px; }
.cart-item img { width: 110px; height: 130px; object-fit: cover; }
.cart-item .ci-info .tag { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.cart-item .ci-info h3 { font-size: 21px; margin: 6px 0 4px; }
.cart-item .ci-info .ci-price { color: var(--muted); font-size: 14px; }
.cart-item .ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); }
.qty button { background: none; border: none; color: var(--cream); width: 34px; height: 34px; cursor: pointer; font-size: 17px; transition: color .2s; }
.qty button:hover { color: var(--gold); }
.qty span { width: 40px; text-align: center; font-size: 14px; }
.ci-remove { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; transition: color .2s; }
.ci-remove:hover { color: #d98b91; }
.ci-subtotal { font-family: var(--font-display); font-size: 22px; color: var(--gold); }

.cart-summary { border: 1px solid var(--line); background: var(--bg-2); padding: 34px; position: sticky; top: 110px; }
.cart-summary h3 { font-size: 28px; margin-bottom: 24px; }
.summary-row { display: flex; justify-content: space-between; padding: 11px 0; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.summary-row.total { border-bottom: none; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 20px; color: var(--cream); font-size: 16px; }
.summary-row.total .amt { font-family: var(--font-display); font-size: 28px; color: var(--gold); }
.cart-summary .btn { margin-top: 26px; }
.cart-note { font-size: 12px; color: var(--muted-2); margin-top: 16px; text-align: center; line-height: 1.6; }

/* ---------------------------------------------------------------- toast */
.toast-wrap { position: fixed; bottom: 28px; right: 28px; z-index: 400; display: flex; flex-direction: column; gap: 12px; }
.toast {
  background: rgba(25,15,13,.96); border: 1px solid var(--gold-2); border-left: 3px solid var(--gold);
  color: var(--cream); padding: 16px 22px; min-width: 280px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; font-size: 14px;
  transform: translateX(120%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show { transform: none; }
.toast .t-icon { color: var(--gold); font-size: 18px; }
.toast a { color: var(--gold); text-decoration: underline; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }

/* ---------------------------------------------------------------- footer */
.footer { background: linear-gradient(var(--bg), #0e0705); border-top: 1px solid var(--line); padding: 76px 0 36px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 44px; }
.footer .brand-name { font-family: var(--font-display); font-size: 30px; color: var(--gold); }
.footer .brand-sub { text-transform: uppercase; letter-spacing: 4px; font-size: 9.5px; color: var(--muted); margin: 5px 0 18px; }
.footer .footer-logo { height: 58px; width: auto; display: block; margin-bottom: 20px; }
.footer p { color: var(--muted); font-size: 14px; max-width: 290px; }
.footer h4 { font-family: var(--font-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 600; }
.footer li { margin-bottom: 11px; }
.footer li a, .footer .addr { color: var(--muted); font-size: 14px; transition: color .2s ease; }
.footer li a:hover { color: var(--gold); }
.footer-bottom { margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted-2); font-size: 12px; letter-spacing: 1px; }
.footer-bottom a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 300;
  background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(197,160,89,.6); transition: width .1s linear;
}

/* ---------------------------------------------------------------- reveal anim */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.from-left { transform: translateX(-44px); }
.reveal.from-right { transform: translateX(44px); }
.reveal.from-left.in, .reveal.from-right.in { transform: none; }
.reveal[data-delay="1"] { transition-delay: .10s; }
.reveal[data-delay="2"] { transition-delay: .20s; }
.reveal[data-delay="3"] { transition-delay: .30s; }
.fade-up { animation: fadeUp .8s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* hero entrance: staggered rise of each line */
.hero-content > * { opacity: 0; transform: translateY(26px); animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-logo { animation-delay: .15s; }
.hero-by { animation-delay: .35s; }
.hero h1 { animation-delay: .50s; }
.hero p { animation-delay: .65s; }
.hero-cta { animation-delay: .80s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* parallax helper (JS-driven) */
.parallax { will-change: transform; }

/* gold shimmer sweep on primary buttons */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-gold:hover::after { animation: sweep .8s ease; }
@keyframes sweep { from { left: -120%; } to { left: 140%; } }



/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .nav { padding: max(16px, env(safe-area-inset-top, 16px)) 0 16px; }
  .nav.scrolled { padding: max(12px, env(safe-area-inset-top, 12px)) 0 12px; }
  .nav-toggle { display: inline-flex; transition: opacity .25s ease, visibility .25s ease; }
  .nav-toggle.active { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: 84vw; max-width: 360px;
    background: rgba(25, 15, 13, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: calc(max(24px, env(safe-area-inset-top, 0px)) + 12px) 28px max(32px, env(safe-area-inset-bottom, 0px));
    gap: 16px; transform: translateX(100%); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 1px solid var(--line); z-index: 210; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 40px rgba(0,0,0,0.85);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .nav-drawer-head .drawer-brand { display: flex; align-items: center; }
  .nav-drawer-head .drawer-logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
  .nav-drawer-close {
    background: none; border: 1px solid var(--line); color: var(--gold);
    font-size: 24px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: all .2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  .nav-drawer-close:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(197,160,89,.15); }
  .nav-links a.navlink {
    font-size: 13.5px; letter-spacing: 2px; padding: 12px 0; border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; width: 100%;
  }
  .nav-links a.navlink::after { display: none; }
  .nav-links a.navlink.active { color: var(--gold); font-weight: 500; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .designer-img img { height: 420px; }
  .cards { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .result .rec-items { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .modal { grid-template-columns: 1fr; height: auto; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
  .modal-body { max-height: none; height: auto; overflow-y: auto; padding: 28px 24px; flex: 1; }
  .modal-img { height: 580px; min-height: 440px; max-height: 640px; flex: 0 0 auto; background: radial-gradient(circle at 50% 35%, #241612, #0d0706 90%); }
  .carousel-container { height: 100%; width: 100%; }
  .carousel-slide { display: flex; align-items: center; justify-content: center; height: 100%; }
  .carousel-slide img { height: 100%; width: 100%; object-fit: contain; display: block; }
  .cart-wrap { grid-template-columns: 1fr; gap: 32px; }
  .cart-summary { position: static; }
  .page-head { padding: calc(max(130px, env(safe-area-inset-top, 0px) + 85px)) 0 32px; }
  .page-head h1 { font-size: clamp(32px, 7vw, 52px); margin: 10px 0 14px; }
  .post-head { padding: calc(max(130px, env(safe-area-inset-top, 0px) + 85px)) 0 24px; }
  .post-head h1 { font-size: clamp(28px, 6vw, 44px); }
  .quiz { padding: calc(max(130px, env(safe-area-inset-top, 0px) + 85px)) 0 80px; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .section { padding: 72px 0; }
  .grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hero-cta .btn { width: 100%; min-width: 0; min-height: 48px; }
  .form-card { padding: 26px 18px; }
  .cart-item { grid-template-columns: 80px 1fr; padding: 14px; gap: 16px; }
  .cart-item img { width: 80px; height: 100px; }
  .cart-item .ci-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 4px; }
  .toast-wrap { left: max(16px, env(safe-area-inset-left, 16px)); right: max(16px, env(safe-area-inset-right, 16px)); bottom: calc(max(20px, env(safe-area-inset-bottom, 20px)) + 68px); }
  .toast { min-width: 0; width: 100%; padding: 14px 18px; }
  
  /* Mobile Quick View Modal — Redesigned with Physical Phone Notch Safe Clearance */
  .modal-overlay {
    padding: max(48px, env(safe-area-inset-top, 48px)) 0 0;
    align-items: flex-end; justify-content: center;
  }
  .modal {
    width: 100vw; max-width: 100%;
    height: calc(100vh - max(52px, env(safe-area-inset-top, 52px)) - 8px);
    max-height: calc(100vh - max(52px, env(safe-area-inset-top, 52px)) - 8px);
    border-radius: 20px 20px 0 0; border-bottom: none; grid-template-columns: 1fr;
    display: flex; flex-direction: column; overflow: hidden; position: relative;
    transform: translateY(100%); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.92);
  }
  .modal::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 2px; background: rgba(197, 160, 89, 0.4);
    z-index: 40; pointer-events: none;
  }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-close {
    top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
    right: max(14px, calc(env(safe-area-inset-right, 0px) + 8px));
    z-index: 100 !important; width: 42px; height: 42px;
  }
  .modal-img {
    flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5; max-height: 48vh;
    position: relative; background: var(--bg-2); overflow: hidden;
  }
  .carousel-container { height: 100%; width: 100%; aspect-ratio: 4 / 5; position: relative; }
  .carousel-slide { display: flex; align-items: center; justify-content: center; height: 100%; width: 25%; }
  .carousel-slide img {
    width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
    display: block;
  }
  .carousel-slide.is-chart img { object-fit: contain; background: #fefbf2; }
  .modal-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: none; height: auto;
    padding: 22px 20px max(24px, env(safe-area-inset-bottom, 24px)); display: flex; flex-direction: column;
  }
  .modal-body h2 { font-size: 24px; margin: 6px 0 10px; color: var(--cream); }
  .modal-body .m-desc { font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
  .modal-body .m-meta { padding: 12px 0; margin-bottom: 16px; }
  .modal-body .m-price { font-size: 28px; margin-bottom: 18px; color: var(--gold); }

  /* Horizontal Filter Ribbon */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding-bottom: 10px; margin-bottom: 32px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; white-space: nowrap; padding: 11px 20px; font-size: 11.5px; min-height: 44px; }
  
  /* Touch target sizes & iOS input zoom fix */
  input, select, textarea {
    font-size: 16px !important; /* Prevents unwanted iOS auto-zoom */
    min-height: 46px;
  }
  textarea { min-height: 110px; }
  .btn { min-height: 46px; padding: 14px 20px; }
  .btn-add { min-height: 44px; padding: 11px 16px; }
  .qty button { width: 44px; height: 44px; font-size: 19px; }
  .ci-remove { min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; }
  .option { padding: 16px 20px; min-height: 52px; font-size: 15px; }
  .page-head { padding: calc(max(115px, env(safe-area-inset-top, 0px) + 75px)) 0 24px; }
  .page-head h1 { font-size: clamp(26px, 7.5vw, 38px); margin: 8px 0 12px; }
  .post-head { padding: calc(max(115px, env(safe-area-inset-top, 0px) + 75px)) 0 20px; }
  .post-head h1 { font-size: clamp(24px, 7vw, 34px); }
  .quiz { padding: calc(max(115px, env(safe-area-inset-top, 0px) + 75px)) 0 60px; }
}

@media (max-width: 480px) {
  .hero-content { padding: max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) 16px 72px; }
  .hero-logo img { width: min(380px, 86vw); }
  .hero h1 { font-size: clamp(24px, 7.5vw, 32px); margin: 14px 0 18px; }
  .hero p { font-size: 15px; margin-bottom: 24px; }
}

/* =========================================================================
   ADDITIONS — cursor glow, craft chapters, footer map, blog, contact
   ========================================================================= */

/* ---- cursor glow (large blurred orb trailing behind content) ---- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(148,17,19,.55), rgba(197,160,89,.16) 42%, transparent 68%);
  filter: blur(70px); pointer-events: none; z-index: -1; opacity: 0;
  transition: opacity .6s ease; will-change: transform;
}
.cursor-glow.on { opacity: 1; }


/* 6-item nav breathes a little tighter */
.nav-links { gap: 30px; }
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-links { gap: 22px; }
  .nav-links a.navlink { font-size: 11.5px; letter-spacing: 1.5px; }
}

/* ---- craft chapters (editorial story sections) ---- */
.chapters { position: relative; overflow: hidden; }
.chapters .chapter-intro { max-width: 680px; margin: 0 auto 70px; }
.chapter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
  margin-bottom: 110px; position: relative;
}
.chapter:last-child { margin-bottom: 0; }
.chapter.reverse .chapter-media { order: 2; }
.chapter.reverse .chapter-text { order: 1; }
.chapter-media { position: relative; }
.chapter-media img {
  width: 100%; height: 560px; object-fit: cover; border: 1px solid var(--line);
}
.chapter-media::after {
  content: ''; position: absolute; right: -10px; bottom: -10px; width: 64px; height: 64px;
  border-right: 1px solid var(--gold-2); border-bottom: 1px solid var(--gold-2); opacity: .8; pointer-events: none;
}
/* .chapter-num removed 1 Aug 2026 - the 01/02/03 overlay is off the chapter
   images. The "Chapter I/II/III" eyebrow in the text column still carries the
   sequence, so nothing was lost. */
.chapter-text .eyebrow { display: block; margin-bottom: 16px; }
.chapter-text h3 { font-size: clamp(30px, 4vw, 48px); color: var(--cream); margin-bottom: 22px; }
.chapter-text p { color: var(--muted); font-size: 16.5px; max-width: 520px; }
.chapter-text .link-gold { margin-top: 26px; }
/* faint flowing connector behind chapters */
.chapters-thread {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(var(--line), transparent 8%, rgba(197,160,89,.18) 50%, transparent 92%, var(--line));
  z-index: 0; pointer-events: none;
}
.chapter > * { position: relative; z-index: 1; }

/* ---- footer map ---- */
.footer-map { margin-top: 54px; border: 1px solid var(--line); position: relative; }
.footer-map-label {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); background: rgba(25,15,13,.6); flex-wrap: wrap;
}
.footer-map-label span:last-child { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.footer-map iframe {
  display: block; width: 100%; height: 260px; border: 0;
  filter: grayscale(.3) sepia(.25) brightness(.85) contrast(1.05);
}

/* ---- blog / journal ---- */
.blog-featured {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--line);
  background: var(--bg-2); margin-bottom: 60px; overflow: hidden;
}
.blog-featured .bf-img { height: 440px; overflow: hidden; }
.blog-featured .bf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.blog-featured:hover .bf-img img { transform: scale(1.05); }
.blog-featured .bf-body { padding: 50px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured .bf-body h2 { font-size: clamp(28px, 3.6vw, 42px); margin: 14px 0 16px; }
.blog-featured .bf-body p { color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.post-meta { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.post-meta .dot { color: var(--muted-2); margin: 0 8px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-bottom: 130px; }
.post-card {
  border: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; cursor: pointer;
}
.post-card:hover { transform: translateY(-6px); border-color: var(--gold-2); box-shadow: var(--shadow); }
.post-card .pc-img { height: 240px; overflow: hidden; }
.post-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.post-card:hover .pc-img img { transform: scale(1.07); }
.post-card .pc-body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.post-card h3 { font-size: 24px; margin: 12px 0 10px; color: var(--cream); }
.post-card p { color: var(--muted); font-size: 14px; flex: 1; }
.post-card .link-gold { margin-top: 18px; }

/* single post */
.post-head { padding: 170px 0 30px; text-align: center; max-width: 820px; margin: 0 auto; }
.post-head h1 { font-size: clamp(36px, 5.4vw, 64px); color: var(--cream); margin: 16px 0 18px; }
.post-hero { max-width: 1040px; margin: 0 auto 50px; }
.post-hero img { width: 100%; height: clamp(320px, 48vw, 560px); object-fit: cover; border: 1px solid var(--line); }
.post-body { max-width: 760px; margin: 0 auto; padding-bottom: 110px; }
.post-body p { color: var(--cream); opacity: .82; font-size: 17px; margin-bottom: 24px; line-height: 1.8; }
.post-body h3 { font-size: 28px; color: var(--cream); margin: 40px 0 16px; }
.post-body .pull { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--gold);
  border-left: 2px solid var(--gold-2); padding-left: 24px; margin: 36px 0; line-height: 1.4; }
.post-back { display: inline-flex; margin-bottom: 30px; }

/* ---- contact ---- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; padding-bottom: 60px; }
.contact-info .ci-block { margin-bottom: 32px; }
.contact-info h4 { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.contact-info p, .contact-info a { color: var(--muted); font-size: 16px; }
.contact-info a:hover { color: var(--gold); }
.contact-socials { display: flex; gap: 14px; margin-top: 6px; }
.contact-socials a {
  width: 42px; height: 42px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold); transition: all .2s ease;
}
.contact-socials a:hover { background: rgba(197,160,89,.1); border-color: var(--gold); }
.contact-socials svg { width: 18px; height: 18px; }
.contact-map { margin-top: 50px; border: 1px solid var(--line); }
.contact-map iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(.3) sepia(.25) brightness(.85) contrast(1.05); }

/* ---- map scroll guard ----
   A cursor sitting over an <iframe> delivers its wheel events to the map's
   own document, so Lenis never sees them and the page scroll stalls while
   Google zooms instead. The shim covers the frame and takes those events,
   which lets the page scroll straight past. Clicking it hands the map its
   pointer events back; leaving the frame re-arms the shim. */
.map-frame { position: relative; }
.map-shim {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: none;
  background: transparent; cursor: pointer; font-family: var(--font-sans);
  display: flex; align-items: flex-end; justify-content: center;
  transition: opacity .25s ease;
}
.map-shim span {
  margin-bottom: 18px;
  background: rgba(18,10,8,.86); border: 1px solid var(--gold-2); color: var(--gold);
  text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 600;
  padding: 10px 20px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.map-shim:hover span, .map-shim:focus-visible span { opacity: 1; transform: none; }
.map-shim:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
.map-frame.map-live .map-shim { opacity: 0; pointer-events: none; }
/* touch has no hover to reveal the hint, so keep it visible until activated */
@media (hover: none) {
  .map-shim span { opacity: .92; transform: none; }
}

@media (max-width: 960px) {
  .chapter { grid-template-columns: 1fr; gap: 30px; margin-bottom: 70px; }
  .chapter.reverse .chapter-media { order: 0; }
  .chapter.reverse .chapter-text { order: 0; }
  .chapter-media img { height: 420px; }
  .chapters-thread { display: none; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured .bf-img { height: 300px; }
  .blog-featured .bf-body { padding: 34px; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .chapter-media img { height: 340px; }
}

/* =========================================================================
   UI ELEVATION v2 — smooth scroll, stats, marquee, testimonials, ornaments,
   magnetic + clip reveals, refined details
   ========================================================================= */

/* ---- Lenis smooth scroll plumbing ---- */
html.lenis, html.lenis body { height: auto; }
/* CSS smooth-scroll must be OFF while Lenis drives the scroll position,
   otherwise the two animate against each other (jitter when reversing
   direction, worst at the bottom of long pages like the blog) */
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* browser scroll-anchoring also fights animated content while scrolling up */
body { overflow-anchor: none; }

/* ---- scrollbar: a crisp gold thread whose ends dissolve to nothing ---- */
html { scrollbar-color: var(--gold-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
  background: linear-gradient(180deg,
    transparent 0%, rgba(197,160,89,.07) 18%,
    rgba(197,160,89,.07) 82%, transparent 100%);
}
::-webkit-scrollbar-thumb {
  /* the thumb itself fades out at both tips — sharp 2px edge, no bulk */
  background: linear-gradient(180deg,
    rgba(197,160,89,0) 0%,
    var(--gold) 18%,
    #f0d79a 50%,
    var(--gold) 82%,
    rgba(197,160,89,0) 100%);
  border-radius: 2px;
  min-height: 64px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(227,194,129,0) 0%,
    var(--gold-bright) 16%,
    #f6e2ae 50%,
    var(--gold-bright) 84%,
    rgba(227,194,129,0) 100%);
}
::-webkit-scrollbar-button { display: none; height: 0; }
::selection { background: rgba(197,160,89,.3); color: #fff; }

/* ---- elevated buttons ---- */
.btn { border-radius: 2px; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-2));
  box-shadow: 0 10px 30px rgba(197,160,89,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { box-shadow: 0 18px 44px rgba(197,160,89,.34), inset 0 1px 0 rgba(255,255,255,.45); }
.magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1); }

/* ---- animated nav underline on hover ---- */
.nav-links a.navlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a.navlink:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.navlink.active::after { transform: scaleX(1); }

/* ---- ornamental gold divider ---- */
.ornament { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto; padding: 4px 0; }
.ornament::before, .ornament::after { content: ''; height: 1px; width: clamp(60px, 14vw, 150px); }
.ornament::before { background: linear-gradient(90deg, transparent, var(--gold-2)); }
.ornament::after  { background: linear-gradient(90deg, var(--gold-2), transparent); }
.ornament svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.section-ornament { padding: 8px 0 0; }

/* ---- stats strip with counters ---- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(25,15,13,.4), transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 56px 22px; border-left: 1px solid var(--line-soft); }
.stat:first-child { border-left: none; }
.stat-num { font-family: var(--font-display); font-size: clamp(42px, 5vw, 66px); color: var(--gold); line-height: 1; font-weight: 600; }
.stat-num .suffix { color: var(--gold-2); font-size: .62em; }
.stat-label { margin-top: 14px; text-transform: uppercase; letter-spacing: 2.5px; font-size: 11.5px; color: var(--muted); }

/* ---- marquee ribbon ---- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 0; background: linear-gradient(90deg, rgba(74,10,12,.25), transparent, rgba(74,10,12,.25)); }
.marquee-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; }
.marquee-track > span {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 3.6vw, 46px); color: transparent; -webkit-text-stroke: 1px var(--gold-2);
  padding: 0 6px;
}
.marquee-track .star { color: var(--gold); -webkit-text-stroke: 0; padding: 0 30px; font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- testimonials ---- */
/* ---- testimonials: seamless horizontal loop ----
   The 5 real reviews are authored statically (crawlers do not run JS and these
   are content worth indexing); initTestimonialLoop() clones the set once so the
   track can wrap without a visible seam. The keyframe travels exactly one set:
   half the track plus half a gap, because N cards carry N gaps but the track
   itself only has 2N-1 of them. */
.testimonials-loop {
  margin-top: 56px; overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.testimonials-track { display: flex; gap: 26px; width: max-content; }
.testimonials-track .quote-card { flex: 0 0 min(380px, 82vw); text-align: left; }
.testimonials-loop.looping .testimonials-track { animation: testiScroll 64s linear infinite; }
.testimonials-loop.looping:hover .testimonials-track { animation-play-state: paused; }
@keyframes testiScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 13px)); } }
/* no JS (or motion suppressed): fall back to an honest manual scroller */
.testimonials-loop:not(.looping) { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--gold-2) transparent; }
@media (prefers-reduced-motion: reduce) {
  .testimonials-loop.looping .testimonials-track { animation: none; }
  .testimonials-loop.looping { overflow-x: auto; }
}
.quote-card { border: 1px solid var(--line); background: var(--bg-2); padding: 44px 36px; position: relative; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; display: flex; flex-direction: column; }
.quote-card:hover { transform: translateY(-6px); border-color: var(--gold-2); box-shadow: var(--shadow); }
.quote-card .qmark { position: absolute; top: 18px; right: 26px; font-family: var(--font-display); font-size: 90px; line-height: .6; color: var(--gold-2); opacity: .28; }
.quote-card p { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--cream); margin-bottom: 26px; position: relative; z-index: 1; }
.quote-card .who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote-card .who .av {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: radial-gradient(circle at 30% 25%, rgba(197,160,89,.22), rgba(74,10,12,.35));
  color: var(--gold); font-family: var(--font-display); font-size: 16px; letter-spacing: 1px;
}
.quote-card .who .name { font-family: var(--font-sans); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.quote-card .who .role { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ---- nav account icon ---- */
.account-link { position: relative; display: inline-flex; align-items: center; color: var(--cream); transition: color .2s; }
.account-link:hover { color: var(--gold); }
.account-link svg { width: 23px; height: 23px; }
.account-link.logged { color: var(--gold); }
.account-dot {
  position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 2px var(--bg);
}

/* ---- account / auth page ---- */
.auth-wrap { max-width: 560px; margin: 0 auto; padding-bottom: 120px; }
.auth-card { padding: 44px; }
.auth-tabs { display: flex; border: 1px solid var(--line); margin-bottom: 34px; }
.auth-tab {
  flex: 1; background: none; border: none; color: var(--muted); padding: 15px 10px; cursor: pointer;
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 600;
  transition: all .2s ease;
}
.auth-tab:hover { color: var(--cream); }
.auth-tab.active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1208; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--muted-2); cursor: pointer; padding: 8px; display: inline-flex; transition: color .2s;
}
.pw-toggle:hover { color: var(--gold); }
.pw-toggle svg { width: 19px; height: 19px; }
.pw-meter { height: 3px; background: rgba(244,237,224,.12); margin-top: -14px; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .3s ease, background .3s ease; background: #b5535c; }
.pw-meter span[data-level="2"] { background: #c9a24a; }
.pw-meter span[data-level="3"] { background: var(--gold); }
.pw-meter span[data-level="4"] { background: #7fbf7f; }
.pw-hint { color: var(--muted-2); font-size: 12px; margin-top: 8px; display: block; }
.auth-note { margin-top: 26px; color: var(--muted-2); font-size: 12.5px; text-align: center; line-height: 1.7; }
.account-dash { text-align: center; }
.dash-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.dash-avatar {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, rgba(197,160,89,.3), rgba(74,10,12,.5));
  border: 1px solid var(--gold-2); color: var(--gold);
  font-family: var(--font-display); font-size: 32px;
  transition: border-color .2s ease, transform .2s ease;
}
.dash-avatar:hover { border-color: var(--gold); transform: scale(1.04); }
.dash-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-cam {
  position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--gold-2); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.avatar-cam svg { width: 14px; height: 14px; }
.dash-avatar:hover .avatar-cam { background: var(--burgundy); color: #fff; }
.account-dash h2 { font-size: 32px; margin-bottom: 6px; }
.dash-email { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.dash-orders {
  text-align: left; border: 1px solid var(--line); background: rgba(18,10,8,.45);
  padding: 16px; margin: -2px 0 6px;
}
.dash-orders[hidden] { display: none; }
.orders-caret { font-size: 12px; margin-left: 6px; }
.order-row { border: 1px solid var(--line); background: rgba(25,15,13,.5); padding: 14px 18px; margin-bottom: 10px; }
.order-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.order-id { color: var(--gold); font-size: 13px; letter-spacing: 1.5px; font-weight: 600; }
.order-date { color: var(--muted-2); font-size: 12px; }
.order-items { color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.order-total { font-family: var(--font-display); color: var(--cream); font-size: 16px; }
.orders-empty { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.dash-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---- quiz v2: auto-advance hint, details step, upload widget ---- */
.quiz-hint { color: var(--muted-2); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; align-self: center; margin-left: auto; }
.quiz-details .field input, .quiz-details .field textarea { background: rgba(25,15,13,.45); padding: 12px 14px; border: 1px solid var(--line); }
.quiz-details .field input:focus, .quiz-details .field textarea:focus { border-color: var(--gold); }
.quiz-details .field textarea { min-height: 90px; }
.upload-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed rgba(197,160,89,.45); background: rgba(25,15,13,.35);
  padding: 30px 48px; text-align: center; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.upload-box:hover { border-color: var(--gold); background: rgba(148,17,19,.18); }
.upload-box .upl-icon { width: 38px; height: 38px; color: var(--gold); flex: none; }
.upload-box .upl-text { color: var(--cream); font-size: 15.5px; word-break: break-all; }
.upload-box small { color: var(--muted-2); font-size: 12px; }
.upload-box.attached { border-style: solid; border-color: var(--gold-2); background: rgba(148,17,19,.14); }
.upload-box.attached .upl-text { color: var(--gold); }
.upl-trash {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(18,10,8,.85); border: 1px solid var(--gold-2); color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.upl-trash:hover { background: var(--burgundy); color: #fff; border-color: var(--burgundy); transform: scale(1.08); }
.upl-trash svg { width: 15px; height: 15px; }
.quiz-sent { color: var(--gold); font-size: 14.5px; margin: 18px 0 6px; letter-spacing: .4px; }

/* ---- about page ---- */
.about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card {
  border: 1px solid var(--line); background: var(--bg-2); padding: 36px 26px; text-align: left;
  transition: transform .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-5px); border-color: var(--gold-2); }
.value-card h3 { font-size: 24px; color: var(--gold); margin-bottom: 12px; }
.value-card p { color: var(--muted); font-size: 14.5px; }

/* ---- jewels page ---- */
.jewels-banner { position: relative; overflow: hidden; border: 1px solid var(--line); }
.jewels-banner img { width: 100%; height: 420px; object-fit: cover; object-position: 50% 30%; }
.jewels-banner .jb-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px; gap: 8px;
  background: linear-gradient(to top, rgba(11,6,5,.9) 0%, rgba(11,6,5,.2) 55%, transparent 100%);
}
.jewels-banner .jb-overlay p { color: var(--cream); font-size: 16px; max-width: 560px; font-family: var(--font-display); font-style: italic; }

@media (max-width: 960px) {
  .about-values { grid-template-columns: 1fr 1fr; }
  .jewels-banner img { height: 300px; }
}
@media (max-width: 560px) {
  .about-values { grid-template-columns: 1fr; }
}

/* ---- gallery: category tiles ---- */
.category-tiles { margin-top: 10px; padding-bottom: 120px; }
.category-tiles .cat-card { height: 520px; }
.tile-count { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.tile-tag { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; max-width: 300px; }
.collection-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }

@media (max-width: 960px) {
  .category-tiles .cat-card { height: 380px; }
  .auth-card { padding: 30px 22px; }
}

/* ---- post FAQ (AEO block) ---- */
.post-faq { margin-top: 54px; border-top: 1px solid var(--line); padding-top: 34px; }
.post-faq > h3 { font-size: 28px; color: var(--cream); margin-bottom: 18px; }
.faq-item { border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 12px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--font-display);
  font-size: 19px; color: var(--cream); position: relative; padding-right: 52px; transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 24px; font-family: var(--font-sans); transition: transform .25s ease;
}
.faq-item[open] summary { color: var(--gold); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-item > p { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; line-height: 1.75; margin: 0; }
.faq-item[open] > p {
  animation: faqOpen 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- clip / curtain image reveal (opened by the scroll-position checker) ---- */
.reveal.clip { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(.62,0,.2,1); }
.reveal.clip.in { clip-path: inset(0 0 0 0); }
/* image hosts keep height even if an image ever fails, so the branded
   fallback shows instead of the section collapsing to nothing */
.designer-img, .chapter-media { min-height: 300px; }


/* ---- responsive ---- */
@media (max-width: 960px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: none; }
  .stat { border-top: 1px solid var(--line-soft); }
  .stat:nth-child(-n+2) { border-top: none; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* =========================================================================
   v3 — WhatsApp widget + demo checkout
   ========================================================================= */

/* ---- floating WhatsApp widget (bottom right) ---- */
.wa-widget {
  position: fixed; right: 26px; bottom: 26px; z-index: 260;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.5);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: waPulse 2.6s ease-out infinite;
}
.wa-widget svg { width: 30px; height: 30px; }
.wa-widget:hover { transform: translateY(-3px) scale(1.05); }
@keyframes waPulse {
  0% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-widget .wa-tip {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: rgba(25,15,13,.96); border: 1px solid var(--line); color: var(--cream);
  font-size: 12px; letter-spacing: 1px; padding: 9px 14px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.wa-widget:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
/* keep toasts clear of the widget */
.toast-wrap { bottom: 102px; }
@media (max-width: 560px) {
  .wa-widget { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .toast-wrap { bottom: 88px; }
}


/* ---- checkout ---- */
.checkout-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; padding-bottom: 120px; }
.checkout-form .form-card { padding: 42px; }
.demo-banner {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--gold); background: rgba(197,160,89,.07);
  padding: 14px 18px; font-size: 13px; color: var(--muted); margin-bottom: 30px;
}
.demo-banner svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* auto-fits however many methods exist - equal widths, always filling the row */
.paytabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; margin: 6px 0 26px; }
.paytab {
  border: 1px solid var(--line); background: rgba(25,15,13,.55); color: var(--muted);
  padding: 16px 10px; cursor: pointer; text-align: center; font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: all .2s ease;
}
.paytab svg { width: 24px; height: 24px; }
.paytab:hover { border-color: var(--gold-2); color: var(--cream); }
.paytab.active {
  border-color: var(--gold); color: var(--gold);
  background: rgba(197,160,89,.10); box-shadow: 0 0 0 1px var(--gold) inset;
}
.paypanel { display: none; }
.paypanel.active { display: block; animation: fadeUp .4s ease both; }
.paypanel .bank-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.6; }

.order-mini { border-bottom: 1px solid var(--line-soft); padding: 4px 0 14px; margin-bottom: 8px; }
.order-mini .om-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14px; color: var(--muted); }
.order-mini .om-row .om-name { color: var(--cream); }
.order-mini .om-row .om-qty { color: var(--gold); font-size: 12.5px; }

.secure-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--muted-2); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; }
.secure-row svg { width: 14px; height: 14px; color: var(--gold-2); }

@media (max-width: 960px) {
  .checkout-wrap { grid-template-columns: 1fr; }
  .checkout-form .form-card { padding: 30px 22px; }
}

/* ================================================== CHECKOUT: QR / BANK / T&C */
/* freeze the page behind an open modal (native fallback alongside lenis.stop) */
html.modal-lock, html.modal-lock body { overflow: hidden; }
/* bank transfer details */
.bank-details { border: 1px solid var(--line); background: rgba(25,15,13,.6); padding: 8px 20px; margin-bottom: 18px; }
.bd-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.bd-row:last-child { border-bottom: 0; }
.bd-row > span { color: var(--muted-2); text-transform: uppercase; font-size: 10.5px; letter-spacing: 1.8px; flex: 0 0 108px; }
.bd-row b { color: var(--cream); font-weight: 500; font-size: 14.5px; flex: 1; word-break: break-word; }
.bd-row .bd-pending { color: var(--gold-2); font-style: italic; }
.bd-copy {
  flex: 0 0 auto; background: none; border: 1px solid var(--gold-2); color: var(--gold);
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; cursor: pointer; transition: all .2s ease;
}
.bd-copy:hover { background: rgba(197,160,89,.12); border-color: var(--gold); }

/* terms & conditions row */
.tc-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; cursor: pointer; color: var(--muted); font-size: 14px; }
.tc-row input { accent-color: var(--gold); width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.tc-link { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.tc-link:hover { color: var(--gold-bright); }
.tc-row.tc-error { color: #e08b8b; }
.tc-row.tc-error input { outline: 1px solid #a33; }

/* QR modal */
.qr-modal {
  position: relative; width: min(400px, 92vw); background: var(--bg-2);
  border: 1px solid var(--gold-2); padding: 34px 30px 26px; text-align: center;
}
.qr-amt { font-family: var(--font-display); font-size: 34px; color: var(--gold); margin-top: 8px; }
/* The supplied QR is a finished card - it carries its own white body and border,
   so the frame stays transparent rather than boxing a white card inside white. */
.qr-frame { background: none; padding: 0; width: min(290px, 74vw); margin: 16px auto 14px; }
.qr-frame img { width: 100%; display: block; border-radius: 12px; }
.qr-missing { background: #fff; color: #1a1208; font-family: var(--font-sans); font-size: 14px; padding: 60px 10px; border-radius: 12px; }
.qr-missing small { color: #7a6a4a; font-size: 11.5px; }
.qr-timer { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.qr-timer #qr-count { font-family: var(--font-display); font-size: 22px; color: var(--cream); letter-spacing: 2px; }
.qr-note { color: var(--muted-2); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.qr-bar { height: 2px; background: var(--line); overflow: hidden; }
.qr-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-bright), var(--gold)); transition: width 1s linear; }
.qr-holder { color: var(--muted); font-size: 12.5px; letter-spacing: 1px; margin-top: 14px; }
.qr-expired {
  position: absolute; inset: 0; background: rgba(20,11,9,.94); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.qr-expired p { color: var(--cream); font-family: var(--font-display); font-size: 20px; font-style: italic; }
.qr-modal .modal-close { position: absolute; top: 10px; right: 14px; }

/* T&C modal */
.tc-modal {
  width: min(720px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--gold-2);
}
.tc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 30px 18px; border-bottom: 1px solid var(--line); }
.tc-head h3 { font-size: 26px; color: var(--cream); margin-top: 6px; }
.tc-head .modal-close { position: static; }
.tc-body { overflow-y: auto; padding: 6px 30px 24px; scrollbar-width: thin; scrollbar-color: var(--gold-2) transparent; }
.tc-body h4 { font-family: var(--font-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 22px 0 8px; }
.tc-body p, .tc-body li { color: var(--muted); font-size: 14.5px; line-height: 1.75; }
.tc-body ul { padding-left: 20px; margin: 4px 0; }
.tc-body li { margin-bottom: 6px; }
.tc-declaration { border: 1px solid var(--line); background: rgba(25,15,13,.6); padding: 16px 18px; margin-top: 24px; }
.tc-declaration strong { color: var(--cream); }
.tc-foot { padding: 16px 30px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .bd-row { flex-wrap: wrap; }
  .bd-row > span { flex-basis: 100%; }
}

/* Custom Design page: remove the gap between the quiz and the footer */
body[data-page="custom"] .footer {
  margin-top: 0;
}

/* ---- light leak text animation (triggered on scroll) ---- */
.light-leak-trigger {
  background: linear-gradient(110deg, 
    var(--gold-bright) 10%, 
    var(--gold) 40%, 
    rgba(255,255,255,0.85) 50%, 
    var(--gold) 60%, 
    var(--gold-2) 90%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  background-position-x: 100%;
}

.light-leak-trigger.play-leak {
  animation: textSweep 4.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes textSweep {
  0% { background-position-x: 100%; }
  100% { background-position-x: 0%; }
}

/* ============================================ ABOUT: THE HOUSE PHILOSOPHY */
.house-quote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(23px, 3.1vw, 34px);
  line-height: 1.38; color: var(--gold); max-width: 700px; margin: 34px auto;
  padding: 28px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.house-sign {
  margin-top: 24px; color: var(--gold-2); font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase;
}

/* About Page Square Slideshow */
.square-slideshow {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
}
.square-slideshow::after {
  content: ''; position: absolute; inset: 14px; border: 1px solid var(--gold-2); opacity: .5;
  pointer-events: none; mix-blend-mode: screen; z-index: 10;
}
.square-slideshow .slideshow-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.square-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}
.square-slideshow .slide.active {
  opacity: 1;
  z-index: 2;
}
.square-slideshow .slideshow-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 12;
}
.square-slideshow .slide-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 237, 224, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.square-slideshow .slide-nav-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}