/* ============================================================
   Commercial Establishment — shared site styles
   Brand: maroon/burgundy #7A1F2B · Fraunces / Inter / JetBrains Mono
   ============================================================ */
:root{
  --burgundy:#7A1F2B;
  --burgundy-deep:#5A1620;
  --burgundy-ink:#3A0C0C;
  --ink:#1A1A1A;
  --ink-2:#3A3A3A;
  --mute:#8A8A8A;
  --rule:#D9D5D2;
  --tint:#F4F2F0;
  --bg:#FBFAF9;
  --paper:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--burgundy);text-decoration:none}
a:hover{color:var(--burgundy-deep)}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
@media (min-width:900px){ .container{padding:0 56px} }

.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Fraunces',serif}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);font-weight:600}
.meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ── keyframes ── */
@keyframes ce-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ce-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}}
@keyframes ce-needle{0%,100%{transform:rotate(-58deg)}25%{transform:rotate(20deg)}50%{transform:rotate(64deg)}75%{transform:rotate(-22deg)}}
@keyframes ce-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ce-sweep{0%{left:-160px}55%,100%{left:110%}}
@keyframes ce-kinetic-in{from{opacity:0;transform:translateY(60%);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.reveal{opacity:0;animation:ce-fade-up .7s cubic-bezier(.2,.7,.2,1) forwards}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;animation:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ── nav ── */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(251,250,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-nav .row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:40px;width:auto;object-fit:contain}
.brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:13px;line-height:1.15;color:var(--ink)}
.brand .name small{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:400;color:var(--mute);letter-spacing:.12em;margin-top:2px}
.nav-links{display:none;align-items:center;gap:28px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav-links a{color:var(--ink-2);white-space:nowrap}
.nav-links a.active{color:var(--burgundy)}
.nav-links a:hover{color:var(--burgundy)}
@media (min-width:880px){ .nav-links{display:flex} }
.nav-ctas{display:none;align-items:center;gap:10px}
@media (min-width:880px){ .nav-ctas{display:flex} }
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-radius:2px;white-space:nowrap;border:1px solid transparent;cursor:pointer}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{color:var(--ink);background:var(--tint)}
.btn-solid{background:var(--burgundy);color:#fff}
.btn-solid:hover{background:var(--burgundy-deep);color:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1eb658;color:#fff}
.btn-lg{padding:18px 26px;font-size:12.5px}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:1px solid var(--ink);background:none;cursor:pointer;flex:none}
.hamburger span{display:block;height:2px;background:var(--ink);margin:0 8px}
@media (min-width:880px){ .hamburger{display:none} }
.mobile-menu{display:none;flex-direction:column;border-top:1px solid var(--rule);background:var(--paper)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:16px 24px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.mobile-menu .ctas{display:flex;gap:10px;padding:16px 24px}
@media (min-width:880px){ .mobile-menu{display:none !important} }

/* ── generic section header ── */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(30px,4.4vw,44px);line-height:1.02;letter-spacing:-.015em;margin:8px 0 0;color:var(--ink)}
.sec-head h2 em{font-style:italic;color:var(--burgundy);font-weight:500}

/* ── striped placeholder (fallback when no photo) ── */
.ph-stripe{background-color:var(--tint);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 1px,transparent 1px 9px);position:relative;display:flex;align-items:center;justify-content:center;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.ph-stripe::before{content:"";position:absolute;inset:8px;border:1px dashed currentColor;opacity:.35;pointer-events:none}
.ph-stripe .lbl{position:relative;text-align:center;padding:6px 10px}
.ph-stripe .lbl b{display:block;font-weight:500;font-size:11px;margin-bottom:2px}

/* ── product photo tile ── */
.photo-tile{aspect-ratio:4/3;border-radius:9px;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-tile img{width:100%;height:100%;object-fit:contain;padding:10px}
.photo-tile.sq{aspect-ratio:1/1}

/* ── ticker ── */
.ticker-wrap{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;background:var(--paper)}
.ticker{display:inline-flex;white-space:nowrap;animation:ce-marquee 38s linear infinite;will-change:transform}
.ticker span.item{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:0 26px}
.ticker span.item::before{content:"✦";color:var(--burgundy);margin-right:12px}

/* ── stat strip ── */
.stat-strip{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);background:var(--paper)}
@media (min-width:700px){ .stat-strip{grid-template-columns:repeat(4,1fr)} }
.stat-strip .s{padding:22px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:700px){ .stat-strip .s{border-bottom:none} }
.stat-strip .v{font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,38px);font-weight:500;line-height:1;letter-spacing:-.01em}
.stat-strip .v sup{color:var(--burgundy);font-style:italic;font-size:.5em;margin-left:2px;vertical-align:super}
.stat-strip .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:10px}

/* ── cards ── */
.grid3{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:700px){ .grid3{grid-template-columns:repeat(3,1fr)} }
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:700px){ .grid4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card .name{font-family:'Fraunces',serif;font-weight:500;font-size:22px;line-height:1.05;letter-spacing:-.005em}
.card .desc{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.card.sm{padding:14px;gap:10px}
.card.sm .name{font-size:16.5px}

/* ── pillars ── */
.pillar-row{border-top:1px solid var(--ink)}
.pillar{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--rule)}
@media (min-width:700px){ .pillar{grid-template-columns:56px 1fr 1fr} }
.pillar .n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--burgundy);padding-top:4px}
.pillar .t{font-family:'Fraunces',serif;font-size:clamp(20px,2.6vw,26px);font-weight:500;line-height:1.15;letter-spacing:-.005em}
.pillar .d{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ── footer ── */
.site-foot{background:var(--ink);color:#fff;padding:44px 0}
.site-foot .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.site-foot .brand .name{color:#fff}
.site-foot .brand .name small{color:rgba(255,255,255,.55)}
.site-foot .brand img{filter:brightness(0) invert(1)}
.site-foot .meta{color:rgba(255,255,255,.55)}

/* ── sticky corner contact ── */
.sticky-contact{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:60}
.sticky-contact a{width:54px;height:54px;border-radius:27px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;box-shadow:0 10px 28px -8px rgba(0,0,0,.35)}
.sticky-contact a.wa{background:#25D366}
.sticky-contact a.call{background:var(--burgundy)}
.sticky-contact a.wa::before{content:"";position:absolute;inset:-4px;border-radius:30px;border:2px solid #25D366;opacity:.35;animation:ce-pulse 2.4s ease-in-out infinite}

/* ── page hero (interior pages) ── */
.page-hero{padding:56px 0 40px;border-bottom:1px solid var(--rule)}
.page-hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(40px,6.5vw,76px);line-height:.98;letter-spacing:-.02em;margin:10px 0 0}
.page-hero h1 em{font-style:italic;color:var(--burgundy);font-weight:500}
.page-hero p{font-family:'Fraunces',serif;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-2);max-width:56ch;margin:18px 0 0}

/* ── form ── */
.form-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:640px){ .form-grid{grid-template-columns:1fr 1fr;gap:28px} }
.field{display:flex;flex-direction:column}
.field label{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.field label .req{color:var(--burgundy)}
.field label .err{color:#C0392B;text-transform:none;letter-spacing:.03em}
.field input,.field textarea{border:none;border-bottom:1px solid var(--rule);background:transparent;padding:12px 0;font:inherit;font-size:16px;color:var(--ink);outline:none;font-family:'Inter',sans-serif}
.field input:focus,.field textarea:focus{border-color:var(--burgundy)}
.field.error input,.field.error textarea{border-color:#C0392B}
.field textarea{resize:vertical;min-height:100px}
.form-foot{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.form-status{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.form-status.ok{color:#1F8A5B}
.form-status.err{color:#C0392B}

/* ── section spacing helper ── */
.sec{padding:64px 0}
@media (min-width:900px){ .sec{padding:92px 0} }
.sec.tight{padding:40px 0}
.bg-paper{background:var(--paper)}
.bordered{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ── products sub-nav (chip jump links) ── */
.subnav{position:sticky;top:76px;z-index:40;background:rgba(251,250,249,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);overflow-x:auto}
.subnav .row{display:flex;gap:8px;padding:12px 0;white-space:nowrap}
.subnav a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:8px 14px;border:1px solid var(--rule);border-radius:999px;flex:none}
.subnav a:hover{color:var(--burgundy);border-color:var(--burgundy)}
.subnav a.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── material sub-group heading within a product section ── */
.group-label{display:flex;align-items:baseline;gap:10px;margin:36px 0 18px}
.group-label:first-child{margin-top:0}
.group-label .t{font-family:'Fraunces',serif;font-weight:500;font-size:20px;color:var(--ink)}
.group-label .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--mute);letter-spacing:.1em}
.group-label::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── flip-card valve browser (hover float, click flip to reveal MOCs) ── */
.flip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;perspective:1400px}
@media (min-width:640px){ .flip-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .flip-grid{grid-template-columns:repeat(4,1fr)} }
.flip-card{position:relative;height:280px;cursor:pointer}
.flip-card .inner{position:absolute;inset:0;transition:transform .6s cubic-bezier(.4,.15,.2,1),translate .25s ease,box-shadow .25s ease;transform-style:preserve-3d}
.flip-card:hover .inner{transform:translateY(-6px)}
.flip-card.flipped .inner{transform:rotateY(180deg)}
.flip-card.flipped:hover .inner{transform:rotateY(180deg) translateY(-6px)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--rule);border-radius:14px;background:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.02)}
.flip-card:hover .flip-face{box-shadow:0 22px 40px -16px rgba(26,26,26,.24)}
.flip-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.flip-front .ic{width:88px;height:88px;color:var(--ink)}
.flip-front img.ic{width:100%;height:150px;object-fit:contain}
.flip-front div.ic{width:100%;height:150px}
.flip-front .nm{font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--ink)}
.flip-front .ct{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy)}
.flip-back{transform:rotateY(180deg);padding:26px;display:flex;flex-direction:column;background:var(--ink)}
.flip-back .nm{font-family:'Fraunces',serif;font-weight:500;font-size:15px;color:#fff;margin-bottom:6px;flex:none}
.flip-back .mocs{display:flex;flex-direction:column;overflow-y:auto}
.flip-back .moc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(6px);animation:row-in .4s ease forwards}
.flip-back .moc-row .m{font-family:'Fraunces',serif;font-size:12.5px;font-weight:500;color:#fff;letter-spacing:.01em}
.flip-back .moc-row .s{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.5);white-space:nowrap}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .flip-card .inner{transition:none}
  .flip-back .bubble{animation:none;opacity:1;transform:scale(1)}
}

/* ── MOC-browse valve cards (icon + click-to-expand MOC popover) ── */
.moc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:640px){ .moc-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .moc-grid{grid-template-columns:repeat(4,1fr)} }
.moc-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);cursor:pointer;text-align:center;transition:border-color .15s,transform .15s}
.moc-card:hover{border-color:var(--burgundy);transform:translateY(-2px)}
.moc-card .ic{width:56px;height:56px;color:var(--ink)}
.moc-card .nm{font-family:'Fraunces',serif;font-weight:500;font-size:16.5px;color:var(--ink)}
.moc-card .ct{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy)}

.moc-modal-backdrop{position:fixed;inset:0;background:rgba(26,26,26,.5);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.moc-modal-backdrop.open{display:flex}
.moc-modal{background:var(--paper);max-width:520px;width:100%;border-radius:12px;padding:32px;position:relative;max-height:86vh;overflow-y:auto}
.moc-modal .close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:1px solid var(--rule);border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.moc-modal .head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.moc-modal .head .ic{width:44px;height:44px;color:var(--burgundy);flex:none}
.moc-modal h3{font-family:'Fraunces',serif;font-weight:500;font-size:26px;margin:0;letter-spacing:-.005em}
.moc-modal .sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:14px 0 18px}
.moc-list{display:flex;flex-wrap:wrap;gap:12px;border-top:none;padding-top:4px}
.moc-bubble{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:16px 20px;border-radius:999px;background:var(--tint);border:1px solid var(--rule);opacity:0;transform:scale(0);animation:bubble-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;transition:border-color .15s,background .15s}
.moc-bubble:hover{border-color:var(--burgundy);background:#fff}
.moc-bubble .m{font-family:'Fraunces',serif;font-size:15.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.moc-bubble .s{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--mute);white-space:nowrap}
@keyframes bubble-pop{
  0%{opacity:0;transform:scale(0)}
  55%{opacity:1;transform:scale(1.14)}
  75%{transform:scale(.94)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .moc-bubble{animation:none;opacity:1;transform:scale(1)}
}
.chip-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){ .chip-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .chip-grid{grid-template-columns:repeat(3,1fr)} }
.spec-chip{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
.spec-chip .nm{font-family:'Fraunces',serif;font-size:15.5px;font-weight:500;color:var(--ink)}
.spec-chip .sz{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--mute);letter-spacing:.04em;white-space:nowrap}