:root{
  --bath-tile:#FAF9F3;
  --foam-suds:#FFFFFF;
  --bristle-ink:#2A2B24;
  --bristle-bronze:#A67B2E;
  --towel-teal:#4E8F85;
  --soap-lilac:#B9A6C9;
  --shelf-grey:#8E918A;
  --hairline:#E5E4D8;
  --deep-shelf:#22251F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:var(--bath-tile);
  color:var(--bristle-ink);
  font-size:16px;
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--bristle-bronze);text-decoration:none}
a:hover{color:var(--towel-teal)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===== TOWEL-RAIL NAV ===== */
.towelrail-nav{
  position:sticky;
  top:0;
  z-index:100;
  background-color:var(--foam-suds);
  box-shadow:0 1px 0 var(--hairline);
}
.towelrail{
  height:14px;
  background-color:var(--hairline);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:26px;
  position:relative;
  overflow:hidden;
}
.towelrail::before{
  content:"";
  position:absolute;
  left:0;right:0;top:6px;
  height:4px;
  background-color:var(--shelf-grey);
  border-radius:2px;
}
.towel{
  position:relative;
  z-index:1;
  width:38px;
  height:11px;
  margin-top:-2px;
  background-color:var(--towel-teal);
  border-radius:0 0 4px 4px;
}
.towel.foam{background-color:var(--foam-suds);border:1px solid var(--hairline)}
.towel.lilac{background-color:var(--soap-lilac)}
.navrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-weight:800;
  letter-spacing:2px;
  font-size:21px;
  color:var(--bristle-ink);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .inch{color:var(--bristle-bronze)}
.brushtab{width:16px;height:16px}
.brushtab .hand{stroke:var(--bristle-bronze);stroke-width:2;stroke-linecap:round}
.brushtab .pad{fill:var(--bristle-bronze)}
.brushtab .bristle{stroke:var(--foam-suds);stroke-width:1.4;stroke-linecap:round}
.navlinks{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
}
.navlinks li{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.navlinks li::after{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background-color:var(--soap-lilac);
}
.navlinks li:last-child::after{display:none}
.navlinks a{
  color:var(--bristle-ink);
  padding:4px 2px;
  position:relative;
  font-weight:600;
}
.navlinks a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:2px;
  background-color:var(--bristle-bronze);
  border-radius:2px;
  transition:right .25s ease;
}
.navlinks a:hover::after{right:0}
.navlinks a::before{
  content:"";
  position:absolute;
  top:-14px;
  width:8px;height:8px;
  left:50%;
  transform:translateX(-50%);
  background-color:var(--foam-suds);
  border:1px solid var(--soap-lilac);
  border-radius:50%;
  opacity:0;
  transition:opacity .25s ease;
}
.navlinks a:hover::before{opacity:1}
.mobile-toggle{
  display:none;
  background:none;
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:6px 10px;
  color:var(--bristle-ink);
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  cursor:pointer;
}

/* ===== HERO ===== */
.shelfhero{
  background-color:var(--bath-tile);
  padding:76px 0 40px;
}
.shelfhero .hero-grid{
  display:grid;
  grid-template-columns:55% 45%;
  gap:40px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  background-color:var(--bristle-bronze);
  color:var(--foam-suds);
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:22px;
}
.h-title{
  font-size:48px;
  line-height:1.08;
  font-weight:700;
  color:var(--bristle-ink);
  letter-spacing:-1px;
  margin-bottom:22px;
}
.h-title .hl{color:var(--bristle-bronze)}
.subcopy{
  color:var(--shelf-grey);
  font-size:18px;
  max-width:620px;
  margin-bottom:32px;
}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-block;
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:15px;
  padding:14px 28px;
  border-radius:6px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-primary{
  background-color:var(--bristle-bronze);
  color:var(--foam-suds);
}
.btn-primary:hover{background-color:#8A6A32;color:var(--foam-suds)}
.btn-outline{
  background-color:transparent;
  color:var(--towel-teal);
  border:1px solid var(--towel-teal);
}
.btn-outline:hover{background-color:var(--towel-teal);color:var(--foam-suds)}

/* CSS shelf still-life */
.shelf-stage{position:relative;padding:10px 8px 40px}
.shelf-line{
  position:relative;
  height:6px;
  background:linear-gradient(to bottom,#B98A4B,#84603A);
  border-radius:3px;
  margin-bottom:34px;
}
.hideline{height:5px;background:linear-gradient(to bottom,#CFA464,#96703F);box-shadow:0 4px 6px rgba(34,37,31,.15)}
.shelf-stage .shadow{
  position:absolute;
  inset:0;
  background:#EDF4F1;
  z-index:0;
  visibility:hidden;
}
.shelf-board{position:relative;z-index:1;display:flex;align-items:flex-end;gap:22px}
.towelstk{display:flex;flex-direction:column;gap:3px}
.towelstk .t{width:74px;height:22px;border-radius:5px;position:relative}
.towelstk .t.teal{background:linear-gradient(to bottom,#4E8F85,#3E7269)}
.towelstk .t.fmw{background:var(--foam-suds);border:1px solid var(--hairline)}
.towelstk .t.lil{background:#A98FB8}
.towelstk .t::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:#FDFEFC}
.soapdish{display:flex;flex-direction:column;align-items:center}
.soapdish .dish{width:64px;height:12px;background:#E8E6DC;border:1px solid var(--hairline);border-radius:4px}
.soapdish .bar{width:46px;height:20px;background:linear-gradient(135deg,#C9B4D6,#A98FB8);border-radius:4px;box-shadow:2px 2px 0 #8E7C9C;margin-bottom:3px}
.soapdish .bar::after{content:"";display:block;width:30px;height:3px;background:#D8C7E0;border-radius:2px;margin:5px auto 0}
.pump{display:flex;flex-direction:column;align-items:center}
.pump .nozzle{width:6px;height:12px;background:var(--bristle-bronze);border-radius:2px}
.pump .pumphead{width:26px;height:7px;background:var(--towel-teal);border-radius:3px}
.pump .body{width:34px;height:44px;background:var(--foam-suds);border:1px solid var(--hairline);border-radius:8px}
.pump .labelchip{width:24px;height:16px;background:var(--soap-lilac);border-radius:3px;margin:10px auto 0}
.bottomline{display:flex;align-items:flex-end;gap:22px;margin-top:6px}
.bathbrush{display:flex;flex-direction:column;align-items:center;transform:rotate(6deg)}
.bathbrush .hand{width:8px;height:70px;background:linear-gradient(to top,#A67B2E,#8A6A32);border-radius:4px}
.bathbrush .pad{width:52px;height:16px;background:var(--bristle-bronze);border-radius:8px;position:relative}
.bathbrush .bristle{background:#F2F6F3;position:absolute;top:2px;width:4px;height:4px;border-radius:50%}
.bin{width:66px;height:58px;background:#D8D5C8;border:2px solid #BDB8AA;border-radius:10px;position:relative}
.bin::before{content:"";position:absolute;inset:6px;border:1px solid #B0AB9D;border-radius:6px;background:repeating-linear-gradient(45deg,#C9C4B5 0,#C9C4B5 4px,#B5B0A1 4px,#B5B0A1 8px)}
.bin .sponge{position:absolute;z-index:2;width:34px;height:18px;border-radius:7px}
.bin .sponge.s1{background:var(--towel-teal);top:-12px;left:12px;transform:rotate(-8deg)}
.bin .sponge.s2{background:var(--soap-lilac);top:-9px;left:26px;transform:rotate(6deg)}
.sponge::before,.sponge::after{content:"";position:absolute;background:#F2F6F3;width:5px;height:4px;border-radius:50%}
.sponge.s1::before{left:6px;top:4px}.sponge.s1::after{right:6px;bottom:4px}
.sponge.s2::before{left:7px;top:5px}.sponge.s2::after{right:7px;bottom:3px}
.cup{display:flex;flex-direction:column;align-items:center}
.cup .bowl{width:40px;height:34px;background:var(--foam-suds);border:1px solid var(--hairline);border-radius:4px 4px 8px 8px;position:relative}
.cup .bowl::before{content:"";position:absolute;left:6px;top:6px;width:2px;height:20px;background:var(--shelf-grey);box-shadow:8px -2px 0 var(--shelf-grey),16px -6px 0 var(--shelf-grey)}
.cup .handle{width:8px;height:18px;border:2px solid var(--hairline);border-radius:4px;position:absolute;right:-8px}
.pricerail{display:flex;justify-content:center;gap:7px;margin-top:16px;flex-wrap:wrap}
.price-tag{background:#F2EFE2;border:1px solid var(--bristle-bronze);border-radius:3px;padding:3px 8px;font-family:"Avenir Next",Arial,Helvetica,sans-serif;font-size:10px;font-weight:700;color:var(--bristle-bronze)}

/* ===== SHELF-STOCK ROWS ===== */
.shelfrows{background-color:var(--bath-tile);padding:72px 0}
.rowhead{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--bristle-bronze);
  margin-bottom:10px;
}
.rows-title{font-size:34px;color:var(--bristle-ink);margin-bottom:40px;line-height:1.2}
.stock-row{
  display:grid;
  grid-template-columns:70px 1fr 120px;
  gap:22px;
  align-items:center;
  background-color:var(--foam-suds);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:26px 28px;
  margin-bottom:14px;
}
.aisle{
  width:54px;
  height:88px;
  background-color:var(--towel-teal);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-weight:800;
  font-size:16px;
  color:var(--foam-suds);
  writing-mode:vertical-rl;
  text-orientation:upright;
}
.stock-copy h3{font-size:21px;color:var(--bristle-ink);margin-bottom:8px}
.stock-copy p{color:var(--shelf-grey);font-size:16px}
.par{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.par-label{font-family:"Avenir Next",Arial,Helvetica,sans-serif;font-size:11px;color:var(--shelf-grey);text-transform:uppercase;letter-spacing:1px;writing-mode:vertical-rl;text-orientation:upright}
.vial{
  position:relative;
  width:34px;
  height:110px;
  background-color:transparent;
  border:2px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
}
.vial .fill{position:absolute;left:0;right:0;bottom:0;background-color:var(--towel-teal)}
.vial .min{position:absolute;left:0;right:0;height:2px;background-color:var(--bristle-bronze);transform:translateY(1px)}

/* ===== PANTRY METRIC BAND ===== */
.metric-band{background-color:var(--towel-teal);padding:64px 0;color:var(--foam-suds)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.metric{
  text-align:center;
  padding:0 20px;
  position:relative;
}
.metric + .metric{margin-left:0}
.metric .num{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-weight:800;
  font-size:52px;
  color:var(--foam-suds);
}
.metric .lbl{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--soap-lilac);
  margin-top:6px;
}
.metric-sep{width:1px;height:70px;background-color:#C9D8D2;align-self:center}

/* ===== STATEMENT BAND ===== */
.statement{background-color:var(--foam-suds);padding:80px 0}
.statement blockquote{
  border-left:4px solid var(--soap-lilac);
  padding-left:28px;
  font-size:26px;
  line-height:1.6;
  color:var(--bristle-ink);
  font-style:italic;
  max-width:860px;
  margin:0 auto;
}
.statement cite{display:block;margin-top:20px;font-style:normal;color:var(--shelf-grey)}

/* ===== CTA BAND ===== */
.cta-band{background-color:var(--bath-tile);padding:84px 0;text-align:center}
.cta-band h2{font-size:34px;color:var(--bristle-bronze);margin-bottom:14px}
.cta-band p{color:var(--shelf-grey);margin-bottom:30px;max-width:640px;margin-left:auto;margin-right:auto}

/* ===== SUDS-EDGE FOOTER ===== */
.suds-footer{background-color:var(--deep-shelf);color:var(--foam-suds);position:relative;margin-top:0}
.bubble-edge{
  position:relative;
  z-index:1;
  height:14px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  overflow:hidden;
  background-color:var(--deep-shelf);
}
.bubble-edge .bub{
  position:relative;
  width:var(--s,14px);
  height:var(--s,14px);
  background-color:var(--foam-suds);
  border-radius:50%;
  margin-top:1px;
}
.bubble-edge .bub.lilac{background-color:var(--soap-lilac)}
.footer-inner{position:relative;z-index:1;padding:52px 24px 40px;text-align:center}
.footer-brand{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-weight:800;
  letter-spacing:3px;
  font-size:24px;
  color:var(--foam-suds);
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;
}
.footer-brand .inch{color:var(--bristle-bronze)}
.footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:22px;
  list-style:none;margin-bottom:30px;
}
.footer-links a{color:#D8D8CE;font-family:"Avenir Next",Arial,Helvetica,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.footer-links a:hover{color:var(--foam-suds)}
.sopdish{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px;
}
.sopdish .mini-bub{width:8px;height:8px;background-color:#FDFEFC;border-radius:50%}
.sopdish .dish{width:60px;height:10px;background:#3A3D36;border-radius:4px;position:relative}
.sopdish .bar{width:38px;height:16px;background:#A98FB8;border-radius:3px;margin:0 auto 2px}
.footer-legal{
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:13px;
  color:#B7B8AD;
  line-height:1.9;
}
.footer-legal a{color:#D8D8CE}
.footer-legal a:hover{color:var(--foam-suds)}

/* fade-up reveal (safe fallback) */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}

@media (pointer:coarse){
  .fade-up,.fade-up .fade-up{opacity:1;transform:none}
}

/* ===== FAQ accordion (contact page) ===== */
.faq-item{border-bottom:1px solid var(--hairline);padding:12px 0}
.faq-q{
  cursor:pointer;
  font-family:"Avenir Next",Arial,Helvetica,sans-serif;
  font-size:16px;
  color:var(--bristle-ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0;
}
.faq-q span{color:var(--bristle-bronze);font-size:22px;line-height:1;transition:transform .3s ease}
.faq-item.open .faq-q span{transform:rotate(135deg)}
.faq-a{
  color:var(--shelf-grey);
  max-height:0;
  overflow:hidden;
  margin:0;
  transition:max-height .35s ease,padding .35s ease;
}
.faq-item.open .faq-a{max-height:200px}

/* ===== responsive ===== */
@media (max-width:900px){
  .towelrail{display:none}
  .navlinks{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    background-color:var(--foam-suds);
    border-bottom:1px solid var(--hairline);
    padding:14px 24px;
    gap:6px;
    align-items:flex-start;
  }
  .navlinks.open{display:flex}
  .navlinks li{width:100%;justify-content:space-between}
  .mobile-toggle{display:flex;align-items:center;gap:8px}
  .shelfhero .hero-grid{grid-template-columns:1fr;gap:40px}
  .h-title{font-size:34px}
  .stock-row{grid-template-columns:50px 1fr;padding:20px}
  .par{display:none}
  .metric-grid{grid-template-columns:1fr 1fr;gap:28px}
  .metric-sep{display:none}
}

@media (max-width:560px){
  .metric-grid{grid-template-columns:1fr}
  .statement blockquote{font-size:21px}
  .navrow{padding:12px 0}
  .brand{font-size:18px}
}