:root{
  --gold:#fdac1a;
  --gold-deep:#dd8600;
  --cream:#fff1e4;
  --bronze:#995e00;
  --steel:#666666;
  --charcoal:#363436;
  --charcoal-deep:#212021;
  --balance:#535353;
  --white:#ffffff;
  --border:#e3ddd3;
  --good-green:#3ec97a;
  --bad-red:#f0554e;
  --font-display:'Helvetica Neue',Helvetica,Arial,ui-sans-serif,sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,ui-sans-serif,sans-serif;
  /* drawing-set utility face — annotations, dimensions, spec callouts */
  --font-tech:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--white);
  color:var(--charcoal);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance;font-family:var(--font-display);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--gold);color:var(--charcoal);}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.wrap-full{width:100%;max-width:1800px;margin:0 auto;padding:0 40px;box-sizing:border-box;}

/* ---------- type scale ---------- */
.t-xl{font-family:var(--font-display);font-size:clamp(46px,9vw,120px);letter-spacing:-0.02em;line-height:0.94;font-weight:700;}
.t-display{font-family:var(--font-display);font-size:clamp(34px,5.6vw,58px);letter-spacing:-0.02em;line-height:1.05;font-weight:700;}
.t-lg{font-family:var(--font-display);font-size:clamp(29px,4.2vw,46px);letter-spacing:-0.01em;line-height:1.08;font-weight:700;}
.t-heading{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);letter-spacing:-0.01em;line-height:1.1;font-weight:700;}
.t-sub{font-family:var(--font-display);font-size:22px;letter-spacing:-0.01em;font-weight:700;}
.t-nav{font-size:19.5px;font-weight:600;color:#fff;}
.t-nav.current{color:var(--gold);}
.nav-logo{
  margin-right:auto;display:flex;align-items:center;
}
.nav-logo img{height:30px;width:auto;display:block;}
.nav-logo:hover{opacity:0.85;}
.nav-logo.lg img{height:109px;}
@media (max-width:640px){
  .nav-logo.lg img{height:96px;}
}
.t-body{font-size:17px;font-weight:400;line-height:1.65;color:var(--steel);}
.t-cap{font-size:14px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}

/* ================================================================
   DRAWING SET
   Visual language borrowed from our own shop drawings — dimension
   rules, sheet callouts, revision blocks. Used to signal that this
   is an engineering company, not a catalogue.
   ================================================================ */

/* mono annotation, as it appears on a drawing */
.tech-note{
  font-family:var(--font-tech);font-size:11.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--steel);
}

/* dimension rule — a hairline with tick ends, used as a section divider */
.dim-rule{
  display:flex;align-items:center;gap:14px;
  margin:0 0 34px;
}
.dim-rule::before,.dim-rule::after{
  content:"";height:7px;width:1px;background:var(--border);flex-shrink:0;
}
.dim-rule .line{flex:1;height:1px;background:var(--border);}
.dim-rule .tech-note{flex-shrink:0;}
.dark-band .dim-rule::before,.dark-band .dim-rule::after{background:rgba(255,255,255,0.3);}
.dark-band .dim-rule .line{background:rgba(255,255,255,0.18);}
.dark-band .dim-rule .tech-note{color:rgba(255,255,255,0.5);}

/* detail marker — the circled number that labels a view on a drawing */
.detail-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--charcoal);
  font-family:var(--font-tech);font-size:12px;font-weight:600;
  color:var(--charcoal);flex-shrink:0;
}
.dark-band .detail-mark{border-color:rgba(255,255,255,0.45);color:#fff;}

/* EST. 1976 — stamped where a serial number would go */
.est-stamp{
  display:inline-flex;flex-direction:column;gap:3px;
  padding:9px 14px;border:1.5px solid var(--charcoal);
  font-family:var(--font-tech);line-height:1.1;
}
.est-stamp .est-line-1{font-size:9.5px;letter-spacing:0.16em;color:var(--steel);}
.est-stamp .est-line-2{font-size:19px;font-weight:600;letter-spacing:0.04em;color:var(--charcoal);}
.est-stamp.on-photo{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-color:rgba(0,13,16,0.25);
}

/* title block — the drawing sheet's signature panel, used in the footer */
.rev-block{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,0.18);
  margin-bottom:26px;
}
.rev-block .cell{
  padding:12px 16px;
  border-right:1px solid rgba(255,255,255,0.18);
}
.rev-block .cell:last-child{border-right:none;}
.rev-block .k{
  font-family:var(--font-tech);font-size:9.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(255,255,255,0.4);
}
.rev-block .v{
  font-family:var(--font-tech);font-size:13px;color:rgba(255,255,255,0.9);
  margin-top:5px;font-weight:600;
}
@media (max-width:700px){
  .rev-block{grid-template-columns:repeat(2,1fr);}
  .rev-block .cell:nth-child(2){border-right:none;}
  .rev-block .cell:nth-child(1),.rev-block .cell:nth-child(2){border-bottom:1px solid rgba(255,255,255,0.18);}
}

/* secondary emphasis — so the gold card can mean exactly one thing */
.card-plain{
  background:var(--cream);
  border:1px solid var(--border);
  color:var(--charcoal);
}
.card-plain .eyebrow{
  font-family:var(--font-tech);font-size:11.5px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:14px;
}
.card-plain h3{color:var(--charcoal);}
.card-plain p{color:var(--balance);margin-top:14px;font-size:17px;line-height:1.6;max-width:680px;}
.card-plain .flow{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card-plain .flow-item{border-top:1.5px solid var(--border);padding-top:12px;}
.card-plain .flow-item .k{font-size:14px;font-weight:700;color:var(--charcoal);}
.card-plain .flow-item .v{font-size:12px;color:var(--steel);margin-top:4px;}
@media (max-width:880px){.card-plain .flow{grid-template-columns:repeat(2,1fr);}}

/* ---------- logo placeholder (name pending: DELC Manufacturing) ---------- */
.logo-ph{
  width:var(--ph-size,44px);height:var(--ph-size,44px);
  border:1.5px dashed var(--charcoal);
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.15;
  font-family:var(--font-body);font-weight:700;
  font-size:calc(var(--ph-size,44px) * 0.18);
  letter-spacing:0.02em;color:var(--charcoal);
  flex-shrink:0;padding:4px;
}
.logo-ph.on-dark{border-color:rgba(255,255,255,0.5);color:rgba(255,255,255,0.85);}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:1000px;
  padding:15px 24px 16px 24px;
  font-family:var(--font-body);
  font-size:15px;font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease, background 0.18s ease;
}
.pill:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 26px -12px rgba(0,13,16,0.35);}
.pill:active{transform:translateY(-1px) scale(0.98);}
.pill-gold{background:var(--gold);color:var(--charcoal);}
.pill-gold:hover{background:#ffb937;}
.pill-ghost-charcoal{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal);}
.pill-ghost-charcoal:hover{background:var(--charcoal);color:#fff;}
.pill-ghost-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.6);}
.pill-ghost-white:hover{background:#fff;color:var(--charcoal);}
.badge-pill{
  border-radius:1000px;border:1.5px solid var(--charcoal);
  padding:14px 22px;font-size:14px;font-weight:700;color:var(--charcoal);
  white-space:nowrap;
}

/* ---------- nav ---------- */
.nav{
  position:relative;z-index:100;
  background:transparent;
  display:flex;align-items:center;justify-content:flex-end;
  gap:28px;
  padding-top:22px;padding-bottom:22px;
}
.nav-links{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;align-items:center;}
.nav-links span{color:#fff;cursor:default;}
.nav-links span:hover{color:var(--gold);}
.nav-links a.t-nav:hover{color:var(--gold);}

/* plain (non-photo) hero pages have a light background, so nav text needs to stay dark for contrast */
.hero:not(.on-photo) .nav-logo{color:var(--charcoal);}
.hero:not(.on-photo) .nav-logo:hover{color:var(--bronze);}
.hero:not(.on-photo) .nav-links span{color:var(--charcoal);}
.hero:not(.on-photo) .nav-links span:hover{color:var(--bronze);}
.hero:not(.on-photo) .nav-links a.t-nav{color:var(--charcoal);}
.hero:not(.on-photo) .nav-links a.t-nav:hover{color:var(--bronze);}
.hero:not(.on-photo) .t-nav.current{color:var(--bronze);}

/* ---------- nav dropdowns (Solutions, Applications, Projects, Installer) ---------- */
/* Note: the popup sits flush against its trigger (top:100%/left:100%, no margin gap) and uses
   padding instead of margin for visual spacing, so the padding itself stays part of the hoverable
   box. This avoids the classic CSS hover-menu bug where a dead-space gap breaks the hover chain
   before the pointer reaches the popup. */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 24px 48px -20px rgba(0,13,16,0.28);
  min-width:220px;
  padding:14px 8px 8px 8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index:30;
}
.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-item{
  position:relative;
  display:block;
  padding:13px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--charcoal);
  cursor:pointer;
  white-space:nowrap;
}
.dropdown-item:hover{background:var(--cream);}
.dropdown-item.current{color:var(--bronze);}
.dropdown-item-label{color:inherit;text-decoration:none;display:block;}
.dropdown-item-label:hover{color:var(--bronze);}
.dropdown-item-label.current{color:var(--bronze);font-weight:700;cursor:default;}
.dropdown-submenu{
  position:absolute;
  top:0;
  left:100%;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 24px 48px -20px rgba(0,13,16,0.28);
  min-width:230px;
  padding:8px 8px 8px 14px;
  opacity:0;
  visibility:hidden;
  transform:translateX(-6px);
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dropdown-item.has-submenu:hover .dropdown-submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.dropdown-subitem{
  display:block;
  padding:11px 14px;
  font-size:13.5px;
  font-weight:500;
  color:var(--charcoal);
  white-space:nowrap;
}
.dropdown-subitem:hover{background:var(--cream);color:var(--bronze);}
.dropdown-subitem.current{color:var(--bronze);font-weight:700;}
@media (prefers-reduced-motion:reduce){.dropdown-menu,.dropdown-submenu{transition:none;}}

.breadcrumb{font-size:12.5px;color:var(--steel);letter-spacing:0.02em;margin-top:6px;}
.breadcrumb a:hover{color:var(--bronze);}
.breadcrumb .sep{margin:0 8px;opacity:0.5;}
.breadcrumb .current{color:var(--charcoal);font-weight:600;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:48px;
  overflow:hidden;
  background:var(--cream);
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-align-left .hero-video{filter:grayscale(0.55);}
.hero-top-group{display:flex;flex-direction:column;position:relative;z-index:2;}
.hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  margin-top:64px;
}
.hero-left{display:flex;flex-direction:column;gap:28px;align-items:flex-start;}
.hero-series-mark{display:flex;flex-direction:column;gap:6px;}
.hero-series-mark .num{font-family:var(--font-display);font-size:clamp(90px,14vw,220px);font-weight:700;letter-spacing:-0.03em;line-height:0.85;color:var(--charcoal);}
.hero-series-mark .lbl{font-size:15px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--bronze);}
.hero-product-links{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.hero-product-links .pill{padding:18px 32px;font-size:17px;}
.hero-product-links.plain{flex-direction:row;flex-wrap:wrap;gap:8px 10px;align-items:center;}
.hero-product-links.plain .tag-label{font-size:14px;color:var(--bronze);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.hero-product-links.plain .tag-label:not(:last-child)::after{content:"\00b7";margin-left:10px;color:var(--steel);font-weight:400;}
.hero-headline{
  text-align:right;
  max-width:520px;
  padding-top:6px;
  color:var(--charcoal);
}
.hero-headline .accent{color:var(--gold);}
.hero-cap{
  text-align:right;
  color:var(--steel);
  font-size:17px;
  line-height:1.65;
  max-width:380px;
  margin:18px 0 0 auto;
}
.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  position:relative;z-index:2;
}
.hero-badges{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.hero-actions{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
}
.hero-actions .pill{justify-content:center;padding:18px 30px 19px;font-size:16px;}

/* ---------- trust strip ---------- */
.stat-strip{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat-cell{padding:28px 0;border-right:1px solid var(--border);padding-right:24px;}
.stat-cell:last-child{border-right:none;}
.stat-cell .num{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--charcoal);}
.stat-cell .lbl{font-size:13px;color:var(--steel);margin-top:6px;}

/* ---------- section shell ---------- */
section{padding:76px 0;}
.section-head{max-width:660px;margin-bottom:48px;}
.section-head .eyebrow{color:var(--bronze);margin-bottom:12px;}
.section-head p{margin-top:16px;}
.section-cta{margin-top:40px;}

/* ---------- pain point / applications grid (4-up) ---------- */
.pain-grid,.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.pain-cell,.app-cell{background:#fff;padding:26px 22px;}
.pain-cell .n,.app-cell .n{font-family:var(--font-display);font-size:26px;color:var(--gold);margin-bottom:12px;}
.pain-cell p,.app-cell p{font-size:15px;color:var(--charcoal);line-height:1.5;font-weight:600;}
.pain-grid.lg{border-width:2px;}
.pain-grid.lg .pain-cell{padding:40px 34px;}
.pain-grid.lg .pain-cell .n{font-size:38px;margin-bottom:16px;}
.pain-grid.lg .pain-cell p{font-size:19px;line-height:1.5;}
@media (max-width:880px){.pain-grid.lg .pain-cell{padding:28px 24px;}.pain-grid.lg .pain-cell p{font-size:16px;}}

/* ---------- clients strip ---------- */
.clients-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;background:var(--border);border:1px solid var(--border);}
.clients-strip .client-cell{background:#fff;width:132px;display:flex;align-items:center;justify-content:center;padding:16px 14px;box-sizing:border-box;}
.clients-strip .client-cell img{max-width:100%;max-height:36px;width:auto;height:auto;filter:grayscale(1);opacity:0.7;transition:opacity 0.18s ease;}
.clients-strip .client-cell:hover img{opacity:1;}
@media (max-width:880px){.clients-strip .client-cell{width:108px;}}

/* single-line logo carousel */
.clients-carousel{overflow:hidden;width:100%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.clients-track{display:flex;width:max-content;animation:clientsScroll 34s linear infinite;}
.clients-carousel:hover .clients-track{animation-play-state:paused;}
.clients-track .client-cell{background:#fff;width:450px;display:flex;align-items:center;justify-content:center;padding:54px 48px;box-sizing:border-box;border-right:1px solid var(--border);flex:none;}
.clients-track .client-cell img{max-width:100%;max-height:102px;width:auto;height:auto;opacity:0.9;transition:opacity 0.18s ease;}
.clients-track .client-cell:hover img{opacity:1;}
@keyframes clientsScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.clients-track{animation:none;}}
@media (max-width:880px){.clients-track .client-cell{width:220px;padding:28px 22px;}.clients-track .client-cell img{max-height:60px;}}

/* ---------- product grid (P-Traps, Hubs & Cleanouts) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.product-card{background:#fff;padding:36px 30px;display:flex;flex-direction:column;}
.product-card img{width:100%;height:170px;object-fit:contain;margin-bottom:26px;}
.product-card h3{font-family:var(--font-display);font-size:23px;color:var(--charcoal);}
.product-card .desc{margin-top:10px;font-size:14px;color:var(--steel);line-height:1.6;flex:1;}
.product-card .pspecs{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:11px;}
.product-card .pspecs .row{display:flex;justify-content:space-between;gap:16px;font-size:13px;}
.product-card .pspecs .k{color:var(--steel);}
.product-card .pspecs .v{color:var(--charcoal);font-weight:700;text-align:right;}
@media (max-width:880px){.product-grid{grid-template-columns:1fr;}}

/* ---------- feature grid ---------- */
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:64px 40px;
}
.feature-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.feature-block{
  position:relative;overflow:hidden;
  border:1px solid var(--border);
  padding:28px 24px;
}
a.feature-block{
  display:block;text-decoration:none;color:inherit;
  transition:border-color 0.25s ease,box-shadow 0.3s ease,transform 0.3s cubic-bezier(.2,.7,.3,1);
}
a.feature-block:hover{
  border-color:var(--gold);
  box-shadow:0 18px 40px -24px rgba(0,13,16,0.4);
  transform:translateY(-4px);
}
a.feature-block:hover .link{color:var(--bronze);}
.feature-block .idx{font-size:13px;color:var(--steel);margin-bottom:10px;}
.feature-block h3{margin-top:2px;}
.feature-block .tag{font-size:13px;color:var(--bronze);margin-top:6px;font-weight:600;}
.feature-block p{margin-top:14px;}
.feature-block .link{
  margin-top:18px;font-size:14px;font-weight:700;color:var(--charcoal);
  display:inline-flex;align-items:center;gap:6px;
}

/* photo-background variant — real jobsite/product photography behind the card copy */
.feature-block.photo{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-color:rgba(255,255,255,0.25);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
}
.feature-block.photo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,13,16,0.15) 0%,rgba(0,13,16,0.35) 55%,rgba(0,13,16,0.88) 100%);
}
.feature-block.photo.darker::before{
  background:linear-gradient(180deg,rgba(0,13,16,0.42) 0%,rgba(0,13,16,0.58) 55%,rgba(0,13,16,0.94) 100%);
}
.feature-block.photo > *{position:relative;z-index:1;}
.feature-block.photo .idx{color:var(--gold);}
.feature-block.photo h3{color:#fff;}
.feature-block.photo .tag{color:var(--gold);}
.feature-block.photo p{color:rgba(255,255,255,0.85);}
.feature-block.photo .link{color:#fff;}
a.feature-block.photo:hover .link{color:var(--gold);}

/* 30% larger variant */
.feature-grid.lg{gap:83px 52px;}
.feature-grid.lg .feature-block{padding:36px 31px;}
.feature-grid.lg .feature-block .idx{font-size:17px;margin-bottom:13px;}
.feature-grid.lg .feature-block h3{font-size:29px;}
.feature-grid.lg .feature-block .tag{font-size:17px;margin-top:8px;}
.feature-grid.lg .feature-block p{font-size:calc(1em * 1.15);margin-top:18px;}
.feature-grid.lg .feature-block .link{font-size:18px;margin-top:23px;}

.dark-band .feature-block{border-color:rgba(255,255,255,0.25);background:rgba(0,13,16,0.35);}
.dark-band .feature-block .idx{color:var(--gold);}
.dark-band .feature-block h3{color:#fff;}
.dark-band .feature-block .tag{color:var(--gold);}
.dark-band .feature-block .link{color:#fff;}

/* keeps text and cards clear of a photo subject positioned on the right,
   and fits the whole section in one viewport — no scroll inside it */
.content-left{min-height:100vh;box-sizing:border-box;display:flex;align-items:center;padding:40px 0;}
.content-left.section-photo::before{
  background:linear-gradient(100deg,rgba(0,13,16,0.63) 0%,rgba(0,13,16,0.546) 55%,rgba(0,13,16,0.42) 100%);
}
.content-left .wrap{max-width:700px;margin-left:0;margin-right:auto;}
.content-left .feature-grid.cols-3{grid-template-columns:1fr;}
.content-left .dim-rule{margin-bottom:22px;}
.content-left .section-head{margin-bottom:28px;}
.content-left .section-head h2{font-size:42px;}
.content-left .section-head .t-body{font-size:17px;line-height:1.6;}
.content-left .feature-grid{gap:18px;}
.content-left .feature-block{padding:26px 28px;}
.content-left .feature-block .idx{font-size:13px;margin-bottom:8px;}
.content-left .feature-block h3{font-size:20px;}
.content-left .feature-block p{font-size:15px;line-height:1.55;margin-top:10px;}
@media (max-width:880px){
  .content-left{min-height:0;padding:64px 0;}
  .content-left .wrap{max-width:none;}
}

/* ---------- featured gold card ---------- */
.card-gold{
  background:var(--gold);
  color:var(--charcoal);
}
.card-gold .eyebrow{font-size:14px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;opacity:0.75;margin-bottom:14px;}
.card-gold h3{color:var(--charcoal);}
.card-gold p{color:var(--charcoal);opacity:0.85;margin-top:14px;font-size:17px;line-height:1.6;max-width:680px;font-weight:500;}
.card-gold .flow{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card-gold .flow-item{border-top:1.5px solid rgba(0,13,16,0.3);padding-top:12px;}
.card-gold .flow-item .k{font-size:14px;font-weight:700;color:var(--charcoal);}
.card-gold .flow-item .v{font-size:12px;color:rgba(0,13,16,0.7);margin-top:4px;}

/* photo variant — real installed system behind a gold-tinted scrim */
.card-gold.lg h3{font-size:34px;}
.card-gold.lg p{font-size:19px;max-width:800px;}
.card-gold.lg .flow-item .k{font-size:16px;}
.card-gold.lg .flow-item .v{font-size:13.5px;}
@media (max-width:880px){.card-gold.lg h3{font-size:26px;}.card-gold.lg p{font-size:16px;}}

.card-gold.photo{
  position:relative;overflow:hidden;color:#fff;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.card-gold.photo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(157,101,4,0.92) 0%,rgba(157,101,4,0.65) 45%,rgba(0,13,16,0.55) 100%);
}
.card-gold.photo > *{position:relative;z-index:1;}
.card-gold.photo .eyebrow{color:var(--charcoal);}
.card-gold.photo h3{color:#fff;}
.card-gold.photo p{color:rgba(255,255,255,0.9);}
.card-gold.photo .flow-item{border-top-color:rgba(255,255,255,0.3);}
.card-gold.photo .flow-item .k{color:#fff;}
.card-gold.photo .flow-item .v{color:rgba(255,255,255,0.75);}

/* ---------- TCO split: recoating-loss calculator ---------- */
.cost-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.cost-split-text{
  background:linear-gradient(155deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:var(--charcoal);padding:72px 56px;
  display:flex;flex-direction:column;justify-content:center;
}
.cost-split-text .eyebrow{color:var(--charcoal);opacity:0.7;}
.cost-split-text h2{color:var(--charcoal);}
.cost-split-text p{color:rgba(0,13,16,0.82);margin-top:16px;font-size:16px;line-height:1.65;max-width:480px;}
.cost-split-text .flow{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;max-width:480px;}
.cost-split-text .flow-item{border-top:1.5px solid rgba(0,13,16,0.25);padding-top:12px;}
.cost-split-text .flow-item .k{font-size:14px;font-weight:700;color:var(--charcoal);}
.cost-split-text .flow-item .v{font-size:12.5px;color:rgba(0,13,16,0.68);margin-top:4px;}

.cost-split-calc{
  background:var(--charcoal);
  padding:56px 48px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
.cost-calc-eyebrow{font-family:var(--font-tech);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.cost-calc-title{font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;letter-spacing:-0.01em;}
.cost-calc-sub{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,0.6);line-height:1.55;max-width:460px;}

.cost-calc-fields{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;}
.cost-calc-field label{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:rgba(255,255,255,0.65);margin-bottom:10px;
}
.cost-calc-field label .val{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;}
.cost-calc-field input[type="range"]{
  width:100%;accent-color:var(--gold);
  height:4px;border-radius:2px;
}

.cost-calc-results{
  margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.14);
}
.cost-calc-headline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.cost-calc-headline .big{
  font-family:var(--font-display);font-size:44px;font-weight:700;
  color:var(--gold);
}
.cost-calc-headline .sub{font-size:13px;color:rgba(255,255,255,0.55);}

.cost-calc-grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cost-calc-yr{
  background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.12);
  padding:14px 12px;text-align:center;transition:border-color 0.2s ease,background 0.2s ease;
}
.cost-calc-yr:hover{border-color:rgba(253,172,26,0.5);background:rgba(255,255,255,0.07);}
.cost-calc-yr .yr{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.cost-calc-yr .amt{margin-top:6px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;}

.cost-calc-note{margin-top:20px;font-size:11.5px;color:rgba(255,255,255,0.4);line-height:1.6;}

@media (max-width:980px){
  .cost-split{grid-template-columns:1fr;}
  .cost-split-text,.cost-split-calc{padding:48px 28px;}
  .cost-calc-fields{grid-template-columns:1fr;}
  .cost-calc-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- dark sections ---------- */
.dark-band{color:#fff;}
.dark-band.c1{background:var(--charcoal);}
.dark-band.c2{background:var(--charcoal-deep);}
.dark-band .eyebrow{color:var(--gold);}
.dark-band h2{color:#fff;}
.dark-band .t-body{color:rgba(255,255,255,0.72);}

/* ---------- drain comparison tool ---------- */
.compare-select{margin-bottom:36px;}
.compare-select label{display:block;font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:14px;}
.compare-table{display:flex;flex-direction:column;}
.compare-row{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:24px;
  padding:20px 24px;margin:0 -24px;border-top:1px solid rgba(255,255,255,0.18);
  transition:background 0.18s ease,border-color 0.18s ease;
}
.compare-row:last-child{border-bottom:1px solid rgba(255,255,255,0.18);}
.compare-row:not(.compare-header):hover{
  background:rgba(255,255,255,0.06);border-top-color:rgba(253,172,26,0.4);
}
.compare-row.compare-header{border-top:none;padding-top:0;padding-bottom:16px;}
.compare-header .compare-cell{font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;}
.compare-header .compare-col-delc{color:var(--good-green);}
.compare-header .compare-col-material{color:var(--bad-red);}
.compare-label{font-size:13px;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;align-self:center;}
.compare-delc{font-size:14px;color:var(--good-green);font-weight:700;line-height:1.55;}
.compare-material{font-size:14px;color:var(--bad-red);font-weight:500;line-height:1.55;}
@media (max-width:880px){
  .compare-row{grid-template-columns:1fr;gap:6px;}
  .compare-row.compare-header{display:none;}
  .compare-delc::before{content:"DELC HygieniDrain";display:block;font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
  .compare-material::before{content:attr(data-material-label);display:block;font-size:11px;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
}

/* ---------- filter tabs (Learn, Case Studies) ---------- */
.filter-tabs{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.filter-tab{
  border-radius:1000px;border:1.5px solid var(--charcoal);
  background:transparent;color:var(--charcoal);font-family:var(--font-body);
  font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer;
  transition:transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.18s ease, color 0.18s ease;
}
.filter-tab:hover{transform:translateY(-2px);}
.filter-tab.active{background:var(--gold);color:var(--charcoal);border-color:var(--gold);}
.filter-card[hidden]{display:none;}
#caseGrid,#learnGrid{background:transparent;border:none;}
#caseGrid .filter-card,#learnGrid .filter-card{border:1px solid var(--border);}

/* ---------- ROI calculators ---------- */
.calc-tabs{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.calc-tab{
  border-radius:1000px;border:1.5px solid rgba(255,255,255,0.35);
  background:transparent;color:#fff;font-family:var(--font-body);
  font-size:14px;font-weight:700;padding:11px 20px;cursor:pointer;
  transition:transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.18s ease;
}
.calc-tab:hover{transform:translateY(-2px);}
.calc-tab.active{background:var(--gold);color:var(--charcoal);border-color:var(--gold);}
.calc-panel{display:none;}
.calc-panel.active{display:block;}
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
.calc-field{margin-bottom:22px;}
.calc-field label{display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:10px;}
.calc-field label .val{color:var(--gold);font-weight:700;}
.calc-field input[type="range"]{width:100%;accent-color:var(--gold);}
.calc-assumption{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.18);}
.calc-result .big{font-family:var(--font-display);font-size:50px;font-weight:700;color:#fff;}
.calc-result .sub{font-size:13px;color:rgba(255,255,255,0.6);margin-top:6px;}
.calc-breakdown{margin-top:28px;display:flex;flex-direction:column;gap:12px;}
.calc-breakdown .row{display:flex;justify-content:space-between;font-size:14px;border-top:1px solid rgba(255,255,255,0.18);padding-top:12px;}
.calc-breakdown .row .k{color:rgba(255,255,255,0.6);}
.calc-breakdown .row .v{color:#fff;font-weight:700;}

/* gold-background variant of the compare/estimate tool (homepage) */
.cmp-light{background:var(--gold);color:var(--charcoal);}
.cmp-light .eyebrow{color:var(--charcoal);}
.cmp-light h2{color:var(--charcoal);}
.cmp-light .t-body{color:rgba(0,13,16,0.72);}
.cmp-light .compare-select label{color:var(--charcoal);}
.cmp-light .compare-row{border-top-color:rgba(0,13,16,0.22);}
.cmp-light .compare-row:last-child{border-bottom-color:rgba(0,13,16,0.22);}
.cmp-light .compare-row:not(.compare-header):hover{background:rgba(0,13,16,0.05);border-top-color:rgba(0,13,16,0.4);}
.cmp-light .compare-header .compare-cell{color:var(--charcoal);}
.cmp-light .compare-header .compare-col-delc{color:#0d5c34;}
.cmp-light .compare-header .compare-col-material{color:#7a1f18;}
@media (max-width:880px){
  .cmp-light .compare-delc::before{color:#0d5c34;}
  .cmp-light .compare-material::before{color:#7a1f18;}
}
.cmp-light .compare-label{color:var(--charcoal);}
.cmp-light .compare-material{color:#7a1f18;}
.cmp-light .calc-tab{border-color:var(--charcoal);color:var(--charcoal);}
.cmp-light .calc-tab.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}
.cmp-light .calc-field label{color:var(--charcoal);}
.cmp-light .calc-field label .val{color:#fff;}
.cmp-light .calc-field input[type="range"]{accent-color:var(--charcoal);}
.cmp-light .calc-assumption{color:rgba(0,13,16,0.65);border-top-color:rgba(0,13,16,0.22);}
.cmp-light .calc-result .big{color:#fff;}
.cmp-light .calc-result .sub{color:var(--charcoal);}
.cmp-light .calc-breakdown .row{border-top-color:rgba(0,13,16,0.22);}
.cmp-light .calc-breakdown .row .k{color:var(--charcoal);}
.cmp-light .calc-breakdown .row .v{color:#fff;}
.cmp-light .compare-delc{color:#0d5c34;font-weight:700;}
.cmp-light .compare-delc::before{color:#0d5c34;}

/* white-background variant of the compare table (HygieniCurb head-to-head) */
.cmp-white{background:#fff;color:var(--charcoal);}
.cmp-white .eyebrow{color:var(--bronze);}
.cmp-white h2{color:var(--charcoal);}
.cmp-white .t-body{color:var(--steel);}
.cmp-white .compare-row{border-top-color:var(--border);}
.cmp-white .compare-row:last-child{border-bottom-color:var(--border);}
.cmp-white .compare-row:not(.compare-header):hover{background:rgba(253,172,26,0.14);border-top-color:var(--gold);}
.cmp-white .compare-header .compare-cell{color:var(--charcoal);}
.cmp-white .compare-header .compare-col-delc{color:#0b4a29;}
.cmp-white .compare-header .compare-col-material{color:#601309;}
.cmp-white .compare-label{color:var(--charcoal);}
.cmp-white .compare-delc{color:#0b4a29;font-weight:700;}
.cmp-white .compare-material{color:#601309;font-weight:500;}
.cmp-white .calc-assumption{color:var(--steel);border-top-color:var(--border);}
@media (max-width:880px){
  .cmp-white .compare-delc::before{color:#0b4a29;}
  .cmp-white .compare-material::before{color:#601309;}
}

/* ---------- technical spec table ---------- */
.tech-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
.spec-table{display:flex;flex-direction:column;max-width:760px;}
.spec-row{
  display:flex;justify-content:space-between;gap:24px;
  padding:18px 0;border-top:1px solid rgba(255,255,255,0.18);
  font-size:15px;
  transition:background 0.18s ease;
}
.spec-row:last-child{border-bottom:1px solid rgba(255,255,255,0.18);}
.spec-row .k{color:rgba(255,255,255,0.55);white-space:nowrap;}
.spec-row .v{color:#fff;font-weight:700;text-align:right;white-space:nowrap;}
.spec-row[data-key]{cursor:default;}
.spec-row[data-key]:hover{background:rgba(255,255,255,0.06);}

/* ---------- hoverable spec diagram ---------- */
.spec-visual{
  position:relative;
  background:#fff;
  padding:36px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,0.4);
}
.spec-visual img{width:100%;display:block;}
.spec-visual .hint{
  margin-top:18px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--steel);text-align:center;
}

/* drawing-sheet framing: corner registration ticks + sheet label */
.spec-visual.sheet{padding:30px 30px 26px;}
.spec-visual.sheet::before,.spec-visual.sheet::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
}
.spec-visual.sheet::before{top:12px;left:12px;border-top:1px solid var(--border);border-left:1px solid var(--border);}
.spec-visual.sheet::after{bottom:12px;right:12px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
.sheet-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--border);
}
.sheet-head .sheet-title{
  font-family:var(--font-tech);font-size:11.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--charcoal);font-weight:600;
}
.sheet-head .sheet-scale{
  font-family:var(--font-tech);font-size:11px;letter-spacing:0.06em;color:var(--steel);
}

/* clicked pins stay open so a spec can be read hands-free */
.pin{cursor:pointer;}
.pin-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---------- hero legibility over photography (P1-03) ----------
   Photo heroes need their own text treatment: charcoal-on-photo
   fails contrast. Opt in with .hero.on-photo rather than
   reintroducing a full-bleed wash over the image. */
.hero.on-photo .badge-pill{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-color:rgba(0,13,16,0.2);
}
.hero.on-photo .pill-ghost-charcoal{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-color:rgba(0,13,16,0.2);
}
.hero.on-photo .hero-cap{color:var(--charcoal);font-weight:500;}
.hero.on-photo .hero-series-mark .lbl{color:var(--bronze);}
.hero.on-photo .breadcrumb,
.hero.on-photo .breadcrumb a,
.hero.on-photo .breadcrumb .sep{color:var(--charcoal);}
/* No wash behind hero text — the photograph stays untouched. Legibility comes
   from a tight text shadow instead, which reads as depth rather than a panel. */
.hero.on-photo .hero-top > div:last-child{position:relative;}
.hero.on-photo .hero-headline{
  text-shadow:0 1px 2px rgba(255,255,255,0.55),0 2px 18px rgba(255,255,255,0.4);
}
.hero.on-photo .hero-cap{
  text-shadow:0 1px 2px rgba(255,255,255,0.7),0 1px 10px rgba(255,255,255,0.5);
}
/* left-aligned hero headline variant (homepage) */
.hero-align-left .hero-top{justify-content:flex-start;}
.hero-align-left .hero-headline,
.hero-align-left .hero-cap{text-align:left;}
.hero-align-left .hero-cap{margin:18px auto 0 0;}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.pin-dot{
  display:block;width:11px;height:11px;border-radius:50%;
  background:var(--bronze);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--bronze),0 4px 10px rgba(0,0,0,0.25);
  transition:transform 0.18s ease,background 0.18s ease;
}
.pin-label{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--charcoal);color:#fff;
  font-size:12px;font-weight:600;padding:7px 12px;
  opacity:0;visibility:hidden;transition:opacity 0.18s ease,visibility 0.18s;
  pointer-events:none;
}
.pin:hover .pin-dot,.pin.is-active .pin-dot{transform:scale(1.35);background:var(--gold);}
.pin:hover .pin-label,.pin.is-active .pin-label{opacity:1;visibility:visible;}
.tech-grid:has(.spec-row.k-opening:hover) .pin.k-opening .pin-dot{transform:scale(1.35);background:var(--gold);}
.tech-grid:has(.spec-row.k-opening:hover) .pin.k-opening .pin-label{opacity:1;visibility:visible;}
.tech-grid:has(.spec-row.k-wall:hover) .pin.k-wall .pin-dot{transform:scale(1.35);background:var(--gold);}
.tech-grid:has(.spec-row.k-wall:hover) .pin.k-wall .pin-label{opacity:1;visibility:visible;}
.tech-grid:has(.spec-row.k-base:hover) .pin.k-base .pin-dot{transform:scale(1.35);background:var(--gold);}
.tech-grid:has(.spec-row.k-base:hover) .pin.k-base .pin-label{opacity:1;visibility:visible;}
@media (max-width:900px){
  .tech-grid{grid-template-columns:1fr;}
}

/* ---------- industries ---------- */
.industry-list{max-width:640px;margin-left:auto;text-align:right;}
.industry-row{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--border);
  padding:20px 0;
}
.industry-row:last-child{border-bottom:1px solid var(--border);}
.industry-row .name{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--charcoal);}
.industry-row .note{font-size:14px;color:var(--steel);}
.dark-band .industry-row{border-top-color:rgba(255,255,255,0.18);}
.dark-band .industry-row:last-child{border-bottom-color:rgba(255,255,255,0.18);}
.dark-band .industry-row .name{color:#fff;}
.dark-band .industry-row .note{color:rgba(255,255,255,0.55);}

/* ---------- spec recommender ---------- */
.rec-q{
  border-top:1px solid var(--border);padding:24px 0;
  opacity:1;transform:translateY(0);transition:opacity 0.4s ease, transform 0.4s ease;
}
.rec-q[hidden]{display:none;}
.rec-q.revealing{opacity:0;transform:translateY(10px);}
.rec-q .qtitle{font-size:16px;font-weight:700;color:var(--charcoal);margin-bottom:14px;}
.rec-opts{display:flex;flex-wrap:wrap;gap:10px;}
.rec-opt{
  border-radius:1000px;border:1.5px solid var(--charcoal);
  color:var(--charcoal);font-size:14px;font-weight:700;
  padding:11px 18px;cursor:pointer;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1.3;
  transition:transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.18s ease;
}
.rec-opt-note{font-size:10.5px;font-weight:400;opacity:0.65;}
.rec-opt:hover{transform:translateY(-2px);}
.rec-opt.selected{background:var(--gold);color:var(--charcoal);border-color:var(--gold);}
.rec-result{
  margin-top:28px;border-top:1px solid var(--border);padding-top:24px;
  opacity:1;transform:translateY(0);transition:opacity 0.4s ease, transform 0.4s ease;
}
.rec-result[hidden]{display:none;}
.rec-result.revealing{opacity:0;transform:translateY(10px);}
.rec-result .rr-eyebrow{color:var(--bronze);}
.rec-result h3{margin-top:10px;}
.rec-result p{margin-top:12px;max-width:560px;}
.rec-items{margin-top:18px;display:flex;flex-direction:column;gap:10px;max-width:560px;}
.rec-item{
  font-size:15px;font-weight:700;color:var(--charcoal);
  padding:12px 16px;border:1px solid var(--border);background:#fff;
}
.rec-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;}
.rec-cta-note{margin-top:14px;font-size:12px;color:var(--steel);}
.callback-form{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
}
.callback-form[hidden]{display:none;}
.callback-form .field{min-width:220px;}
.callback-form label{font-size:13px;color:var(--steel);display:block;margin-bottom:6px;}
.field-input{
  width:100%;border:1.5px solid var(--charcoal);padding:11px 14px;
  font-family:var(--font-body);font-size:14px;color:var(--charcoal);background:#fff;
}
.field-input:focus{outline:2px solid var(--gold);outline-offset:1px;}
.callback-confirm{margin-top:4px;font-size:14px;color:var(--bronze);font-weight:700;width:100%;}
.callback-confirm[hidden]{display:none;}

.dark-band .rec-q{border-top-color:rgba(255,255,255,0.18);}
.dark-band .rec-q .qtitle{color:#fff;}
.dark-band .rec-opt{border-color:rgba(255,255,255,0.4);color:#fff;}
.dark-band .rec-opt.selected{background:var(--gold);color:var(--charcoal);border-color:var(--gold);}
.dark-band .rec-result{border-top-color:rgba(255,255,255,0.18);}
.dark-band .rec-result h3{color:#fff;}
.dark-band .rec-item{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);color:#fff;}
.dark-band .rec-cta-note{color:rgba(255,255,255,0.5);}

.gold-band{background:var(--gold);}
.gold-band .eyebrow{color:var(--charcoal);opacity:0.7;}
.gold-band .t-lg,.gold-band .t-body{color:var(--charcoal);}
.gold-band .rec-q{border-top-color:rgba(0,13,16,0.18);}
.gold-band .rec-opt{border-color:rgba(0,13,16,0.4);background:transparent;}
.gold-band .rec-opt.selected{background:var(--charcoal);color:var(--gold);border-color:var(--charcoal);}
.gold-band .rec-result{border-top-color:rgba(0,13,16,0.18);}
.gold-band .rec-item{background:rgba(255,255,255,0.55);border-color:rgba(0,13,16,0.18);}
.gold-band .rec-cta-note{color:rgba(0,13,16,0.6);}
.dark-band .callback-form{border-top-color:rgba(255,255,255,0.18);}
.dark-band .callback-form label{color:rgba(255,255,255,0.6);}
.dark-band .field-input{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.35);color:#fff;}
.dark-band .callback-confirm{color:var(--gold);}

/* ---------- contact form ---------- */
.contact-form{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:640px;}
.contact-form .field-full{grid-column:1 / -1;}
.contact-form label{font-size:13px;color:var(--steel);display:block;margin-bottom:6px;}
.contact-form textarea.field-input{resize:vertical;font-family:var(--font-body);}
.contact-info-row{display:flex;flex-direction:column;gap:20px;margin-top:32px;}
.contact-info-row .k{font-size:13px;color:var(--steel);}
.contact-info-row .v{font-size:17px;font-weight:700;color:var(--charcoal);margin-top:4px;}
.contact-info-row .v a{color:var(--charcoal);}
@media (max-width:640px){.contact-form{grid-template-columns:1fr;}}

/* ---------- case study / quote reference ---------- */
.case-wrap,.quote-wrap{max-width:720px;margin-left:auto;text-align:right;}
.case-wrap blockquote,.quote-wrap blockquote{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.2;color:#fff;}
.case-wrap .case-meta,.quote-wrap .quote-meta{margin-top:18px;font-size:14px;color:rgba(255,255,255,0.55);}
.case-specs,.quote-specs{margin-top:32px;display:flex;flex-direction:column;gap:12px;}
.case-specs .row,.quote-specs .row{display:flex;justify-content:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,0.18);padding-top:12px;font-size:14px;}
.case-specs .k,.quote-specs .k{color:rgba(255,255,255,0.55);}
.case-specs .v,.quote-specs .v{color:#fff;font-weight:700;}
.testimonial-slider{position:relative;min-height:150px;}
.testimonial{display:none;opacity:0;transition:opacity 0.5s ease;}
.testimonial.active{display:block;opacity:1;}
.testimonial-dots{display:flex;gap:8px;margin-top:30px;justify-content:flex-end;}
.testimonial-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:background 0.2s ease;}
.testimonial-dot:hover{background:rgba(255,255,255,0.55);}
.testimonial-dot.active{background:var(--gold);}

/* ---------- manufacturing partner (HygieniCrete) ---------- */
.mfg-partner-strip{display:flex;align-items:center;gap:14px;margin-top:20px;margin-bottom:10px;flex-wrap:wrap;}
.mfg-partner-logo-chip{background:#fff;padding:10px 18px;display:inline-flex;align-items:center;}
.mfg-partner-logo-chip img{height:26px;width:auto;display:block;}
.mfg-partner-strip .txt{font-size:13px;color:var(--charcoal);font-weight:600;line-height:1.4;}
.mfg-partner-hero{display:flex;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap;}
.mfg-partner-hero .mfg-partner-logo-chip.lg{padding:16px 28px;}
.mfg-partner-hero .mfg-partner-logo-chip.lg img{height:44px;}
.mfg-partner-hero .txt{font-size:14px;color:var(--charcoal);font-weight:600;line-height:1.4;}
.partner-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.partner-card img{max-width:200px;width:100%;height:auto;display:block;}
.partner-card .caption{margin-top:20px;font-size:13px;color:var(--steel);line-height:1.6;}
.partner-stats{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;border-top:1px solid var(--border);padding-top:24px;}
.partner-stats .stat .v{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--charcoal);}
.partner-stats .stat .k{font-size:12px;color:var(--steel);margin-top:4px;}

/* ---------- case study cards (product pages) ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.case-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1080px){.case-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
.case-card{background:#fff;padding:32px 28px;display:flex;flex-direction:column;}
.case-card .tag{font-size:13px;color:var(--bronze);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.case-card h3{font-family:var(--font-display);font-size:22px;margin-top:12px;color:var(--charcoal);}
.case-card p{margin-top:12px;font-size:14px;color:var(--steel);line-height:1.55;flex:1;}
.case-card .result{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;color:var(--charcoal);font-weight:700;}
.case-card .link{margin-top:16px;font-size:14px;font-weight:700;color:var(--charcoal);display:inline-flex;align-items:center;gap:6px;}

.case-card.expandable{
  width:100%;border:none;text-align:left;font:inherit;cursor:pointer;
  transition:background 0.18s ease;
}
.case-card.expandable:hover{background:var(--cream);}
.case-card.expandable .link{transition:color 0.18s ease;}
.case-card.expandable:hover .link{color:var(--bronze);}
.case-card.expandable .case-more{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 0.35s ease,opacity 0.3s ease,margin-top 0.35s ease;
}
.case-card.expandable .case-more-h{font-size:13px;font-weight:700;color:var(--bronze);text-transform:uppercase;letter-spacing:0.04em;margin-top:16px;}
.case-card.expandable .case-more-h:first-child{margin-top:0;}
.case-card.expandable .case-more p{margin-top:6px;flex:none;}
.case-card.expandable.is-open .case-more{max-height:600px;opacity:1;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.case-card.expandable .link-less{display:none;}
.case-card.expandable.is-open .link-more{display:none;}
.case-card.expandable.is-open .link-less{display:inline;}
.case-card.expandable.is-open .link span[aria-hidden]{display:inline-block;transform:rotate(90deg);}

.case-grid.lg{border-width:2px;}
.case-grid.lg .case-card{padding:44px 40px;}
.case-grid.lg .case-card .tag{font-size:14px;}
.case-grid.lg .case-card h3{font-size:30px;margin-top:16px;letter-spacing:-0.01em;}
.case-grid.lg .case-card p{font-size:16px;line-height:1.65;margin-top:16px;}
@media (max-width:880px){.case-grid.lg .case-card{padding:32px 28px;}.case-grid.lg .case-card h3{font-size:24px;}}

/* ---------- cta band ---------- */
.cta-band{border-top:1px solid var(--border);}
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-wrap p{margin-top:16px;max-width:460px;}
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:#fff;padding:64px 0 40px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-col li{font-size:15px;color:rgba(255,255,255,0.85);}
.footer-bottom{
  margin-top:60px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.15);
  display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,0.5);
}

/* ---------- scroll reveal ---------- */
.reveal,.reveal-left,.reveal-zoom{will-change:opacity,transform;}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-44px);transition:opacity 0.95s cubic-bezier(0.16,1,0.3,1),transform 0.95s cubic-bezier(0.16,1,0.3,1);}
.reveal-left.is-visible{opacity:1;transform:translateX(0);}
.reveal-zoom{opacity:0;transform:scale(0.93);transition:opacity 1.3s cubic-bezier(0.16,1,0.3,1),transform 1.3s cubic-bezier(0.16,1,0.3,1);}
.reveal-zoom.is-visible{opacity:1;transform:scale(1);}
.reveal-stagger>*{opacity:0;transform:translateY(26px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
.reveal-stagger.is-visible>*{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible>*:nth-child(1){transition-delay:0s;}
.reveal-stagger.is-visible>*:nth-child(2){transition-delay:0.09s;}
.reveal-stagger.is-visible>*:nth-child(3){transition-delay:0.18s;}
.reveal-stagger.is-visible>*:nth-child(4){transition-delay:0.27s;}
.reveal-stagger.is-visible>*:nth-child(5){transition-delay:0.36s;}
.reveal-stagger.is-visible>*:nth-child(6){transition-delay:0.45s;}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-zoom,.reveal-stagger>*{opacity:1 !important;transform:none !important;}
}

@media (max-width:880px){
  .hero-top{flex-direction:column;gap:24px;}
  .hero-headline,.hero-cap{text-align:left;margin-left:0;}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:32px;}
  .hero-product-links,.hero-badges{flex-direction:row;flex-wrap:wrap;}
  .hero-actions{align-items:flex-start;}
  .feature-grid,.feature-grid.cols-3{grid-template-columns:1fr;}
  .pain-grid,.app-grid{grid-template-columns:repeat(2,1fr);}
  .calc-wrap{grid-template-columns:1fr;}
  .card-gold .flow{grid-template-columns:repeat(2,1fr);}
  .case-wrap,.quote-wrap{margin-left:0;text-align:left;}
  .case-wrap blockquote,.case-wrap .case-meta,.quote-wrap blockquote,.quote-wrap .quote-meta{text-align:left;}
  .case-specs .row,.quote-specs .row{justify-content:space-between;}
  .case-grid{grid-template-columns:1fr;}
  .testimonial-dots{justify-content:flex-start;}
  .cta-wrap{flex-direction:column;align-items:flex-start;}
  .nav-links{display:none;}
  .nav{justify-content:flex-end;}
  .wrap{padding:0 24px;}
  .wrap-full{padding:0 24px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

/* ---------- provenance timeline (About) ----------
   About shouldn't read like a product page. The history gets a
   dated ledger instead of prose blocks — the dates carry the argument. */
.timeline{border-top:1px solid var(--border);}
.tl-entry{
  display:grid;grid-template-columns:150px 1fr;gap:40px;
  padding:34px 0;border-bottom:1px solid var(--border);
}
.tl-year{
  font-family:var(--font-tech);font-size:26px;font-weight:600;
  letter-spacing:0.02em;color:var(--gold);line-height:1;
}
.tl-year .tl-tag{
  display:block;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--steel);margin-top:9px;font-weight:400;
}
.tl-body h3{font-family:var(--font-display);font-size:21px;color:var(--charcoal);margin:0 0 10px;}
.tl-body p{margin:0;font-size:16.5px;line-height:1.65;color:var(--balance);max-width:64ch;}
.tl-entry.is-origin .tl-year{font-size:38px;}
@media (max-width:760px){
  .tl-entry{grid-template-columns:1fr;gap:12px;padding:26px 0;}
  .tl-entry.is-origin .tl-year{font-size:32px;}
}

/* ---------- project gallery ---------- */
/* hairline rules come from each tile's own ring, not a grid backdrop —
   so a filtered partial row never leaves an empty coloured cell behind */
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:transparent;border:none;
}
.gal-item{
  position:relative;display:block;background:#fff;border:none;padding:0;margin:0;
  aspect-ratio:1/1;overflow:hidden;cursor:pointer;font-family:var(--font-body);
  box-shadow:0 0 0 1px var(--border);
}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.45s cubic-bezier(.2,.7,.3,1);}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.06);}
.gal-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.gal-cap{
  position:absolute;inset:auto 0 0 0;
  padding:38px 16px 14px;text-align:left;
  background:linear-gradient(to top,rgba(0,13,16,0.88) 0%,rgba(0,13,16,0.55) 55%,rgba(0,13,16,0) 100%);
  opacity:0;transform:translateY(8px);transition:opacity 0.25s ease,transform 0.25s ease;
}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1;transform:translateY(0);}
.gal-cap .k{
  display:block;font-family:var(--font-tech);font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px;
}
.gal-cap .v{display:block;font-size:13.5px;line-height:1.4;color:#fff;font-weight:600;}
.gal-item[hidden]{display:none;}
@media (max-width:1100px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (hover:none){.gal-cap{opacity:1;transform:none;}}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(0,13,16,0.95);
  align-items:center;justify-content:center;padding:40px 24px;
}
.lb.open{display:flex;}
.lb-fig{margin:0;max-width:1200px;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;}
.lb-fig img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block;object-fit:contain;}
.lb-meta{text-align:center;max-width:640px;}
.lb-meta .k{font-family:var(--font-tech);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);}
.lb-meta .v{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:#fff;font-weight:500;}
.lb-count{margin-top:10px;font-family:var(--font-tech);font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:0.1em;}
.lb-btn{
  position:absolute;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background 0.18s ease;font-family:var(--font-body);
}
.lb-btn:hover{background:rgba(255,255,255,0.22);}
.lb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lb-next{right:20px;top:50%;transform:translateY(-50%);}
.lb-close{right:20px;top:20px;}
@media (max-width:760px){
  .lb{padding:20px 12px;}
  .lb-prev{left:8px;}.lb-next{right:8px;}
  .lb-btn{width:40px;height:40px;font-size:17px;}
  .lb-fig img{max-height:62vh;}
}

/* ---------- download gate modal ---------- */
.dlg{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,13,16,0.6);
  align-items:center;justify-content:center;padding:24px;
}
.dlg.open{display:flex;}
.dlg-card{
  background:#fff;width:100%;max-width:440px;padding:40px 36px;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,0.25);
}
.dlg-close{
  position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;
  font-size:18px;color:var(--steel);width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.dlg-close:hover{color:var(--charcoal);}
.dlg-eyebrow{font-family:var(--font-tech);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px;}
.dlg-title{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--charcoal);letter-spacing:-0.01em;}
.dlg-sub{margin-top:8px;font-size:14px;color:var(--steel);line-height:1.5;}
.dlg-form{margin-top:24px;display:flex;flex-direction:column;gap:14px;}
.dlg-field label{font-size:12.5px;color:var(--steel);display:block;margin-bottom:6px;}
.dlg-field input{
  width:100%;border:1.5px solid var(--border);padding:11px 13px;box-sizing:border-box;
  font-family:var(--font-body);font-size:14.5px;color:var(--charcoal);background:#fff;
}
.dlg-field input:focus{outline:none;border-color:var(--charcoal);}
.dlg-submit{margin-top:4px;width:100%;justify-content:center;border:none;cursor:pointer;}
.dlg-note{margin-top:12px;font-size:11.5px;color:var(--steel);line-height:1.5;}
.dlg-error{margin-top:10px;font-size:13px;color:#b3261e;display:none;}
.dlg-error.show{display:block;}
.dlg-success{display:none;text-align:center;}
.dlg-success.show{display:block;}
.dlg-success .dlg-title{margin-top:4px;}
.dlg-success-icon{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;}
.dlg-form.hide,.dlg-form-head.hide{display:none;}


/* ---------- option pickers (grates, channels, basins, sizes) ----------
   One system used by every "choose your ..." step across the product pages. */
.config-step{margin-top:72px;}
.config-step:first-of-type{margin-top:0;}
.basin-position-sub{margin-top:26px;padding-top:26px;border-top:1px solid var(--border);}
.basin-position-sub[hidden]{display:none;}
.basin-position-sub .sub-label{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--steel);margin-bottom:14px;}
.step-head{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.step-head .n{
  font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1;
  color:var(--gold);flex-shrink:0;letter-spacing:-0.02em;
}
.step-head h3{color:var(--charcoal);}
.step-head .hint-inline{margin-left:auto;font-family:var(--font-tech);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel);}

.opt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.opt-row.cols-2{grid-template-columns:repeat(2,1fr);}
.opt-row.cols-3{grid-template-columns:repeat(3,1fr);}
.opt-row.cols-4{grid-template-columns:repeat(4,1fr);}

.opt-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);
  padding:30px 26px 26px;margin:0;cursor:pointer;text-align:left;
  font-family:var(--font-body);
  transition:border-color 0.25s ease,box-shadow 0.3s ease,transform 0.3s cubic-bezier(.2,.7,.3,1);
}
.opt-card:hover,.opt-card.is-open{
  border-color:var(--gold);
  box-shadow:0 18px 40px -24px rgba(0,13,16,0.4);
  transform:translateY(-4px);
}
.opt-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.opt-card.no-pop{cursor:default;}
.opt-card.no-pop:hover{transform:none;box-shadow:none;border-color:var(--border);}

.opt-figure{
  position:relative;height:330px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#fff;
}
.opt-figure img{max-height:100%;width:auto;display:block;transition:transform 0.55s cubic-bezier(.2,.7,.3,1);}
.opt-card:hover .opt-figure img,.opt-card.is-open .opt-figure img{transform:scale(1.05);}
/* two-per-row option cards read oversized next to their neighbours — scale the artwork down */
.opt-row.cols-2 .opt-figure:not(.is-wide){height:215px;}
/* wide technical diagrams (e.g. catch basin position) need to fit by width, not height */
.opt-figure.is-wide{height:auto;padding:20px;}
.opt-figure.is-wide img{max-width:100%;max-height:180px;width:auto;height:auto;}
/* placeholder until the product photography lands */
.opt-figure.is-empty{
  border:1px dashed var(--border);
  background:repeating-linear-gradient(45deg,#fcfbf9 0 10px,#fff 10px 20px);
}
.opt-figure.is-empty::after{
  content:"PHOTO TO COME";
  font-family:var(--font-tech);font-size:10px;letter-spacing:0.14em;color:#c9c1b4;
}


/* custom-depth option: no product photo, the card states the offer instead */
.opt-figure.is-custom{
  border:1px dashed var(--border);
  background:repeating-linear-gradient(45deg,#fcfbf9 0 10px,#fff 10px 20px);
  flex-direction:column;gap:8px;
}
.opt-figure.is-custom::before{
  content:"\2195";
  font-size:38px;line-height:1;color:var(--gold);font-weight:300;
}
.opt-figure.is-custom::after{
  content:"ANY DEPTH";
  font-family:var(--font-tech);font-size:10.5px;letter-spacing:0.14em;color:var(--bronze);
}

.opt-pin{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0.3);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease,transform 0.42s cubic-bezier(.34,1.56,.64,1);
}
.opt-card:hover .opt-pin,.opt-card.is-open .opt-pin{opacity:1;transform:translate(-50%,-50%) scale(1);}
.opt-dot{
  display:block;width:15px;height:15px;border-radius:50%;
  background:var(--gold);border:2.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,13,16,0.25),0 5px 14px rgba(0,0,0,0.3);
  position:relative;
}
.opt-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--gold);
  animation:optPulse 1.9s ease-out infinite;
}
@keyframes optPulse{
  0%{transform:scale(0.75);opacity:0.9;}
  70%{transform:scale(1.9);opacity:0;}
  100%{transform:scale(1.9);opacity:0;}
}

.opt-pop{
  position:absolute;left:50%;bottom:12px;
  width:calc(100% - 12px);
  transform:translateX(-50%) translateY(10px);
  opacity:0;pointer-events:none;
  background:var(--charcoal);color:#fff;
  padding:13px 15px;
  transition:opacity 0.28s ease,transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.opt-card:hover .opt-pop,.opt-card.is-open .opt-pop{opacity:1;transform:translateX(-50%) translateY(0);}
.opt-pop .k{
  display:block;font-family:var(--font-tech);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px;
}
.opt-pop .v{display:block;font-size:12.5px;line-height:1.5;color:#fff;font-weight:500;}

.opt-name{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--border);
  font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--charcoal);
}
.opt-note{
  margin-top:7px;font-family:var(--font-tech);font-size:11.5px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--bronze);line-height:1.5;
}
.opt-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--border);
  font-size:14px;color:var(--steel);line-height:1.6;
}
.opt-foot strong{color:var(--charcoal);font-weight:700;}

/* channel + installation method sit side by side as one line of choices */
.step-pair{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:72px;align-items:start;}
.step-pair .config-step{margin-top:0;}
.step-pair .step-head{margin-bottom:20px;padding-bottom:14px;gap:12px;}
.step-pair .opt-row{gap:18px;}
.step-pair .opt-card{padding:18px 16px 16px;}
.step-pair .opt-row.cols-2 .opt-figure:not(.is-wide){height:132px;}
.step-pair .opt-name{margin-top:15px;padding-top:12px;font-size:16px;}
.step-pair .opt-note{margin-top:5px;font-size:10px;letter-spacing:0.07em;}
.step-pair .opt-foot{margin-top:18px;padding-top:13px;font-size:13px;}
@media (max-width:1080px){.step-pair{grid-template-columns:1fr;gap:64px;}}

.opt-learn{margin-top:10px;font-size:12.5px;color:var(--steel);}
.opt-learn a{color:var(--bronze);font-weight:700;text-decoration:none;}
.opt-learn a:hover{text-decoration:underline;}

@media (max-width:980px){.opt-row.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:880px){
  .opt-row,.opt-row.cols-2,.opt-row.cols-3,.opt-row.cols-4{grid-template-columns:1fr;gap:16px;}
  .opt-figure{height:240px;}
  .step-head .n{font-size:30px;}
  .step-head{flex-wrap:wrap;gap:8px;}
  .step-head .hint-inline{margin-left:0;width:100%;}
}
@media (hover:none){.opt-pop{position:static;transform:none;opacity:1;width:100%;margin-top:14px;}.opt-pin{display:none;}}
@media (prefers-reduced-motion:reduce){
  .opt-dot::after{animation:none;}
  .opt-card,.opt-figure img,.opt-pin,.opt-pop{transition:none;}
}

/* ---------- product render stage ---------- */
/* pins anchor to the stage, so their percentages map to the render
   itself rather than to the full height of the sheet card */
.render-stage{position:relative;}
.render-stage img{width:100%;height:auto;display:block;}

/* ---------- photographic section backgrounds ----------
   Pairs with .dark-band so the existing on-dark type rules apply.
   The scrim is what makes the type legible — never use the photo bare. */
/* the paired selector matches .dark-band.c1/.c2's specificity — those set a
   `background` shorthand which would otherwise reset background-image to none */
.dark-band.section-photo,
.section-photo{
  position:relative;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.section-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,13,16,0.90) 0%,rgba(0,13,16,0.78) 55%,rgba(0,13,16,0.60) 100%);
}
.section-photo > *{position:relative;z-index:1;}
/* parallax only where it behaves — iOS ignores fixed attachment and jitters */
@media (min-width:900px) and (hover:hover){
  .section-photo{background-attachment:fixed;}
}

/* light variant — photo behind a pale veil, for sections that stay on ink type */
.section-photo.is-light::before{
  background:linear-gradient(100deg,rgba(255,255,255,0.95) 0%,rgba(255,241,228,0.92) 60%,rgba(255,255,255,0.88) 100%);
}

/* ---------- dark-photo hero variant ----------
   For hero photography that is too dark/busy for ink type. A directional
   dark gradient across the whole frame — never a light panel behind the text. */
.hero.on-photo.dark-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(270deg,rgba(0,13,16,0.80) 0%,rgba(0,13,16,0.55) 42%,rgba(0,13,16,0.18) 100%);
}
/* lighter tint — for photography that should read more colorful/less filtered */
.hero.on-photo.dark-photo.light-tint::before{
  background:linear-gradient(270deg,rgba(0,13,16,0.52) 0%,rgba(0,13,16,0.34) 42%,rgba(0,13,16,0.1) 100%);
}
.hero.on-photo.dark-photo .hero-headline{color:#fff;text-shadow:none;}
.hero.on-photo.dark-photo .hero-cap{color:rgba(255,255,255,0.88);text-shadow:none;}
.hero.on-photo.dark-photo .hero-series-mark .num{color:#fff;}
.hero.on-photo.dark-photo .hero-series-mark .lbl{color:var(--gold);}
.hero.on-photo.dark-photo .breadcrumb,
.hero.on-photo.dark-photo .breadcrumb a{color:rgba(255,255,255,0.75);}
.hero.on-photo.dark-photo .breadcrumb .current{color:#fff;}
.hero.on-photo.dark-photo .badge-pill{
  background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.45);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.hero.on-photo.dark-photo .pill-ghost-charcoal{
  background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.55);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.hero.on-photo.dark-photo .pill-ghost-charcoal:hover{background:#fff;color:var(--charcoal);}
.hero.on-photo.dark-photo .hero-product-links.plain .tag-label{color:var(--gold);}
.hero.on-photo.dark-photo .hero-product-links.plain .tag-label:not(:last-child)::after{color:rgba(255,255,255,0.5);}

/* ---------- spec builder: selection state ---------- */
.opt-card{padding-top:22px;}
.opt-card.is-selected{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 18px 40px -26px rgba(0,13,16,0.45);
}
.opt-check{
  position:absolute;top:10px;right:10px;
  width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:var(--charcoal);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;
  opacity:0;transform:scale(0.4);
  transition:opacity 0.22s ease,transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.opt-card.is-selected .opt-check{opacity:1;transform:scale(1);}
.step-head .step-pick{
  margin-left:auto;font-family:var(--font-tech);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--steel);
}
.step-head .step-pick.is-set{color:var(--bronze);font-weight:600;}

/* ---------- spec builder: running summary ---------- */
.spec-bar{
  margin-top:64px;
  background:var(--charcoal);color:#fff;
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
  padding:56px 56px 58px;
}
.spec-bar .sb-body{flex:1;min-width:340px;}
.spec-bar .sb-k{
  font-family:var(--font-tech);font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.spec-bar .sb-v{font-size:24px;line-height:1.5;color:#fff;font-weight:600;}
.spec-bar .sb-v .todo{color:rgba(255,255,255,0.42);font-style:italic;font-weight:400;}
.spec-bar .sb-actions{display:flex;gap:14px;flex-wrap:wrap;}
.spec-bar .pill{font-size:17px;padding:19px 32px 20px;}
.spec-bar .pill-ghost-white{border-color:rgba(255,255,255,0.45);}
.sb-reset{
  background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;
  font-family:var(--font-tech);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  padding:0;margin-top:20px;
}
.sb-reset:hover{color:#fff;text-decoration:underline;}
@media (max-width:760px){.spec-bar{flex-direction:column;align-items:flex-start;gap:16px;}}

/* ---------- spec builder: quote dialog ---------- */
.qm{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,13,16,0.72);}
.qm.open{display:flex;}
.qm-box{
  background:#fff;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;
  padding:34px 34px 30px;position:relative;
}
.qm-box h3{color:var(--charcoal);}
.qm-box .qm-sub{margin-top:8px;font-size:14px;color:var(--steel);line-height:1.6;}
.qm-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  background:none;border:1px solid var(--border);color:var(--charcoal);
  cursor:pointer;font-size:15px;line-height:1;
}
.qm-close:hover{background:var(--charcoal);color:#fff;}
.qm-field{margin-top:16px;}
.qm-field label{
  display:block;font-family:var(--font-tech);font-size:10.5px;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--steel);margin-bottom:6px;
}
.qm-field input,.qm-field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--border);background:#fff;
  font-family:var(--font-body);font-size:14.5px;color:var(--charcoal);border-radius:0;
}
.qm-field textarea{min-height:110px;resize:vertical;line-height:1.55;font-size:13.5px;}
.qm-field input:focus,.qm-field textarea:focus{outline:2px solid var(--gold);outline-offset:-1px;}
.qm-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.qm-note{margin-top:14px;font-size:12px;color:var(--steel);line-height:1.5;}
.qm-ok{margin-top:16px;padding:14px 16px;background:var(--cream);border:1px solid var(--border);font-size:14px;color:var(--charcoal);}

/* ---------- spec table on a light background ---------- */
.spec-light .spec-row{border-top-color:var(--border);}
.spec-light .spec-row:last-child{border-bottom-color:var(--border);}
.spec-light .spec-row .k{color:var(--steel);}
.spec-light .spec-row .v{color:var(--charcoal);}
.spec-light .spec-row[data-key]:hover{background:rgba(0,13,16,0.035);}
.spec-light .section-head .eyebrow{color:var(--bronze);}
.spec-light h2{color:var(--charcoal);}
.spec-light .t-body{color:var(--steel);}
/* product video sitting in a drawing-sheet frame */
.spec-visual .render-video{width:100%;height:auto;display:block;background:#fff;}

/* ---------- spec hero: the product on the page, not in a frame ----------
   The turntable footage sits on a grey cyclorama, so the video is feathered
   at the edges — the drain reads as if it were floating on the white page
   rather than sitting inside a visible rectangle. */
.spec-hero{
  background:#fff;padding:24px 0 28px;
  min-height:100vh;display:flex;align-items:center;
  box-sizing:border-box;
}
.spec-hero .wrap{max-width:1480px;width:100%;}
.spec-hero .section-head{margin-bottom:12px;}
.spec-hero-grid{
  display:grid;grid-template-columns:minmax(260px,0.72fr) 1.7fr;
  gap:48px;align-items:center;
}
.spec-hero .spec-table{max-width:none;}
.spec-hero .spec-row{padding:12px 0;font-size:14px;}
.spec-hero-media{position:relative;}
.spec-hero-media video{width:auto;height:auto;max-width:100%;max-height:52vh;display:block;margin:0 auto;}
/* the feather is painted, not masked — mask-image depends on a compositing
   path that isn't reliable across engines, this always renders */
.spec-hero-media::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,#fff 100%),
    linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 96%,#fff 100%);
}
@media (max-width:980px){
  .spec-hero-grid{grid-template-columns:1fr;gap:24px;}
  .spec-hero-media{order:-1;}
}


/* ---------- applications, moved into the hero ---------- */
.hero-apps{display:flex;flex-direction:column;gap:11px;width:430px;max-width:100%;}
.hero-apps .ha-item{display:flex;align-items:flex-start;gap:11px;}
.hero-apps .ha-item::before{
  content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-top:8px;
}
.hero-apps.no-bullet .ha-item::before{content:none;}
.hero-apps .ha-item p{
  margin:0;font-size:15px;line-height:1.5;font-weight:600;color:#fff;text-align:left;
}
@media (max-width:880px){
  .hero-apps{gap:9px;width:100%;}
  .hero-apps .ha-item p{font-size:13.5px;}
}

/* white type over photography needs a little weight behind it */
.hero-apps .ha-item p{text-shadow:0 1px 8px rgba(0,13,16,0.6);}

/* fragment jumps must clear the pinned nav */
section[id],[id]{scroll-margin-top:16px;}

/* case-study cards that link out */
a.case-card{text-decoration:none;color:inherit;transition:transform 0.3s cubic-bezier(.2,.7,.3,1),box-shadow 0.3s ease;}
a.case-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,13,16,0.4);}
a.case-card:hover .link{color:var(--bronze);}
a.case-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}