:root{
  --gold:#c9a24b; --gold-2:#e6c878; --gold-deep:#a07b2c;
  --ink:#0c0b0a; --ink-2:#161412; --char:#211d18;
  --cream:#f6efe1; --cream-2:#efe5d2; --sand:#cdbb96;
  --line:rgba(201,162,75,.28);
  --txt:#efe7d6; --muted:#b6aa92;
  --rad:18px; --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  --serif:"Cormorant Garamond",serif; --sans:"Jost",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ink);color:var(--txt);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:.3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.gold{color:var(--gold)}
.serif-it{font-family:var(--serif);font-style:italic}
.eyebrow{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  font-weight:500;display:inline-block}
.gold-rule{width:62px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:14px 0 0}

/* background atmosphere */
.bg-grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
   radial-gradient(900px 600px at 80% -10%, rgba(201,162,75,.10), transparent 60%),
   radial-gradient(700px 500px at -10% 30%, rgba(201,162,75,.06), transparent 60%),
   radial-gradient(1000px 700px at 50% 120%, rgba(201,162,75,.07), transparent 60%);}

/* announcement */
.topbar{background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));
  color:#1a1408;text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;padding:8px 10px;position:relative;z-index:60}

/* header */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(12,11,10,.72);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:78px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:48px;width:auto}
.brand .bt{font-family:var(--serif);font-size:22px;letter-spacing:.32em;color:var(--gold-2);line-height:1}
.brand small{display:block;font-size:8.5px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt);
  position:relative;padding:6px 0;transition:color .25s;font-weight:400}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.menu a:hover{color:var(--gold-2)}.menu a:hover::after{width:100%}
.icons{display:flex;align-items:center;gap:8px}
.iconbtn{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:.25s;position:relative}
.iconbtn:hover{border-color:var(--gold);background:rgba(201,162,75,.08)}
.iconbtn svg{width:19px;height:19px;stroke:var(--gold-2);fill:none;stroke-width:1.4}
.cart-count{position:absolute;top:-5px;right:-5px;background:var(--gold);color:#1a1408;
  font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.burger{display:none}

/* hero */
.hero{position:relative;z-index:1;padding:40px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,92px);font-weight:600;letter-spacing:-.5px}
.hero h1 em{font-style:italic;color:var(--gold-2);font-weight:500}
.hero p.lead{color:var(--muted);max-width:480px;margin-top:22px;font-size:17px}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:50px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:.3s}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#1a1408;
  box-shadow:0 14px 30px -12px rgba(201,162,75,.7)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(201,162,75,.85)}
.btn-ghost{border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,162,75,.06)}
.hero-stats{display:flex;gap:38px;margin-top:48px}
.hero-stats .n{font-family:var(--serif);font-size:34px;color:var(--gold-2);line-height:1}
.hero-stats .l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.hero-art{position:relative;aspect-ratio:1/1.04;border-radius:200px 200px 22px 22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(12,11,10,.55))}
.hero-badge{position:absolute;right:-14px;bottom:36px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);max-width:200px}
.hero-badge .t{font-family:var(--serif);font-size:19px;color:var(--gold-2)}
.hero-badge .s{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:3px}
.spark{position:absolute;font-size:20px;color:var(--gold);opacity:.5}

/* marquee features */
.feats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(22,20,18,.5);position:relative;z-index:1}
.feats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.feat{padding:30px 24px;display:flex;gap:14px;align-items:center;border-right:1px solid var(--line)}
.feat:last-child{border-right:none}
.feat svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.2;flex:none}
.feat .ft{font-family:var(--serif);font-size:19px;color:var(--cream)}
.feat .fs{font-size:11.5px;color:var(--muted);letter-spacing:.05em}

/* section heads */
section{position:relative;z-index:1}
.sec{padding:96px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(34px,5vw,58px)}
.sec-head h2 em{font-style:italic;color:var(--gold-2)}
.sec-head p{color:var(--muted);margin-top:14px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;cursor:pointer;background:var(--ink-2)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);filter:brightness(.78)}
.cat:hover img{transform:scale(1.07)}
.cat .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;background:linear-gradient(180deg,transparent 40%,rgba(8,7,6,.82))}
.cat .ov h3{font-size:24px}
.cat .ov span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-top:4px}
.cat .arr{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(12,11,10,.5);border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;transform:translateY(-6px);transition:.35s}
.cat:hover .arr{opacity:1;transform:translateY(0)}
.cat .arr svg{width:16px;height:16px;stroke:var(--gold-2);fill:none;stroke-width:1.6}

/* shop */
.shop{background:linear-gradient(180deg,rgba(22,20,18,.0),rgba(22,20,18,.55))}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.chip{padding:10px 20px;border:1px solid var(--line);border-radius:50px;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.25s;font-weight:400}
.chip:hover{color:var(--gold-2);border-color:var(--gold)}
.chip.on{background:var(--gold);color:#1a1408;border-color:var(--gold);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  display:flex;flex-direction:column;transition:.35s;opacity:0;transform:translateY(18px)}
.card.show{opacity:1;transform:none}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow)}
.card .imgw{position:relative;aspect-ratio:1/1.08;overflow:hidden;cursor:pointer;background:#000}
.card .imgw img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .imgw img{transform:scale(1.06)}
.card .tag{position:absolute;top:12px;left:12px;background:rgba(12,11,10,.75);border:1px solid var(--line);
  color:var(--gold-2);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:50px}
.quick{position:absolute;inset:auto 0 0;padding:12px;display:flex;justify-content:center;
  transform:translateY(110%);transition:.35s}
.card:hover .quick{transform:none}
.quick span{background:rgba(12,11,10,.85);border:1px solid var(--gold);color:var(--gold-2);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border-radius:50px;backdrop-filter:blur(6px)}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card .body h3{font-size:21px;font-weight:600}
.card .body .ct{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px}
.price small{font-size:10px;color:var(--muted);letter-spacing:.08em;display:block;text-transform:uppercase}
.price b{font-family:var(--serif);font-size:23px;color:var(--gold-2);font-weight:600}
.add{width:44px;height:44px;border-radius:5px;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  display:grid;place-items:center;transition:.25s;flex:none}
.add svg{width:20px;height:20px;stroke:#1a1408;fill:none;stroke-width:1.8}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{text-align:center;padding:36px 26px;border:1px solid var(--line);border-radius:var(--rad);
  background:rgba(22,20,18,.4);position:relative}
.step .num{font-family:var(--serif);font-size:54px;color:rgba(201,162,75,.22);line-height:1;font-weight:700}
.step h3{font-size:24px;margin:6px 0 10px}
.step p{color:var(--muted);font-size:14.5px}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.story-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.story-imgs img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.story-imgs img:nth-child(1){margin-top:30px;aspect-ratio:3/4}
.story-imgs img:nth-child(2){aspect-ratio:3/4}
.story-txt p{color:var(--muted);margin-top:18px}
.story-sign{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold-2);margin-top:26px}

/* testimonials */
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.test{border:1px solid var(--line);border-radius:var(--rad);padding:30px 26px;background:rgba(22,20,18,.45)}
.test .stars{color:var(--gold);letter-spacing:3px;font-size:14px}
.test p{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--cream);margin:14px 0 20px;line-height:1.4}
.test .who{display:flex;align-items:center;gap:12px}
.test .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  display:grid;place-items:center;font-family:var(--serif);color:#1a1408;font-size:18px;font-weight:600}
.test .who b{font-size:15px;color:var(--cream);font-weight:500}
.test .who span{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;display:block}

/* CTA band */
.cta{padding:90px 0;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(700px 360px at 50% 0%,rgba(201,162,75,.16),transparent 70%)}
.cta h2{font-size:clamp(38px,6vw,72px)}
.cta h2 em{font-style:italic;color:var(--gold-2)}
.cta p{color:var(--muted);margin:16px auto 0;max-width:480px}

/* footer */
footer{background:var(--ink-2);border-top:1px solid var(--line);padding:70px 0 28px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid img.fl{height:60px;margin-bottom:16px}
.foot-grid p{color:var(--muted);font-size:14px}
.foot-grid h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px;font-family:var(--sans);font-weight:500}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-grid ul a{color:var(--muted);font-size:14px;transition:.2s}
.foot-grid ul a:hover{color:var(--gold-2)}
.contact-line{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;margin-bottom:13px}
.contact-line svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.4;flex:none;margin-top:2px}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.25s}
.socials a:hover{border-color:var(--gold);background:rgba(201,162,75,.08)}
.socials svg{width:18px;height:18px;stroke:var(--gold-2);fill:none;stroke-width:1.4}
.copy{border-top:1px solid var(--line);margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;
  color:var(--muted);font-size:12px;letter-spacing:.06em;flex-wrap:wrap;gap:10px}

/* cart drawer */
.scrim{position:fixed;inset:0;background:rgba(4,3,2,.62);backdrop-filter:blur(3px);opacity:0;
  pointer-events:none;transition:.3s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--ink-2);
  border-left:1px solid var(--line);z-index:100;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:26px}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.2s}
.x:hover{border-color:var(--gold);transform:rotate(90deg)}
.x svg{width:18px;height:18px;stroke:var(--gold-2);stroke-width:1.6}
.cart-items{flex:1;overflow-y:auto;padding:14px 24px}
.empty{text-align:center;color:var(--muted);padding:60px 0}
.empty svg{width:50px;height:50px;stroke:var(--line);fill:none;stroke-width:1;margin:0 auto 16px}
.ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ci img{width:72px;height:80px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.ci .info{flex:1;min-width:0}
.ci .info h4{font-family:var(--serif);font-size:18px;font-weight:600}
.ci .info .perso{font-size:11.5px;color:var(--gold-2);margin-top:2px;font-style:italic}
.ci .info .pr{color:var(--muted);font-size:13px;margin-top:4px}
.qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty button{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;color:var(--gold-2);font-size:15px;transition:.2s}
.qty button:hover{border-color:var(--gold);background:rgba(201,162,75,.08)}
.qty span{font-size:14px;min-width:18px;text-align:center}
.ci .rm{align-self:flex-start;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.ci .rm:hover{color:#d98}
.drawer-f{padding:22px 24px;border-top:1px solid var(--line)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tot span{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tot b{font-family:var(--serif);font-size:30px;color:var(--gold-2)}
.note{font-size:11.5px;color:var(--muted);margin-bottom:16px}
.wa{width:100%;justify-content:center;background:#1faf54;color:#fff;box-shadow:0 14px 30px -12px rgba(31,175,84,.6)}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:20px;height:20px;fill:#fff;stroke:none}

/* product modal */
.modal{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:24px}
.modal.on{display:grid}
.modal-box{background:var(--ink-2);border:1px solid var(--line);border-radius:22px;max-width:880px;width:100%;
  max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;position:relative}
.modal-box .mimg{background:#000}
.modal-box .mimg img{width:100%;height:100%;object-fit:cover;min-height:340px}
.modal-box .mbody{padding:36px 34px}
.modal-box .x{position:absolute;top:16px;right:16px;background:rgba(12,11,10,.6);z-index:2}
.modal-box .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.modal-box h2{font-size:36px;margin:8px 0 12px}
.modal-box .mprice{font-family:var(--serif);font-size:30px;color:var(--gold-2);margin-bottom:6px}
.modal-box .mprice small{font-size:12px;color:var(--muted);font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase}
.modal-box .mdesc{color:var(--muted);font-size:14.5px;margin:14px 0 22px}
.fieldlbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px;display:block}
.modal-box textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;color:var(--txt);
  padding:13px;font-family:var(--sans);font-size:14px;resize:vertical;min-height:74px;font-weight:300}
.modal-box textarea:focus{outline:none;border-color:var(--gold)}
.mrow{display:flex;gap:14px;align-items:center;margin-top:22px}
.mrow .qty{margin:0}
.mrow .btn-gold{flex:1;justify-content:center}

/* topbar layout */
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar-in span{display:inline-flex;align-items:center;gap:7px}
.tb-mid{opacity:.85}

/* mission */
.mission{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mcard{border:1px solid var(--line);border-radius:var(--rad);padding:30px 26px;background:rgba(22,20,18,.4);transition:.3s}
.mcard:hover{transform:translateY(-5px);border-color:var(--gold)}
.mcard.hl{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));border-color:var(--gold)}
.mcard.hl h3,.mcard.hl p{color:#1a1408}
.mcard.hl .mic svg{stroke:#1a1408}
.mic{width:54px;height:54px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px}
.mcard.hl .mic{border-color:rgba(26,20,8,.3);background:rgba(255,255,255,.18)}
.mic svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3}
.mcard h3{font-size:23px;margin-bottom:8px}
.mcard p{color:var(--muted);font-size:14px}

/* badges on cards */
.badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  color:#1a1408;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 10px;border-radius:50px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gitem{overflow:hidden;border-radius:14px;border:1px solid var(--line);position:relative;background:#000}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.gitem:hover img{transform:scale(1.08)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(8,7,6,.5));opacity:0;transition:.3s}
.gitem:hover::after{opacity:1}
.gitem.big{grid-column:span 2;grid-row:span 2}
.gitem.tall{grid-row:span 2}
.gitem.wide{grid-column:span 2}

/* occasions + biz */
.occasions{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-bottom:48px}
.occasions span{border:1px solid var(--line);border-radius:50px;padding:10px 20px;font-size:13px;color:var(--cream);
  font-family:var(--serif);font-style:italic;font-size:17px;transition:.25s}
.occasions span:hover{border-color:var(--gold);color:var(--gold-2)}
.biz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.biz{border:1px solid var(--line);border-radius:var(--rad);padding:34px 28px;background:var(--ink-2);text-align:center;transition:.3s}
.biz:hover{transform:translateY(-5px);border-color:var(--gold)}
.biz.feature{background:linear-gradient(155deg,rgba(201,162,75,.16),rgba(22,20,18,.5));border-color:var(--gold)}
.biz-ic{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep))}
.biz-ic svg{width:28px;height:28px;stroke:#1a1408;fill:none;stroke-width:1.4}
.biz h3{font-size:24px;margin-bottom:9px}
.biz p{color:var(--muted);font-size:14px}
.biz-cta{display:inline-block;margin-top:16px;color:var(--gold-2);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:3px;transition:.25s}
.biz-cta:hover{border-color:var(--gold)}

/* testimonials over image */
.tests-sec{position:relative;overflow:hidden}
.tests-sec::before{content:"";position:absolute;inset:0;background-image:var(--tbg);background-size:cover;background-position:center;
  filter:brightness(.26) saturate(1.1);z-index:-1}
.tests-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.86),rgba(12,11,10,.78));z-index:-1}
.tests-sec .test{background:rgba(12,11,10,.5);backdrop-filter:blur(6px)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
.contact-form{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad);padding:30px}
.contact-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form textarea{width:100%;background:var(--ink);border:1px solid var(--line);
  border-radius:12px;color:var(--txt);padding:14px;font-family:var(--sans);font-size:14px;font-weight:300;margin-bottom:14px}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold)}
.contact-form .wa{justify-content:center}
.contact-side{display:flex;flex-direction:column;gap:18px}
.cs-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad);padding:28px}
.cs-map{flex:1;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;min-height:230px}
.cs-map iframe{width:100%;height:100%;min-height:230px;border:0;filter:grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.9)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* presentation entreprise */
.presentation{background:linear-gradient(180deg,transparent,rgba(22,20,18,.5));border-top:1px solid var(--line)}
.pres-top{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.pres-top .pl span.eyebrow{margin-bottom:14px}
.pres-top h2{font-size:clamp(32px,4.5vw,52px);margin:8px 0 18px}
.pres-top h2 em{font-style:italic;color:var(--gold-2)}
.pres-top p{color:var(--muted);margin-bottom:14px;font-size:15px}
.pres-logo{display:grid;place-items:center;padding:40px;border:1px solid var(--line);border-radius:var(--rad);
  background:radial-gradient(circle at 50% 40%,rgba(201,162,75,.12),transparent 70%)}
.pres-logo img{max-width:280px}
.pres-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.pfact{border:1px solid var(--line);border-radius:var(--rad);padding:24px;background:var(--ink-2)}
.pfact svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:12px}
.pfact h4{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:5px}
.pfact p{color:var(--muted);font-size:13px}
.pres-follow{margin-top:46px;text-align:center}
.pres-follow .eyebrow{display:block;margin-bottom:18px}
.pres-socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pres-socials a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:50px;
  padding:12px 22px;font-size:13px;letter-spacing:.08em;color:var(--cream);transition:.25s}
.pres-socials a:hover{border-color:var(--gold);background:rgba(201,162,75,.08);color:var(--gold-2);transform:translateY(-2px)}
.pres-socials svg{width:18px;height:18px;fill:var(--gold-2);stroke:none}

/* checkout modal */
.co-box{display:block !important;max-width:560px;padding:34px 32px}
.co-steps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.co-steps span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:50px;padding:6px 13px}
.co-steps span.on{background:var(--gold);color:#1a1408;border-color:var(--gold);font-weight:600}
.co-title{font-size:30px;margin-bottom:6px}
.co-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.co-box input,.co-box textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);padding:13px;font-family:var(--sans);font-size:14px;font-weight:300;margin-bottom:13px}
.co-box .frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.co-box input:focus,.co-box textarea:focus{outline:none;border-color:var(--gold)}
.co-box textarea{min-height:70px;resize:vertical}
.co-recap{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:4px 0 18px;font-size:13px;color:var(--muted)}
.co-recap .rl{display:flex;justify-content:space-between;padding:3px 0}
.co-recap .rt{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:8px;padding-top:8px;color:var(--cream)}
.co-recap .rt b{font-family:var(--serif);font-size:18px;color:var(--gold-2)}
.paygrid{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.pay{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:.2s}
.pay:hover{border-color:var(--gold)}
.pay.sel{border-color:var(--gold);background:rgba(201,162,75,.08)}
.pay .pbadge{width:46px;height:34px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:none;letter-spacing:.02em}
.pay .pname{flex:1;font-size:15px;color:var(--cream)}
.pay .pradio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.pay.sel .pradio{border-color:var(--gold)}
.pay.sel .pradio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.co-total span{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.co-total b{font-family:var(--serif);font-size:28px;color:var(--gold-2)}
.demo-flag{margin-top:12px;font-size:11.5px;color:var(--gold-2);background:rgba(201,162,75,.08);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.4}
.co-check{width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep))}
.co-check svg{width:34px;height:34px}

@media(max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .menu,.hero-stats,.tb-mid,.tb-right{display:none}
  .topbar-in{justify-content:center}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{max-width:420px;margin:0 auto}
  .feats-in{grid-template-columns:1fr 1fr}
  .feat:nth-child(2){border-right:none}
  .feat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps,.story,.tests,.foot-grid,.mission,.biz-cards,.contact-grid,.pres-top{grid-template-columns:1fr}
  .pres-facts{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gitem.big{grid-column:span 2;grid-row:span 1}
  .story-imgs img:nth-child(1){margin-top:0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .modal-box{grid-template-columns:1fr}
  .modal-box .mimg img{min-height:220px;max-height:260px}
  .sec{padding:66px 0}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card .body h3{font-size:18px}
  .price b{font-size:20px}
  .hero h1{font-size:46px}
  .feats-in{grid-template-columns:1fr}
  .feat{border-right:none;border-bottom:1px solid var(--line)}
}

/* mobile menu */
.mob{position:fixed;inset:0;z-index:95;background:var(--ink);transform:translateX(100%);
  transition:.4s;display:flex;flex-direction:column;padding:30px 26px}
.mob.on{transform:none}
.mob .mob-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mob a{font-family:var(--serif);font-size:34px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--cream)}
.mob a:active{color:var(--gold-2)}


<!--SECTION DESIGN & STYLES CSS-->

  /* Variables de couleurs Maison Alig */
  :root {
    --alig-gold-primary: #c9a24b;
    --alig-gold-light: #e5c16e;
    --alig-dark-card: #161412;
    --alig-text-muted: #a0a0a0;
  }

  /* Structure globale de la section */
  .alig-sec-univers {
    padding: 60px 0;
    background-color: #0d0d0d;
  }

  .alig-container-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Alignement et styles du bloc d'en-tête */
  .alig-head-section {
    text-align: center;
    margin-bottom: 50px;
  }

  .alig-eyebrow-text {
    display: block;
    color: var(--alig-gold-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  .alig-main-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 15px 0;
  }

  .alig-highlight-text {
    font-style: normal;
    color: var(--alig-gold-light);
  }

  .alig-separator-gold {
    height: 1px;
    width: 60px;
    background-color: var(--alig-gold-primary);
    margin: 0 auto 20px auto;
  }

  .alig-lead-text {
    color: var(--alig-text-muted);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Grille CSS adaptative (Responsive) */
  .alig-grid-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
  }

  /* Design des cartes individuelles */
  .alig-card-item {
    position: relative;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201, 162, 75, 0.15);
    background-color: var(--alig-dark-card);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  /* Conteneur et comportement de l'image */
  .alig-img-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .alig-img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Masque dégradé pour garantir la lisibilité du texte */
  .alig-shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.95) 15%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.1) 100%);
    transition: background 0.4s ease;
  }

  /* Contenu textuel et bouton de la carte */
  .alig-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 35px;
    box-sizing: border-box;
    text-align: center;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .alig-item-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    transition: color 0.3s ease;
  }

  /* Style du bouton "Voir la collection" */
  .alig-btn-action {
    display: inline-block;
    padding: 11px 26px;
    border: 1px solid var(--alig-gold-primary);
    color: var(--alig-gold-light);
    background: rgba(201, 162, 75, 0.03);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 4px;
    opacity: 0; /* Masqué à l'état initial */
    transform: translateY(15px); /* Animation de poussée */
    transition: transform 0.4s ease, opacity 0.4s ease, background 0.3s ease, color 0.3s ease;
  }

  /* --- INTERACTIONS LOGIQUES AU SURVOL (HOVER) --- */
  .alig-card-item:hover .alig-img-fluid {
    transform: scale(1.06); /* Zoom subtil */
  }

  .alig-card-item:hover .alig-shadow-overlay {
    background: linear-gradient(to top, rgba(17, 17, 17, 0.98) 25%, rgba(17, 17, 17, 0.5) 70%);
  }

  .alig-card-item:hover .alig-item-title {
    color: var(--alig-gold-light);
  }

  .alig-card-item:hover .alig-btn-action {
    opacity: 1; /* Le bouton devient visible */
    transform: translateY(0); /* Le bouton reprend sa place */
  }

  .alig-btn-action:hover {
    background: rgba(201, 162, 75, 0.2);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(201, 162, 75, 0.3);
  }

  /* Message d'erreur ou d'absence de données */
  .alig-no-data-msg {
    text-align: center;
    color: var(--alig-text-muted);
    width: 100%;
    grid-column: 1 / -1;
    font-style: italic;
    padding: 20px;
  }