/* ===== MILESTONE ETCH — Homepage (Lumière) ===== */

/* Hero */
.hero { padding-block: clamp(2.5rem,5vw,4.5rem) 0; }
.hero__top { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.hero h1 { font-family:var(--serif); font-weight:800; font-size:clamp(2.8rem,8vw,7rem); line-height:.96; letter-spacing:-.02em; color:var(--rich-black); margin:0; }
.hero h1 .it { font-style:italic; font-weight:400; }
.hero__meta { max-width:30ch; }
.hero__meta p { font-family:var(--cormorant); font-size:1.25rem; line-height:1.55; color:var(--ink-soft); margin:0 0 1.2rem; }
.hero__meta .cta { display:inline-flex; gap:.6rem; align-items:center; font-size:.72rem; letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--rich-black); text-decoration:none; font-weight:600; }
.hero__meta .cta span { width:30px; height:1px; background:var(--rose-gold); transition:width .4s; }
.hero__meta .cta:hover span { width:48px; }
.hero__stage { position:relative; aspect-ratio:16/7; margin-top:clamp(1rem,2vw,1.5rem); overflow:hidden; }
.hero__stage img,
.hero__stage .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__caption { position:absolute; left:1.4rem; bottom:1.4rem; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); padding:.7rem 1.1rem; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* Marquee occasions */
.marquee { overflow:hidden; border-block:1px solid rgba(17,17,17,.12); padding-block:1.1rem; margin-top:clamp(2.5rem,5vw,4rem); }
.marquee__track { display:flex; gap:3.5rem; width:max-content; animation:slide 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.marquee a { font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--rich-black); white-space:nowrap; display:flex; align-items:center; gap:3.5rem; text-decoration:none; transition:color .3s; }
.marquee a:hover { color:var(--rose-gold); }
.marquee a::after { content:'✦'; color:var(--gold); font-size:.8rem; font-style:normal; }
@media (prefers-reduced-motion:reduce) { .marquee__track { animation:none; } }

/* Process frames */
.process__head { max-width:620px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.process__head h2 { font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4vw,3rem); color:var(--rich-black); margin:1rem 0 0; line-height:1.08; }
.frames { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.4rem); }
.frame .ph,
.frame .frame__img { aspect-ratio:3/4; width:100%; object-fit:cover; }
.frame__cap { display:flex; gap:1rem; padding-top:1rem; }
.frame__cap .no { font-family:var(--cormorant); font-style:italic; color:var(--gold); font-size:1.2rem; }
.frame__cap h3 { font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--rich-black); margin:0 0 .4rem; }
.frame__cap p { font-size:.86rem; line-height:1.65; color:var(--ink-soft); margin:0; }

/* Cinematic gallery — lights on scroll */
.gallery {
  background: radial-gradient(140% 90% at 50% 0%, #1c1c1e 0%, #121113 60%, #0c0b0d 100%);
  color: #EDE7E2;
  overflow: hidden;
  position: relative;
  transition: background 1s ease;
}
.gallery__intro { text-align:center; max-width:660px; margin:0 auto clamp(3rem,6vw,5rem); }
.gallery__intro .lbl { color:var(--dusty-rose); }
.gallery__intro h2 { font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,3.8rem); color:#fff; line-height:1.06; margin:1rem 0 1.2rem; }
.gallery__intro p { font-family:var(--cormorant); font-size:1.34rem; line-height:1.6; color:rgba(237,231,226,.6); }
.gallery__hint { margin-top:1.6rem; font-size:.66rem; letter-spacing:var(--track-mid); text-transform:uppercase; color:rgba(237,231,226,.4); display:inline-flex; align-items:center; gap:.6rem; }
.gallery__hint .dot { width:6px; height:6px; border-radius:50%; background:var(--dusty-rose); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* Plinths */
.plinths { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.plinth { display:flex; flex-direction:column; align-items:center; text-align:center; }
.stage { position:relative; width:100%; aspect-ratio:3/4; display:flex; align-items:flex-end; justify-content:center; }
.stage__amb { position:absolute; inset:0; opacity:var(--glow-op,1); transition:background 1.3s ease, opacity .5s ease; }
.stage.is-lit .stage__amb { background:radial-gradient(44% 40% at 50% 46%, rgba(232,180,184,.34) 0%, rgba(212,175,55,.1) 46%, transparent 72%); }
.plaque-unit { position:relative; width:min(70%,200px); display:flex; flex-direction:column; align-items:center; margin-bottom:6%; }
.plaque {
  position:relative; width:100%; aspect-ratio:4/5; border-radius:5px; padding:1.3rem .9rem;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  transition:box-shadow 1.3s, border-color 1.3s;
}
.stage.is-lit .plaque { border-color:rgba(232,180,184,.4); box-shadow:0 0 calc(44px * var(--glow-op,1)) -6px rgba(232,180,184,.45), inset 0 0 32px rgba(232,180,184,.06); }
.plaque .etch-name { font-family:var(--serif); font-style:italic; font-size:clamp(.9rem,1.6vw,1.2rem); text-align:center; line-height:1.2; color:rgba(255,255,255,.2); transition:color 1.3s, text-shadow 1.3s; }
.plaque .etch-line { width:28px; height:1px; background:rgba(255,255,255,.14); transition:background 1.3s; }
.plaque .etch-date { font-family:var(--sans); font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.14); padding-left:.3em; transition:color 1.3s; }
.stage.is-lit .etch-name { color:#fff; text-shadow:0 0 14px rgba(232,180,184,.55); }
.stage.is-lit .etch-line { background:var(--dusty-rose); }
.stage.is-lit .etch-date { color:var(--dusty-rose); }
.stand { width:58%; height:20px; margin-top:-2px; border-radius:0 0 6px 6px; background:linear-gradient(180deg,#2a2628,#161416); border:1px solid rgba(255,255,255,.06); position:relative; }
.stand::before { content:''; position:absolute; top:-3px; left:14%; width:72%; height:4px; border-radius:99px; background:rgba(255,255,255,.04); transition:background 1.3s, box-shadow 1.3s; }
.stage.is-lit .stand::before { background:rgba(232,180,184,.6); box-shadow:0 0 14px rgba(232,180,184,.7); }
.plinth__base { width:84%; height:1px; background:rgba(255,255,255,.12); }
.plinth h3 { font-family:var(--serif); font-weight:400; font-size:1.15rem; color:#fff; margin:1.2rem 0 .2rem; }
.plinth p { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,231,226,.45); margin:0; }

/* Collection grid */
.collection__head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
.collection__head h2 { font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.6vw,2.8rem); color:var(--rich-black); margin:0; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.8rem); }
.product { position:relative; }
.product__media { position:relative; aspect-ratio:4/5; background:var(--cream); overflow:hidden; }
.product__media img,
.product__media .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product__media .ph.alt,
.product__media img.alt { opacity:0; }
.product:hover .ph.main,
.product:hover img.main { opacity:0; }
.product:hover .ph.alt,
.product:hover img.alt { opacity:1; }
.product__add {
  position:absolute; inset:auto 0 0 0;
  background:rgba(17,17,17,.92); color:#fff; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.62rem; letter-spacing:var(--track-mid); text-transform:uppercase;
  padding:.9rem; transform:translateY(100%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), background .3s;
}
.product:hover .product__add { transform:none; }
.product__add:hover,
.product__add.added { background:var(--rose-gold); }
.product__row { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding-top:1rem; }
.product h3 { font-family:var(--serif); font-weight:400; font-size:1.1rem; color:var(--rich-black); margin:0; }
.product .price { font-family:var(--cormorant); font-size:1.05rem; color:var(--ink-soft); }
.product .occ { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-gold); margin:.3rem 0 0; }

/* Bespoke CTA */
.bespoke { position:relative; background:var(--rich-black); color:#EDE7E2; text-align:center; overflow:hidden; }
.bespoke .ph,
.bespoke .bespoke__bg { position:absolute; inset:0; opacity:.32; width:100%; height:100%; object-fit:cover; }
.bespoke__inner { position:relative; max-width:680px; margin:0 auto; padding-block:clamp(5rem,10vw,9rem); }
.bespoke h2 { font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4.4vw,3.6rem); color:#fff; line-height:1.08; margin:1rem 0 1.3rem; }
.bespoke p { font-family:var(--cormorant); font-size:1.34rem; line-height:1.6; color:rgba(237,231,226,.72); margin:0 auto 2.2rem; max-width:46ch; }

/* Assurance strip */
.assure { background:var(--cream); }
.assure__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); text-align:center; }
.assure h3 { font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--rich-black); margin:.6rem 0 .5rem; }
.assure p { font-size:.9rem; line-height:1.7; color:var(--ink-soft); max-width:32ch; margin:0 auto; }
.assure .rule { width:30px; height:1px; background:var(--dusty-rose); margin:0 auto; }

@media (max-width:900px) {
  .frames { grid-template-columns:1fr; }
  .plinths { grid-template-columns:1fr; }
  .products { grid-template-columns:1fr 1fr; }
  .assure__grid { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:600px) {
  .products { grid-template-columns:1fr; }
}