/* mencomsales.com: Gross layout system with Mencom navy (#13307A, from the Mencom logo) for emphasis and a signal yellow
   (#F5C400) action with black text. Mencom logo as shown on grossautomation.com (Dan 2026-10-11: "Logo from www").
   Contrast: navy on white 11.2:1, black on yellow 12.9:1, white on navy 11.2:1. */
/* Gross Automation microsite base, light "B" direction (design canvas 2026-10-03; brand-guidelines.md):
   orange/dark/grays = base, blue = emphasis (links), lime = action. Montserrat. Mobile-first.
   Shared by foodandbevautomation.com and fixkvar.com; site-specific additions live at the end of each copy. */
/* Self-hosted fonts (2026-10-04): no render-blocking Google Fonts request, and a metric-matched fallback so the swap
   from the fallback to Montserrat does not reflow the page (it caused CLS ~0.35 on mobile). SIL Open Font License. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/montserrat-latin-var.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-latin-italic-400.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 113.39%; ascent-override: 85.79%; descent-override: 22.25%; line-gap-override: 0%; }

:root {
  --accent: #F5C400; --accent-text: #13307A; --dark: #0C1B44; --ink: #14171C; --blue: #13307A; --blue-dk: #0E2560;
  --action: #F5C400; --action-dk: #FFD94A; --text: #1F242B; --muted: #5A6472; --line: #DDE1EA; --paper: #EEF1F8; --white: #fff;
  --wrap: 74rem; --radius: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Montserrat, 'Montserrat Fallback', system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--white); line-height: 1.6; font-size: 1rem; }
img { max-width: 100%; height: auto; }
a { color: var(--blue-dk); text-underline-offset: 3px; }
a:hover { color: var(--blue-dk); text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.12; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; margin: 3rem 0 1rem; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: .4rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 24px; } }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 20; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Brand bar (built in CSS, never an image) */
.sl-brand-bar { height: 4px; background: linear-gradient(90deg, var(--blue) 33.33%, #7F7F7F 33.33% 66.66%, var(--accent) 66.66%); }

/* Header: brand left, nav right; nav collapses behind a toggle on small screens */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-squares { display: grid; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 3px; flex: none; }
.brand-squares span:nth-child(1) { background: var(--accent); } .brand-squares span:nth-child(2) { background: var(--dark); }
.brand-squares span:nth-child(3) { background: var(--blue); } .brand-squares span:nth-child(4) { background: var(--action); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.05rem; font-weight: 800; }
.brand-text small { font-size: .78rem; color: var(--muted); }
.nav-toggle { display: none; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: .45rem 1rem; font: inherit; font-weight: 700; min-height: 44px; }
.site-nav { display: flex; width: 100%; flex-direction: column; padding: .25rem 0 1rem; }
.site-nav a { color: var(--dark); text-decoration: none; padding: .75rem 0; border-top: 1px solid var(--line); font-weight: 600; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.site-nav a.nav-cta { border-top: 0; margin-top: .5rem; text-align: center; }
@media (max-width: 979px) {
  .nav-ready .nav-toggle { display: block; }
  .nav-ready .site-nav { display: none; }
  .nav-ready .site-nav.open { display: flex; }
}
@media (min-width: 980px) {
  .header-row { flex-wrap: nowrap; }
  .site-nav { width: auto; flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; }
  .site-nav a { border: 0; padding: .4rem 0; }
  .site-nav a.nav-cta { margin: 0 0 0 .25rem; padding: .6rem 1.1rem; }
}

/* Buttons: lime = action; dark pill = primary on light; text link with lime underline */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; text-align: center; border: 2px solid transparent; max-width: 100%; overflow-wrap: anywhere; }
.split > *, .send-box > *, .hero-grid > *, .logbook > * { min-width: 0; }
.btn-action { background: var(--action); color: var(--ink); }
.btn-action:hover { background: var(--action-dk); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #14171C; color: #fff; }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(19,48,122,.10); color: inherit; }
.btn-link { color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 0 -3px 0 var(--action); padding: .2rem 0; }
.btn-link:hover { color: var(--ink); box-shadow: inset 0 -6px 0 var(--action); }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Home hero (light, editorial) */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; } .hero-grid.center { align-items: center; } }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); font-weight: 900; line-height: .98; letter-spacing: -0.025em; margin: 0; }
.hero h1 .hl { color: var(--accent-text); }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 34em; }
.eyebrow { color: var(--accent-text); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .5rem; }

/* Proof bar */
.proof { background: var(--dark); color: #fff; }
.proof .wrap { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; padding-top: 1.2rem; padding-bottom: 1.2rem; font-weight: 600; }
.proof .lead-item { color: var(--accent); font-weight: 800; }

/* Stats strip */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.stats .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 760px) { .stats .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats strong { display: block; font-size: clamp(1.7rem, 3.5vw, 2.2rem); font-weight: 800; color: var(--ink); line-height: 1.1; }
.stats span { font-size: .9rem; color: var(--muted); }

/* Sections */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section.paper { background: var(--paper); }
.section.ink { background: var(--ink); color: #fff; }
.section > .wrap > h2:first-child, .section h2.top { margin-top: 0; }
.split { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Inner page header */
.page-head { background: var(--paper); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: .75rem; max-width: 22em; }
.page-head .eyebrow { margin-bottom: .4rem; }
.page-head .lead { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--muted); max-width: 46rem; margin: 0; }
.crumbs { font-size: .85rem; margin-bottom: .75rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* Content */
.content { padding-top: 1.75rem; padding-bottom: 3rem; }
.prose { max-width: 46rem; }
.prose li { margin-bottom: .55rem; }
.prose h2:first-child { margin-top: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.25rem 0; }
.grid > * { min-width: 0; } /* let long content shrink inside grid columns */
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; background: #fff; transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: 0 10px 28px rgba(11,37,69,.10); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card a.more { font-weight: 700; }
.facts { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { background: var(--paper); border-radius: 12px; padding: 1rem 1.1rem; margin: 0; }
.facts strong { display: block; color: var(--ink); font-size: 1.05rem; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: .95rem; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; vertical-align: top; }
th { background: var(--paper); }
@media (max-width: 639px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; left: -9999px; }
  table.stack tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .75rem; overflow: hidden; }
  table.stack td { border: 0; border-top: 1px solid var(--line); }
  table.stack td:first-child { border-top: 0; background: var(--paper); font-weight: 700; }
  table.stack td:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }
}
.related { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1rem; }

/* Numbered services */
@media (min-width: 900px) { .numbered { grid-template-columns: repeat(3, 1fr); } }

/* Colour tiles (contrast: dark text on orange/lime/white, white text on blue-dk/dark only) */
.tiles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border-radius: 18px; padding: 1.6rem; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; text-decoration: none; transition: transform .15s; }
.tile:hover { transform: translateY(-2px); }
.tile strong { font-size: 1.5rem; line-height: 1.15; }
.tile span { font-size: .95rem; line-height: 1.5; }
.tile.t-blue { background: var(--blue-dk); color: #fff; } .tile.t-blue:hover { color: #fff; }
.tile.t-orange { background: var(--accent); color: var(--ink); } .tile.t-orange:hover { color: var(--ink); }
.tile.t-lime { background: var(--action); color: var(--ink); } .tile.t-lime:hover { color: var(--ink); }
.tile.t-dark { background: var(--dark); color: #fff; } .tile.t-dark:hover { color: #fff; }
.tile.t-line { background: #fff; color: var(--ink); border: 2px solid var(--ink); } .tile.t-line:hover { color: var(--ink); }

/* Ruled link list */
.ruled { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ruled { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }
.ruled li { margin: 0; border-top: 2px solid var(--ink); }
.ruled li:last-child { border-bottom: 2px solid var(--ink); }
@media (min-width: 640px) { .ruled li:nth-last-child(2) { border-bottom: 2px solid var(--ink); } }
.ruled a { display: block; padding: 1rem 0; color: var(--ink); font-weight: 700; text-decoration: none; }
.ruled a:hover { color: var(--blue-dk); }

/* CTA band + footer */
.cta-band { background: var(--dark); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.cta-band h2 { color: #fff; margin-top: 0; font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 900; max-width: 16em; }
.cta-band h2 .hl { color: var(--action); }
.cta-band p { color: #DCE3F2; max-width: 40em; font-size: 1.05rem; }
.cta-band .btn-ghost { color: #fff; border-color: #8FA3D6; }
.site-footer { background: #fff; color: var(--muted); padding: 2.25rem 0 1.25rem; font-size: .92rem; border-top: 1px solid var(--line); }
.site-footer a { color: var(--dark); display: block; margin-bottom: .35rem; }
.site-footer p a { display: inline; }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-head { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.footer-legal { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; font-size: .82rem; }

/* Food & Beverage: log book vs batch record */
.logbook { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 900px) { .logbook { grid-template-columns: 1fr 1fr; align-items: start; } }
.fig-label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .75rem; }

/* Engineer · Build · Supply band (controls-engineering positioning, 2026-10-03) */
.pillars { border-bottom: 1px solid var(--line); }
.pillars .wrap { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pillars .wrap { grid-template-columns: repeat(3, 1fr); } }
.pillars a { display: flex; flex-direction: column; gap: .2rem; padding: 1.3rem 0; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); min-width: 0; }
.pillars a:first-child { border-top: 0; }
@media (min-width: 760px) { .pillars a { border-top: 0; padding: 1.5rem 1.5rem 1.5rem 0; } .pillars a + a { border-left: 1px solid var(--line); padding-left: 1.5rem; } }
.pillars a strong { font-size: 1.2rem; color: var(--ink); }
.pillars a:hover strong { color: var(--blue-dk); }
.pillars .k { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .1em; font-weight: 600; }
@media (min-width: 900px) { .numbered.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .numbered.four { grid-template-columns: repeat(4, 1fr); } }
/* Six nav items + CTA (Engineering added 2026-10-03): keep labels on one line; tighten spacing below 1200px */
@media (min-width: 980px) { .site-nav a { white-space: nowrap; } }
@media (min-width: 980px) and (max-width: 1199px) { .site-nav { gap: 1rem; font-size: .92rem; } .brand-text small { display: none; } }

/* grossmfg.com / grossengineering.com additions (2026-10-03) */
.site-footer a.inline { display: inline; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { border-top: 2px solid var(--ink); padding: .9rem 0; margin: 0; }
.checklist li:last-child { border-bottom: 2px solid var(--ink); }
.source { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 2rem; }
/* Shop photos (admin-vetted, 2026-10-04): intrinsic width/height on every img, so no layout shift */
.photo { margin: 1.5rem 0; }
.photo img { display: block; width: 100%; height: auto; max-width: 34rem; border-radius: 12px; background: var(--paper); }
.photo figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.photo-pair { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .photo-pair { grid-template-columns: 1fr 1fr; } }

/* Mencom logo (WebP 334x151) + the distributor line */
.brand { padding: .55rem 0; }
.brand-logo { display: block; height: 40px; width: auto; align-self: flex-start; }
.brand-sub { font-size: .72rem; color: var(--muted); font-weight: 600; line-height: 1.25; max-width: 12.5rem; margin-top: .2rem; }
@media (max-width: 979px) { .header-row { flex-wrap: nowrap; } .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: .25rem 16px 1rem; border-bottom: 1px solid var(--line); } }
/* Focus on the navy cta-band: steel blue is only 2.38:1 on navy, so the ring turns white with a signal halo (PLAN v2 §4) */
.cta-band :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--accent); }
/* Long addresses and catalog numbers may wrap anywhere on a 360 px screen */
.js-mail { overflow-wrap: anywhere; } .facts li, .content li { min-width: 0; }

/* Part lists (shared with techtopsales.com); Mencom rows add a photo, the catalog description and documents (PLAN v2 §AC) */
.parts { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.part[hidden] { display: none; }
.part { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .75rem 0; margin: 0; border-top: 1px solid var(--line); }
.part:last-child { border-bottom: 1px solid var(--line); }
.part code { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; font-weight: 700; color: var(--ink); }
@media (min-width: 760px) { .part code { flex: 1 1 18rem; } }
.part a { font-size: .9rem; font-weight: 600; }
.part a.q { color: var(--ink); box-shadow: inset 0 -3px 0 var(--action); text-decoration: none; padding: .15rem 0; }
.part small { color: var(--muted); font-weight: 600; }
.copy { font: inherit; font-size: .85rem; font-weight: 700; min-height: 36px; padding: .25rem .9rem; border-radius: 999px; border: 1px solid #B7C3C4; background: #fff; color: var(--ink); cursor: pointer; }
.copy:hover { border-color: var(--blue); }
.copy.copied { background: var(--paper); border-color: var(--blue); }
.prefix-index { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .prefix-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prefix-index li { margin: 0; }
.prefix-index a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; text-decoration: none; color: var(--ink); background: #fff; }
.prefix-index a:hover { border-color: var(--blue); }
.prefix-index strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; }
.prefix-index span { font-size: .85rem; color: var(--muted); }
.part-filter { width: 100%; max-width: 26rem; font: inherit; padding: .7rem .9rem; border: 2px solid #B7C3C4; border-radius: 12px; margin: .5rem 0 .25rem; min-height: 48px; }
.part-filter:focus { border-color: var(--blue); }
.filter-label { display: block; font-weight: 700; color: var(--ink); margin-top: 1rem; }
.small-groups h3 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (min-width: 980px) { .brand-sub { max-width: none; } }

/* Sister-site cross-link CTA (library v3): visibly a link */
.ga-xl { max-width: 46rem; margin: .9rem 0 0; color: var(--muted); }
.ga-xl a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* mencomsales.com part rows: photo | part number + quote first, then the catalog description and documents (PLAN v2 §AC) */
.parts.m .part { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .3rem .9rem; align-items: start; padding: .9rem 0; }
.part .thumb { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; grid-row: span 3; }
.part .nothumb { width: 72px; height: 72px; border: 1px dashed var(--line); border-radius: 8px; grid-row: span 3; }
.part .pn { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; }
.part .pn code { flex: 0 1 auto; }
.part .d { margin: 0; color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.part .docs { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; font-size: .88rem; }
.part .docs small { color: var(--muted); font-weight: 600; }
.part:target { background: #FFF6CC; box-shadow: 0 0 0 3px #FFF6CC, 0 0 0 5px var(--accent); border-radius: 8px; }
.vid { font: inherit; font-size: .88rem; font-weight: 600; color: var(--blue-dk); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.type-index, .series-index { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.type-index li, .series-index li { margin: 0; }
.type-index a, .series-index a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; text-decoration: none; color: var(--ink); background: #fff; font-weight: 700; }
.type-index a:hover, .series-index a:hover { border-color: var(--blue); }
.type-index span, .series-index span { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
.fam-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1.25rem 0 2rem; padding: 0; list-style: none; }
.fam-cards li { margin: 0; }
.fam-cards a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; text-decoration: none; color: var(--ink); background: #fff; min-height: 96px; }
.fam-cards a:hover { border-color: var(--blue); box-shadow: 0 10px 28px rgba(11,37,69,.10); }
.fam-cards img { width: 64px; height: 64px; object-fit: contain; }
.fam-cards strong { display: block; font-size: 1.02rem; line-height: 1.25; }
.fam-cards span { display: block; font-size: .85rem; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.pager li { margin: 0; }
.pager a { display: inline-block; min-width: 44px; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; text-align: center; text-decoration: none; font-weight: 700; }
.pager a[aria-current] { background: var(--blue); color: #fff; border-color: var(--blue); }
.lookup { max-width: 34rem; margin: 1.25rem 0 0; }
.lookup-results { list-style: none; padding: 0; margin: .5rem 0 0; }
.lookup-results li { margin: 0; border-top: 1px solid var(--line); }
.lookup-results a { display: block; padding: .6rem 0; font-weight: 700; }
.lookup-results small { display: block; color: var(--muted); font-weight: 500; }
dialog.video { width: min(56rem, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; background: #000; }
dialog.video::backdrop { background: rgba(0, 0, 0, .7); }
dialog.video .vbox { position: relative; aspect-ratio: 16 / 9; }
dialog.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
dialog.video .vbar { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem; background: #111; }
dialog.video button { font: inherit; font-weight: 700; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 2px solid #fff; background: #111; color: #fff; cursor: pointer; }
/* Shop upsell (Dan 2026-10-11): family pages and /products/ */
.shop-upsell { border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 2.5rem 0 1rem; background: #fff; }
.shop-upsell h2 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.shop-upsell p { margin: 0; }
/* the sticky header must not cover a row reached by the part lookup (#p-…) or a section anchor */
.part, h2[id], .content [id] { scroll-margin-top: 96px; }
/* mencomsales home: a calmer headline than the shop sites (it wrapped to five lines at 1280) */
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.02; }

/* ===== Mencom brand layer (Dan 2026-10-11: "Colors and branding are a bit weak") =====
   From Mencom's own catalog cover: a dark studio ground, bright cable colours as light streaks, the navy oval logo, products
   shown on dark. Streaks are CSS gradients (no images). Contrast on --studio: white 18:1, --studio-text 12:1, yellow 11:1. */
:root { --studio: #070B19; --studio-2: #0C1A44; --studio-text: #CBD5EE; --studio-line: #24325E;
  --cable: linear-gradient(90deg, #F5C400 0 14%, #F07A1A 14% 28%, #E0403A 28% 42%, #8A55E0 42% 57%, #2E7BE6 57% 71%, #19B3B3 71% 85%, #3DBB61 85% 100%); }
.sl-brand-bar { height: 5px; background: var(--cable); }
/* Header: dark, larger logo */
.site-header { background: var(--studio); border-bottom: 1px solid var(--studio-line); }
.brand, .brand:hover { color: #fff; }
.brand-logo { height: 52px; }
.brand-sub { color: var(--studio-text); }
.site-nav a { color: #fff; border-top-color: var(--studio-line); }
.site-nav a:hover { color: #FFD94A; }
.site-nav a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
.site-nav a.nav-cta, .site-nav a.nav-cta:hover { color: var(--ink); }
.nav-toggle { background: transparent; color: #fff; border-color: #fff; }
@media (max-width: 979px) { .site-nav { background: var(--studio); border-bottom-color: var(--studio-line); } }
.site-header :focus-visible, .studio :focus-visible, .page-head :focus-visible, .hero :focus-visible, .cta-band :focus-visible { outline-color: var(--accent); }
/* Studio panels: home hero, inner page heads, family line-up, CTA band */
.hero, .page-head, .studio, .cta-band { position: relative; background: radial-gradient(120% 90% at 85% -10%, #16307A 0%, var(--studio-2) 38%, var(--studio) 78%); color: #fff; border-bottom: 0; isolation: isolate; }
.hero::before, .page-head::before, .studio::before, .cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(245,196,0,.9) 9px 11px, transparent 11px 26px, rgba(240,122,26,.85) 26px 27px, transparent 27px 41px, rgba(138,85,224,.9) 41px 43px, transparent 43px 58px, rgba(46,123,230,.9) 58px 60px, transparent 60px 77px, rgba(25,179,179,.85) 77px 78px, transparent 78px 95px, rgba(224,64,58,.8) 95px 96px, transparent 96px 118px);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.hero h1, .page-head h1, .studio h2, .cta-band h2 { color: #fff; }
.hero h1 .hl, .cta-band h2 .hl { color: var(--accent); }
.hero .lead, .page-head .lead, .studio p, .cta-band p { color: var(--studio-text); }
.hero .eyebrow, .page-head .eyebrow { color: var(--accent); }
.crumbs, .crumbs a { color: var(--studio-text); }
.hero .ga-xl, .page-head .ga-xl { color: var(--studio-text); }
.hero .ga-xl a, .page-head .ga-xl a, .page-head .prose a { color: #FFD94A; }
.page-head .prose p, .page-head .vendor { color: #DCE3F2; }
.hero .btn-ghost, .page-head .btn-ghost, .cta-band .btn-ghost { color: #fff; border-color: #fff; }
.hero .btn-ghost:hover, .page-head .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
/* Look-up card on the dark hero */
.hero .lookup { background: #fff; color: var(--text); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hero .lookup .filter-label { margin-top: 0; }
/* Family line-up: white product tiles on the dark studio band */
.studio .fam-cards a { background: #fff; border-color: transparent; }
.studio .fam-cards a:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.fam-cards a { grid-template-columns: 84px minmax(0, 1fr); }
.fam-cards img { width: 84px; height: 84px; }
/* Product pages: the white list area starts with a cable-colour rule under the dark head */
.page-head + .wrap.content, .page-head + div > .wrap.content { border-top: 0; }
.page-head { border-bottom: 5px solid transparent; border-image: var(--cable) 1; }
.shop-upsell { border-color: var(--studio-2); box-shadow: inset 6px 0 0 var(--accent); }
.series-index a, .type-index a { border-left: 5px solid var(--blue); }
/* Home: a line-up of real Mencom product photos on white tiles above the look-up (the catalog cover's product row) */
.hero-side { display: grid; gap: 1rem; min-width: 0; }
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.lineup li { margin: 0; background: #fff; border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; padding: .5rem; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.lineup img { width: 100%; height: 100%; object-fit: contain; max-width: 100%; }
/* Mencom's family paragraph sits on white, under the dark head */
.vendor-intro { padding-top: 1.25rem; }
.vendor-intro .prose p { margin: 0 0 .75rem; color: var(--text); }