*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  :root{--cream:#F5F0E8;--ivory:#FAF7F2;--gold:#B8965A;--gold-light:#D4AF72;--dark:#1A1612;--charcoal:#2E2A25;--warm-gray:#8A847C;--border:rgba(184,150,90,0.25)}
  html{scroll-behavior:smooth}
  body{background:var(--ivory);color:var(--dark);font-family:'Montserrat',sans-serif;font-weight:300;overflow-x:hidden}
  nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 4rem;background:rgba(250,247,242,0.92);backdrop-filter:blur(12px);border-bottom:0.5px solid var(--border)}
  .nav-logo{text-decoration:none;display:flex;align-items:center}
  .nav-logo img{height:48px;width:auto;object-fit:contain;mix-blend-mode:multiply}
  .nav-links{display:flex;gap:3rem;list-style:none}
  .nav-links a{font-size:0.65rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;transition:color 0.3s}
  .nav-links a:hover,.nav-links a.active{color:var(--gold)}
  .nav-actions{display:flex;gap:1.5rem;align-items:center}
  .nav-actions a{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;transition:color 0.3s}
  .nav-cart{width:36px;height:36px;border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.3s}
  .nav-cart:hover{border-color:var(--gold)}
  .nav-cart svg{width:14px;height:14px;stroke:var(--charcoal);fill:none}

  /* HERO */
  .page-hero{padding-top:80px;min-height:52vh;background:var(--dark);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative}
  .page-hero::after{content:'';position:absolute;width:800px;height:800px;border-radius:50%;border:0.5px solid rgba(184,150,90,0.07);top:50%;right:-200px;transform:translateY(-50%);pointer-events:none}
  .hero-text{padding:6rem 5rem;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
  .hero-eyebrow{font-size:0.52rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
  .hero-eyebrow::before{content:'';width:32px;height:0.5px;background:var(--gold);flex-shrink:0}
  .hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5vw,4.5rem);font-weight:300;color:var(--ivory);line-height:1.05;margin-bottom:1.5rem}
  .hero-title em{font-style:italic;color:var(--gold-light)}
  .hero-body{font-size:0.7rem;line-height:2;letter-spacing:0.04em;color:rgba(250,247,242,0.45);max-width:380px}
  .hero-map{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .hero-map svg{width:100%;height:100%;opacity:0.35}

  /* FILTER BAR */
  .filter-bar{background:var(--cream);border-bottom:0.5px solid var(--border);padding:1.2rem 4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;top:80px;z-index:50}
  .filter-label{font-size:0.52rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--warm-gray);margin-right:0.5rem}
  .filter-btn{font-size:0.52rem;letter-spacing:0.25em;text-transform:uppercase;border:0.5px solid var(--border);background:transparent;color:var(--charcoal);padding:0.5rem 1.2rem;cursor:pointer;transition:all 0.2s}
  .filter-btn:hover,.filter-btn.on{background:var(--dark);border-color:var(--dark);color:var(--gold-light)}
  .filter-count{margin-left:auto;font-size:0.52rem;letter-spacing:0.2em;color:var(--warm-gray)}
  .filter-count span{color:var(--gold)}

  /* INGREDIENTS GRID */
  .ingredients-section{padding:5rem 4rem}
  .family-block{margin-bottom:6rem}
  .family-header{display:flex;align-items:baseline;gap:2rem;margin-bottom:2.5rem;padding-bottom:1rem;border-bottom:0.5px solid var(--border)}
  .family-name{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;color:var(--dark)}
  .family-name em{font-style:italic;color:var(--gold)}
  .family-count{font-size:0.52rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--warm-gray)}

  .ing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
  .ing-card{background:var(--cream);cursor:pointer;overflow:hidden;transition:all 0.3s;position:relative}
  .ing-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(26,22,18,0.08)}
  .ing-card:hover .ing-overlay{opacity:1}
  .ing-card:hover .ing-img{transform:scale(1.04)}

  .ing-img-wrap{overflow:hidden;aspect-ratio:1/1;position:relative}
  .ing-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
  .ing-overlay{position:absolute;inset:0;background:rgba(26,22,18,0.5);opacity:0;transition:opacity 0.4s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:1.5rem;text-align:center}
  .ing-overlay-origin{font-size:0.5rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-light)}
  .ing-overlay-text{font-size:0.6rem;line-height:1.7;letter-spacing:0.04em;color:rgba(250,247,242,0.8)}

  .ing-info{padding:1.2rem 1.4rem 1.6rem}
  .ing-family-tag{font-size:0.48rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);margin-bottom:0.4rem}
  .ing-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--dark);margin-bottom:0.2rem}
  .ing-latin{font-family:'Cormorant Garamond',serif;font-size:0.8rem;font-style:italic;color:var(--warm-gray);margin-bottom:0.6rem}
  .ing-note-pills{display:flex;flex-wrap:wrap;gap:0.3rem}
  .ing-note-pill{font-size:0.44rem;letter-spacing:0.2em;text-transform:uppercase;background:rgba(184,150,90,0.1);color:var(--gold);padding:0.2rem 0.5rem}

  /* PHILOSOPHY STRIP */
  .philosophy-strip{background:var(--dark);padding:5rem 4rem;display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:0;align-items:center}
  .strip-divider{background:rgba(184,150,90,0.2);height:60px;align-self:center}
  .strip-item{padding:0 3rem;text-align:center}
  .strip-num{font-family:'Cormorant Garamond',serif;font-size:2.8rem;font-weight:300;color:var(--gold-light);display:block;margin-bottom:0.3rem}
  .strip-label{font-size:0.52rem;letter-spacing:0.35em;text-transform:uppercase;color:rgba(250,247,242,0.4)}

  /* MODAL */
  .modal-bg{position:fixed;inset:0;background:rgba(26,22,18,0.85);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(4px)}
  .modal-bg.open{opacity:1;pointer-events:all}
  .modal{background:var(--ivory);width:min(780px,90vw);max-height:85vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;position:relative}
  .modal-img{display:flex;align-items:center;justify-content:center;min-height:340px;position:sticky;top:0}
  .modal-content{padding:3rem}
  .modal-close{position:absolute;top:1.2rem;right:1.2rem;width:32px;height:32px;border:0.5px solid var(--border);background:var(--ivory);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:all 0.2s}
  .modal-close:hover{background:var(--dark);border-color:var(--dark)}
  .modal-close:hover svg{stroke:var(--ivory)}
  .modal-close svg{width:12px;height:12px;stroke:var(--charcoal);fill:none}
  .modal-tag{font-size:0.5rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
  .modal-title{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;color:var(--dark);margin-bottom:0.3rem}
  .modal-latin{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:var(--warm-gray);margin-bottom:1.5rem}
  .modal-divider{width:40px;height:0.5px;background:var(--gold);margin-bottom:1.5rem}
  .modal-desc{font-size:0.68rem;line-height:2;letter-spacing:0.04em;color:var(--charcoal);margin-bottom:2rem}
  .modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
  .modal-meta-item label{font-size:0.48rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:0.3rem}
  .modal-meta-item span{font-size:0.65rem;letter-spacing:0.05em;color:var(--dark)}
  .modal-parfums{font-size:0.5rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--warm-gray);margin-bottom:0.6rem}
  .modal-parfum-pills{display:flex;flex-wrap:wrap;gap:0.4rem}
  .modal-parfum-pill{font-size:0.5rem;letter-spacing:0.15em;border:0.5px solid var(--border);color:var(--charcoal);padding:0.3rem 0.7rem}

  .hidden{display:none!important}