/* ============================================================
   AROMA INFINI — shared design system
   Colour system derived from the Aroma Infini butterfly logo
   ============================================================ */
:root{
  --dark:#1c1236;
  --cream:#fbf6f3;
  --gold:#D80078;
  --brown:#2a1f45;
  --muted:#6b6280;
  /* logo-derived palette */
  --ink:#1c1236;      /* deep indigo from the butterfly's purple-blue */
  --pink:#D80078;     /* logo magenta  - main accent */
  --orange:#F58A1F;
  --yellow:#F7C61B;
  --blue:#2A9AC9;
  --aqua:#8FD6CF;
  --brand-gradient:linear-gradient(90deg,#F7C61B 0%,#F58A1F 28%,#EE3D5A 52%,#D80078 72%,#2A9AC9 100%);
  --on-accent:#ffffff;
}
/* on dark backgrounds the accent switches to logo yellow for contrast */
.hero,.page-hero,.product,.testimonials,.stats,.cta,footer,.announce{
  --gold:#F7C61B;
  --on-accent:#1c1236;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Work Sans',sans-serif;background:var(--cream);color:var(--brown);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{width:100%;display:block}
.wrap{max-width:1200px;margin:auto;padding:0 28px}
h1,h2,h3{font-family:'Cormorant Garamond',serif}
section{padding:100px 0}

.announce{
  background:var(--dark);
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:12px;
  letter-spacing:1px;
}

header{
  position:fixed;
  top:36px;
  width:100%;
  z-index:99;
  background:rgba(28,18,54,.68);
  backdrop-filter:blur(12px);
}
nav{
  max-width:1200px;
  margin:auto;
  padding:20px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
}
.logo{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  letter-spacing:3px;
}
.logo span{color:var(--gold)}
nav ul{display:flex;gap:26px;list-style:none;font-size:14px}
nav ul a:hover{color:var(--gold)}
nav ul a.active{color:var(--gold)}
.nav-btn{
  border:1px solid rgba(255,255,255,.6);
  padding:10px 18px;
  font-size:12px;
}
.nav-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--dark)}

/* HERO SLIDER (home) */
.hero{
  min-height:100vh;
  position:relative;
  color:white;
  overflow:hidden;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  background-size:cover;
  background-position:center;
}
.slide.active{opacity:1}
.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(28,18,54,.35),rgba(28,18,54,.86));
}
.hero-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:170px;
  padding-bottom:70px;
}
.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:2px;
  margin-bottom:15px;
}
.hero h1{
  font-size:clamp(50px,8vw,104px);
  font-style:italic;
  line-height:.95;
}
.hero p{
  max-width:470px;
  margin-top:22px;
  color:rgba(255,255,255,.78);
  line-height:1.8;
}
.btn{
  display:inline-block;
  margin-top:34px;
  background:var(--pink);
  color:#fff;
  padding:15px 34px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:.3s;
}
.btn:hover{transform:translateY(-3px);background:var(--yellow);color:var(--ink)}
.btn-outline{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
}
.btn-outline:hover{background:var(--gold);color:var(--on-accent)}

.dots{
  position:absolute;
  right:40px;
  bottom:45px;
  z-index:5;
  display:flex;
  gap:10px;
}
.dot{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid white;
  cursor:pointer;
}
.dot.active{background:var(--gold);border-color:var(--gold)}

/* INNER PAGE HERO */
.page-hero{
  height:62vh;
  min-height:420px;
  position:relative;
  color:white;
  display:flex;
  align-items:end;
  background-size:cover;
  background-position:center;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(28,18,54,.4),rgba(28,18,54,.86));
}
.page-hero .wrap{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:70px;
}
.page-hero h1{
  font-size:clamp(46px,7vw,84px);
  font-style:italic;
  line-height:1;
}
.page-hero p{
  max-width:520px;
  margin-top:18px;
  color:rgba(255,255,255,.78);
  line-height:1.8;
}
.crumb{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.crumb a:hover{color:#fff}

.section-title{
  font-size:48px;
  font-style:italic;
  margin-bottom:24px;
}

/* SPLIT / STORY */
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
.story-img{
  background:#ddd;
  overflow:hidden;
}
.story-img img{height:620px;object-fit:cover;transition:1s}
.story-img:hover img{transform:scale(1.08)}
.story p, .split-copy p{line-height:1.8;color:var(--muted);margin-bottom:18px}

/* CARD TRIO (cream) */
.notes{background:#ffffff}
.note-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#eadff0;
}
.note-card{
  background:#ffffff;
  padding:44px 32px;
  transition:.4s;
}
.note-card:hover{
  background:#fdeef5;
  transform:translateY(-8px);
}
.note-card h3{font-size:28px;font-style:italic;margin-bottom:12px}
.note-card p{color:#675e7d;line-height:1.7}
.note-card .k{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  color:var(--gold);
  display:block;
  margin-bottom:10px;
}

/* DARK FEATURE / PRODUCT */
.product{background:var(--dark);color:white}
.product-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
}
.product-img{
  background:linear-gradient(145deg,#2d1c55,#160d2d);
  padding:25px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.product-img img{height:560px;object-fit:cover;transition:1s}
.product-img:hover img{transform:scale(1.07)}
.product p{color:rgba(255,255,255,.7);line-height:1.8}
.spec{margin-top:30px;border-top:1px solid rgba(255,255,255,.15)}
.spec div{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  font-size:14px;
}
.price{
  font-family:'Cormorant Garamond',serif;
  font-size:42px;
  color:var(--gold);
  margin-top:30px;
}

/* CARD GRID (industries / machines) */
.collection-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.grid-3{grid-template-columns:repeat(3,1fr)}
.item{
  background:white;
  padding:20px;
  text-align:center;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  transition:.4s;
  display:block;
}
.item:hover{transform:translateY(-10px)}
.item img{height:300px;object-fit:cover;margin-bottom:18px}
.item h3{font-size:25px;font-style:italic}
.item p{color:var(--gold);font-weight:600;margin-top:8px;font-size:14px}
.item .desc{
  color:var(--muted);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  margin-top:10px;
}
.item .mini-spec{
  margin-top:16px;
  border-top:1px solid #f1e9f3;
  text-align:left;
}
.item .mini-spec div{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  padding:9px 0;
  border-bottom:1px solid #f1e9f3;
  color:var(--muted);
}
.item .mini-spec span:last-child{color:var(--brown);font-weight:500}

/* STATS */
.stats{background:var(--dark);color:#fff;padding:80px 0}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  text-align:center;
}
.stat{padding:30px 15px}
.stat h3{
  font-size:56px;
  font-style:italic;
  color:var(--gold);
}
.stat p{
  margin-top:8px;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

/* PROCESS */
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#eadff0;
}
.step{
  background:#ffffff;
  padding:40px 28px;
  transition:.4s;
}
.step:hover{background:#fdeef5}
.step .num{
  font-family:'Cormorant Garamond',serif;
  font-size:44px;
  font-style:italic;
  color:var(--gold);
}
.step h3{font-size:24px;font-style:italic;margin:12px 0 10px}
.step p{color:#675e7d;line-height:1.7;font-size:14.5px}

/* ALTERNATING SERVICE ROWS */
.svc-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:90px;
}
.svc-row:last-child{margin-bottom:0}
.svc-row.flip .svc-img{order:2}
.svc-img{overflow:hidden;background:#ddd}
.svc-img img{height:440px;object-fit:cover;transition:1s}
.svc-img:hover img{transform:scale(1.07)}
.svc-copy h3{font-size:36px;font-style:italic;margin-bottom:16px}
.svc-copy p{line-height:1.8;color:var(--muted);margin-bottom:14px}
.svc-copy ul{
  list-style:none;
  margin-top:14px;
}
.svc-copy li{
  padding:9px 0 9px 26px;
  position:relative;
  border-bottom:1px solid #efe6f1;
  font-size:14.5px;
  color:var(--brown);
}
.svc-copy li::before{
  content:"◆";
  position:absolute;
  left:0;
  color:var(--gold);
  font-size:10px;
  top:13px;
}

/* GALLERY */
.gallery-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:260px 260px;
  gap:3px;
}
.gallery-grid img{height:100%;object-fit:cover;transition:.8s}
.gallery-grid div{overflow:hidden;background:#ddd}
.gallery-grid div:hover img{transform:scale(1.08)}
.tall{grid-row:span 2}
.quote-box{
  background:var(--gold)!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
}
.quote-box p{
  font-family:'Cormorant Garamond',serif;
  font-size:25px;
  font-style:italic;
}

/* TESTIMONIALS */
.testimonials{background:var(--dark);color:white}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.test-card{background:#261a48;padding:42px 34px;transition:.4s}
.test-card:hover{background:#33235e}
.test-card p{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-style:italic;
  line-height:1.5;
}
.test-card span{
  display:block;
  margin-top:25px;
  color:var(--gold);
  font-size:12px;
  letter-spacing:1px;
}

/* CTA */
.cta{
  background:
  linear-gradient(rgba(28,18,54,.75),rgba(28,18,54,.75)),
  url("https://images.unsplash.com/photo-1600612253971-422e7f7faeb6?auto=format&fit=crop&w=1600&q=90")
  center/cover no-repeat;
  color:white;
  text-align:center;
}
.cta h2{font-size:56px;font-style:italic}
.cta p{max-width:460px;margin:18px auto 30px;color:rgba(255,255,255,.75)}
.cta .btn{margin-top:0}

/* FOOTER */
footer{
  background:#120a26;
  color:rgba(255,255,255,.62);
  padding:75px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:45px;
}
footer h4{
  color:white;
  margin-bottom:18px;
  font-size:16px;
}
footer p, footer li{
  font-size:14px;
  line-height:1.9;
}
footer ul{list-style:none}
footer ul a:hover{color:var(--gold)}
.footer-contact strong{color:white}
.socials{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.socials a{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.socials a:hover{background:var(--gold);color:#1c1236}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:45px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px;
  font-size:13px;
}

/* ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:1s ease;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .slide{transition:none}
}

@media(max-width:900px){
  nav ul{display:none}
  .story-grid,.product-grid,.footer-grid,.svc-row{grid-template-columns:1fr}
  .svc-row.flip .svc-img{order:0}
  .collection-grid,.test-grid,.stats-grid,.process-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .tall{grid-row:auto}
}
@media(max-width:600px){
  .collection-grid,.test-grid,.note-grid,.stats-grid,.process-grid{grid-template-columns:1fr}
  .hero h1{font-size:50px}
  .hero-content{padding-top:190px;padding-bottom:50px}
  .section-title{font-size:38px}
}

/* ===== DROPDOWN NAVIGATION ===== */
nav ul{align-items:center}
nav ul li{position:relative}
.has-sub > a::after{content:" \25BE";font-size:10px;color:var(--gold)}
.sub{
  position:absolute;
  top:100%;
  left:-14px;
  background:rgba(28,18,54,.97);
  border:1px solid rgba(216,0,120,.25);
  border-top:2px solid var(--gold);
  min-width:250px;
  padding:10px 0;
  display:none;
  z-index:120;
}
.has-sub:hover .sub{display:block}
.sub li{display:block}
.sub a{
  display:block;
  padding:10px 22px;
  font-size:13px;
  color:rgba(255,255,255,.82);
  transition:.25s;
}
.sub a:hover{background:rgba(216,0,120,.14);color:var(--gold);padding-left:28px}
.sub .sub-label{
  display:block;
  padding:8px 22px 4px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
}

/* ===== MOBILE MENU ===== */
.menu-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  font-size:18px;
  padding:6px 12px;
  cursor:pointer;
}
@media(max-width:1024px){
  nav ul{gap:16px;font-size:13px}
}
@media(max-width:900px){
  .menu-toggle{display:block}
  nav ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(28,18,54,.98);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:10px 0 20px;
    max-height:75vh;
    overflow-y:auto;
  }
  nav ul.open{display:flex}
  nav ul > li{width:100%}
  nav ul > li > a{display:block;padding:12px 28px}
  .sub{
    position:static;
    display:block;
    border:none;
    border-left:2px solid var(--gold);
    margin-left:28px;
    background:transparent;
    min-width:0;
    padding:0 0 8px;
  }
  .nav-btn{display:none}
}

/* ===== CLIENT LOGO STRIP ===== */
.clients{background:#ffffff;padding:60px 0}
.client-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px 46px;
  margin-top:26px;
}
.client-strip span{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  font-style:italic;
  color:var(--muted);
  letter-spacing:1px;
}

/* ===== FRAGRANCE FAMILIES ===== */
.fam-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:#eadff0;
}
.fam{
  background:#ffffff;
  padding:36px 24px;
  transition:.4s;
}
.fam:hover{background:#fdeef5;transform:translateY(-8px)}
.fam h3{font-size:24px;font-style:italic;margin-bottom:10px}
.fam .k{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--gold);display:block;margin-bottom:8px}
.fam p{color:#675e7d;line-height:1.65;font-size:13.5px}
.fam .ideal{display:block;margin-top:12px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
@media(max-width:1024px){.fam-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.fam-grid{grid-template-columns:1fr}}

/* ===== GALLERY FILTERS ===== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px;
}
.filters button{
  background:transparent;
  border:1px solid #eadff0;
  color:var(--brown);
  padding:10px 20px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  font-family:'Work Sans',sans-serif;
  transition:.3s;
}
.filters button:hover{border-color:var(--gold);color:var(--gold)}
.filters button.on{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.g-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.g-card{
  position:relative;
  overflow:hidden;
  background:#ddd;
  aspect-ratio:4/3;
}
.g-card img{height:100%;object-fit:cover;transition:.8s}
.g-card:hover img{transform:scale(1.08)}
.g-card figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(28,18,54,.85));
  color:#fff;
  padding:34px 18px 14px;
  font-size:13px;
  letter-spacing:.5px;
}
.g-card figcaption span{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;display:block}
.g-card.hide{display:none}
@media(max-width:900px){.g-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g-grid{grid-template-columns:1fr}}

/* ===== FAQ ACCORDION ===== */
.faq-list{max-width:860px}
.faq-item{
  background:#ffffff;
  border:1px solid #efe6f1;
  margin-bottom:14px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:20px 24px;
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-style:italic;
  color:var(--brown);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:.3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-family:'Work Sans',sans-serif;
  font-size:22px;
  color:var(--gold);
  flex-shrink:0;
}
.faq-item[open] summary::after{content:"–"}
.faq-item[open] summary{background:#fdeef5}
.faq-item .a{
  padding:6px 24px 22px;
  color:var(--muted);
  line-height:1.8;
  font-size:15px;
}

/* ===== CONTACT ===== */
.office-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.office{
  background:#ffffff;
  border:1px solid #efe6f1;
  border-top:3px solid var(--gold);
  padding:32px 28px;
  transition:.4s;
}
.office:hover{transform:translateY(-8px);box-shadow:0 18px 45px rgba(0,0,0,.08)}
.office h3{font-size:26px;font-style:italic;margin-bottom:6px}
.office .tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.office p{color:var(--muted);line-height:1.8;font-size:14.5px}
.office iframe{width:100%;height:180px;border:0;margin-top:18px;filter:sepia(12%)}
@media(max-width:900px){.office-grid{grid-template-columns:1fr}}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:start;
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-grid .full{grid-column:1/-1}
.form-grid label{
  display:block;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #eadff0;
  background:#ffffff;
  font-family:'Work Sans',sans-serif;
  font-size:14px;
  color:var(--brown);
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:0;
  border-color:var(--gold);
}
.form-grid textarea{min-height:120px;resize:vertical}
.form-note{
  background:#fdeef5;
  border-left:3px solid var(--gold);
  padding:14px 18px;
  font-size:13.5px;
  color:var(--brown);
  line-height:1.7;
  margin-top:18px;
}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}

/* ===== V2 ADDITIONS: Solutions/Industries/Fragrances draft ===== */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{
  border:1px solid #eadff0;
  padding:9px 18px;
  font-size:12.5px;
  color:var(--brown);
  letter-spacing:.3px;
}
.pill.on-dark{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}

.industry-groups{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  margin-top:10px;
}
.industry-group h3{
  font-size:22px;
  font-style:italic;
  color:var(--gold);
  margin-bottom:12px;
}
.industry-group ul{list-style:none}
.industry-group li{
  padding:8px 0;
  border-bottom:1px solid #efe6f1;
  font-size:14.5px;
  color:var(--brown);
}
@media(max-width:900px){.industry-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.industry-groups{grid-template-columns:1fr}}

.tbc{
  display:inline-block;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#a35b1f;
  background:#fbe9d7;
  border:1px solid #eecfa8;
  padding:3px 9px;
  margin-left:8px;
}

.project-card{
  background:#ffffff;
  border:1px solid #efe6f1;
  border-top:3px solid var(--gold);
  padding:28px 26px;
}
.project-card h3{font-size:24px;font-style:italic;margin-bottom:14px}
.project-card .row{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid #f1e9f3;
  font-size:14px;
}
.project-card .row span:first-child{color:var(--muted)}
.project-card .row span:last-child{color:var(--brown);font-weight:500}

.insights-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 40px;
}
.insights-list a{
  display:block;
  padding:14px 0 14px 24px;
  position:relative;
  border-bottom:1px solid #efe6f1;
  font-size:15px;
  color:var(--brown);
}
.insights-list a::before{
  content:"\25C6";
  position:absolute;left:0;top:16px;
  color:var(--gold);font-size:10px;
}
.insights-list a:hover{color:var(--gold)}
@media(max-width:700px){.insights-list{grid-template-columns:1fr}}

.contact-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}


/* ============================================================
   V3 — LOGO-BASED THEME  (header, logo, brand accents)
   ============================================================ */
.site-top{position:fixed;top:0;left:0;right:0;z-index:99}
.announce{
  max-height:44px;
  overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
}
.site-top.scrolled .announce{max-height:0;padding-top:0;padding-bottom:0}

header{
  position:static;
  top:auto;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(28,18,54,.10);
  border-bottom:3px solid transparent;
  border-image:var(--brand-gradient) 1;
}
nav{color:var(--brown);padding:10px 28px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:52px;width:auto;display:block}
nav ul{gap:24px;font-weight:500}
nav ul a:hover,nav ul a.active{color:var(--pink)}
.has-sub > a::after{color:var(--pink)}
.nav-btn{
  background:var(--pink);
  border:1px solid var(--pink);
  color:#fff;
  padding:12px 22px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.3s;
}
.nav-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.sub{
  background:#fff;
  border:1px solid #efe6f1;
  border-top:3px solid var(--pink);
  box-shadow:0 18px 40px rgba(28,18,54,.14);
}
.sub a{color:var(--brown)}
.sub a:hover{background:#fdeef5;color:var(--pink)}
.menu-toggle{border:1px solid #d9cfe6;color:var(--ink)}

/* eyebrow gets a short logo-spectrum bar */
.eyebrow::before{
  content:"";
  display:inline-block;
  width:34px;height:3px;
  margin-right:12px;
  vertical-align:middle;
  border-radius:2px;
  background:var(--brand-gradient);
}

/* subtle spectrum line on hover for cards */
.note-card,.step,.fam{position:relative}
.note-card::before,.step::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--brand-gradient);opacity:0;transition:.4s;
}
.note-card:hover::before,.step:hover::before{opacity:1}

/* fragrance families — one logo colour each */
.fam{border-top:4px solid var(--pink)}
.fam:nth-child(1){border-top-color:#8E4FD0}
.fam:nth-child(2){border-top-color:var(--aqua)}
.fam:nth-child(3){border-top-color:var(--blue)}
.fam:nth-child(4){border-top-color:var(--pink)}
.fam:nth-child(5){border-top-color:var(--yellow)}

.project-card{border-top-color:var(--pink)}
.office{border-top-color:var(--pink)}
.footer-logo img{height:58px;width:auto;margin-bottom:6px}
footer h4{color:#fff}
footer a:hover{color:var(--yellow)}
.dot.active{background:var(--yellow);border-color:var(--yellow)}

@media(max-width:1180px){
  nav ul{gap:14px;font-size:13px}
  .logo img{height:42px}
  .nav-btn{padding:11px 16px}
}
@media(max-width:900px){
  .logo img{height:40px}
  nav ul{background:#fff;box-shadow:0 20px 30px rgba(28,18,54,.12)}
  nav ul > li > a{color:var(--brown)}
  .sub{border-top:none;border-left:2px solid var(--pink);box-shadow:none;background:transparent}
}

/* dark sections: cards sit directly on the indigo, not on the light grid-line colour */
.product .process-grid{background:transparent;gap:18px}
.product .step{border:1px solid rgba(255,255,255,.16);transition:.4s}
.product .step:hover{border-color:var(--yellow)}

/* five footer columns */
@media(min-width:901px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:36px}
}
/* solid brand fallback while photos load */
.hero,.page-hero,.slide{background-color:var(--ink)}
.cta{background-color:var(--ink)}

/* responsive column helpers (desktop only; mobile rules above take over) */
@media(min-width:901px){
  .cols-5{grid-template-columns:repeat(5,1fr)}
  .cols-2{grid-template-columns:1fr 1fr}
}

.hero .btn{margin-right:14px}

/* ============================================================
   V4 — components for the full page set
   ============================================================ */
.lead{max-width:700px;color:var(--muted);line-height:1.8;margin-bottom:34px;font-size:16px}
.section-title{margin-bottom:18px}

/* cards sit on their own borders (no grid-line background -> no empty-cell blocks) */
.note-grid,.process-grid{background:transparent;gap:18px}
.note-card,.step{border:1px solid #eadff0}
.sol-card{display:block}
.icon{width:46px;height:46px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:14px}
.step .icon{margin-bottom:10px}
.step .num{font-size:34px}
@media(min-width:901px){.cols-3{grid-template-columns:repeat(3,1fr)}}
.product .lead{color:rgba(255,255,255,.75)}
.product .step{background:rgba(255,255,255,.07)}

/* plain (photo-less) page hero */
.page-hero.plain{
  background-image:linear-gradient(135deg,#1c1236 0%,#3a1d6e 55%,#7a1d6a 100%);
  min-height:340px;height:44vh;
}

/* running client-logo strip */
.marquee{
  overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:22px;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 11px))}}
.logo-tile{
  width:190px;height:92px;flex-shrink:0;background:#fff;
  border:1px dashed #d9cfe6;display:flex;align-items:center;justify-content:center;
}
.logo-tile span{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
}

/* insights */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{background:#fff;box-shadow:0 18px 45px rgba(28,18,54,.08);transition:.4s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-8px)}
.post-card img{height:200px;object-fit:cover}
.post-body{padding:22px 22px 26px}
.post-body h3{font-size:25px;font-style:italic;margin-bottom:10px;line-height:1.15}
.post-body p{color:var(--muted);font-size:14.5px;line-height:1.7}
.post-body .more{display:inline-block;margin-top:14px;color:var(--pink);font-size:13px;letter-spacing:.5px}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.article{max-width:780px}
.article p{font-size:17px;line-height:1.9;color:var(--brown);margin-bottom:20px}
.article-list{list-style:none;margin:0 0 24px}
.article-list li{padding:11px 0 11px 28px;position:relative;border-bottom:1px solid #efe6f1;font-size:16px}
.article-list li::before{content:"\25C6";position:absolute;left:0;top:14px;color:var(--pink);font-size:10px}
.article-list strong{color:var(--ink);margin-right:6px}

/* placeholders / notices */
.placeholder-panel{
  background:#fff;border:1px dashed #d9a5c3;padding:36px 30px;text-align:center;
}
.placeholder-panel p{max-width:560px;margin:14px auto 0;color:var(--muted);line-height:1.8}

/* about */
.philosophy{
  display:flex;flex-wrap:wrap;gap:12px 38px;justify-content:center;margin-top:20px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(28px,4.4vw,52px);color:#fff;
}
.philosophy span:nth-child(2){color:var(--gold)}

/* contact + demo */
.contact-details p{margin:8px 0;color:var(--brown)}
.demo-steps{list-style:none}
.demo-steps li{position:relative;padding:18px 0 18px 70px;border-bottom:1px solid #efe6f1;font-size:16px;color:var(--brown)}
.demo-steps li span{position:absolute;left:0;top:12px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:34px;color:var(--pink)}
.footer-bottom a{color:rgba(255,255,255,.7)}
.footer-bottom a:hover{color:var(--yellow)}

/* page heroes always clear the fixed menu (announcement bar + header ≈ 120px) */
.page-hero{padding-top:150px;min-height:480px}
.page-hero h1{font-size:clamp(38px,5.6vw,72px)}
.page-hero.plain{height:auto;min-height:0;padding-top:170px}
.page-hero.plain .wrap{padding-bottom:64px}
@media(max-width:600px){.page-hero{padding-top:170px}.page-hero.plain{padding-top:180px}}

.pill-row .btn{margin-top:0;padding:12px 22px}

.credit a{color:#fff;font-weight:500}
.credit a:hover{color:var(--yellow)}
@media(max-width:700px){.footer-bottom{flex-direction:column;align-items:flex-start}}

/* products + applications */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.prod-card{background:#fff;border:1px solid #eadff0;padding:18px 16px 22px;text-align:center;transition:.4s}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(28,18,54,.10);border-color:var(--pink)}
.prod-card .pimg{height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.prod-card img{width:auto;max-width:100%;max-height:200px;object-fit:contain}
.prod-card h3{font-size:22px;font-style:italic;line-height:1.2}
.app-grid{display:flex;flex-wrap:wrap;gap:24px 22px;justify-content:center;margin-top:30px}
.app-card{width:168px}
.app-card img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 26px rgba(28,18,54,.12)}
.app-card span{display:block;margin-top:12px;font-size:14px;color:var(--brown);font-weight:500}


/* ============================================================
   V5 — MENU FIT  (real Work Sans is wider than a fallback font)
   Keep every item on one line, give the bar more room, and
   switch to the hamburger menu before the items can collide.
   ============================================================ */
nav{max-width:1360px}
nav ul{flex-wrap:nowrap;gap:24px;font-size:14px}
nav ul > li{flex-shrink:0}
nav ul a,.nav-btn,.logo{white-space:nowrap}
.logo{flex-shrink:0}
.logo img{height:52px}
.menu-cta{display:none}

@media(max-width:1359px){
  nav ul{gap:18px;font-size:13.5px}
  .logo img{height:48px}
}
@media(max-width:1259px){
  nav ul{gap:14px;font-size:13px}
  .logo img{height:42px}
  .nav-btn{padding:11px 16px}
}
/* hamburger menu */
@media(max-width:1120px){
  .menu-toggle{display:block}
  .logo img{height:44px}
  .nav-btn{display:none}
  nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 0 22px;background:#fff;max-height:75vh;overflow-y:auto;
    font-size:15px;box-shadow:0 20px 30px rgba(28,18,54,.12);
  }
  nav ul.open{display:flex}
  nav ul > li{width:100%}
  nav ul > li > a{display:block;padding:12px 28px;color:var(--brown)}
  nav ul > li > a.active{color:var(--pink)}
  .sub{
    position:static;display:block;min-width:0;padding:0 0 8px;margin-left:28px;
    border:none;border-left:2px solid var(--pink);background:transparent;box-shadow:none;
  }
  .sub a{padding:9px 22px}
  .menu-cta{display:block;padding:14px 28px 0}
  nav ul > li.menu-cta > a{display:inline-block;padding:13px 26px;background:var(--pink);color:#fff;letter-spacing:1px;text-transform:uppercase;font-size:12.5px}
}