/* =========================================================
   YZC PERDE — Design tokens
   Two-tone white & brown palette, warm and refined.
   ========================================================= */
:root{
  --cream:      #ffffff;
  --cream-deep: #f7f2ea;
  --sand:       #eee2d2;
  --blush:      #cca87d;
  --blush-deep: #a97c4f;
  --sage:       #8a6d4e;
  --sage-deep:  #6b5138;
  --gold:       #8a5f34;
  --gold-deep:  #5c3f26;
  --ink:        #3b2a1c;
  --ink-soft:   #6b5847;
  --ink-faint:  #a8927e;
  --white:      #ffffff;
  --line:       rgba(92,63,38,.18);
  --shadow-sm:  0 8px 24px rgba(59,42,28,.08);
  --shadow-md:  0 20px 48px rgba(59,42,28,.14);
  --shadow-lg:  0 30px 70px rgba(59,42,28,.20);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-soft:  cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  font-size:16px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

/* ---------- Cross-document view transitions ---------- */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: fadeOutSoft .35s var(--ease-soft) both; }
::view-transition-new(root){ animation: fadeInSoft .5s var(--ease-soft) both; }
@keyframes fadeOutSoft{ to{ opacity:0; transform:translateY(-8px) scale(.995); } }
@keyframes fadeInSoft{ from{ opacity:0; transform:translateY(14px) scale(1.003); } }
.brand-mark{ view-transition-name: brand-mark; }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:16px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold);}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-dark::before{background:var(--gold);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}

/* ---------- Pleat divider ---------- */
.pleats{display:block; width:100%; height:64px;}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:16px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
header.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  padding:10px 0;
  box-shadow:0 10px 30px rgba(59,42,28,.10);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center;}
.brand img{height:74px; width:auto; transition:height .5s var(--ease), filter .5s var(--ease);}
header.solid .brand img{height:58px;}
body.on-dark-hero header:not(.solid) .brand img{filter:brightness(0) invert(1);}

nav.main-nav ul{
  display:flex; gap:4px; align-items:center; position:relative;
  background:rgba(255,255,255,.14);  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(16px) saturate(1.3);
  border-radius:100px; padding:6px;
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
header.solid nav.main-nav ul{
  background:rgba(59,42,28,.05);
  border-color:rgba(59,42,28,.08);
  box-shadow:none;
}
nav.main-nav a{
  position:relative; font-size:13.5px; letter-spacing:.05em;
  color:var(--ink); font-weight:600; padding:11px 22px; border-radius:100px;
  transition:color .35s var(--ease);
  display:block;
}
nav.main-nav a:hover{ color:var(--blush-deep); }
body.on-dark-hero nav.main-nav a:hover{ color:var(--sand); }
body.on-dark-hero nav.main-nav a{ color:#fff; }
header.solid nav.main-nav a{ color:var(--ink) !important; }
nav.main-nav a.active{color:var(--ink) !important;}
body.on-dark-hero nav.main-nav a.active{color:var(--ink) !important;}
nav.main-nav li{position:relative; z-index:2;}
.nav-pill{
  position:absolute; top:6px; height:calc(100% - 12px); border-radius:100px; background:var(--white);
  box-shadow:var(--shadow-sm); transition:left .45s var(--ease-soft), width .45s var(--ease-soft), opacity .3s;
  z-index:1; opacity:0;
}

.burger{display:none; flex-direction:column; gap:5px; padding:8px;}
.burger span{width:24px; height:1.5px; background:var(--ink); display:block; transition:all .35s var(--ease);}
body.on-dark-hero .burger:not(.solid-burger) span{background:#fff;}
header.solid .burger span{background:var(--ink);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; font-size:13.5px; letter-spacing:.06em;
  border-radius:100px; transition:all .45s var(--ease); font-weight:600;
}
.btn-primary{background:var(--ink); color:var(--cream);}
.btn-primary:hover{background:var(--gold-deep); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.btn-outline{border:1.5px solid rgba(54,45,36,.25); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink); background:var(--white); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.btn-outline.on-dark{border-color:rgba(255,255,255,.45); color:#fff;}
.btn-outline.on-dark:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.btn-light{background:var(--white); color:var(--ink);}
.btn-light:hover{background:var(--gold); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-md);}

/* ---------- Hero (shared blob motion) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  min-height:56vh; display:flex; align-items:center;
  background:linear-gradient(155deg, var(--cream-deep), var(--cream) 60%);
  padding-top:140px; padding-bottom:80px;
}
.page-hero.tall{min-height:100vh;}
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  animation:drift 18s ease-in-out infinite;
  pointer-events:none;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-24px) scale(1.08); }
  66%{ transform:translate(-24px,18px) scale(.96); }
}
.blob-1{width:480px; height:480px; background:var(--blush); top:-140px; right:-100px; animation-duration:22s;}
.blob-2{width:360px; height:360px; background:var(--sage); bottom:-120px; left:-80px; animation-duration:26s; animation-delay:-6s;}
.blob-3{width:260px; height:260px; background:var(--gold); top:40%; left:58%; opacity:.35; animation-duration:19s; animation-delay:-3s;}

.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-position:center 32%; background-size:cover;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,14,9,.62), rgba(20,14,9,.86));
}

.hero-inner{position:relative; z-index:2; max-width:720px;}
.page-hero h1{font-size:clamp(38px,6vw,72px); line-height:1.06; margin-bottom:24px; font-weight:500;}
.page-hero h1 em{font-style:italic; color:var(--gold-deep); font-weight:500;}
.page-hero.tall h1{color:#fff;}
.page-hero.tall h1 em{color:var(--blush);}
.page-hero p.lead{font-size:17.5px; color:var(--ink-soft); max-width:540px; margin-bottom:36px; font-weight:400;}
.page-hero.tall p.lead{color:rgba(255,255,255,.86);}

.btn-row{display:flex; gap:16px; flex-wrap:wrap;}

.hero-stats{display:flex; gap:48px; flex-wrap:wrap; margin-top:56px; position:relative; z-index:2;}
.hero-stats div{padding-left:18px; border-left:1.5px solid rgba(255,255,255,.35);}
.hero-stats b{display:block; font-family:'Playfair Display',serif; font-size:32px; color:#fff; font-weight:500;}
.hero-stats span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7);}

.hero-divider{position:absolute; left:0; right:0; bottom:-1px; z-index:3; line-height:0;}

/* Small page-header banner (non-home pages) */
.crumb{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px;}
.crumb a:hover{color:var(--gold-deep);}

/* ---------- Section shells ---------- */
section{position:relative;}
.section-pad{padding:120px 0;}
.section-pad.tight{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:60px;}
.section-head h2{font-size:clamp(30px,4vw,46px); font-weight:500;}
.section-head p{margin-top:18px; font-size:16px; color:var(--ink-soft); max-width:560px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.soft{background:var(--cream);}
.deep{background:linear-gradient(155deg,#efe3d0,#e9d3c4 60%,#e3cdc0); }
.deep h2, .deep .eyebrow{color:var(--ink);}
.ink-panel{background:linear-gradient(160deg,#453a2f,#33291f); color:var(--cream);}
.ink-panel h2{color:#fff;}
.ink-panel .section-head p{color:rgba(251,247,241,.72);}

/* ---------- Cards (used across pages) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.info-card{
  background:var(--white); border-radius:22px; padding:40px 32px;
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
  border:1px solid rgba(171,126,73,.10);
}
.info-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.info-card .num{
  width:46px; height:46px; border-radius:50%; background:var(--cream-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  font-family:'Playfair Display',serif; color:var(--gold-deep); font-size:17px; font-weight:600;
}
.info-card h3{font-size:21px; margin-bottom:10px; font-weight:500;}
.info-card p{font-size:14.5px; color:var(--ink-soft);}

/* ---------- Product / category chips ---------- */
.chip-cloud{display:flex; flex-wrap:wrap; gap:12px;}
.chip{
  font-size:13px; letter-spacing:.03em; padding:12px 22px; border-radius:100px;
  background:var(--white); border:1px solid var(--line); color:var(--gold-deep);
  transition:all .4s var(--ease); font-weight:500;
}
.chip:hover{background:var(--ink); color:var(--cream); border-color:var(--ink); transform:translateY(-3px);}

/* ---------- About split ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:74px; align-items:center;}
.split.rev{grid-template-columns:.95fr 1.05fr;}
.split.rev .split-media{order:-1;}
.split-copy p{font-size:16px; color:var(--ink-soft); margin-bottom:22px;}
.split-copy p.lede{
  font-family:'Playfair Display',serif; font-style:italic; font-size:24px; color:var(--ink);
  line-height:1.5; font-weight:500; margin-bottom:26px;
}
.split-media{position:relative;}
.split-media .frame{
  position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-md);
}
.split-media img{width:100%; height:540px; object-fit:cover; transition:transform .8s var(--ease-soft);}
.split-media .frame:hover img{transform:scale(1.05);}
.split-media .badge{
  position:absolute; left:-30px; bottom:-30px; background:var(--white); color:var(--ink);
  padding:26px 28px; width:190px; box-shadow:var(--shadow-md); border-radius:20px;
}
.split-media .badge b{font-family:'Playfair Display',serif; font-size:36px; color:var(--gold-deep); display:block; font-weight:600;}
.split-media .badge span{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}

/* ---------- Masonry gallery ---------- */
.masonry{column-count:4; column-gap:20px;}
.masonry figure{
  break-inside:avoid; margin:0 0 20px; position:relative; overflow:hidden; border-radius:20px;
  cursor:zoom-in; box-shadow:var(--shadow-sm); transition:box-shadow .5s var(--ease-soft);
}
.masonry figure:hover{box-shadow:var(--shadow-md);}
.masonry img{width:100%; display:block; transition:transform .8s var(--ease-soft);}
.masonry figure:hover img{transform:scale(1.07);}
.masonry figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(54,45,36,0) 55%, rgba(54,45,36,.55));
  opacity:0; transition:opacity .45s var(--ease);
}
.masonry figure:hover::after{opacity:1;}
.masonry figure .zoom-ic{
  position:absolute; right:16px; bottom:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(.9); transition:all .45s var(--ease); z-index:2;
}
.masonry figure:hover .zoom-ic{opacity:1; transform:translateY(0) scale(1);}
.masonry figure .zoom-ic svg{width:15px; height:15px; stroke:var(--ink);}

@media(max-width:1100px){.masonry{column-count:3;}}
@media(max-width:720px){.masonry{column-count:2;}}
@media(max-width:480px){.masonry{column-count:1;}}

.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;}
.filter-btn{
  font-size:13px; padding:11px 22px; border-radius:100px; border:1px solid var(--line);
  color:var(--ink-soft); background:var(--white); transition:all .4s var(--ease); font-weight:500;
}
.filter-btn.active, .filter-btn:hover{background:var(--ink); border-color:var(--ink); color:var(--cream);}

/* ---------- Process steps ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.step{position:relative; padding-top:20px;}
.step .idx{
  font-family:'Playfair Display',serif; font-size:52px; font-weight:500; color:var(--blush-deep);
  opacity:.55; line-height:1; margin-bottom:18px; display:block;
}
.step h4{font-size:18px; margin-bottom:10px; font-weight:500;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:0; box-shadow:var(--shadow-lg); border-radius:28px; overflow:hidden;}
.contact-info{background:linear-gradient(160deg,#453a2f,#33291f); color:var(--cream); padding:64px 52px;}
.contact-info h3{font-size:30px; color:#fff; margin-bottom:10px;}
.contact-info > p{color:rgba(251,247,241,.66); font-size:14.5px; margin-bottom:40px;}
.info-row{display:flex; gap:18px; margin-bottom:28px; align-items:flex-start;}
.info-row .ic{
  width:42px; height:42px; border-radius:50%; background:rgba(205,163,108,.16); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.info-row .ic svg{width:17px; height:17px; stroke:var(--gold); fill:none;}
.info-row h4{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:600;}
.info-row p, .info-row a{font-size:15px; color:var(--cream); font-weight:400;}
.info-row a:hover{color:var(--gold);}

.social-btn{
  margin-top:14px; display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  border-radius:100px; background:rgba(251,247,241,.08); border:1px solid rgba(251,247,241,.2);
  font-size:12.5px; letter-spacing:.08em; transition:all .4s var(--ease); font-weight:600;
}
.social-btn svg{width:16px; height:16px; stroke:var(--cream); fill:none;}
.social-btn:hover{background:var(--gold); border-color:var(--gold); color:#33291f;}
.social-btn:hover svg{stroke:#33291f;}

.contact-map{position:relative; min-height:440px;}
.contact-map iframe{width:100%; height:100%; min-height:440px; border:0; filter:grayscale(1) contrast(1.05);}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:32px; background:linear-gradient(135deg,var(--blush),var(--gold));
  padding:70px 60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  box-shadow:var(--shadow-md);
}
.cta-band h3{font-size:clamp(26px,3.4vw,38px); color:#3a2c1c; max-width:480px;}
.cta-band .btn-primary{background:#3a2c1c;}
.cta-band .btn-primary:hover{background:#221a10;}

/* ---------- Footer ---------- */
footer{background:linear-gradient(160deg,#453a2f,#2c2319); color:rgba(251,247,241,.55); padding:64px 0 30px;}
.footer-top{display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(205,163,108,.16);}
.footer-brand img{height:60px; margin-bottom:16px; filter:brightness(0) invert(1);}
.footer-brand p{font-size:13.5px; line-height:1.7; max-width:280px;}
.footer-col h5{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:600;}
.footer-col a{display:block; font-size:14px; margin-bottom:12px; color:rgba(251,247,241,.72);}
.footer-col a:hover{color:var(--gold);}
.footer-social{display:flex; gap:12px; margin-top:8px;}
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(205,163,108,.3);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a svg{width:16px; height:16px; stroke:var(--gold); fill:none;}
.footer-social a:hover{background:var(--gold);}
.footer-social a:hover svg{stroke:#2c2319;}
.footer-bottom{padding-top:26px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);}
.reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .split{grid-template-columns:1fr; gap:46px;}
  .split.rev .split-media{order:0;}
  .split-media img{height:420px;}
  .split-media .badge{left:16px; bottom:16px;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .process{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-map{min-height:340px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:34px;}
}
@media(max-width:760px){
  nav.main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(80vw,320px);
    background:var(--cream); box-shadow:-10px 0 40px rgba(0,0,0,.08);
    transform:translateX(100%); transition:transform .5s var(--ease-soft);
    display:flex; align-items:center; padding:0 40px; z-index:220;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column; gap:18px; align-items:flex-start; width:100%; background:none; border:none; padding:0; backdrop-filter:none;}
  nav.main-nav a{color:var(--ink) !important; font-size:16px; width:100%;}
  .nav-pill{display:none;}
  .burger{display:flex;}
  .section-pad{padding:88px 0;}
  .section-pad.tight{padding:64px 0;}
  .card-grid{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; text-align:center; padding:50px 30px;}
  .footer-top{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .page-hero h1{font-size:34px;}
  .split-media .badge{position:static; margin-top:-6px; width:auto;}
}

/* =========================================================
   Curtain intro animation (home hero) — realistic drape
   ========================================================= */
.curtain-rod{
  position:absolute; top:0; left:0; right:0; height:16px; z-index:7;
  background:linear-gradient(180deg, #e4c088, #ab7e49 45%, #5c3f26 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  animation: rodFade .7s 2.15s var(--ease) forwards;
}
.curtain-rod::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(0,0,0,.35) 0 2px, transparent 2px);
  background-size:34px 16px; background-position:17px 0;
  opacity:.6;
}
@keyframes rodFade{ to{ opacity:0; visibility:hidden; } }

.curtain-panel{
  position:absolute; top:0; bottom:0; width:36%; z-index:6;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:auto 102%;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
.curtain-panel.left{
  left:0; background-image:url('../images/curtain-left.png'); background-position:left top;
  transform-origin:top left;
  animation:curtainOpenLeft 2.2s .2s cubic-bezier(.61,.03,.23,1) both;
}
.curtain-panel.right{
  right:0; background-image:url('../images/curtain-right.png'); background-position:right top;
  transform-origin:top right;
  animation:curtainOpenRight 2.2s .28s cubic-bezier(.61,.03,.23,1) both;
}
@keyframes curtainOpenLeft{
  0%{   transform:translateX(0) scale(1) rotateZ(0deg); }
  45%{  transform:translateX(-18%) scale(1.01) rotateZ(-1deg); }
  75%{  transform:translateX(-78%) scale(.96) rotateZ(.6deg); }
  100%{ transform:translateX(-135%) scale(.9) rotateZ(0deg); }
}
@keyframes curtainOpenRight{
  0%{   transform:translateX(0) scale(1) rotateZ(0deg); }
  45%{  transform:translateX(18%) scale(1.01) rotateZ(1deg); }
  75%{  transform:translateX(78%) scale(.96) rotateZ(-.6deg); }
  100%{ transform:translateX(135%) scale(.9) rotateZ(0deg); }
}
@media (max-width:760px){
  .curtain-panel{ width:52%; background-size:auto 100%; }
}
@media (prefers-reduced-motion: reduce){
  .curtain-panel, .curtain-rod{ display:none; }
}



/* =========================================================
   Mouse-reactive tilt targets
   ========================================================= */
.masonry figure, .tilt, .split-media .frame{
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-soft), box-shadow .5s var(--ease-soft);
  will-change:transform;
}

/* =========================================================
   Instagram-style animated gallery (marquee)
   ========================================================= */
.ig-section{overflow:hidden;}
.ig-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:40px;}
.ig-follow{
  display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:100px;
  background:var(--ink); color:var(--cream); font-size:13px; font-weight:600; letter-spacing:.04em;
  transition:all .4s var(--ease);
}
.ig-follow:hover{background:var(--gold-deep); transform:translateY(-2px);}
.ig-follow svg{width:16px; height:16px; stroke:var(--cream); fill:none;}

.ig-marquee{
  overflow:hidden; position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ig-track{
  display:flex; gap:20px; width:max-content;
  animation:igScroll 38s linear infinite;
}
.ig-marquee:hover .ig-track{ animation-play-state:paused; }
@keyframes igScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ig-item{
  width:200px; height:200px; border-radius:22px; overflow:hidden; flex-shrink:0;
  position:relative; box-shadow:var(--shadow-sm); display:block;
}
.ig-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft);}
.ig-item:hover img{transform:scale(1.1);}
.ig-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(59,42,28,.55));
  opacity:0; transition:opacity .4s var(--ease);
}
.ig-item:hover::after{opacity:1;}
.ig-item .ig-badge{
  position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px); transition:all .4s var(--ease);
}
.ig-item:hover .ig-badge{opacity:1; transform:translateY(0);}
.ig-item .ig-badge svg{width:16px; height:16px; stroke:var(--ink);}
@media(max-width:760px){
  .ig-item{width:150px; height:150px; border-radius:18px;}
}

/* =========================================================
   Product modal (upgraded lightbox)
   ========================================================= */
.lightbox{
  position:fixed; inset:0; background:rgba(24,17,11,.82); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:32px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  backdrop-filter:blur(6px);
}
.lightbox.open{opacity:1; pointer-events:all;}
.modal-card{
  display:grid; grid-template-columns:1.3fr 1fr; max-width:1000px; width:100%; max-height:86vh;
  background:var(--white); border-radius:26px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.4);
  transform:translateY(16px) scale(.98); transition:transform .4s var(--ease-soft);
}
.lightbox.open .modal-card{ transform:translateY(0) scale(1); }
.modal-media{position:relative; background:var(--cream-deep); min-height:320px;}
.modal-media img{width:100%; height:100%; object-fit:cover; display:block; min-height:320px; max-height:86vh;}
.modal-info{padding:44px 40px; display:flex; flex-direction:column; justify-content:center; gap:16px;}
.modal-tag{
  align-self:flex-start; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; border-radius:100px; background:var(--cream-deep); color:var(--gold-deep); font-weight:600;
}
.modal-info h3{font-size:26px; font-weight:600;}
.modal-info p{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
.modal-info .btn{align-self:flex-start; margin-top:6px;}

.lb-close, .lb-prev, .lb-next{
  position:absolute; border:1px solid rgba(251,247,241,.35); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--cream);
  transition:all .35s var(--ease); background:rgba(24,17,11,.35);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{background:var(--gold); border-color:var(--gold); color:#2c2319;}
.lb-close{top:22px; right:22px; z-index:5;}
.lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lb-next{right:16px; top:50%; transform:translateY(-50%);}
.lb-close svg,.lb-prev svg,.lb-next svg{width:17px; height:17px; stroke:currentColor; fill:none;}

@media(max-width:800px){
  .modal-card{grid-template-columns:1fr; max-height:90vh; overflow-y:auto;}
  .modal-media img{min-height:240px; max-height:46vh;}
  .modal-info{padding:30px 26px;}
}