:root{
    --ink:#0b0a08;
    --panel:#151210;
    --panel-2:#1c1815;
    --gold:#c9a24a;
    --gold-soft:#e8cd82;
    --gold-deep:#8a6a2c;
    --ivory:#f4ecd8;
    --wine:#5a1c28;
    --line: rgba(201,162,74,0.22);
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--ivory);
    font-family:'Jost',sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    letter-spacing:0.01em;
    margin:0;
  }
  .eyebrow{
    font-family:'Jost',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.32em;
    font-size:0.72rem;
    color:var(--gold);
    font-weight:500;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  button{font-family:'Jost',sans-serif;cursor:pointer;}

  button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}

  /* subtle grain overlay */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:2; opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(11,10,8,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{width:40px; height:40px; border-radius:50%;}
  .brand span{font-family:'Cormorant Garamond',serif; letter-spacing:0.14em; font-size:1.05rem; color:var(--gold-soft);}
  .navlinks{display:flex; gap:34px; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;}
  .navlinks a{text-decoration:none; color:var(--ivory); opacity:0.8; transition:opacity .2s, color .2s;}
  .navlinks a:hover{opacity:1; color:var(--gold-soft);}
  .navcta{
    border:1px solid var(--gold); color:var(--gold-soft); background:transparent;
    padding:9px 18px; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:2px;
    transition:background .2s, color .2s;
  }
  .navcta:hover{background:var(--gold); color:var(--ink);}
  .navtoggle{display:none; background:none; border:none; color:var(--gold-soft); font-size:1.6rem;}

  /* HERO */
  .hero{
    position:relative; padding:96px 28px 80px; text-align:center; overflow:hidden;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(201,162,74,0.16), transparent 55%),
      var(--ink);
  }
  .hero-mark{width:132px; margin:0 auto 28px; opacity:0.95;}
  .hero h1{
    font-size:clamp(2.6rem, 7vw, 5.2rem);
    color:var(--ivory);
    line-height:1.02;
  }
  .hero h1 em{font-style:italic; color:var(--gold-soft);}
  .hero .sub{
    margin:22px auto 0; max-width:560px; font-size:1.02rem; line-height:1.7; color:#d9cdb0; font-weight:300;
  }
  .hero-actions{display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:14px 30px; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
    border-radius:2px; text-decoration:none; transition:all .25s;
  }
  .btn-primary{background:var(--gold); color:var(--ink); border:1px solid var(--gold);}
  .btn-primary:hover{background:var(--gold-soft); border-color:var(--gold-soft);}
  .btn-ghost{background:transparent; color:var(--gold-soft); border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--gold);}

  .divider{
    display:flex; align-items:center; gap:16px; max-width:340px; margin:56px auto 0; color:var(--gold);
  }
  .divider .line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);}

  .ribbon{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:16px 0; overflow:hidden; white-space:nowrap; background:var(--panel);
  }
  .ribbon-track{display:inline-block; animation:scroll 28s linear infinite;}
  .ribbon-track span{display:inline-block; padding:0 26px; font-size:0.78rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-deep);}
  .ribbon-track span:nth-child(odd){color:var(--gold-soft);}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* SECTION generic */
  section{padding:100px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 56px;}
  .section-head h2{font-size:clamp(2rem,4vw,2.8rem); margin-top:14px; color:var(--ivory);}
  .section-head p{margin-top:16px; color:#cdbf9d; font-size:0.98rem; line-height:1.7;}

  /* ABOUT */
  .about{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .about-visual{
    aspect-ratio:1; max-width:420px; margin:0 auto; position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .about-visual::before{
    content:""; position:absolute; inset:-14%; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,74,0.24), transparent 68%);
    filter:blur(2px);
  }
  .about-visual::after{
    content:""; position:absolute; inset:6%; border-radius:50%;
    border:1px solid var(--line);
  }
  .about-visual img{
    position:relative; width:82%; border-radius:50%;
    box-shadow:
      0 0 0 1px rgba(201,162,74,0.45),
      0 2px 4px rgba(0,0,0,0.6),
      0 30px 60px -10px rgba(0,0,0,0.75),
      inset 0 0 40px rgba(0,0,0,0.35);
  }
  .about-copy p{color:#cdbf9d; line-height:1.85; font-size:1rem; margin-top:18px;}
  .about-copy h2{font-size:clamp(2rem,4vw,2.6rem);}
  .stat-row{display:flex; gap:40px; margin-top:36px;}
  .stat b{display:block; font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--gold-soft);}
  .stat span{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#a3946f;}

  /* HOW IT WORKS */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  .step{
    border:1px solid var(--line); padding:38px 30px; border-radius:4px; background:var(--panel);
    position:relative;
  }
  .step .num{
    font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--gold); border:1px solid var(--gold-deep);
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
  .step h3{font-size:1.35rem; color:var(--ivory); margin-bottom:10px;}
  .step p{color:#b9ab89; font-size:0.92rem; line-height:1.7;}

  /* COLLECTION */
  .filters{display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap;}
  .filter-btn{
    background:transparent; border:1px solid var(--line); color:#cdbf9d; padding:9px 20px; border-radius:20px;
    font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; transition:all .2s;
  }
  .filter-btn.active, .filter-btn:hover{border-color:var(--gold); color:var(--gold-soft);}

  .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
  .card{
    border:1px solid var(--line); border-radius:4px; background:var(--panel);
    overflow:hidden; position:relative; transition:border-color .25s, transform .25s;
  }
  .card:hover{border-color:var(--gold); transform:translateY(-4px);}
  .img-frame{
    position:relative; aspect-ratio:4/5; overflow:hidden; border-bottom:1px solid var(--line);
    background:
      radial-gradient(ellipse at 50% 20%, rgba(201,162,74,0.12), transparent 65%),
      linear-gradient(160deg, #1a1613, #0e0c0a);
    display:flex; align-items:center; justify-content:center;
  }
 .prod-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
  .img-placeholder{
    display:flex; flex-direction:column; align-items:center; gap:8px; color:#5f543e;
  }
  .img-placeholder span{font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;}
  .img-upload-btn{
    position:absolute; bottom:12px; right:12px; width:38px; height:38px; border-radius:50%;
    background:rgba(11,10,8,0.72); border:1px solid var(--gold); color:var(--gold-soft);
    display:flex; align-items:center; justify-content:center; font-size:1rem; transition:background .2s, color .2s;
    z-index:3;
  }
  .img-upload-btn:hover{background:var(--gold); color:var(--ink);}
  .img-uploading{
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(11,10,8,0.7); color:var(--gold-soft); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; z-index:4;
  }
  .card-top{
    padding:22px 26px 20px; text-align:center; border-bottom:1px solid var(--line);
    background:radial-gradient(ellipse at 50% 0%, rgba(201,162,74,0.1), transparent 70%);
  }
  .card-family{font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep);}
  .card h3{font-size:1.6rem; color:var(--ivory); margin-top:8px;}
  .card-tagline{font-size:0.85rem; color:#b9ab89; margin-top:10px; font-style:italic; font-family:'Cormorant Garamond',serif;}

  .pyramid{padding:20px 26px 26px; display:flex; flex-direction:column; gap:10px;}
  .note-row{display:flex; align-items:center; gap:10px; font-size:0.78rem; color:#cdbf9d;}
  .note-tag{
    width:64px; flex-shrink:0; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-soft);
    text-align:right; padding-right:10px; border-right:1px solid var(--line);
  }
  .card-tag-badge{
    position:absolute; top:16px; right:16px; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink); background:var(--gold); padding:4px 10px; border-radius:12px;
  }
  .card-cta{
    display:block; width:100%; padding:13px; background:transparent; border:none; border-top:1px solid var(--line);
    color:var(--gold-soft); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase;
    transition:background .2s, color .2s;
  }
  .card-cta:hover{background:var(--gold); color:var(--ink);}

  /* INQUIRY */
  .inquire{
    background:linear-gradient(160deg, var(--panel-2), var(--ink));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .inquire-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start;}
  .inquire-copy h2{font-size:clamp(1.9rem,4vw,2.5rem);}
  .inquire-copy p{color:#cdbf9d; line-height:1.8; margin-top:18px; font-size:0.98rem;}
  .inquire-copy ul{list-style:none; padding:0; margin-top:28px; display:flex; flex-direction:column; gap:14px;}
  .inquire-copy li{display:flex; gap:12px; font-size:0.9rem; color:#d9cdb0; align-items:flex-start;}
  .inquire-copy li::before{content:"✦"; color:var(--gold); flex-shrink:0; margin-top:2px;}

  form{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:36px;}
  .field{margin-bottom:20px;}
  .field label{display:block; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px;}
  .field input, .field select, .field textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); color:var(--ivory);
    padding:12px 14px; border-radius:3px; font-family:'Jost',sans-serif; font-size:0.92rem; font-weight:300;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .submit-btn{
    width:100%; padding:15px; background:var(--gold); color:var(--ink); border:none; border-radius:3px;
    font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; transition:background .2s;
  }
  .submit-btn:hover{background:var(--gold-soft);}
  .submit-btn:disabled{opacity:0.6; cursor:not-allowed;}
  .form-note{font-size:0.74rem; color:#a3946f; margin-top:14px; text-align:center; line-height:1.6;}
  .success-box{
    display:none; text-align:center; padding:50px 20px;
  }
  .success-box .mark{font-size:2.4rem; color:var(--gold); margin-bottom:14px; font-family:'Cormorant Garamond',serif;}
  .success-box h3{font-size:1.6rem; color:var(--ivory); margin-bottom:10px;}
  .success-box p{color:#cdbf9d; font-size:0.92rem; line-height:1.7;}

  /* FOOTER */
  footer{padding:60px 0 30px; text-align:center;}
  footer .brand{justify-content:center; margin-bottom:16px;}
  footer .foot-links{display:flex; gap:26px; justify-content:center; margin:22px 0; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:#a3946f;}
  footer .foot-links a{text-decoration:none;}
  footer .foot-links a:hover{color:var(--gold-soft);}
  footer .fine{font-size:0.72rem; color:#6e6350; margin-top:18px;}
  
.bot-field {
  display:none;
}
 

  @media (max-width: 860px){
    .navlinks{display:none;}
    .about-grid, .inquire-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .field-row{grid-template-columns:1fr;}
  }
  @media (max-width: 540px){
    .grid{grid-template-columns:1fr;}
    .hero{padding:70px 20px 60px;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .ribbon-track{animation:none;}
  }