/* ==========================================================================
   Components — sitewide (header, nav, buttons, cards, faq, forms, footer…)
   Class reference: docs/04-design-system.md → Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn-tp { display: inline-flex; align-items: center; justify-content: center; gap: 8.8px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--r-sm); font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.btn-tp .ico { transition: transform .22s var(--ease); }
.btn-tp:hover { transform: translateY(-1px); }
.btn-tp:hover .ico--arrow { transform: translateX(4px); }
.btn-tp:active { transform: translateY(0); }
.btn-tp--lg { min-height: 54px; padding: 0 28px; font-size: 15px; }
.btn-tp--block { width: 100%; }
.btn-tp--accent { background: var(--c-accent); color: var(--c-ink); }
.btn-tp--accent:hover { background: var(--c-accent-deep); color: var(--c-ink); box-shadow: 0 10px 22px -10px rgba(217, 140, 15, .7); }
.btn-tp--accent:focus-visible { outline-color: var(--c-ink); }
.btn-tp--primary { background: var(--c-primary); color: #fff; }
.btn-tp--primary:hover { background: var(--c-primary-deep); color: #fff; }
.btn-tp--outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn-tp--outline:hover { background: var(--c-primary-50); color: var(--c-primary-deep); }
.btn-tp--ghost-light { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.btn-tp--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.btn-tp--wa { background: var(--c-whatsapp); color: var(--c-whatsapp-ink); }
.btn-tp--wa:hover { background: #1EBE5A; color: var(--c-whatsapp-ink); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--c-primary); }
.link-arrow .ico { transition: transform .22s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: #fff; }

/* ---------- Text primitives ---------- */
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--c-primary); }
.eyebrow--accent { color: var(--c-accent); }
.lead-tp { font-size: var(--fs-lead); line-height: 1.6; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 24px + 2vw, 48px); }
.section-head__text { max-width: 860px; }
.section-head__text > p:not(.eyebrow):not(.mono-label) { max-width: 64ch; }
.section-head h2, .section-head .sec-title { font-size: var(--fs-h2); }
/* Section titles that are not the page's one H2 (rule: one H1 + one H2 per page) look the same as an H2 */
.sec-title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance; }
.section-head p:not(.eyebrow):not(.mono-label) { margin-top: 16px; font-size: var(--fs-lead); }
/* Phones: the side link stacks under the heading instead of squeezing it */
@media (max-width: 575.98px) { .section-head:not(.section-head--center) { flex-direction: column; align-items: flex-start; gap: 12px; } }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .section-head__text { margin-inline: auto; }

/* ---------- Chips / tags ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--c-ink); }
.chip .ico { color: var(--c-primary); }
.chip--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.chip--dark .ico { color: var(--c-accent); }
.chip--link { min-height: 44px; transition: border-color var(--t-fast), color var(--t-fast), translate var(--t-fast) var(--ease); }
.chip--link:hover, .chip--link:focus-visible { border-color: var(--c-primary-line); color: var(--c-primary); translate: 0 -2px; }
.tag { display: inline-flex; padding: 4px 8px; border-radius: var(--r-xs); background: var(--c-primary-50); color: var(--c-primary); font-size: 12px; font-weight: 600; }
.badge-flag { display: inline-flex; padding: 4px 10px; border-radius: var(--r-xs); background: var(--c-accent); color: var(--c-ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Topbar ---------- */
.topbar { background: var(--c-primary-deep); color: rgba(255, 255, 255, .82); font-size: var(--fs-xs); }
.topbar__inner { min-height: var(--topbar-h); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .82); }
a.topbar__item:hover { color: #fff; }
.topbar__item .ico--accent { color: var(--c-accent); }
@media (max-width: 1199.98px) { .topbar { display: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--c-line); transition: box-shadow var(--t-base) var(--ease); }
.site-header.is-stuck { box-shadow: none; }
.site-header__inner { position: relative; display: flex; align-items: center; gap: 36px; min-height: var(--header-h); transition: min-height var(--t-base) var(--ease); }
.site-header.is-stuck .site-header__inner { min-height: 60px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 108px; height: auto; transition: width var(--t-base) var(--ease); }
.site-header.is-stuck .brand img { width: 92px; }

.nav-main { flex: 1 1 auto; }
.nav-main__list { list-style: none; display: flex; align-items: center; gap: 28px; }
.nav-main__item { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-link-tp { position: relative; display: inline-flex; align-items: center; padding: 8px 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); }
.nav-link-tp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--c-primary); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); }
.nav-link-tp:hover { color: var(--c-primary); }
.nav-link-tp:hover::after, .nav-link-tp[aria-current]::after, .is-open > .nav-link-tp::after { transform: scaleX(1); }
.nav-link-tp[aria-current] { color: var(--c-primary); }
.nav-toggle { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--c-ink); cursor: pointer; border-radius: 0; }
.nav-toggle .ico { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--t-base) var(--ease); }
.is-open > .nav-toggle .ico { transform: rotate(180deg); }
.nav-toggle:hover { color: var(--c-primary); }

.header-actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.header-call { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.header-call:hover { color: var(--c-primary); }
.header-call__icon { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-primary-50); color: var(--c-primary); display: grid; place-items: center; }
.header-call__text { display: flex; flex-direction: column; line-height: 1.2; }
.header-call__text small { font-size: 11px; color: var(--c-muted); }
.header-call__text span { font-size: var(--fs-sm); font-weight: 600; }

.header-mobile { display: none; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: var(--c-primary-50); color: var(--c-primary); cursor: pointer; transition: background-color var(--t-fast), transform .15s var(--ease); }
.icon-btn:active { transform: scale(.96); }
/* Menu button: visible "Menu" label + 2-bar icon (clearer than an icon-only hamburger) */
.menu-btn { height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border: 0; border-radius: var(--r-sm); background: var(--c-primary); color: #fff; font-family: var(--ff-head); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color var(--t-fast), transform .15s var(--ease); }
.menu-btn:hover { background: var(--c-primary-deep); }
.menu-btn:active { transform: scale(.97); }
.burger { position: relative; width: 20px; height: 12px; display: inline-block; }
.burger > span { position: absolute; right: 0; height: 2px; background: currentColor; transition: width .3s var(--ease), transform .45s var(--ease), top .3s var(--ease); }
.burger > span:first-child { top: 0; width: 20px; }
.burger > span:last-child { top: 10px; width: 13px; }
.menu-btn:hover .burger > span:last-child { width: 20px; }

/* Narrow desktops (1200–1439): the full nav + phone text + CTA don't fit, so the phone
   collapses to its icon (the link keeps an aria-label) and the nav tightens. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .site-header__inner { gap: 28px; }
  .nav-main__list { gap: 22px; }
  .header-call__text { display: none; }
}
@media (max-width: 1199.98px) {
  :root { --header-h: 60px; }
  .site-header__inner { min-height: 60px; gap: 16px; }
  .site-header.is-stuck .site-header__inner { min-height: 60px; }
  .brand img, .site-header.is-stuck .brand img { width: 96px; }
  .nav-main, .header-actions { display: none; }
  .header-mobile { display: flex; }
}

/* ---------- Mega-menu (Products): "drawing board" ----------
   Dark blueprint panel: category rail (tabs) | products of the active category | browse-by aside
   (profiles/sizes/types + industries). Line pictograms (i-p-*) instead of photos. */
.nav-main__item--mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding: 0 32px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.is-open > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mega__panel { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; overscroll-behavior: contain; background-color: var(--c-primary-deep); background-image: var(--grid-dark); background-size: var(--grid-size) var(--grid-size); color: var(--c-on-dark-muted); box-shadow: 0 28px 56px -20px rgba(20, 18, 26, .5); }
.mega :focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.mega .mono-label { color: var(--c-steel); }
.mega a:hover { color: #fff; }

/* Rail: category tabs */
.mega__rail { display: flex; flex-direction: column; padding: 22px 0 18px; border-right: 1px solid var(--c-line-dark); }
.mega__rail-title { padding: 0 24px 10px; }
.mega__tabs { display: flex; flex-direction: column; }
.mega__tab { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 24px; border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.mega__tab:hover { background: rgba(255, 255, 255, .05); }
.mega__tab.is-active { background: rgba(255, 255, 255, .1); }
.mega__tab-num { padding-top: 4px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; color: var(--c-steel); transition: color var(--t-fast); }
.mega__tab.is-active .mega__tab-num { color: var(--c-accent); }
.mega__tab-text { display: flex; flex-direction: column; gap: 2px; }
.mega__tab-name { font-family: var(--ff-head); font-weight: 600; font-size: 15px; color: var(--c-on-dark); transition: color var(--t-fast); }
.mega__tab.is-active .mega__tab-name, .mega__tab:hover .mega__tab-name { color: #fff; }
.mega__tab-meta { font-size: 12px; color: var(--c-on-dark-muted); }
.mega__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding: 16px 24px 0; font-weight: 600; font-size: 13px; color: var(--c-accent); }
.mega__all .ico, .mega__go, .cmenu__feature-cta .ico { transition: transform .22s var(--ease), color var(--t-fast); }
.mega__all:hover .ico { transform: translateX(4px); }

/* Pane: products (left) + browse-by aside (right) */
.mega__panes { min-height: 340px; }
.mega__pane { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.mega__pane[hidden] { display: none; }
.mega__pane.is-active { animation: tp-open .3s var(--ease) both; }
.mega__main { display: flex; flex-direction: column; padding: 26px 32px 24px; }
.mega__note { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--c-on-dark-muted); }
.mega__note .ico { color: var(--c-accent); }
.mega__title { font-family: var(--ff-head); font-weight: 700; font-size: 22px; line-height: 1.2; color: #fff; }
.mega__desc { margin-top: 6px; max-width: 60ch; font-size: 13px; }
.mega__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.mega__list--one { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.mega__item { height: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, .03); color: #fff; transition: border-color var(--t-fast), background-color var(--t-fast); }
.mega__item:hover, .mega__item:focus-visible { border-color: var(--c-accent); background: rgba(255, 255, 255, .07); color: #fff; }
.mega__pic { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); color: var(--c-accent); }
.mega__pic .ico { width: 30px; height: 30px; stroke-width: 1.4; }
.mega__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mega__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.mega__name em { margin-left: 6px; padding: 1px 6px; background: var(--c-accent); color: var(--c-ink); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.mega__spec { font-family: var(--ff-mono); font-size: 11px; color: var(--c-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__go { flex: 0 0 auto; color: rgba(255, 255, 255, .4); }
.mega__item:hover .mega__go, .mega__item:focus-visible .mega__go { transform: translateX(3px); color: var(--c-accent); }

.mega__aside { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-left: 1px solid var(--c-line-dark); }
.mega__aside .mono-label + * { margin-bottom: 10px; }
.mega__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mega__chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .2); font-family: var(--ff-mono); font-size: 12px; color: #fff; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.mega__chips a:hover { border-color: var(--c-accent); background: rgba(245, 165, 36, .1); }
.mega__range { display: grid; gap: 8px; }
.mega__range div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line-dark); }
.mega__range dt { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); }
.mega__range dd { margin: 0; font-weight: 600; font-size: 13px; color: #fff; }
.mega__inds { list-style: none; }
.mega__inds a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--c-line-dark); font-size: 14px; color: var(--c-on-dark); }
.mega__inds .ico { color: rgba(255, 255, 255, .35); transition: transform .22s var(--ease), color var(--t-fast); }
.mega__inds a:hover .ico { color: var(--c-accent); transform: translate(2px, -2px); }
/* 1200–1439: tighter columns so the two product columns keep their specs on one line */
@media (max-width: 1439.98px) {
  .mega__panel { grid-template-columns: 230px minmax(0, 1fr); }
  .mega__pane { grid-template-columns: minmax(0, 1fr) 250px; }
  .mega__main { padding-inline: 24px; }
}

/* ---------- Company menu (two-column) ---------- */
.cmenu { position: absolute; top: calc(100% + 10px); left: -24px; z-index: 20; width: 640px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 8px; padding: 10px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.is-open > .cmenu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.cmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cmenu__list { list-style: none; display: grid; gap: 2px; padding: 4px; }
.cmenu__link { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--c-ink); transition: background-color var(--t-fast) var(--ease); }
.cmenu__link:hover, .cmenu__link:focus-visible { background: var(--c-surface); color: var(--c-ink); }
.cmenu__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-primary-50); color: var(--c-primary); transition: background-color var(--t-fast), color var(--t-fast); }
.cmenu__link:hover .cmenu__icon { background: var(--c-primary); color: #fff; }
.cmenu__link strong { display: block; font-size: 14px; line-height: 1.3; }
.cmenu__link small { display: block; font-size: 12px; color: var(--c-muted); }
.cmenu__feature { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-md); background-color: var(--c-primary-deep); color: var(--c-on-dark); }
.cmenu__feature:hover { color: var(--c-on-dark); }
.cmenu__feature-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.cmenu__feature-num { font-family: var(--ff-head); font-weight: 700; font-size: 44px; line-height: 1; color: #fff; }
.cmenu__feature-num span { color: var(--c-accent); }
.cmenu__feature-text { font-size: 12px; line-height: 1.5; }
.cmenu__feature-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cmenu__feature-badges span { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); font-size: 11px; color: #fff; }
.cmenu__feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 13px; color: var(--c-accent); }
.cmenu__feature:hover .cmenu__feature-cta .ico { transform: translateX(4px); }

/* ---------- Mobile menu (< 1200px): dark panel, category first ----------
   Bootstrap offcanvas-top, re-skinned: grows as a circle from the Menu button (--ox/--oy set
   by main.js), deep-purple blueprint grid, big rows that stagger in (--i). Products opens 4
   category tiles; a tile swaps to that category's product rows (main.js [data-mcat]).
   Call / WhatsApp docked at the bottom. Reduced motion: no clip/stagger. */
.mnav.offcanvas { --ox: calc(100% - 60px); --oy: 32px; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; transform: none; overflow: hidden; background-color: var(--c-primary-deep); background-image: var(--grid-dark); background-size: var(--grid-size) var(--grid-size); color: #fff; clip-path: circle(0 at var(--ox) var(--oy)); transition: clip-path .55s cubic-bezier(.65, 0, .25, 1); }
.mnav.offcanvas.showing, .mnav.offcanvas.show:not(.hiding) { transform: none; clip-path: circle(150vmax at var(--ox) var(--oy)); }
.mnav :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.mnav__bar { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); padding: 0 16px; border-bottom: 1px solid var(--c-line-dark); }
.mnav__brand { display: inline-flex; padding: 6px 10px; background: #fff; }
.mnav__brand img { width: 88px; height: auto; }
.mnav__close { height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border: 0; border-radius: var(--r-sm); background: var(--c-accent); color: var(--c-ink); font-family: var(--ff-head); font-weight: 600; font-size: 14px; cursor: pointer; }
.mnav__close .burger > span { transition-delay: .25s; }
.mnav:is(.showing, .show):not(.hiding) .mnav__close .burger > span { width: 20px; top: 5px; }
.mnav:is(.showing, .show):not(.hiding) .mnav__close .burger > span:first-child { transform: rotate(45deg); }
.mnav:is(.showing, .show):not(.hiding) .mnav__close .burger > span:last-child { transform: rotate(-45deg); }

.mnav__body { position: relative; z-index: 1; flex: 1 1 auto; width: min(100%, 720px); align-self: center; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 28px; }
.mnav .mono-label { color: var(--c-steel); }
.mnav__list { list-style: none; }
.mnav__list > li { border-bottom: 1px solid var(--c-line-dark); }
.mnav__link { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 2px; border: 0; background: transparent; font-family: var(--ff-head); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: #fff; text-align: left; cursor: pointer; }
.mnav__link:hover, .mnav__link:focus-visible { color: #fff; }
.mnav__label { flex: 1 1 auto; min-width: 0; }
.mnav__link[aria-current] .mnav__label::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: var(--r-round); background: var(--c-accent); vertical-align: middle; }
/* + turns into − when the group is open */
.mnav__plus { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.mnav__plus::before, .mnav__plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.mnav__plus::after { transform: rotate(90deg); }
.mnav__acc[aria-expanded="true"] { color: var(--c-accent); }
.mnav__acc[aria-expanded="true"] .mnav__plus::after { transform: rotate(0deg); }
.mnav__panel { padding: 0 0 18px; }

/* Products: 4 category tiles → one category's product rows */
.mnav__cats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mnav__cat { width: 100%; height: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); color: #fff; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.mnav__cat:hover, .mnav__cat:focus-visible { border-color: var(--c-accent); background: rgba(255, 255, 255, .08); }
.mnav__cat-ico { width: 28px; height: 28px; stroke-width: 1.5; color: var(--c-accent); }
.mnav__cat-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.mnav__catpane:not([hidden]) { animation: tp-open .3s var(--ease) both; }
.mnav__back { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-dark); cursor: pointer; }
.mnav__back:hover { color: var(--c-accent); }
.mnav__cat-title { margin-top: 4px; font-family: var(--ff-head); font-weight: 700; font-size: 26px; line-height: 1.2; color: #fff; }
.mnav__cat-title:focus { outline: 0; }
.mnav__plist { list-style: none; }
.mnav__plist > li { border-top: 1px solid var(--c-line-dark); }
.mnav__prow { min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 8px 2px; color: #fff; }
.mnav__prow:hover, .mnav__prow:focus-visible { color: #fff; }
.mnav__pic { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); color: var(--c-accent); transition: border-color var(--t-fast); }
.mnav__pic .ico { width: 26px; height: 26px; stroke-width: 1.5; }
.mnav__prow:hover .mnav__pic { border-color: var(--c-accent); }
.mnav__ptext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mnav__pname { font-weight: 600; font-size: 16px; line-height: 1.25; }
.mnav__pname em { margin-left: 6px; padding: 1px 6px; background: var(--c-accent); color: var(--c-ink); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.mnav__pgo { flex: 0 0 auto; width: 18px; height: 18px; color: rgba(255, 255, 255, .4); transition: transform .25s var(--ease), color var(--t-fast); }
.mnav__prow:hover .mnav__pgo, .mnav__prow:focus-visible .mnav__pgo { color: var(--c-accent); transform: translateX(3px); }
.mnav__pall { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-top: 10px; border-top: 1px solid var(--c-line-dark); font-weight: 600; font-size: 15px; color: var(--c-accent); }
.mnav__pall:hover, .mnav__pall:focus-visible { color: #fff; }
/* Company: 2-column link grid */
.mnav__sub { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mnav__sub a { height: 100%; display: flex; align-items: center; min-height: 48px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff; transition: border-color var(--t-fast); }
.mnav__sub a:hover, .mnav__sub a:focus-visible { border-color: var(--c-accent); color: #fff; }

/* Dock: Call + WhatsApp */
.mnav__dock { position: relative; z-index: 1; flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line-dark); background: var(--c-primary-deep); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mnav__dock-btn { flex: 1 1 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid rgba(255, 255, 255, .5); font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; transition: border-color var(--t-fast), background-color var(--t-fast); }
.mnav__dock-btn:hover { border-color: #fff; color: #fff; }
.mnav__dock-btn--call { border-color: #fff; background: #fff; color: var(--c-ink); }
.mnav__dock-btn--call:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
@media (min-width: 576px) { .mnav__cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .mnav__bar, .mnav__dock { padding-inline: 24px; } .mnav__dock-btn { max-width: 340px; } .mnav__dock { justify-content: center; } }

/* Stagger-in */
.mnav [style*="--i"] { opacity: 0; translate: 0 18px; transition: opacity .3s var(--ease), translate .45s var(--ease); }
.mnav:is(.showing, .show):not(.hiding) [style*="--i"] { opacity: 1; translate: 0 0; transition-delay: calc(.2s + var(--i) * .05s); }
/* The floating quick-connect buttons would sit on top of the menu */
.mnav-open .cn-cb-fab-stack { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mnav.offcanvas, .mnav.offcanvas.showing, .mnav.offcanvas.show:not(.hiding) { clip-path: none; transition: none; }
  .mnav [style*="--i"] { opacity: 1; translate: none; transition: none; }
}
/* ---------- Cards ---------- */
/* Hover lift uses the independent `translate` property so it composes with the
   scroll-reveal animation, which owns `transform`. */
.card-lift { transition: translate .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.card-lift:hover { translate: 0 -4px; box-shadow: var(--sh-hover); border-color: var(--c-primary-line); }
.glyph { transition: transform .9s var(--ease); }
.card-lift:hover .glyph { transform: rotate(45deg); }

/* ---------- Product card: the ONE product card style sitewide ----------
   Products hub, related products, industry pages (markup: tools/shared/product-card.mjs).
   Same language as .ind-card: square photo, mono category, name + arrow, mono spec. */
.product-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.product-grid > li[hidden] { display: none; }
.product-card { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); transition: border-color var(--t-fast), box-shadow var(--t-fast), translate var(--t-fast) var(--ease); }
.product-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.product-card__flag { position: absolute; top: 12px; left: 12px; padding: 2px 8px; background: var(--c-accent); color: var(--c-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.product-card__cat { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.product-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: clamp(15px, 13px + .4vw, 18px); line-height: 1.25; }
.product-card__title a { color: var(--c-ink); }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__title .ico { flex: 0 0 auto; color: var(--c-primary); transition: transform .25s var(--ease); }
.product-card__spec { margin-top: auto; padding-top: 2px; font-family: var(--ff-mono); font-size: 12px; line-height: 1.5; color: var(--c-primary); }
.product-card:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.product-card__title a:focus-visible { outline: none; }
@media (hover: hover) {
  .product-card:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-hover); translate: 0 -3px; }
  .product-card:hover .product-card__media img { transform: scale(1.05); }
  .product-card:hover .product-card__title .ico { transform: translate(2px, -2px); }
}
@media (max-width: 575.98px) {
  .product-card__body { padding: 12px; }
  .product-card__spec { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card { translate: none !important; }
  .product-card__media img, .product-card__title .ico { transform: none !important; }
}

.tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--c-ink); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
.tile:hover { background: var(--c-primary-50); border-color: var(--c-primary-line); translate: 0 -2px; }
.tile:hover .glyph { transform: rotate(45deg); }
.icon-box { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-primary-50); color: var(--c-primary); display: grid; place-items: center; }
.icon-box--solid { width: 52px; height: 52px; background: var(--c-primary); color: #fff; }
.icon-box--outline { width: 44px; height: 44px; background: #fff; border: 1px solid var(--c-line); }

.feature { display: flex; gap: 20px; padding: 28px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.feature h3, .feature .htitle { font-size: 17px; }
.feature p { margin-top: 8px; font-size: 14px; color: var(--c-muted); }

.post-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: 24px; }
.post-card__title { flex: 1 1 auto; font-size: 17px; line-height: 1.35; }
.post-card__title a { color: var(--c-ink); }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card .eyebrow { margin: 0; }

/* ---------- Stat ---------- */
.stat__num { font-family: var(--ff-head); font-weight: 700; font-size: clamp(33px, 23.6px + 2.21vw, 50px); line-height: 1; color: var(--c-ink); }
.stat__num .plus { color: var(--c-primary); }
.stat__label { margin-top: 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); }

/* ---------- Technical utilities: mono labels, "+" corner marks, cursor spotlight ---------- */
/* .mono-label keeps its class name but is no longer monospace (2026-10-29, rework): a plain Inter caption */
.mono-label { margin: 0; font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--c-muted); }
/* "+" crosshairs at the four corners (blueprint feel). Set --xm for the mark colour. */
.xmarks { position: relative; --xm: rgba(66, 44, 108, .3); }
.xmarks::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--xm), var(--xm)) left 0 top 6px / 13px 1px no-repeat,
    linear-gradient(var(--xm), var(--xm)) left 6px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--xm), var(--xm)) right 0 top 6px / 13px 1px no-repeat,
    linear-gradient(var(--xm), var(--xm)) right 6px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--xm), var(--xm)) left 0 bottom 6px / 13px 1px no-repeat,
    linear-gradient(var(--xm), var(--xm)) left 6px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--xm), var(--xm)) right 0 bottom 6px / 13px 1px no-repeat,
    linear-gradient(var(--xm), var(--xm)) right 6px bottom 0 / 1px 13px no-repeat;
}
/* Cursor-following glow (main.js writes --mx / --my). Set --spot for the glow colour. */
[data-spotlight] { --mx: 50%; --my: 50%; position: relative; isolation: isolate; }
[data-spotlight]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(420px circle at var(--mx) var(--my), var(--spot, rgba(86, 58, 140, .14)), transparent 45%); }
[data-spotlight]:hover::before { opacity: 1; }
@media (hover: none) { [data-spotlight]::before { display: none; } }

/* ---------- FAQ: numbered list + sticky help card ---------- */
.faq2__inner { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 992px) {
  .faq2__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 32px + 3vw, 80px); align-items: start; }
  .faq2__aside { position: sticky; top: calc(var(--header-h) + 32px); }
}
.faq2__aside h2, .faq2__aside .sec-title { font-size: var(--fs-h2); }
.faq2__intro { margin-top: 16px; font-size: var(--fs-lead); max-width: 40ch; }
.faq2__help { margin-top: 32px; padding: 28px; border: 1px solid var(--c-line); border-top: 3px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-white); }
.faq2__help-title { font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--c-ink); }
.faq2__help-title + p { margin-top: 8px; font-size: 14px; }
.faq2__help-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.faq2__hours { margin-top: 16px; font-size: 13px; color: var(--c-muted); }
/* Accordion = separate bordered cards (same look as the industry-page FAQ board) */
.faq2__list { display: flex; flex-direction: column; gap: 8px; }
.faq2__item { padding: 0 20px; border: 1px solid var(--c-line); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.faq2__item:has(.faq2__btn[aria-expanded="true"]) { border-color: var(--c-primary-line); box-shadow: var(--sh-2); }
.faq2__q { margin: 0; }
.faq2__btn { width: 100%; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--ff-head); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--c-ink); }
.faq2__num { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; color: var(--c-primary); }
.faq2__text { transition: color var(--t-fast); }
.faq2__btn:hover .faq2__text { color: var(--c-primary); }
.faq2__icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--c-line); background: #fff; color: var(--c-primary); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.faq2__btn:hover .faq2__icon { border-color: var(--c-primary-line); }
.faq2__icon svg { transition: transform .35s var(--ease); }
.faq2__btn[aria-expanded="true"] .faq2__icon { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.faq2__btn[aria-expanded="true"] .faq2__icon svg { transform: rotate(45deg); }
.faq2__a { margin: 0; padding: 0 0 18px; max-width: 72ch; font-size: 15px; color: var(--c-text); }.faq2 .collapse.show .faq2__a { animation: tp-open .35s var(--ease) both; }
@media (max-width: 575.98px) {
  .faq2__item { padding: 0 16px; }
  .faq2__btn { gap: 10px; font-size: 15px; }
  .faq2__a { font-size: 14px; }

  .faq2__help { padding: 22px; }
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.field__input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-field); border-radius: var(--r-sm); background: #fff; font: inherit; font-size: var(--fs-sm); color: var(--c-ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
textarea.field__input { min-height: 120px; padding: 12px 14px; resize: vertical; }
.field__input::placeholder { color: #9A96A6; }
.field__input:hover { border-color: #A79FB8; }
.field__input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(66, 44, 108, .14); outline: none; }
.field__input[aria-invalid="true"] { border-color: var(--c-error); }
/* 16px below 992px stops iOS zooming into the field */
@media (max-width: 991.98px) { .field__input { font-size: 16px; } }

/* ---------- Footer: floating dark card on a light frame ---------- */
/* Card is near full-bleed (12–24px frame); .footer-inner aligns content to the page grid
   (container max minus its 32px gutters), so the footer reads as wide as the sections above. */
.site-footer { padding: clamp(12px, 6.4px + 1vw, 24px); background: var(--c-surface); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.footer-card { position: relative; overflow: hidden; padding: clamp(32px, 16px + 3.4vw, 72px) clamp(20px, 3.2px + 3vw, 48px) clamp(20px, 12.8px + 1.2vw, 32px); border-radius: var(--r-lg); background: var(--c-primary-deep); color: var(--c-on-dark-muted); box-shadow: 0 30px 60px -30px rgba(20, 18, 26, .45); }
.footer-inner { max-width: calc(var(--container-max) - 64px); margin-inline: auto; }
.footer-card > * { position: relative; z-index: 1; }
.site-footer a:not(.btn-tp) { color: inherit; }

/* Head: brand + prompt + CTAs */
.footer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-head__brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.footer-brand__logo { flex: 0 0 auto; display: inline-flex; padding: 8px 12px; background: #fff; border-radius: var(--r-sm); }
.footer-brand__logo img { width: 120px; height: auto; }
.footer-head__title { font-family: var(--ff-head); font-weight: 600; font-size: clamp(18px, 14.7px + 0.92vw, 26px); line-height: 1.25; color: #fff; max-width: 24ch; }
.footer-head__title span { color: var(--c-accent); }
.footer-head__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Link grid */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px 48px; padding-block: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 1.35fr 1.5fr .85fr 1fr; } }
.footer-about p { line-height: 1.7; max-width: 40ch; }
.footer-address { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; max-width: 40ch; font-style: normal; font-size: 14px; line-height: 1.65; color: var(--c-on-dark-muted); }
.footer-address .ico { flex: 0 0 auto; margin-top: 3px; color: var(--c-accent); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.social { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-sm); color: #fff !important; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), translate var(--t-fast) var(--ease); }
.social:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink) !important; translate: 0 -2px; }
.footer-col { min-width: 0; }
.footer-col__title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: var(--ff-head); font-weight: 600; font-size: 15px; color: #fff; }
.footer-col__title::before { content: ""; width: 18px; height: 2px; background: var(--c-accent); }
.footer-links { list-style: none; display: grid; gap: 12px; }
.footer-links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.footer-link { display: inline-block; color: var(--c-on-dark-muted) !important; transition: color .18s var(--ease), translate .18s var(--ease); }
.footer-link:hover { color: #fff !important; translate: 3px 0; }
/* Touch screens below desktop: links become full 44px rows (the gap moves into the row) */
@media (max-width: 1199.98px) and (pointer: coarse), (max-width: 991.98px) {
  .footer-links { gap: 0 24px; }
  .footer-link { display: flex; align-items: center; min-height: 44px; }
}

/* Contact tiles */
.ftiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1400px) {
  .ftiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftile { gap: 14px; padding: 18px; }
  .ftile__go { display: none; } /* four across: the whole tile is the link, the arrow only costs width */
}
.ftile { height: 100%; display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--c-line-dark); border-radius: var(--r-md); background: rgba(255, 255, 255, .03); color: #fff !important; transition: background-color .22s var(--ease), border-color .22s var(--ease), translate .22s var(--ease); }
.ftile:hover { background: rgba(255, 255, 255, .06); border-color: rgba(245, 165, 36, .55); translate: 0 -3px; }
.ftile__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(245, 165, 36, .14); color: var(--c-accent); }
.ftile__icon--wa { background: rgba(37, 211, 102, .14); color: var(--c-whatsapp); }
.ftile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ftile__label { font-size: 13px; font-weight: 500; color: var(--c-on-dark-muted); }
.ftile__value { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.ftile__label .nowrap { white-space: nowrap; }
.ftile__go { color: var(--c-steel); transition: transform .22s var(--ease), color var(--t-fast); }
.ftile:hover .ftile__go { transform: translateX(4px); color: var(--c-accent); }

/* Wordmark + legal */
.wordmark { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4px + 1.5vw, 28px); padding-top: clamp(32px, 16px + 3vw, 56px); overflow: hidden; }
.wordmark span { font-family: var(--ff-head); font-weight: 700; font-size: clamp(24px, -2.9px + 7.36vw, 118px); line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.25px rgba(255, 255, 255, .2); white-space: nowrap; user-select: none; }
.wordmark svg { flex: 0 0 auto; width: clamp(32px, 12.8px + 5vw, 96px); height: auto; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; margin-top: clamp(24px, 16px + 1.5vw, 40px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; }
.footer-legal__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer-legal__links a { padding-block: 10px; }
.footer-legal__credit { display: flex; align-items: center; gap: 16px; }
.footer-legal__credit a:not(.to-top) { color: #fff !important; font-weight: 600; white-space: nowrap; }
.to-top { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); color: #fff !important; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.to-top:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink) !important; }

/* Mobile */
.footer-acc { display: none; }
/* Room for the quick-connect buttons so they never cover the legal bar */
@media (max-width: 991.98px) { .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media (max-width: 767.98px) {
  /* Phone order: prompt + CTAs, contact tiles, link menus, about, wordmark, legal */
  .footer-inner { display: flex; flex-direction: column; }
  .footer-head { order: 0; }
  .ftiles { order: 1; margin-top: 24px; }
  .footer-grid { order: 2; }
  .wordmark { order: 3; }
  .footer-legal { order: 4; }
  .footer-acc { order: -1; }
  .footer-about p { font-size: 13px; }
  .footer-head { flex-direction: column; align-items: flex-start; }
  .footer-head__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-head__actions { width: 100%; }
  /* Side by side only when both fit on one line; otherwise each takes a full row */
  .footer-head__actions .btn-tp { flex: 1 1 auto; }
  .footer-grid { gap: 24px; padding-block: 32px; }
  .footer-col--products, .footer-col--company, .footer-col--resources { display: none; }
  .footer-acc { display: block; border-top: 1px solid rgba(255, 255, 255, .1); }
  .footer-acc details { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .footer-acc summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-family: var(--ff-head); font-weight: 600; font-size: 14px; color: #fff; }
  .footer-acc summary::-webkit-details-marker { display: none; }
  .footer-acc summary .ico { color: var(--c-accent); transition: transform var(--t-base) var(--ease); }
  .footer-acc details[open] summary .ico { transform: rotate(180deg); }
  .footer-acc details[open] > :not(summary) { animation: tp-open .3s var(--ease) both; }
  .footer-acc .footer-links { padding-bottom: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

  .footer-acc address { padding-bottom: 16px; line-height: 1.6; }
  /* Contact: Call full width (shows the number); WhatsApp + Email side by side, icon on top */
  .ftiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ftiles > li:first-child, .ftiles > li:last-child { grid-column: 1 / -1; }
  .ftile { gap: 12px; padding: 14px 16px; }
  .ftiles > li:not(:first-child):not(:last-child) .ftile { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ftiles > li:not(:first-child):not(:last-child) .ftile__go { display: none; }
  .ftile__icon { width: 40px; height: 40px; }
  .ftile__value { font-size: 13px; }
  /* Legal: links row, then copyright + back-to-top, then the credit on its own line */
  .footer-legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
  .footer-legal__credit { display: contents; }
  .footer-legal__links { grid-row: 1; grid-column: 1 / -1; gap: 0 20px; }
  .footer-legal > p:first-child { grid-row: 2; grid-column: 1; }
  .footer-legal .to-top { grid-row: 2; grid-column: 2; }
  .footer-legal__credit > p { grid-row: 3; grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
}

/* ---------- Floating actions (Clients Now quick-connect, brand-tinted) ---------- */
.cn-cb-fab:not(.cn-cb-fab--wa) { background: var(--c-primary) !important; box-shadow: 0 8px 22px rgba(66, 44, 108, .35), 0 2px 6px rgba(0, 0, 0, .12) !important; }
.cn-cb-fab:not(.cn-cb-fab--wa) .cn-cb-fab-pulse { background: var(--c-primary) !important; }
/* Phones (<=480px): the widget's own two-pill bar ("Call Us" / "WhatsApp"), as live. Tidied: safe-area offset,
   48px tall, 14px labels, and a deeper WhatsApp green so the white label passes contrast. */
@media (max-width: 480px) {
  body .cn-cb-fab-stack { bottom: calc(12px + env(safe-area-inset-bottom)); }
  body .cn-cb-fab { height: 48px; }
  body .cn-cb-fab--wa { background: linear-gradient(135deg, #128C7E 0%, #075E54 100%); }
  body .cn-cb-fab[data-label]::before { font-size: 14px; }
}
/* Phones/tablets: the widget opens as a bottom sheet (thumb zone).
   `body` prefix: quickconnect.css loads after this file, so the overrides need the extra specificity. */
@keyframes cn-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 991.98px) {
  body .cn-cb-overlay { align-items: flex-end; padding: 12px 0 0; }
  body .cn-cb-modal { max-width: 640px; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); margin: 0 auto; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: cn-sheet-up .35s cubic-bezier(.16, 1, .3, 1) both; }
  body .cn-cb-modal::before { content: ""; position: sticky; top: 0; z-index: 11; display: block; width: 40px; height: 4px; margin: 8px auto -12px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
  body .cn-cb-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  /* 16px stops iOS Safari zooming the page when a field is focused */
  body .cn-cb-input, body .cn-cb-cc { font-size: 16px; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { body .cn-cb-modal { animation: none; } }

/* ---------- Round by nature (exceptions to the square system) ---------- */
.hero__pill::before, .status-dot::before, .wcard__dot, .seal, .seal__text, .qform__dot { border-radius: var(--r-round); }

/* ---------- Stepped quote form (.qform): get-a-quote only (refined 2026-10-22) ---------- */
.qform { display: flex; flex-direction: column; padding: clamp(22px, 14px + 2vw, 40px); border: 1px solid var(--c-line); background: #fff; }
.qform__head { margin-bottom: 28px; }
.qform__title { font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--c-ink); }
/* progress: three equal segments under the title */
.qform__progress { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.qform__progress li { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--c-line); font-size: 13px; font-weight: 600; color: var(--c-muted); white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); }
.qform__progress li.is-active { border-color: var(--c-primary); color: var(--c-primary); }
.qform__progress li.is-done { border-color: var(--c-primary-line); color: var(--c-ink); }
.qform__dot { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; background: var(--c-surface); font-size: 11px; transition: background-color var(--t-fast), color var(--t-fast); }
.qform__progress .is-active .qform__dot, .qform__progress .is-done .qform__dot { background: var(--c-primary); color: #fff; }
/* steps: the legend floats so it sits inside the fieldset's flow (no inverted spacing) */
.qstep { min-width: 0; margin: 0; padding: 0; border: 0; }
.qstep + .qstep { margin-top: 32px; padding-top: 32px; border-top: 1px dashed var(--c-line); }
.qform.is-stepped .qstep + .qstep { margin-top: 0; padding-top: 0; border-top: 0; }
.qstep[hidden] { display: none; }
.qform.is-stepped .qstep.is-active { animation: tp-open .35s var(--ease) both; }
.qstep__legend { float: left; width: 100%; margin: 0 0 18px; padding: 0; font-family: var(--ff-head); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--c-ink); }
.qstep__legend + * { clear: both; }
.qstep__picked { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 20px; padding: 10px 14px; background: var(--c-primary-50); font-size: 14px; color: var(--c-text); }
.qstep__picked strong { color: var(--c-ink); }
.qstep__change { min-height: 32px; margin-left: auto; padding: 0 4px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qform:not(.is-stepped) .qstep__change { display: none; }
/* product tiles: one choice, so a check badge instead of checkbox squares; equal heights */
.qchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
@media (min-width: 768px) { .qchips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qchip { position: relative; display: flex; cursor: pointer; }
.qchip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.qchip__box { flex: 1 1 auto; position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 34px 10px 10px; border: 1px solid var(--c-field); background: #fff; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.qchip .qchip__ico { flex: 0 0 auto; width: 40px; height: 40px; padding: 7px; background: var(--c-surface); color: var(--c-primary); stroke-width: 1.4; transition: background-color var(--t-fast), color var(--t-fast); }
.qchip__name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--c-ink); }
.qchip .qchip__check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; padding: 3px; background: var(--c-primary); color: #fff; stroke-width: 3; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast), transform .25s var(--ease); }
.qchip:hover .qchip__box { border-color: var(--c-primary-line); }
.qchip input:checked + .qchip__box { border-color: var(--c-primary); background: var(--c-primary-50); box-shadow: inset 0 0 0 1px var(--c-primary); }
.qchip input:checked + .qchip__box .qchip__ico { background: var(--c-primary); color: #fff; }
.qchip input:checked + .qchip__box .qchip__check { opacity: 1; transform: none; }
.qchip input:focus-visible + .qchip__box { outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* fields: same 2-column grid as .sform */
.qgrid { display: grid; grid-template-columns: 1fr; gap: 18px 20px; }
@media (min-width: 576px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qgrid .field--full { grid-column: 1 / -1; }
.field label small { font-weight: 400; color: var(--c-muted); }
/* file drop box (the real input is visually hidden but focusable) */
.qfile__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.field .qfile { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border: 1.5px dashed var(--c-field); background: var(--c-surface); font-size: 14px; font-weight: 400; color: var(--c-text); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.field .qfile:hover { border-color: var(--c-primary); background: var(--c-primary-50); }
.qfile__input:focus-visible + .qfile { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.qfile.is-error { border-color: var(--c-error); }
.qfile.is-error strong { color: var(--c-error); }
.qfile .qfile__ico { flex: 0 0 auto; width: 28px; height: 28px; color: var(--c-primary); stroke-width: 1.5; }
.qfile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qfile__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--c-ink); }
.qfile__text small { font-size: 12px; color: var(--c-muted); }
.qfile__btn { flex: 0 0 auto; padding: 8px 14px; background: #fff; border: 1px solid var(--c-field); font-weight: 600; color: var(--c-primary); }
/* step buttons */
.qstep__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.qstep__nav > .btn-tp:only-child { margin-left: auto; }
.qform:not(.is-stepped) [data-step-next], .qform:not(.is-stepped) [data-step-prev] { display: none; }
.qform:not(.is-stepped) .qstep__nav:not(:has(button[type="submit"])) { display: none; }
.qform__privacy { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--c-muted); }
.qform__privacy .ico { color: var(--c-primary); }
@media (max-width: 575.98px) {
  /* phones: numbered segments only (the step question names the step) */
  .qform__progress li { font-size: 0; }
  .qform__progress .qform__dot { font-size: 11px; }
  /* phones: icon above the name, so names get the full tile width */
  .qchip__box { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 92px; gap: 8px; padding: 10px 26px 10px 10px; }
  .qchip .qchip__ico { width: 32px; height: 32px; padding: 5px; }
  .qchip__name { font-size: 13px; }
  .qchip .qchip__check { top: 6px; right: 6px; }
  .qfile__btn { display: none; }
  .qstep__nav { flex-wrap: wrap; }
  .qstep__nav .btn-tp { flex: 1 1 auto; }
}

/* ---------- Simple enquiry form (.sform): contact page + homepage ----------
   One short form: 2 columns from 576px, 1 below; optional fields say "(optional)"
   instead of starring the required ones. The detailed 3-step form lives on get-a-quote. */
.sform { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 14px + 2vw, 40px); border: 1px solid var(--c-line); background: #fff; box-shadow: var(--sh-2); }
.sform__head { padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.sform__title { font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--c-ink); }
.sform__sub { margin-top: 4px; font-size: 14px; color: var(--c-muted); }
.sform__sub a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sform__grid { display: grid; grid-template-columns: 1fr; gap: 18px 20px; }
@media (min-width: 576px) { .sform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sform__grid .field--full { grid-column: 1 / -1; }
.field__opt { font-weight: 400; color: var(--c-muted); }
.sform textarea.field__input { min-height: 112px; }
.sform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 4px; }

/* phone field with its country-code dropdown (the footer phone cleaner reads the code from here) */
.phone-wrap { display: flex; gap: 8px; }
.phone-wrap__cc { flex: 0 0 112px; min-width: 0; }
.phone-wrap .field__input[type="tel"] { flex: 1 1 auto; min-width: 0; }

/* lead forms (main.js [data-lead]): honeypot + reply line */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--c-line); background: var(--c-surface); font-size: 14px; line-height: 1.5; color: var(--c-ink); }
.form-status--ok { border-left-color: var(--c-success); }
.form-status--error { border-left-color: var(--c-error); }
.form-status--busy { color: var(--c-muted); }
form.is-busy [type="submit"] { opacity: .7; cursor: progress; }
.sform__foot .btn-tp { flex: 0 0 auto; }
.sform__note { flex: 1 1 220px; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.sform__note .ico { flex: 0 0 auto; margin-top: 2px; color: var(--c-primary); }
.sform__note a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575.98px) { .sform__foot .btn-tp { flex: 1 1 100%; } }
select.field__input { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23422C6C' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* ---------- Shape tiers (2026-10-28, user): parts that had no radius under the old square system.
   4px controls (--r-sm), 6px cards (--r-md), 8px panels (--r-lg); tokens.css holds the values. ---------- */
.mega__pic, .mega__chips a, .mnav__pic, .mnav__dock-btn, .product-card__flag, .faq2__icon, .qstep__picked, .qchip .qchip__ico, .qchip .qchip__check, .qfile__btn { border-radius: var(--r-sm); }
.mega__item, .mnav__cat, .product-card, .faq2__item, .qchip__box, .field .qfile { border-radius: var(--r-md); }
.mega__panel, .qform, .sform { border-radius: var(--r-lg); }

/* ---------- Type (2026-10-29, rework): labels in Inter; monospace only for data values ---------- */
.mega__tab-num, .mega__range dt, .mnav__back, .product-card__cat, .faq2__num { font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: none; }

/* ---------- Floating buttons (2026-10-29, rework): one WhatsApp button on desktop; the number is in the header.
   Below 992px the widget's own Call / WhatsApp buttons stay. ---------- */
@media (min-width: 992px) { body .cn-cb-fab:not(.cn-cb-fab--wa) { display: none !important; } }

/* ---------- Filter chips (moved from industry.css 2026-10-29; industries hub, products hub, blogs, homepage) ---------- */
.sector-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.sector-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--c-line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-ink); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.sector-chip:hover { border-color: var(--c-primary-line); }
.sector-chip[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sector-chip span { font-family: var(--ff-mono); font-size: 11px; opacity: .7; }
.sector-chip { border-radius: var(--r-sm); }
.sector-chip span { font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: .01em; }

/* Mega menu hangs flush from the header (2026-10-29): square top corners where it meets the header */
.mega__panel { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Touch targets (2026-10-29 QA): links in table header cells get a 44px tall hit area without changing row height */
.spec-table tbody th a, .ind-matrix tbody th a { display: inline-block; padding-block: 14px; margin-block: -14px; }