/* ==========================================================================
   TARINI — Luxury B2B Digital Brochure
   Design tokens preserved from original brand: deep warm violet + warm gold
   Typeface preserved: Montserrat (only)
   ========================================================================== */

:root{
  /* --- Brand colors (unchanged from original) --- */
  --violet:        #230828;
  --violet-deep:    #1b0520;
  --violet-deepest: #13031a;
  --violet-raise:  #2c0e33;
  --gold:          #C2A68E;
  --gold-light:    #E2D1C3;
  --gold-dim:      rgba(194,166,142,0.4);
  --card:          #FFFFFF;
  --ink:           #FFFFFF;
  --ink-soft:      rgba(255,255,255,0.72);
  --ink-mute:      rgba(255,255,255,0.46);
  --hair:          rgba(255,255,255,0.09);
  --hair-gold:     rgba(194,166,142,0.28);

  /* --- Type scale --- */
  --font: 'Montserrat', sans-serif;

  /* --- Motion --- */
  --ease-lux: cubic-bezier(0.16,1,0.3,1);
  --dur-s: 0.35s;
  --dur-m: 0.6s;
  --dur-l: 1.1s;

  --container: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--violet);
  color:var(--ink);
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--font); border:none; background:none; color:inherit; cursor:pointer; }
input,textarea,select{ font-family:var(--font); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--gold); color:var(--violet); }
body.modal-open{ overflow:hidden; }

/* Focus visibility (accessibility) */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
@media(min-width:768px){ .container{ padding:0 48px; } }

.eyebrow{
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.32em;
  color:var(--gold);
}
.hair-divider{ width:48px; height:1px; background:var(--gold-dim); margin:18px auto 0; }
.hair-divider.left{ margin-left:0; }

/* ==========================================================================
   Preloader — hallmark seal reveal (brand signature motif)
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:999; background:var(--violet-deepest);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity 0.7s var(--ease-lux), visibility 0.7s var(--ease-lux);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.seal{ width:64px; height:64px; position:relative; }
.seal svg{ width:100%; height:100%; }
.seal circle{ fill:none; stroke:var(--gold); stroke-width:1; stroke-dasharray:210; stroke-dashoffset:210; animation:sealDraw 1.6s var(--ease-lux) forwards; }
.seal .seal-mark{ opacity:0; animation:sealFade 0.6s ease forwards 1.1s; }
@keyframes sealDraw{ to{ stroke-dashoffset:0; } }
@keyframes sealFade{ to{ opacity:1; } }
.preloader-label{ font-size:9px; letter-spacing:0.4em; text-transform:uppercase; color:var(--ink-mute); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:60; width:100%;
  background:rgba(27,5,32,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-gold);
  transition:background var(--dur-s) ease, border-color var(--dur-s) ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 24px; }
@media(min-width:768px){ .header-inner{ padding:16px 48px; } }

.brand{ display:flex; align-items:center; gap:0; cursor:pointer; flex-shrink:0; user-select:none; }
.brand img{ height:38px; width:auto; object-fit:contain; transition:transform var(--dur-s) var(--ease-lux); }
.brand:hover img{ transform:scale(1.03); }
.brand .brand-fallback{ display:none; flex-direction:column; }
.brand .brand-fallback span:first-child{ font-size:20px; font-weight:300; letter-spacing:0.3em; }
.brand .brand-fallback span:last-child{ font-size:8px; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase; }

nav.primary-nav{ display:none; align-items:center; gap:34px; }
@media(min-width:1100px){ nav.primary-nav{ display:flex; } }
nav.primary-nav button{
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding:4px 0;
}
nav.primary-nav button::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-s) var(--ease-lux);
}
nav.primary-nav button:hover{ color:var(--gold); }
nav.primary-nav button:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.pill-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--hair-gold); background:rgba(255,255,255,0.04);
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
  transition:all var(--dur-s) var(--ease-lux);
}
.pill-btn:hover{ background:rgba(194,166,142,0.14); border-color:var(--gold); }
.enquiry-badge{
  width:18px; height:18px; border-radius:50%; background:var(--gold); color:var(--violet);
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.menu-toggle{
  display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,0.05); border:1px solid var(--hair); padding:10px 16px; border-radius:999px;
}
@media(min-width:1100px){ .menu-toggle{ display:none; } }
.menu-toggle .bar-icon{ display:flex; flex-direction:column; gap:3px; }
.menu-toggle .bar-icon span{ width:14px; height:1px; background:var(--ink); }

/* Mobile Drawer */
.drawer-overlay{
  position:fixed; inset:0; z-index:80; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
  display:flex; justify-content:flex-end;
  transform:translateX(100%); transition:transform var(--dur-m) var(--ease-lux);
}
.drawer-overlay.open{ transform:translateX(0); }
.drawer-panel{
  width:100%; max-width:420px; height:100%; background:var(--violet); border-left:1px solid var(--hair-gold);
  padding:32px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:-30px 0 60px rgba(0,0,0,0.4);
}
.drawer-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hair-gold); padding-bottom:16px; }
.drawer-top span{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.drawer-close{ font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.drawer-links{ display:flex; flex-direction:column; gap:20px; margin:auto 0; }
.drawer-links a, .drawer-links button{
  display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--hair);
  font-size:22px; font-weight:300; color:var(--ink); text-align:left; width:100%;
}
.drawer-links a:hover, .drawer-links button:hover{ color:var(--gold); }
.drawer-foot{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:0.16em; color:var(--ink-mute); border-top:1px solid var(--hair); padding-top:16px; text-transform:uppercase; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  border-radius:2px; cursor:pointer; transition:all var(--dur-s) var(--ease-lux); white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:var(--violet); }
.btn-gold:hover{ background:var(--ink); color:var(--violet); transform:translateY(-2px); box-shadow:0 14px 30px rgba(194,166,142,0.25); }
.btn-outline{ background:transparent; border:1px solid var(--gold); color:var(--gold); }
.btn-outline:hover{ background:var(--gold); color:var(--violet); }
.btn-ghost{ background:transparent; border:1px solid var(--hair); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-full{ width:100%; }
.btn[disabled]{ opacity:0.55; pointer-events:none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; width:100%; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--violet-deepest);
}
.hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.86) contrast(1.05) saturate(1.08);
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(19,3,26,0.75) 0%, rgba(19,3,26,0.1) 22%, rgba(19,3,26,0.05) 60%, rgba(19,3,26,0.35) 100%);
}
.hero-particles{ position:absolute; inset:0; pointer-events:none; }
.hero-content{
  position:relative; z-index:2; width:100%; max-width:400px;
  margin-left:auto; margin-right:5vw; text-align:left;
  padding:30px 24px;
  border-radius:6px;
  background:linear-gradient(120deg, rgba(19,3,26,0.14) 0%, rgba(19,3,26,0.62) 40%, rgba(19,3,26,0.82) 100%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(194,166,142,0.14);
}
@media(max-width:900px){ .hero-content{ margin-right:auto; margin-left:auto; max-width:92%; padding:32px 26px; } }
.hero-eyebrow{
  font-size:10px; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.hero-eyebrow::before{ content:''; width:36px; height:1px; background:var(--gold); }
.hero-title{
  font-weight:200; line-height:1.04; letter-spacing:0.01em; color:var(--ink);
  font-size:clamp(32px, 4.4vw, 58px);
}
.hero-title em{ font-style:normal; color:var(--gold-light); font-weight:300; }
.hero-sub{
  margin-top:22px; max-width:460px; font-size:13px; font-weight:300; line-height:1.75;
  color:var(--ink-soft); letter-spacing:0.02em;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; justify-content:flex-start; }
.hero-scroll{
  position:absolute; left:24px; bottom:28px; z-index:2; display:flex; align-items:center; gap:10px;
  font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink-mute);
}
@media(min-width:768px){ .hero-scroll{ left:48px; } }
.hero-scroll .line{ width:1px; height:36px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold); animation:scrollLine 2.2s var(--ease-lux) infinite; }
@keyframes scrollLine{ to{ top:100%; } }

/* ==========================================================================
   Sections / layout rhythm
   ========================================================================== */
.section{ padding:110px 0; position:relative; }
.section-tight{ padding:72px 0; }
.section-alt{ background:var(--violet-deep); }
.section-deep{ background:var(--violet-deepest); }
.section-border-y{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.section-head h2{
  font-size:clamp(28px,4vw,44px); font-weight:200; letter-spacing:0.08em; text-transform:uppercase; margin-top:14px;
}
.section-head p{ margin-top:16px; font-size:13px; font-weight:300; color:var(--ink-soft); line-height:1.8; }
.reveal{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(0.96); transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* Value strip */
.value-strip{ padding:64px 0; position:relative; }
.value-grid{ display:grid; gap:44px; max-width:920px; margin:0 auto; }
@media(min-width:768px){ .value-grid{ grid-template-columns:repeat(3,1fr); } }
.value-item{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.value-ring{ width:52px; height:52px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; background:var(--violet-deepest); }
.value-ring .dot{ width:12px; height:12px; border-radius:50%; border:1px solid var(--gold); }
.value-item h4{ font-size:11px; text-transform:uppercase; letter-spacing:0.16em; font-weight:600; }
.value-item p{ font-size:11px; font-weight:300; color:var(--ink-soft); max-width:240px; line-height:1.7; }

/* Marquee */
.marquee-wrap{ width:100%; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee-card{ width:250px; flex-shrink:0; padding:0 12px; cursor:pointer; }
@media(min-width:640px){ .marquee-card{ width:290px; } }
.marquee-frame{
  width:100%; aspect-ratio:1/1; background:var(--card); border-radius:14px; padding:26px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--hair-gold);
  transition:transform var(--dur-m) var(--ease-lux), box-shadow var(--dur-m) var(--ease-lux);
}
.marquee-card:hover .marquee-frame{ transform:translateY(-6px); box-shadow:0 24px 44px rgba(0,0,0,0.4); }
.marquee-frame img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform var(--dur-l) var(--ease-lux); }
.marquee-card:hover img{ transform:scale(1.06); }

/* Pull quote / about teaser */
.pull-quote{ max-width:760px; margin:0 auto; text-align:center; }
.pull-quote p{ font-size:clamp(20px,2.6vw,30px); font-weight:200; line-height:1.55; color:var(--ink); }
.pull-quote .attribution{ margin-top:22px; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); }

/* Metrics */
.metrics-band{ position:relative; border-top:1px solid var(--hair-gold); border-bottom:1px solid var(--hair-gold); background:var(--violet-deepest); overflow:hidden; }
.metrics-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(194,166,142,0.08), transparent 70%); pointer-events:none; }
.metrics-grid{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:40px 16px; padding:70px 0; }
@media(min-width:768px){ .metrics-grid{ grid-template-columns:repeat(4,1fr); } }
.metric{ text-align:center; padding:0 12px; position:relative; }
.metric:not(:last-child)::after{ content:''; position:absolute; right:0; top:10%; bottom:10%; width:1px; background:var(--hair); }
@media(max-width:767px){ .metric:nth-child(odd)::after{ display:none; } }
.metric .idx{ font-size:9px; font-family:monospace; letter-spacing:0.24em; color:var(--gold); }
.metric .num{ display:block; font-size:clamp(26px,4vw,40px); font-weight:200; margin-top:8px; letter-spacing:0.02em; }
.metric .label{ display:block; margin-top:8px; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }

/* Craft / manufacturing rows */
.craft-row{ display:grid; gap:48px; align-items:center; padding:64px 0; border-bottom:1px solid var(--hair); }
.craft-row:last-child{ border-bottom:none; }
@media(min-width:900px){ .craft-row{ grid-template-columns:1fr 1fr; gap:80px; } .craft-row.reverse .craft-media{ order:2; } }
.craft-media{ position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:var(--card); }
.craft-media img{ width:100%; height:100%; object-fit:contain; padding:34px; }
.craft-media .frame-corner{ position:absolute; width:26px; height:26px; border:1px solid var(--gold); opacity:0.7; }
.craft-media .fc-tl{ top:14px; left:14px; border-right:none; border-bottom:none; }
.craft-media .fc-br{ bottom:14px; right:14px; border-left:none; border-top:none; }
.craft-copy .idx{ font-size:10px; font-family:monospace; letter-spacing:0.3em; color:var(--gold); }
.craft-copy h3{ font-size:clamp(22px,3vw,32px); font-weight:300; margin-top:14px; letter-spacing:0.01em; }
.craft-copy p{ margin-top:18px; font-size:13px; font-weight:300; line-height:1.85; color:var(--ink-soft); max-width:46ch; }

/* Collection cards */
.collection-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:640px){ .collection-grid{ grid-template-columns:1fr 1fr; } }
.collection-card{
  position:relative; border:1px solid var(--hair); border-radius:4px; overflow:hidden; cursor:pointer;
  aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color var(--dur-s) ease;
}
.collection-card:hover{ border-color:var(--gold); }
.collection-card .cc-bg{ position:absolute; inset:0; background:var(--card); display:flex; align-items:center; justify-content:center; padding:8%; }
.collection-card .cc-bg img{ max-width:70%; max-height:70%; object-fit:contain; transition:transform var(--dur-l) var(--ease-lux); }
.collection-card:hover .cc-bg img{ transform:scale(1.08) rotate(-1deg); }
.collection-card .cc-overlay{
  position:relative; z-index:2; padding:22px 24px; background:linear-gradient(0deg, rgba(19,3,26,0.92), rgba(19,3,26,0.15));
}
.collection-card .cc-tag{ font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); }
.collection-card .cc-title{ font-size:22px; font-weight:300; letter-spacing:0.02em; margin-top:6px; color:var(--ink); }
.collection-card .cc-count{ font-size:10px; color:var(--ink-mute); margin-top:4px; letter-spacing:0.1em; }

/* CTA band */
.cta-band{
  position:relative; padding:100px 0; text-align:center; background:var(--violet-deep);
  border-top:1px solid var(--hair-gold); border-bottom:1px solid var(--hair-gold); overflow:hidden;
}
.cta-band h2{ font-size:clamp(26px,4vw,44px); font-weight:200; text-transform:uppercase; letter-spacing:0.05em; max-width:16ch; margin:0 auto; }
.cta-band p{ margin-top:18px; font-size:13px; color:var(--ink-soft); font-weight:300; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; justify-content:center; gap:16px; margin-top:36px; flex-wrap:wrap; }

/* ==========================================================================
   Catalogue / product grid
   ========================================================================== */
.catalog-header{ text-align:center; padding:64px 0 40px; }
.catalog-header h1{ font-size:clamp(30px,5vw,52px); font-weight:200; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); }
.catalog-header .count{ margin-top:10px; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); }
.catalog-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:28px; }
.filter-chip{
  padding:9px 20px; border:1px solid var(--hair); border-radius:999px; font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft); transition:all var(--dur-s) ease;
}
.filter-chip.active, .filter-chip:hover{ border-color:var(--gold); color:var(--gold); background:rgba(194,166,142,0.08); }

.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:0 0 100px; }
@media(min-width:640px){ .product-grid{ grid-template-columns:repeat(3,1fr); gap:24px; } }
@media(min-width:1024px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
.product-card{ cursor:pointer; }
.product-frame{
  position:relative; aspect-ratio:1/1; background:var(--card); border-radius:10px; border:1px solid var(--hair-gold);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden;
  transition:transform var(--dur-m) var(--ease-lux), box-shadow var(--dur-m) var(--ease-lux), border-color var(--dur-s) ease;
}
.product-card:hover .product-frame{ transform:translateY(-4px); box-shadow:0 20px 38px rgba(0,0,0,0.35); border-color:var(--gold); }

.product-frame img{ max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity 0.5s ease; }
.product-frame img.loaded{ opacity:1; }

.product-card:hover .product-frame img{ transform:none; }

.product-frame .frame-tag{
  position:absolute; top:10px; left:10px; font-size:8px; letter-spacing:0.12em; text-transform:uppercase;
  background:var(--violet); color:var(--gold); padding:4px 8px; border-radius:3px; opacity:0; transition:opacity var(--dur-s) ease;
}
.product-card:hover .frame-tag{ opacity:1; }
.product-meta{ margin-top:12px; text-align:center; }
.product-meta .sku{ font-size:10px; font-family:monospace; letter-spacing:0.06em; color:var(--ink-soft); }
.product-meta .weight{ font-size:9px; color:var(--ink-mute); margin-top:2px; }

/* ==========================================================================
   Modals — Product Enquiry & Enquiry List (NOT checkout / no pricing)
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(10,2,13,0.86); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; padding:16px;
  opacity:0; transition:opacity var(--dur-s) ease;
}
.modal-overlay.open{ display:flex; }
.modal-overlay.show{ opacity:1; }
.modal-box{
  background:var(--violet); border:1px solid var(--hair-gold); width:100%; max-width:960px; border-radius:14px;
  overflow:hidden; display:grid; grid-template-columns:1fr; max-height:92vh; box-shadow:0 40px 100px rgba(0,0,0,0.5);
  transform:translateY(24px) scale(0.98); transition:transform var(--dur-m) var(--ease-lux);
}
.modal-overlay.show .modal-box{ transform:translateY(0) scale(1); }
@media(min-width:960px){ .modal-box{ grid-template-columns:1fr 1fr; } }

/* Desktop Modal Media (Large Image & Side-by-Side) */
.modal-media{ 
  background:var(--card); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:40px; 
  height:100%; 
  aspect-ratio:auto; 
  border-bottom:1px solid var(--hair); 
}
@media(min-width:960px){ 
  .modal-media{ 
    border-bottom:none; 
    border-right:1px solid var(--hair); 
  } 
}
.modal-media img{ 
  max-width:100%; 
  max-height:100%; 
  object-fit:contain; 
}

.modal-body{ padding:28px; overflow-y:auto; display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--hair); padding-bottom:16px; }
.modal-head .tag{ font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.modal-head h2{ font-size:26px; font-weight:600; letter-spacing:0.04em; margin-top:6px; font-family:monospace; }
.modal-close{ font-size:26px; line-height:1; color:var(--ink-mute); }
.modal-close:hover{ color:var(--ink); }
.spec-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--hair); font-size:12px; }
.spec-row span:first-child{ color:var(--ink-mute); }
.spec-row span:last-child{ font-weight:500; }
.option-group{ display:flex; flex-direction:column; gap:8px; }
.option-label{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.option-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:border-color var(--dur-s) ease;
}
.option-row:hover{ border-color:var(--gold-dim); }
.option-row input{ accent-color:var(--gold); }
.option-row span{ font-size:12px; font-weight:300; flex-grow:1; }
.qty-row{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--hair); }
.qty-row .label{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.qty-row .sub{ display:block; font-size:10px; color:var(--ink-mute); font-weight:300; margin-top:2px; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--hair); border-radius:8px; overflow:hidden; }
.qty-control button{ padding:8px 14px; font-size:16px; }
.qty-control button:hover{ background:rgba(255,255,255,0.06); }
.qty-control input{ width:46px; text-align:center; background:transparent; border:none; color:var(--ink); font-family:monospace; font-size:12px; }

/* Enquiry list modal */
.enquiry-item{ display:flex; gap:16px; padding:16px; border:1px solid var(--hair); border-radius:10px; align-items:center; }
.enquiry-item .thumb{ width:64px; height:64px; background:var(--card); border-radius:6px; padding:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.enquiry-item .thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.enquiry-item .info{ flex-grow:1; }
.enquiry-item .info .sku{ font-family:monospace; font-size:12px; font-weight:600; }
.enquiry-item .info .extra{ font-size:10px; color:var(--ink-mute); margin-top:3px; }
.enquiry-item .remove{ font-size:11px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:0.1em; }
.enquiry-item .remove:hover{ color:var(--gold); }
.form-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:560px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; font-weight:500; }
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--hair); border-radius:8px;
  padding:12px 14px; font-size:12px; color:var(--ink); transition:border-color var(--dur-s) ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-mute); }
.field input:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:none; }
.form-note{ font-size:9px; color:var(--ink-mute); text-align:center; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-mute); font-size:12px; }
.empty-state .btn{ margin-top:20px; }

/* ==========================================================================
   Inner pages (about, contact, legal)
   ========================================================================== */
.page-head{ text-align:center; padding:90px 0 20px; }
.page-head h1{ font-size:clamp(30px,5vw,50px); font-weight:200; letter-spacing:0.12em; text-transform:uppercase; }
.prose-card{ background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:16px; padding:44px; }
@media(min-width:768px){ .prose-card{ padding:60px; } }
.prose-card p{ font-size:13px; line-height:1.9; color:var(--ink-soft); font-weight:300; }
.prose-card h2{ font-size:18px; font-weight:500; margin-bottom:14px; }
.prose-card ul{ list-style:disc; padding-left:20px; }
.prose-card li{ font-size:13px; line-height:1.85; color:var(--ink-soft); font-weight:300; margin-bottom:8px; }
.stat-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:36px; margin-top:36px; border-top:1px solid var(--hair); max-width:640px; margin-left:auto; margin-right:auto; }
.stat-trio .stat-num{ font-size:28px; font-weight:200; color:var(--gold); }
.stat-trio .stat-label{ display:block; margin-top:6px; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute); }
.promise-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:48px; }
@media(min-width:768px){ .promise-grid{ grid-template-columns:repeat(3,1fr); } }
.promise-card{ background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:14px; padding:30px; text-align:center; }
.promise-card .idx{ font-family:monospace; font-size:11px; color:var(--gold); letter-spacing:0.2em; }
.promise-card h3{ font-size:15px; font-weight:400; margin-top:12px; }
.promise-card p{ font-size:11px; color:var(--ink-soft); margin-top:10px; line-height:1.7; }

.faq-item{ background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:14px; padding:28px; margin-bottom:16px; }
.faq-item h3{ font-size:15px; font-weight:400; margin-bottom:8px; }
.faq-item p{ font-size:12px; color:var(--ink-soft); line-height:1.8; font-weight:300; }

.contact-panel{
  display:grid; grid-template-columns:1fr; gap:0; background:rgba(255,255,255,0.04);
  border:1px solid var(--hair); border-radius:18px; overflow:hidden;
}
@media(min-width:900px){ .contact-panel{ grid-template-columns:5fr 7fr; } }
.contact-left{ padding:44px; border-bottom:1px solid var(--hair); display:flex; flex-direction:column; justify-content:center; gap:24px; }
@media(min-width:900px){ .contact-left{ border-bottom:none; border-right:1px solid var(--hair); } }
.touchpoint{ display:flex; align-items:center; gap:16px; padding:18px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--hair); transition:all var(--dur-s) ease; }
.touchpoint:hover{ background:rgba(255,255,255,0.06); border-color:var(--gold-dim); }
.touchpoint .icon{ width:42px; height:42px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--violet-deepest); }
.touchpoint .label{ font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }
.touchpoint .value{ font-size:14px; font-weight:500; margin-top:2px; }
.contact-right{ padding:44px; }

/* ==========================================================================
   Footer (base)
   ========================================================================== */
.footer-wave{ width:100%; line-height:0; overflow:hidden; margin-top:-1px; }
.footer-wave svg{ width:100%; height:90px; display:block; }
.newsletter-row{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.newsletter-row input{ background:rgba(255,255,255,0.05); border:1px solid var(--hair); border-radius:6px; padding:10px 12px; font-size:11px; color:var(--ink); }
.social-row{ display:flex; gap:10px; margin-top:12px; }
.social-btn{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid var(--hair-gold); display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) ease; }
.social-btn:hover{ background:rgba(194,166,142,0.18); border-color:var(--gold); }
.social-btn svg{ width:15px; height:15px; fill:var(--ink); transition:fill var(--dur-s) ease; }
.social-btn:hover svg{ fill:var(--gold); }
.cert-tag{ color:var(--gold); font-weight:500; letter-spacing:0.08em; }

/* Lazy load base */
.lazy-img{ opacity:0; transition:opacity 0.45s ease; }
.lazy-img.loaded{ opacity:1; }

/* Page transition wrapper */
#app{ animation:pageIn 0.55s var(--ease-lux); }
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* Scrollbar (subtle, luxury) */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--violet-deepest); }
::-webkit-scrollbar-thumb{ background:var(--gold-dim); border-radius:6px; }

/* ==========================================================================
   3D / TILT — depth for product & collection surfaces
   ========================================================================== */
.tilt-zone{ perspective:1200px; }
.tilt-el{
  transform-style:preserve-3d;
  transition:transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
  will-change:transform;
}
.tilt-el .tilt-shine{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.22), transparent 55%);
  transition:opacity 0.4s ease; border-radius:inherit;
}
.tilt-el:hover .tilt-shine{ opacity:1; }
@media (prefers-reduced-motion: reduce), (pointer:coarse){
  .tilt-el{ transform:none !important; }
}

.product-frame, .collection-card, .marquee-frame, .craft-media{ position:relative; transform-style:preserve-3d; }

/* ==========================================================================
   Footer — clean restructured grid design
   ========================================================================== */
footer.site-footer{ background:var(--violet-deepest); border-top:1px solid var(--hair-gold); position:relative; margin-top:80px; overflow:hidden; padding-top:64px; }
footer.site-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
#footer-particles{ position:absolute; inset:0; width:100%; height:100%; opacity:0.35; pointer-events:none; }

.footer-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:40px;
  padding-bottom:44px; text-align:left;
}
@media(min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 28px; } }
@media(min-width:1000px){ .footer-grid{ grid-template-columns:1.3fr 0.85fr 0.85fr 0.85fr 0.95fr; gap:28px; } }

.footer-brand{ text-align:left; grid-column:1 / -1; }
@media(min-width:1000px){ .footer-brand{ grid-column:auto; } }
.footer-brand-mark{ display:flex; align-items:center; }
.footer-brand-mark img{ height:34px; width:auto; object-fit:contain; }
.footer-brand-desc{ margin-top:16px; font-size:12px; line-height:1.8; color:var(--ink-soft); font-weight:300; max-width:300px; text-align:left; }

.footer-col{ text-align:left; }
.footer-col h4{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--hair); text-align:left; }
.footer-col ul{ text-align:left; }
.footer-col ul li{ margin-bottom:12px; text-align:left; }
.footer-col ul button, .footer-col ul a{
  font-size:12px; color:var(--ink-soft); font-weight:300; text-align:left;
  transition:color var(--dur-s) ease, padding-left var(--dur-s) ease; display:block; width:100%;
}
.footer-col ul button:hover, .footer-col ul a:hover{ color:var(--gold); padding-left:4px; }

.footer-contact-list{ text-align:left; }
.footer-contact-list li{ font-size:12px; color:var(--ink-soft); font-weight:300; display:flex; flex-direction:column; gap:3px; text-align:left; }
.footer-contact-list .fc-label{ font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); }
.footer-contact-list a{ color:var(--ink-soft); text-align:left; }
.footer-contact-list a:hover{ color:var(--gold); }

.footer-newsletter-bar{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; justify-content:space-between; align-items:flex-start;
  padding:28px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
@media(min-width:700px){ .footer-newsletter-bar{ flex-direction:row; align-items:center; } }
.footer-newsletter-bar p{ font-size:12px; color:var(--ink-soft); font-weight:300; margin-top:6px; max-width:340px; }
.footer-newsletter-bar .newsletter-row{ flex-direction:row; gap:10px; width:100%; max-width:380px; }
.footer-newsletter-bar .newsletter-row input{ flex-grow:1; }

.footer-badges{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; padding:28px 0; justify-content:center; }
.cert-badge{
  display:flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--hair-gold); border-radius:999px;
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-light);
  background:rgba(194,166,142,0.06); transition:all var(--dur-s) var(--ease-lux);
}
.cert-badge:hover{ background:rgba(194,166,142,0.16); transform:translateY(-2px); }
.cert-badge .b-num{ font-family:monospace; color:var(--gold); font-weight:600; }

.footer-bottom{
  position:relative; z-index:2; padding:22px 0; display:flex; flex-direction:column; gap:12px; align-items:center;
  justify-content:space-between; font-size:10px; color:var(--ink-mute); font-weight:300; border-top:1px solid var(--hair);
}
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }

/* Floating back-to-top */
.floating-top-btn{
  position:fixed; right:22px; bottom:22px; z-index:55; width:44px; height:44px; border-radius:50%;
  background:var(--violet-deep); border:1px solid var(--hair-gold); color:var(--gold); font-size:16px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:all var(--dur-s) var(--ease-lux);
}
.floating-top-btn.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.floating-top-btn:hover{ background:var(--gold); color:var(--violet); }

body, html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.modal-open {
  overflow: hidden !important;
}

.value-item p {
  font-size: 14px;
  line-height: 1.6;
}

.pull-quote .eyebrow {
  font-size: 16px;
  letter-spacing: 2px;
}
/* Enhanced sizing for Stat Trio Band */
.stat-trio .stat-num {
  font-size: 2.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.stat-trio .stat-label {
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 6px;
  display: block;
}

#custom-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#custom-confirm-modal.open {
  display: flex !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .hero-content {
    display: none !important;
  }
}

/* Footer Responsive Scaling */
@media (min-width: 1200px) {
  .site-footer {
    font-size: 1.05rem;
  }
  
  .site-footer h3, 
  .site-footer .footer-heading {
    font-size: 1.15rem;
  }

  .site-footer p, 
  .site-footer a, 
  .site-footer li {
    font-size: 0.95rem;
  }
}

@media (min-width: 1600px) {
  .site-footer {
    font-size: 1.15rem;
  }
  
  .site-footer h3, 
  .site-footer .footer-heading {
    font-size: 1.25rem;
  }

  .site-footer p, 
  .site-footer a, 
  .site-footer li {
    font-size: 1.05rem;
  }
}

/* Make the footer logo larger */
.footer-brand-mark img.footer-logo-large {
  height: 110px !important;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Responsive Modal Sizing & Touch-Scrolling Configuration
   ========================================================================== */
#product-modal {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-box {
  max-height: 92vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* --- MOBILE VIEW ONLY (Small Image & Direct Touch Scrolling) --- */
@media (max-width: 959px) {
  .modal-box {
    grid-template-columns: 1fr !important;
    max-height: 85vh !important;
  }
  
  .modal-media {
    max-height: 180px !important;
    height: 180px !important;
    aspect-ratio: auto !important;
    padding: 10px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--hair) !important;
    flex-shrink: 0;
  }

  .modal-media img {
    max-height: 150px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  .modal-body {
    overflow-y: visible !important;
    padding: 20px !important;
  }
}
/* ==========================================================================
   Full Modal Mouse/Touch Scrolling Fix
   ========================================================================== */
#product-modal {
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-box {
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.modal-body {
  overflow-y: visible !important;
  pointer-events: auto !important;
}

/* --- MOBILE VIEW ONLY (Small Image & Touch Scrolling) --- */
@media (max-width: 959px) {
  .modal-box {
    grid-template-columns: 1fr !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  .modal-media {
    max-height: 180px !important;
    height: 180px !important;
    aspect-ratio: auto !important;
    padding: 10px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--hair) !important;
    flex-shrink: 0;
  }

  .modal-media img {
    max-height: 150px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  .modal-body {
    overflow-y: visible !important;
    padding: 20px !important;
  }
}