:root {
  --cab-red: #FF5757;
  --cab-red-dark: #e04545;
  --cab-red-light: #ff8a8a;
  --cab-blue: #004cc0;
  --cab-orange: #e1772f;
  --cab-black: #000000;
  --cab-steel: var(--cab-blue);
  --cab-yellow: var(--cab-red);
  --cab-charcoal: var(--cab-black);
  --cab-gray: #4a4a4a;
  --cab-bg: #f7f7f7;
  --cab-surface-alt: #eef3fa;
  --cab-success: #2e7d32;
  --cab-risk: var(--cab-red);
  --cab-border: #d9dde3;
  --cab-white: #ffffff;
  --cab-font-head: "Barlow Condensed", system-ui, sans-serif;
  --cab-font-body: "Barlow", system-ui, sans-serif;
  --cab-font-spec: "Barlow Semi Condensed", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cab-font-body);
  font-size: 16px;
  line-height: 1.625;
  color: var(--cab-charcoal);
  background: var(--cab-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cab-red); text-decoration: none; }
a:hover { color: #f65050; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--cab-font-head); font-weight: 700; line-height: 1.1; margin: 0 0 0.75rem; }
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--cab-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ratio-16x9 {
  --cab-aspect-ratio: 56.25%;
}
/* No global measure cap on <p>. A bare `p{max-width}` has margin-left:0, so in any
   centred block the paragraph box is capped and pinned to the LEFT edge while its
   text centres inside that narrow box - it reads as "shoved left". Constrain the
   measure with a purpose-built class on the element instead. */
p { margin: 0 0 1rem; }
.container { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
a.skip-link {
  position: absolute; left: -9999px; right: auto; top: 0; z-index: 9999;
  background: var(--cab-red); color: var(--cab-white); padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px; text-decoration: none; font-weight: 700;
}
a.skip-link:focus { left: 1rem; top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--cab-border);
  backdrop-filter: blur(8px);
  margin-bottom: 32px;
}
.header-proof-strip {
  background: var(--cab-red);
  color: var(--cab-white);
  font-family: var(--cab-font-spec);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}
.header-proof-strip-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-height: 0;
  padding-block: 0.45rem 0.55rem;
}
.header-proof-strip a,
.header-proof-strip span {
  color: var(--cab-white);
}
.header-proof-strip a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.header-proof-strip a:hover {
  color: var(--cab-white);
  text-decoration-thickness: 2px;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--cab-charcoal);
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 4px;
  background: var(--cab-red); color: var(--cab-white);
  display: grid; place-items: center; font-family: var(--cab-font-head);
  font-weight: 700; font-size: 0.95rem;
}
.brand-name { font-family: var(--cab-font-head); font-size: 1.15rem; line-height: 1.1; }
.brand-sub { display: block; font-family: var(--cab-font-body); font-size: 0.72rem; font-weight: 500; color: var(--cab-gray); letter-spacing: 0.04em; text-transform: uppercase; }
.nav { display: none; gap: 1.25rem; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--cab-charcoal); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--cab-red); }
.nav-phone { color: var(--cab-red) !important; font-weight: 700 !important; white-space: nowrap; }
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--cab-charcoal);
  font-weight: 600;
}
.nav-cart:hover { color: var(--cab-red); }
.nav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cab-white);
  background: var(--cab-red);
  border-radius: 999px;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle {
  border: 1px solid var(--cab-border); background: var(--cab-white);
  border-radius: 4px; padding: 0.5rem 0.75rem; font-weight: 600; cursor: pointer;
}
.mobile-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.mobile-header-actions .nav-cart { margin: 0; }
.mobile-header-actions .nav-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 0;
  color: var(--cab-charcoal);
}
.mobile-header-actions .nav-toggle::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 6px currentColor, 0 12px currentColor;
}
@media (max-width: 767.98px) {
  .mobile-header-actions {
    padding-right: 0.75rem;
  }
}
.mobile-nav { display: none; border-top: 1px solid var(--cab-border); background: var(--cab-white); }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 1rem 0; }
.mobile-nav a { display: block; padding: 0.65rem 0; text-decoration: none; font-weight: 600; color: var(--cab-charcoal); }
.mobile-nav-submenu { margin: 0; padding: 0 0 0.4rem 1rem !important; border-left: 2px solid var(--cab-border); }
.mobile-nav-submenu a { padding: 0.4rem 0; font-size: 0.9375rem; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; border-radius: 4px; font-family: var(--cab-font-head);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  min-height: 44px; padding: 0.75rem 1.25rem; transition: filter 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}
.btn:focus-visible { outline: 2px solid var(--cab-blue); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cab-red); color: var(--cab-white); }
.btn--primary:hover { background: var(--cab-red-dark); filter: none; }
.btn--secondary { background: transparent; color: var(--cab-red); border-color: var(--cab-red); }
.btn--secondary:hover { background: var(--cab-red); color: var(--cab-white); }
.btn--light { background: var(--cab-red); color: var(--cab-white); }
.btn--light:hover { background: var(--cab-red-dark); filter: none; }
.btn--ghost-light { background: transparent; color: var(--cab-white); border-color: var(--cab-white); }
.btn--ghost-light:hover { background: var(--cab-white); color: var(--cab-red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.eyebrow {
  display: inline-block; margin-bottom: 0.75rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cab-blue);
}
.eyebrow--on-dark { color: var(--cab-orange); }

.section { padding: 4rem 0; }
.section--airy {
  background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
  color: var(--cab-charcoal);
}
.section--airy .section-head .lede { color: var(--cab-gray); }
.section--pre-footer {
  background: #f8f8f8;
  color: var(--cab-charcoal);
  border-top: 1px solid var(--cab-border);
}
.section--pre-footer .lede { color: var(--cab-gray); }
.section--alt { background: var(--cab-surface-alt); }
.section--white { background: var(--cab-white); }
.section-head { margin-bottom: 2rem; }
.section-head p { color: var(--cab-gray); }

.hero {
  position: relative;
  overflow: hidden;
  color: var(--cab-white);
  background: #101820;
}
.hero--video {
  min-height: clamp(520px, 72vh, 780px);
  display: flex;
  align-items: center;
  padding: clamp(4rem, 11vh, 6.5rem) clamp(1.5rem, 5vw, 3.5rem);
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0.55) 100%),
    url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
}
.hero__yt {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: block;
}
.hero__yt iframe,
.hero__yt video {
  position: absolute; top: 50%; left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
}
.hero__yt video {
  object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 58%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}
.hero__content.container {
  width: 100%;
  max-width: 1120px;
}
.hero-copy {
  max-width: 44rem;
  padding: clamp(1.75rem, 5vw, 3rem);
}
@media (min-width: 768px) {
  .hero-copy {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  }
}
@media (max-width: 767px) {
  .hero--video {
    padding-inline: clamp(1.25rem, 6vw, 2rem);
    align-items: flex-end;
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
  }
  .hero-copy { padding: 1.5rem 0.25rem; }
}
.brand-logo {
  width: auto;
  max-height: 96px;
  max-width: min(230px, 46vw);
  height: auto;
  margin-block: -18px;
  transform: translateY(12px);
}
@media (max-width: 767px) {
  .site-header { margin-bottom: 26px; }
  .brand-logo {
    max-height: 82px;
    max-width: min(190px, 52vw);
    margin-block: -14px;
    transform: translateY(10px);
  }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.icon-features {
  position: relative;
  z-index: 3;
  margin-top: clamp(-4rem, -6vw, -2.5rem);
  padding: 0 0 2rem;
  background: linear-gradient(180deg, transparent 0%, transparent 46%, var(--cab-white) 46%, var(--cab-white) 100%);
}
.icon-features-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--cab-white);
  border: 1px solid var(--cab-border);
  border-bottom: 3px solid var(--cab-red);
  border-radius: 0.5rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}
.icon-feature { text-align: center; }
.icon-feature img { width: 72px; height: auto; margin: 0 auto 0.75rem; object-fit: contain; }
.icon-feature p { margin: 0 auto; font-size: 0.9375rem; font-weight: 600; max-width: 16ch; color: var(--cab-charcoal); }
@media (max-width: 767px) {
  .icon-features {
    margin-top: -2rem;
    padding-bottom: 1.5rem;
  }
}

.cred-strip-inline {
  padding: 1rem 0;
  background: var(--cab-white);
  border-bottom: 1px solid var(--cab-border);
}
.cred-strip-inline-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem;
}
.cred-strip-badge { max-height: 52px; width: auto; }
.cred-strip-woc { max-height: 68px; width: auto; }
.cred-strip-text {
  font-family: var(--cab-font-spec); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cab-gray);
}

.split-grid {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
.split-grid--reverse .contain-media { order: -1; }
.contain-media { display: flex; align-items: center; justify-content: center; }
.contain-media img { width: 100%; max-height: 520px; object-fit: contain; }
.h3-sub { font-size: 1.375rem; color: var(--cab-blue); margin-top: -0.25rem; }

.patent-quote {
  margin: 0 0 1rem; padding: 1rem 1.25rem;
  border-left: 4px solid var(--cab-orange);
  background: var(--cab-surface-alt); font-size: 1rem;
}

.schematic-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.schematic-card {
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; padding: 1rem; text-align: center;
}
.schematic-card a { display: block; text-decoration: none; color: inherit; }
.schematic-card img {
  width: 100%; min-height: 220px; max-height: 420px;
  object-fit: contain; margin: 0 auto 0.75rem; background: #fff;
}
.schematic-card figcaption { font-family: var(--cab-font-head); font-size: 1rem; }

.resources-grid {
  display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem;
}
.resource-block h3 { font-size: 1.375rem; }
.download-list { padding-left: 1.1rem; margin: 0 0 1rem; }
.download-list a { font-weight: 600; }
.small-note { font-size: 0.875rem; color: var(--cab-gray); }
.video-wrap { border-radius: 4px; overflow: hidden; background: var(--cab-red-dark); }
.video-wrap video { width: 100%; display: block; aspect-ratio: 16/9; }

.install-video-wrap {
  max-width: min(560px, 100%);
  margin: 0 auto 2rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cab-red-dark);
}
.install-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}

.product-promo-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}
.product-promo {
  background: var(--cab-red);
  border-radius: 4px;
  padding: 1.75rem 1rem;
}
.product-promo-inner {
  display: grid;
  grid-template-columns: minmax(110px, 32%) minmax(72px, 18%) 1fr;
  gap: 1rem;
  align-items: center;
}
.product-promo-video,
.product-promo-photo {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
  max-width: 280px;
  margin-inline: auto;
}
.product-promo-video img,
.product-promo-photo img {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: cover;
}
.product-promo-video:hover { opacity: 0.92; }
.product-promo-icon {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-inline: auto;
}
.product-promo-copy h3 {
  color: var(--cab-white);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.product-promo-copy .btn--light {
  background: transparent;
  border: 1px solid var(--cab-white);
  color: var(--cab-white);
  min-height: 40px;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}
.product-promo-copy .btn--light:hover {
  background: rgba(255, 255, 255, 0.22);
  filter: none;
}

.video-modal {
  width: min(920px, calc(100% - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.video-modal::backdrop { background: rgba(255, 87, 87, 0.78); }
.video-modal-inner {
  position: relative;
  background: var(--cab-red-dark);
  border-radius: 4px;
  overflow: hidden;
}
.video-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.steps-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.section--airy .steps-grid { gap: 2rem; }
.step-card {
  text-align: center; padding: 1rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
}
.section--airy .step-card {
  background: var(--cab-white);
  border: 1px solid var(--cab-border);
  border-radius: 8px;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.step-card img { margin: 0 auto 1rem; object-fit: contain; }
.step-card p { margin: 0 auto; color: #d8dde2; max-width: 28ch; }
.section--airy .step-card p { color: var(--cab-gray); }

.quote-box cite { display: block; margin-top: 0.75rem; font-style: normal; font-weight: 600; color: var(--cab-charcoal); font-size: 0.875rem; }

.faq details {
  border: 1px solid rgba(255, 87, 87, 0.35);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--cab-bg);
}
.faq details[open] { border-color: var(--cab-red); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary:hover { color: var(--cab-red); }
.faq p { margin: 0.75rem 0 0; }

.footer-logo { margin: 0 auto 1rem; width: auto; max-height: 112px; max-width: 260px; height: auto; }

.hero-tagline { font-family: var(--cab-font-head); font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--cab-orange); margin: 0 0 1rem; max-width: 28ch; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); max-width: 14ch; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero .lede { font-size: 1.125rem; line-height: 1.55; color: #eef2f6; max-width: 52ch; margin-bottom: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero .eyebrow { color: #fff; opacity: 0.92; margin-bottom: 0.75rem; display: inline-block; }
.hero .btn-row { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.proof-strip { padding: 2rem 0; background: var(--cab-bg); border-bottom: 1px solid var(--cab-border); }
.proof-strip h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cab-gray); margin-bottom: 1rem; }
.proof-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.proof-item {
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; padding: 1rem 1.125rem;
}
.proof-item strong { display: block; font-family: var(--cab-font-head); font-size: 0.95rem; margin-bottom: 0.25rem; }
.proof-item span { font-size: 0.875rem; color: var(--cab-gray); }

.card-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; padding: 1.5rem; transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--cab-red); transform: translateY(-2px); }
.card h3 { font-size: 1.375rem; }

.process-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step-num {
  font-family: var(--cab-font-head); font-size: 2rem; color: var(--cab-orange);
  line-height: 1; margin-bottom: 0.5rem;
}

.product-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.product-card {
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; overflow: hidden; transition: border-color 0.15s, transform 0.15s;
  display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--cab-red); transform: translateY(-2px); }
.product-card img { aspect-ratio: 4/3; object-fit: contain; background: var(--cab-white); padding: 0.5rem; }
.product-card .body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex: 1 1 auto; flex-direction: column; }
.product-card .body > .lc-block:last-child { margin-top: auto; }
.product-card .spec {
  font-family: var(--cab-font-spec); font-size: 0.875rem; color: var(--cab-gray);
  margin: 0.75rem 0 1rem;
}

.before-after {
  display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;
}
.ba-panel { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--cab-border); }
.ba-panel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.75rem 1rem; background: rgba(255, 87, 87, 0.92); color: var(--cab-white);
  font-family: var(--cab-font-spec); font-size: 0.875rem; text-transform: uppercase;
}
.ba-panel--before .ba-label { border-top: 3px solid var(--cab-red); }
.ba-panel--after .ba-label { border-top: 3px solid var(--cab-red-light); }

.quote-box {
  /* Picostrap/Bootstrap reboot is dequeued on the front page, so reset the
     UA blockquote margin (1em 40px) that otherwise shrinks each card. */
  margin: 0;
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; padding: 1.25rem; color: var(--cab-gray); font-style: italic;
}

.site-footer {
  background: #f4f8f9; color: var(--cab-charcoal); padding: 0; font-size: 0.9375rem;
}
.footer-main { padding: 2.5rem 0 0; }
.site-footer a { color: var(--cab-red); text-decoration: none; }
.site-footer a:hover { color: #f65050; text-decoration: none; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
.footer-brand-col { text-align: center; }
.footer-order-btn { margin: 0.5rem auto 0; display: inline-flex; min-width: 160px; }
.site-footer .footer-order-btn, .site-footer .footer-order-btn:hover { color: var(--cab-white); }
.footer-social { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--cab-red); color: #fff;
  border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
}
.footer-social a:hover { background: var(--cab-red); color: #fff; }
.footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
}
.footer-col-title {
  font-family: var(--cab-font-head); font-size: 1.35rem; font-weight: 700;
  margin: 0 0 1rem; line-height: 1.1;
}
.footer-col-title--spaced { margin-top: 1.5rem; }
.footer-links, .footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-links li, .footer-contact-list li { margin-bottom: 0.65rem; line-height: 1.45; }
.footer-links a { font-weight: 500; }
.footer-links a::before { content: "› "; color: var(--cab-red); font-weight: 700; }
.footer-contact-list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.footer-icon { flex-shrink: 0; width: 1.25rem; opacity: 0.75; }
.footer-trust-logos { max-width: 280px; width: 100%; height: auto; }
.footer-payment-logos { max-width: 260px; width: 100%; height: auto; }
.footer-disclaimer {
  font-size: 0.8125rem; line-height: 1.55; color: var(--cab-gray);
  text-align: center; margin: 0; padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--cab-border);
}
.footer-bar { background: #fff; border-top: 1px solid var(--cab-border); padding: 1rem 0 1.25rem; }
.footer-bar-inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center;
  gap: 0.75rem 1.5rem; font-size: 0.9375rem;
}
.footer-legal, .footer-copy { margin: 0; }
.footer-copy { color: var(--cab-charcoal); font-weight: 500; }
.footer-meta { font-family: var(--cab-font-spec); font-size: 0.8125rem; color: #9aa3ab; }
.footer-credit {
  background: #fff;
  border-top: 1px solid var(--cab-border);
  padding: 0.85rem 0 1rem;
  text-align: center;
}
.footer-credit p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0;
  color: var(--cab-gray);
  font-size: 0.875rem;
}
.footer-credit a {
  color: var(--cab-charcoal);
  font-weight: 600;
}
.footer-credit a:hover {
  color: var(--cab-red);
}
.footer-credit__heart {
  display: inline-flex;
  align-items: center;
  color: var(--cab-red);
}

@media (min-width: 768px) {
  .nav { display: flex; }
  .mobile-header-actions, .mobile-nav { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr 1.1fr; align-items: start; }
  .footer-brand-col { text-align: center; }
  .split-grid { grid-template-columns: 1fr 1fr; }
  .split-grid--reverse > :first-child { order: 2; }
  .split-grid--reverse > :last-child { order: 1; }
  .resources-grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

@media (max-width: 640px) {
  .header-proof-strip-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
    padding-block: 0.55rem;
  }
  .header-proof-strip { font-size: 0.875rem; }
  .before-after { grid-template-columns: 1fr; }
  .product-promo-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .product-promo-copy .btn--light { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .product-card, .btn { transition: none; }
  .hero__yt { display: none; }
  .hero--video {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.88) 0%, rgba(16, 24, 32, 0.82) 55%, rgba(0, 0, 0, 0.72) 100%),
      url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
  }
}

/* ---------- Contact page ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--cab-surface-alt) 0%, var(--cab-white) 100%);
  border-bottom: 1px solid var(--cab-border);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1rem; }
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.btn--ghost { background: transparent; color: var(--cab-blue); border-color: var(--cab-blue); }
.btn--ghost:hover { background: var(--cab-blue); color: var(--cab-white); }

.contact-page { background: var(--cab-white); }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  align-items: start;
}
.contact-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.25rem; }
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-details li { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-details__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 6px;
  background: var(--cab-surface-alt); color: var(--cab-red);
  display: grid; place-items: center; font-size: 1.15rem;
}
.contact-details strong {
  display: block; font-family: var(--cab-font-head); font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cab-gray); margin-bottom: 0.2rem;
}
.contact-details a, .contact-details span:not(.contact-details__icon) {
  color: var(--cab-charcoal); text-decoration: none; font-weight: 600;
}
.contact-details a:hover { color: #f65050; text-decoration: none; }

.contact-form-wrap {
  background: var(--cab-bg);
  border: 1px solid var(--cab-border);
  border-radius: 6px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.contact-form-wrap__head { margin-bottom: 1rem; }
.contact-form-wrap__head h2 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin: 0 0 0.25rem; }
.contact-form-wrap__head p { margin: 0; color: var(--cab-gray); font-size: 0.9rem; }

/* Narrative Forms plugin output */
.nrfm-form { display: grid; gap: 1rem; }
.nrfm-message { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 0.5rem; }
.nrfm-message.nrfm-success { background: #e6f4ea; color: var(--cab-success); border: 1px solid #bfe3c4; }
.nrfm-message.nrfm-error { background: #fdecec; color: var(--cab-red-dark); border: 1px solid #f5b6b6; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
.contact-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.contact-form__field--full { margin: 0; }
.nrfm-form input[type="text"],
.nrfm-form input[type="email"],
.nrfm-form input[type="tel"],
.nrfm-form textarea,
.nrfm-form select {
  width: 100%; border: 1px solid var(--cab-border); border-radius: 4px;
  padding: 0.65rem 0.75rem; font: inherit; font-size: 1rem; color: var(--cab-charcoal);
  background: var(--cab-white); transition: border-color 0.15s, box-shadow 0.15s;
}
.nrfm-form input:focus, .nrfm-form textarea:focus, .nrfm-form select:focus {
  outline: none; border-color: var(--cab-blue); box-shadow: 0 0 0 3px rgba(0, 76, 192, 0.15);
}
.nrfm-form textarea { resize: vertical; }
.nrfm-form .contact-form__submit { margin-top: 0.25rem; width: 100%; }
.nrfm-form .nrfm-fields-wrap { display: grid; gap: 1rem; }

.contact-faq { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--cab-bg); border-top: 1px solid var(--cab-border); }
.contact-faq h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.5rem; text-align: center; }
.contact-faq__list { max-width: 760px; margin-inline: auto; }
.contact-faq details {
  border: 1px solid rgba(255, 87, 87, 0.35); border-radius: 4px;
  padding: 0.85rem 1.1rem; margin-bottom: 0.75rem; background: var(--cab-white);
}
.contact-faq details[open] { border-color: var(--cab-red); }
.contact-faq summary { cursor: pointer; font-weight: 600; }
.contact-faq summary:hover { color: var(--cab-red); }
.contact-faq p { margin: 0.75rem 0 0; }

@media (max-width: 767px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
}

/* Service article pages */
.article-page {
  background: var(--cab-white);
}
.article-content {
  max-width: 880px;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.article-hero-img {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--cab-border);
  border-radius: 6px;
  background: var(--cab-bg);
}
.article-hero-img img {
  width: 100%;
}
.article-section {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.article-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.85rem;
}
.article-internal-links {
  margin: 0;
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  background: var(--cab-white);
}
.article-internal-links .container {
  max-width: 880px;
}
.article-internal-links p {
  color: var(--cab-gray);
  line-height: 1.7;
}
.article-internal-links a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-faq {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--cab-bg);
  border-top: 1px solid var(--cab-border);
}
.article-faq .container {
  max-width: 760px;
}
.article-faq h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  margin-bottom: 1.25rem;
  text-align: center;
}
.article-faq__list {
  max-width: 680px;
  margin-inline: auto;
}
.article-faq details {
  border: 1px solid rgba(255, 87, 87, 0.22);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.55rem;
  background: rgba(255, 255, 255, 0.72);
}
.article-faq details[open] {
  border-color: rgba(255, 87, 87, 0.45);
  background: var(--cab-white);
}
.article-faq summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.article-faq summary:hover {
  color: var(--cab-red);
}
.article-faq p {
  margin: 0.6rem 0 0;
  color: var(--cab-gray);
  font-size: 0.95rem;
}
.article-cta {
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--cab-bg);
}
.article-cta .page-hero-cta {
  justify-content: center;
}

/* FAQ accordion (cab-faq) -- migrated Avada toggles, Bootstrap 5 collapse */
.cab-faq { --bs-accordion-border-color: var(--cab-border); border-radius: 0.5rem; overflow: hidden; margin: 0 0 1.5rem; }
.cab-faq .accordion-item { background: #fff; border: 1px solid var(--cab-border); border-bottom: 0; }
.cab-faq .accordion-item:last-child { border-bottom: 1px solid var(--cab-border); }
.cab-faq .accordion-button {
  position: relative; width: 100%; text-align: left; background: #fff; color: var(--cab-charcoal);
  font-family: var(--cab-font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.25;
  padding: 1rem 3.25rem 1rem 1rem; border: 0; box-shadow: none;
}
.cab-faq .accordion-button:hover { color: var(--cab-red); background: var(--cab-surface-alt); }
.cab-faq .accordion-button:not(.collapsed) { color: var(--cab-charcoal); background: var(--cab-surface-alt); }
.cab-faq .accordion-button:focus { box-shadow: none; outline: 2px solid var(--cab-blue); outline-offset: -2px; }
.cab-faq .accordion-button::after {
  background-image: none; content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; margin-left: 0; flex-shrink: 0; font-family: var(--cab-font-head); font-weight: 700;
  font-size: 1.625rem; line-height: 1; color: var(--cab-red); text-align: center;
}
.cab-faq .accordion-button:not(.collapsed)::after { content: "\2212"; color: var(--cab-red); }
.cab-faq .accordion-body { padding: 0 1rem 1.25rem; color: var(--cab-gray); font-size: 0.9375rem; line-height: 1.6; }
.cab-faq .accordion-body p:last-child { margin-bottom: 0; }
.cab-faq .accordion-body a { color: var(--cab-red); }
.cab-faq .accordion-body a:hover { color: #f65050; text-decoration: none; }

/* Blog listing (page 58) -- 3-col grid like live site */
.blog-wrap { padding-top: 2rem; padding-bottom: 3rem; }
.blog-header { margin-bottom: 1.5rem; border-bottom: 1px solid var(--cab-border); padding-bottom: 1rem; }
.blog-result-count { margin: 0; font-family: var(--cab-font-spec); font-size: 0.8125rem; color: #6b7480; text-transform: uppercase; letter-spacing: 0.04em; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cab-border); border-bottom: 3px solid var(--cab-red); border-radius: 0.5rem; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.blog-card:hover { box-shadow: 0 10px 28px rgba(0,76,192,.12); transform: translateY(-3px); }
.blog-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--cab-surface-alt); overflow: hidden; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.04); }
.blog-card__thumb--empty { display: flex; align-items: center; justify-content: center; }
.blog-card__thumb--empty span { font-family: var(--cab-font-head); font-weight: 700; color: var(--cab-blue); opacity: .45; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
.blog-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.35rem 1.5rem; flex: 1 1 auto; }
.blog-card__meta { margin: 0 0 0.5rem; font-family: var(--cab-font-spec); font-size: 0.75rem; color: #6b7480; text-transform: uppercase; letter-spacing: 0.04em; }
.blog-card__meta time { color: var(--cab-blue); font-weight: 600; }
.blog-card__title { font-family: var(--cab-font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin: 0 0 0.65rem; }
.blog-card__title a { color: var(--cab-charcoal); text-decoration: none; }
.blog-card__title a:hover { color: #f65050; text-decoration: none; }
.blog-card__excerpt { color: var(--cab-gray); font-size: 0.9375rem; line-height: 1.55; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__more { margin-top: auto; font-family: var(--cab-font-head); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cab-red); text-decoration: none; }
.blog-card__more::after { content: " \203a"; }
.blog-card__more:hover { color: var(--cab-blue); }

.resources-page .page-title__lede {
  max-width: 54rem;
  margin: 0.35rem 0 0;
  color: var(--cab-gray);
  font-size: 1rem;
  line-height: 1.55;
}
.resources-page .article-page {
  background: var(--cab-bg);
}
.resources-page .article-content {
  max-width: 1120px;
  padding: 2rem 0 3rem;
}
.resources-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.resources-list article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cab-white);
  border: 1px solid var(--cab-border);
  border-bottom: 3px solid var(--cab-red);
  border-radius: 0.5rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.resources-list article:hover {
  box-shadow: 0 10px 28px rgba(0,76,192,.12);
  transform: translateY(-3px);
}
.resources-list .slides {
  margin: 0;
  padding: 0;
  list-style: none;
}
.resources-list .slides a,
.resources-list article > a {
  display: block;
}
.resources-list img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--cab-surface-alt);
  transition: transform .3s ease;
}
.resources-list article:hover img {
  transform: scale(1.04);
}
.resources-list article:not(:has(img))::before {
  content: "Resource";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--cab-surface-alt);
  color: var(--cab-blue);
  font-family: var(--cab-font-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.resources-list h2 {
  padding: 1.25rem 1.35rem 0;
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  line-height: 1.2;
}
.resources-list h2 a {
  color: var(--cab-charcoal);
  text-decoration: none;
}
.resources-list h2 a:hover {
  color: var(--cab-red);
}
.resources-list p {
  padding: 0 1.35rem 1.5rem;
  margin: 0;
  color: var(--cab-gray);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.resources-page .article-faq {
  border-top: 1px solid var(--cab-border);
}

@media (min-width: 600px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .resources-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .resources-list { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
@media (max-width: 599px) {
  .blog-grid { gap: 1.25rem; }
  .blog-card__title { font-size: 1.1rem; }
  .resources-list { gap: 1.25rem; }
  .resources-list h2 { font-size: 1.1rem; }
}

/* Homepage inline video (replaces product-lineup image) */
.home-video { border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--cab-border); box-shadow: 0 12px 30px rgba(0,76,192,.12); }
.home-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* B7 Retrofit spec band -- 3-col, matches live site */
.cab-spec-band { background: var(--cab-surface-alt); padding: 70px 0; }
.cab-spec-band__row { display: flex; flex-wrap: wrap; max-width: 1216px; margin: 0 auto; align-items: stretch; }
.cab-spec-band__img { flex: 0 0 30%; overflow: hidden; display: flex; }
.cab-spec-band__img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.cab-spec-band__img--left { border-radius: 40px 0 0 40px; }
.cab-spec-band__img--right { border-radius: 0 40px 40px 0; }
.cab-spec-band__center { flex: 0 0 40%; background: var(--cab-white); padding: 60px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; }
.cab-spec-band__center h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.cab-spec-band__center p { margin: 0 auto; font-size: 1.0625rem; line-height: 1.55; color: var(--cab-gray); max-width: 38ch; }
.cab-spec-title { display: flex; align-items: center; justify-content: center; gap: 0.85rem; width: 100%; text-align: center; }
.cab-spec-title::before, .cab-spec-title::after { content: ""; flex: 1 1 0; min-width: 0; height: 0; border-top: 2px solid var(--cab-border); }
.cab-spec-band .cab-spec-band__center {
  align-items: center !important;
  text-align: center !important;
}
.cab-spec-band .cab-spec-band__row {
  max-width: 1216px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.cab-spec-band .cab-spec-band__center .lc-block {
  width: 100%;
}
.cab-spec-band .cab-spec-band__center p {
  margin-inline: auto !important;
}
.cab-spec-band .cab-spec-band__center .btn {
  margin-inline: auto !important;
}
@media (max-width: 991px) {
  .cab-spec-band { padding: 48px 0; }
  .cab-spec-band__row { gap: 1rem; }
  .cab-spec-band__img { flex: 0 0 100%; }
  .cab-spec-band__img--left, .cab-spec-band__img--right { border-radius: 40px; }
  .cab-spec-band__img img { min-height: 220px; }
  .cab-spec-band__center { flex: 0 0 100%; padding: 40px 24px; }
}

/* Steps section polish -- smaller icons + text, refined cards */
.section--airy .step-card { padding: 1.5rem 1.25rem; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.section--airy .step-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,76,192,.10); }
.section--airy .step-card img { width: 56px; height: 56px; margin: 0 auto 0.75rem; }
.section--airy .step-card h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.section--airy .step-card p { font-size: 0.875rem; line-height: 1.5; max-width: 26ch; }
.section--airy .section-head .eyebrow { font-size: 0.75rem; margin-bottom: 0.5rem; }
.section--airy .section-head h2 { font-size: 1.75rem; }
.section--airy .section-head .lede { font-size: 0.9375rem; }
@media (max-width: 599px) {
  .section--airy .step-card img { width: 48px; height: 48px; }
  .section--airy .section-head h2 { font-size: 1.5rem; }
}

/* Product page - flat description + FAQ below summary */
/* WooCommerce floats the gallery left and .summary right. Without clear:both the
   lower copy started inside the summary column and wrapped around the gallery,
   so the top and bottom blocks read as one merged column. */
.cab-product-below {
  clear: both;
  max-width: 880px;
  margin: 3rem auto 0;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--cab-border);
}
.cab-product-desc { margin-bottom: 3rem; line-height: 1.7; color: var(--cab-gray); font-size: 1rem; }
.cab-product-desc h2, .cab-product-desc h3, .cab-product-desc h4 { color: var(--cab-charcoal); margin: 2rem 0 0.75rem; font-family: var(--cab-font-head); }
.cab-product-desc > :first-child { margin-top: 0; }
.cab-product-desc ul, .cab-product-desc ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.cab-product-desc li { margin-bottom: 0.5rem; }
.cab-product-desc h2 { font-size: 1.5rem; }
.cab-product-desc h3 { font-size: 1.25rem; }
.cab-product-desc h4 { font-size: 1.0625rem; }
.cab-product-desc p { margin: 0 0 1rem; }
.cab-product-desc hr { border: 0; border-top: 1px solid var(--cab-border); margin: 1.75rem 0; }
.cab-product-desc strong { color: var(--cab-charcoal); }
.cab-product-faq { max-width: 820px; margin: 0 auto; }
.cab-faq-title { display: flex; align-items: center; gap: 1rem; text-align: center; font-family: var(--cab-font-head); font-size: 1.5rem; font-weight: 600; text-transform: uppercase; color: var(--cab-charcoal); margin: 0 0 1.75rem; }
.cab-faq-title::before, .cab-faq-title::after { content: ""; flex: 1; height: 0; border-top: 2px solid var(--cab-border); }
@media (max-width: 599px) {
  .cab-product-below { margin-top: 2rem; padding-bottom: 2rem; }
  .cab-faq-title { font-size: 1.25rem; gap: 0.75rem; }
}

/* Product page - Authorize.Net payment logo under add-to-cart */
.cab-payment-logo { margin: 1rem 0 0; }
.cab-payment-logo img { max-width: 260px; width: 100%; height: auto; display: block; }

/* CAB_FOOTER_DISCLAIMER_MEASURE_V1
   .footer-disclaimer already has text-align:center, but the paragraph fills the
   full container so every line except the last is full width and it reads as
   left-aligned. Constrain the measure with horizontal padding rather than
   max-width, so the border-top still spans the full footer width. */
@media (min-width: 768px) {
  .footer-disclaimer { padding-inline: 10%; }
}
@media (min-width: 1200px) {
  .footer-disclaimer { padding-inline: 15%; }
}


/* ===== CAB_NAV_DROP_V1 - Phase 1 de-orphan: Services dropdown in primary nav ===== */
.nav-drop { position: relative; }
.nav-drop-toggle::after { content: " \25BE"; font-size: 0.8em; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; min-width: 270px; padding: 0.4rem 0;
  background: var(--cab-white); border: 1px solid var(--cab-border);
  border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nav-drop:hover > .nav-drop-menu,
.nav-drop:focus-within > .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: block; padding: 0.5rem 1rem;
  font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.nav-drop-menu a:hover, .nav-drop-menu a:focus { color: var(--cab-red); background: #f5f5f5; }
/* ===== END CAB_NAV_DROP_V1 ===== */

/* ===== CAB_SINGLE_POST_V1 - single.php post page ===== */

.cab-post { background: var(--cab-bg); }

/* Header band */
.cab-post-hero {
  background: var(--cab-surface-alt);
  border-bottom: 1px solid var(--cab-border);
  padding: 2rem 0 2.25rem;
}
.cab-post-crumbs {
  font-family: var(--cab-font-spec); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7480; margin-bottom: 0.85rem;
}
.cab-post-crumbs a { color: #6b7480; }
.cab-post-crumbs a:hover { color: var(--cab-red); }
.cab-post-crumbs span { margin: 0 0.4rem; }
.cab-post-cat {
  font-family: var(--cab-font-spec); font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cab-blue); margin: 0 0 0.5rem;
}
.cab-post-title {
  font-size: clamp(2rem, 4.5vw, 3.15rem);
  line-height: 1.08; margin: 0 0 1rem;
}
.cab-post-standfirst {
  font-size: 1.125rem; line-height: 1.55; color: var(--cab-gray); margin: 0;
}

/* Featured image - pulled up over the band edge */
.cab-post-media {
  margin: -1.25rem 0 0; border-radius: 0.5rem; overflow: hidden;
  border: 1px solid var(--cab-border); border-bottom: 3px solid var(--cab-red);
  background: var(--cab-white); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.cab-post-media img { width: 100%; height: auto; display: block; }

/* Article body */
.cab-post-content {
  background: var(--cab-white);
  border: 1px solid var(--cab-border);
  border-radius: 0.5rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  margin: 2rem 0 3rem;
  font-size: 1.0625rem; line-height: 1.7; color: var(--cab-charcoal);
}
.cab-post-content > :first-child { margin-top: 0; }
.cab-post-content > :last-child { margin-bottom: 0; }
.cab-post-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.25rem 0 0.85rem; }
.cab-post-content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 1.85rem 0 0.7rem; }
.cab-post-content h4 { font-size: 1.15rem; margin: 1.5rem 0 0.6rem; }
.cab-post-content ul, .cab-post-content ol { padding-left: 1.35rem; margin: 0 0 1.25rem; }
.cab-post-content li { margin-bottom: 0.55rem; }
.cab-post-content a { text-decoration: underline; text-underline-offset: 2px; }
.cab-post-content blockquote {
  margin: 1.75rem 0; padding: 0.35rem 0 0.35rem 1.25rem;
  border-left: 3px solid var(--cab-red); color: var(--cab-gray); font-style: italic;
}
/* Migrated Avada bodies ship raw <video>/<iframe>; keep every embed inside the card. */
.cab-post-content img,
.cab-post-content video,
.cab-post-content iframe,
.cab-post-content embed,
.cab-post-content object {
  max-width: 100%; height: auto; display: block; margin-inline: auto; border-radius: 4px;
}
.cab-post-content iframe, .cab-post-content video { aspect-ratio: 16 / 9; width: 100%; }
.cab-post-content figure { margin: 1.75rem 0; }
.cab-post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.cab-post-content th, .cab-post-content td { border: 1px solid var(--cab-border); padding: 0.6rem 0.75rem; text-align: left; }
.cab-post-content th { background: var(--cab-surface-alt); font-family: var(--cab-font-spec); }

/* Conversion band */
.cab-post-cta {
  background: var(--cab-charcoal); color: var(--cab-white);
  padding: 3rem 0; text-align: center;
}
.cab-post-cta h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 0.65rem; }
.cab-post-cta p { color: #d8dde2; margin: 0 auto 1.5rem; }
.cab-post-cta__actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 0;
}
.cab-post-cta .btn--ghost { color: var(--cab-white); border-color: var(--cab-white); }
.cab-post-cta .btn--ghost:hover { background: var(--cab-white); color: var(--cab-charcoal); }

/* Related */
.cab-post-related { padding: 3rem 0 3.5rem; }
.cab-post-related__head {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 0 0 1.5rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--cab-border);
}
.cab-post-related__all { margin: 1.75rem 0 0; text-align: center; }
.cab-post-related__all a {
  font-family: var(--cab-font-head); font-weight: 700; font-size: 0.9375rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--cab-red);
}
.cab-post-related__all a::after { content: " \203a"; }

/* ===== END CAB_SINGLE_POST_V1 ===== */


/* ===== CAB_HEADER_NAV_V2 - right-aligned, lighter nav + live-site hover ===== */

/* Push the primary nav to the right edge. .header-inner is space-between with
   three children, and the (desktop-hidden) menu-toggle wrapper is still a flex
   item, so the nav was parked ~300px short of the right. */
@media (min-width: 768px) {
  .header-inner { justify-content: flex-start; }
  .header-inner > .nav { margin-left: auto; }
}

/* Smaller, lighter menu items (was 0.95rem / 600). */
.nav { gap: 0.25rem; }
.nav > .lc-block > a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Live-site hover: two 2px rules sweep out from the centre to bracket the item,
   and the label turns brand red. Matches Avada's awb-menu background-active
   (scaleX 0 -> 1, 300ms cubic-bezier(.42,.01,.58,1)). */
.nav > .lc-block > a:not(.nav-phone):not(.nav-cart) {
  position: relative;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  transition: color 0.3s cubic-bezier(0.42, 0.01, 0.58, 1);
}
.nav > .lc-block > a:not(.nav-phone):not(.nav-cart)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 2px solid var(--cab-red);
  border-right: 2px solid var(--cab-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.58, 1);
  pointer-events: none;
}
.nav > .lc-block > a:not(.nav-phone):not(.nav-cart):hover::before,
.nav > .lc-block > a:not(.nav-phone):not(.nav-cart):focus-visible::before,
.nav > .lc-block > a:not(.nav-phone):not(.nav-cart)[aria-current="page"]::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .nav > .lc-block > a::before { transition: none; }
}

/* Cart button: subtotal + bag, filled like the live site's header button. */
.nav a.nav-cart, .nav-cart {
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: var(--cab-red);
  color: var(--cab-white);
  font-family: var(--cab-font-spec);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.42, 0.01, 0.58, 1);
}
.nav a.nav-cart:hover, .nav a.nav-cart:focus-visible { background: var(--cab-red-dark); color: var(--cab-white); }
.nav a.nav-cart .nav-cart-total { color: inherit; }
.nav a.nav-cart .nav-cart-total .woocommerce-Price-amount { color: inherit; font-weight: 600; text-decoration: none; }
.nav-cart .nav-cart-icon { flex: 0 0 auto; }
/* Count rides as a badge on the button corner once something is in the cart. */
.nav-cart .nav-cart-count {
  background: var(--cab-charcoal);
  color: var(--cab-white);
}

/* ===== END CAB_HEADER_NAV_V2 ===== */

/* Mobile menu cart entry (desktop nav cart is inside .nav, which is hidden < 768px). */
.mobile-nav .mobile-nav-cart { margin-top: 0.5rem; }
.mobile-nav .mobile-nav-cart a.nav-cart {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; border-radius: 4px;
  background: var(--cab-red); color: var(--cab-white);
  font-family: var(--cab-font-spec); font-size: 0.9375rem; font-weight: 600; line-height: 1;
}
.mobile-nav .mobile-nav-cart a.nav-cart .woocommerce-Price-amount { color: inherit; }

/* Phone sits before the cart button; give that pair room to breathe. */
.nav > .lc-block:has(> .nav-phone) { margin-left: 0.75rem; }
.nav > .lc-block:has(> .nav-cart) { margin-left: 1.25rem; }

/* ===== CAB_PAGE_TITLE_V1 =====
   Compact page title for pages that don't warrant the .page-hero banner.
   Keeps the <h1> (the only one on these pages) without the gradient band or
   the Shop/call CTA pair, which read as filler on utility pages. */
.page-title { padding: 2.25rem 0 0.75rem; }
.page-title h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin: 0; }
@media (max-width: 640px) {
  .page-title { padding: 1.5rem 0 0.5rem; }
}
/* ===== END CAB_PAGE_TITLE_V1 ===== */

/* ===== CAB_PRODUCT_META_V1 - Categories / Tags on the single product page ===== */
.cab-product-meta {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cab-border);
  font-family: var(--cab-font-spec);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cab-gray);
}
.cab-product-meta > span { display: block; }
.cab-product-meta > span + span { margin-top: 0.35rem; }
.cab-product-meta .cab-meta-label {
  display: inline-block;
  min-width: 5.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cab-charcoal);
}
.cab-product-meta a { color: var(--cab-red); }
.cab-product-meta a:hover { color: var(--cab-blue); text-decoration: underline; }
/* ===== END CAB_PRODUCT_META_V1 ===== */

/* Hide the subtle background utility when it is used as a decorative wrapper. */
.bg-light-subtle { display: none !important; }

/* CAB_HEADER_LOGO_V3
   Logo lifted out of flow so it hangs below the header onto the hero.

   - The light bar was .site-header's margin-bottom (32/26px) showing the page
     background between the header and the dark hero. Zeroed.
   - The logo is position:absolute, so .brand reserves its width explicitly,
     otherwise the <picture> box collapses and the space-between nav slides left.
   - top:50% + translateY(-50% + droop) centres the logo on the header row and
     then pushes it down. --cab-logo-droop is the single knob for how far it
     hangs; raise it to droop more, lower it to tuck back up.
   - EWWW renders the logo as <picture> + a lazyload placeholder + a <noscript>
     fallback, so all three image forms are targeted. */

:root { --cab-logo-droop: 26px; }

.site-header { margin-bottom: 0; }

.brand {
  position: relative;
  z-index: 3;
  width: min(230px, 46vw);
  min-height: 48px;
  flex: 0 0 auto;
}

.brand picture {
  display: block;
  line-height: 0;
  font-size: 0;
}

.brand-logo,
img.brand-logo,
.brand picture img,
.brand picture img.brand-logo,
.brand img.brand-logo.lazyload,
.brand noscript img.brand-logo {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  max-height: 96px;
  max-width: min(230px, 46vw);
  margin-block: 0;
  transform: translateY(calc(-50% + var(--cab-logo-droop)));
}

@media (max-width: 767px) {
  :root { --cab-logo-droop: 20px; }

  .site-header { margin-bottom: 0; }

  .brand {
    width: min(190px, 52vw);
  }

  .brand-logo,
  img.brand-logo,
  .brand picture img,
  .brand picture img.brand-logo,
  .brand img.brand-logo.lazyload,
  .brand noscript img.brand-logo {
    max-height: 82px;
    max-width: min(190px, 52vw);
  }
}

/* CAB_HERO_MOBILE_NOVIDEO_V1
   The hero <video> is autoplay/muted/loop/playsinline with no controls, but when
   mobile autoplay is refused (iOS Low Power Mode, data saver, or simply the weight
   of the Mux "highest" rendition) the browser falls back to its own poster + play
   glyph. That control is not ours, cannot be styled away, and does nothing here,
   so the video is removed from mobile entirely and the still hero image is used.
   cab.js also drops the <video> node on small screens so the file is not fetched. */
@media (max-width: 767px) {
  .hero__yt { display: none; }
  .hero--video {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.88) 0%, rgba(16, 24, 32, 0.82) 55%, rgba(0, 0, 0, 0.72) 100%),
      url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
  }
}

/* CAB_HERO_VIDEO_NOCONTROLS_V1
   The hero video must never present a control. It has no `controls` attribute,
   but Safari/iOS still paints a start-playback button from the media controls
   shadow DOM when autoplay is refused, and that button is often inert. These
   rules remove every part of that shadow UI and make the element untappable,
   so the video either plays silently or is replaced by the still (cab.js drops
   the node if playback never starts). */
.hero__yt video {
  pointer-events: none;
}
.hero__yt video::-webkit-media-controls,
.hero__yt video::-webkit-media-controls-enclosure,
.hero__yt video::-webkit-media-controls-panel,
.hero__yt video::-webkit-media-controls-panel-container,
.hero__yt video::-webkit-media-controls-overlay-play-button,
.hero__yt video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* CAB_HERO_AWARD_OVERLAY_V1 */
.hero-award {
  position: absolute;
  z-index: 1;
  right: clamp(18rem, 34vw, 30rem);
  top: 38%;
  width: clamp(150px, 16vw, 230px);
  aspect-ratio: 1;
  opacity: 0.68;
  background: url('/wp-content/uploads/2026/09/WOC24_IPA_Experts-Choice-Winner-Icon-1.png.webp') center / contain no-repeat;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.42));
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-award {
    top: 1.5rem;
    right: 1rem;
    width: clamp(82px, 25vw, 112px);
    opacity: 0.34;
    transform: none;
  }
}
/* END CAB_HERO_AWARD_OVERLAY_V1 */

/* CAB_HERO_OVERLAY_V1
   Lightened hero shading. Two layers stack: .hero__overlay sits over the video,
   and .hero--video's own gradient shows when the video is absent (mobile, and
   reduced-motion). The mobile pair was the darkest at 0.88/0.82, so it is
   brought into line with the rest.

   The 105deg angle keeps the left side darkest deliberately - the headline and
   copy sit there and need the contrast - while the right, where the footage is
   worth seeing, opens up. Raise the first stop if white text ever looks weak. */

.hero__overlay {
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.26) 52%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 58%);
}

.hero--video {
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.26) 52%, rgba(0, 0, 0, 0.38) 100%),
    url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
}

@media (max-width: 767px) {
  .hero--video {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.70) 0%, rgba(16, 24, 32, 0.52) 55%, rgba(0, 0, 0, 0.48) 100%),
      url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--video {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.70) 0%, rgba(16, 24, 32, 0.52) 55%, rgba(0, 0, 0, 0.48) 100%),
      url('/wp-content/uploads/2026/09/Standard-retrofit-replacement-anchors-Concrete-Anchor-Bolts.jpg.webp') center/cover;
  }
}

/* CAB_HEADER_NO_OVERFLOW_V1
   Header was pushing the page wider than the viewport on mobile.

   Root cause: flex items default to min-width:auto, so they refuse to shrink
   below their content. The header row and the menu carry unbreakable strings -
   "Concrete Anchor Bolt Replacement", the tel: number, the cart total - which
   then force .header-inner wider than .container instead of wrapping. Setting
   min-width:0 lets them shrink, which is the actual fix; the caps below stop
   anything else in the header escaping the container.

   overflow-x uses `clip`, not `hidden`, on purpose: `hidden` on html/body makes
   an ancestor scroll container and silently kills position:sticky, which the
   header depends on. `clip` trims the same overflow without that side effect. */

html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 767px) {
  .site-header,
  .header-proof-strip,
  .header-proof-strip-inner,
  .header-inner,
  .mobile-nav,
  .mobile-nav > .container {
    max-width: 100%;
    min-width: 0;
  }

  /* let the row's children shrink instead of forcing the row wider */
  .header-inner { flex-wrap: nowrap; }
  .header-inner > * { min-width: 0; }

  .brand { max-width: min(190px, 52vw); }

  .mobile-header-actions {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .mobile-header-actions .nav-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    max-width: 34vw;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(255, 87, 87, 0.55);
    border-radius: 2px;
    background: rgba(255, 87, 87, 0.08);
    color: var(--cab-red) !important;
    font-family: var(--cab-font-spec);
    font-size: 0.875rem;
    font-weight: 700 !important;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-header-actions .nav-phone:hover,
  .mobile-header-actions .nav-phone:focus-visible {
    background: var(--cab-red);
    color: var(--cab-white) !important;
  }

  .mobile-nav a[href^="tel:"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 0.45rem;
    padding: 0.62rem 0.85rem;
    border: 1px solid rgba(255, 87, 87, 0.55);
    border-radius: 2px;
    background: rgba(255, 87, 87, 0.08);
    color: var(--cab-red);
    font-family: var(--cab-font-spec);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-nav a[href^="tel:"]:hover,
  .mobile-nav a[href^="tel:"]:focus-visible {
    background: var(--cab-red);
    color: var(--cab-white);
  }

  /* long menu labels wrap rather than stretch the panel */
  .mobile-nav ul,
  .mobile-nav li,
  .mobile-nav a,
  .mobile-nav-submenu,
  .mobile-nav-submenu a {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* the red strip's longest line is the patent number - let it wrap too */
  .header-proof-strip span,
  .header-proof-strip a { overflow-wrap: anywhere; }
}

/* CAB_YOUTUBE_SHORTS_V1 */
.cab-shorts {
  background: var(--cab-white);
}
.cab-shorts-head {
  max-width: 760px;
}
.cab-shorts-head p {
  color: var(--cab-gray);
}
.cab-shorts-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 280px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding: 0 0 1rem;
  scrollbar-color: var(--cab-red) #eceff3;
}
.cab-short-card {
  min-width: 0;
  scroll-snap-align: start;
}
.cab-short-frame {
  overflow: hidden;
  border-radius: 5px;
  background: var(--cab-charcoal);
  border: 1px solid var(--cab-border);
  border-bottom: 3px solid var(--cab-red);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.cab-short-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
}
.cab-short-card > a {
  display: block;
  margin-top: 0.85rem;
  color: var(--cab-charcoal);
  font-family: var(--cab-font-head);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.12;
  text-decoration: none;
}
.cab-short-card > a:hover,
.cab-short-card > a:focus-visible {
  color: var(--cab-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cab-shorts-cta {
  margin-top: 1rem;
}
@media (min-width: 1100px) {
  .cab-shorts-strip {
    grid-auto-columns: minmax(245px, 1fr);
  }
}
@media (max-width: 599px) {
  .cab-shorts-strip {
    grid-auto-columns: minmax(210px, 78vw);
  }
  .cab-short-card > a {
    font-size: 1.05rem;
  }
}
/* END CAB_YOUTUBE_SHORTS_V1 */


/* ===== CAB_HOME_INLINE_STYLES_V1 - moved from homepage content to reduce HTML transfer ===== */
.cab-products {
	--cab-pink: #F06F6F;
	--cab-pink-dark: #D95E5E;
	--cab-ink: #242424;
}


/* GRID */

.cab-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}


/* PRODUCT */

.cab-product {
	min-width: 0;
}


/* MAIN VISUAL */

.cab-product__visual {
	position: relative;

	height: clamp(340px, 31vw, 440px);

	overflow: hidden;

	border-radius: 5px;

	background: var(--cab-pink);
}


/* SUBTLE TECHNICAL GRID */

.cab-product__visual::before {
	content: "";

	position: absolute;
	inset: -20px;

	z-index: 1;

	background-image:
		linear-gradient(
			rgba(255,255,255,.055) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.055) 1px,
			transparent 1px
		);

	background-size: 38px 38px;

	pointer-events: none;

	transition:
		transform .55s cubic-bezier(.2,.8,.2,1);
}


/* MAIN WHITE PRODUCT IMAGE */

.cab-product__hero {
	position: absolute;

	z-index: 2;

	top: 40%;
	left: 50%;

	width: auto;

	max-width: 46%;
	max-height: 62%;

	object-fit: contain;

	transform: translate(-50%, -50%);

	filter:
		drop-shadow(
			0 16px 24px rgba(65,20,35,.12)
		);

	transition:
		transform .45s cubic-bezier(.2,.8,.2,1),
		opacity .3s ease,
		filter .3s ease;

	will-change: transform;
}


/* NORMAL HOVER */

.cab-product__visual:hover .cab-product__hero {
	transform:
		translate(-50%, -53%)
		scale(1.035);

	filter:
		drop-shadow(
			0 22px 32px rgba(65,20,35,.18)
		);
}


.cab-product__visual:hover::before {
	transform: translate(7px, -5px);
}


/* NUMBER */

.cab-product__number {
	position: absolute;

	z-index: 3;

	top: 20px;
	right: 22px;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: .16em;

	color: rgba(255,255,255,.72);
}


/* OVERLAY */

.cab-product__overlay {
	position: absolute;

	z-index: 5;

	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	padding: 24px;

	background:
		linear-gradient(
			to bottom,
			transparent 35%,
			rgba(35,8,16,.03) 49%,
			rgba(35,8,16,.73) 100%
		);

	pointer-events: none;

	transition:
		transform .35s ease;
}


.cab-product__visual:hover .cab-product__overlay {
	transform: translateY(-3px);
}


/* TITLE */

.cab-product__eyebrow {
	display: block;

	margin-bottom: 6px;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .15em;

	text-transform: uppercase;

	color: rgba(255,255,255,.72);
}


.cab-product__title-wrap h3 {
	max-width: 315px;

	margin: 0;

	font-size: clamp(1.25rem, 2vw, 1.8rem);

	line-height: 1.05;

	letter-spacing: -.03em;

	color: #fff;
}


/* ACTIONS */

.cab-product__actions {
	position: relative;

	z-index: 10;

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 16px;

	margin-top: 15px;

	pointer-events: auto;
}


.cab-product__action {
	display: inline-flex;
	align-items: center;

	gap: 7px;

	padding: 0;

	border: 0;

	background: transparent;

	font-family: inherit;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: .03em;

	color: #fff;

	text-decoration: none;

	cursor: pointer;

	opacity: .88;

	transition:
		opacity .2s ease,
		transform .2s ease;
}


.cab-product__action:hover,
.cab-product__action:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}


/* ACTION ICON */

.cab-action-icon {
	position: relative;

	display: inline-block;

	width: 24px;
	height: 24px;

	flex: 0 0 24px;

	border: 1px solid rgba(255,255,255,.55);

	border-radius: 50%;
}


/* PLAY ICON */

.cab-action-icon--play::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 54%;

	transform: translate(-50%, -50%);

	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #fff;
}


/* DRAWING ICON */

.cab-action-icon--drawing::before {
	content: "";

	position: absolute;

	top: 5px;
	left: 6px;

	width: 10px;
	height: 13px;

	border: 1px solid #fff;
}


.cab-action-icon--drawing::after {
	content: "";

	position: absolute;

	top: 9px;
	left: 8px;

	width: 6px;
	height: 1px;

	background: #fff;

	box-shadow:
		0 3px 0 #fff,
		0 6px 0 #fff;
}


/* SCHEMATIC SLIDE-IN PANEL */

.cab-product__schematic {
	position: absolute;

	z-index: 4;

	top: 0;
	right: 0;
	bottom: 0;

	width: 68%;

	padding: 24px;

	background: rgba(255,255,255,.98);

	box-shadow:
		-18px 0 35px rgba(25,10,15,.13);

	transform: translateX(105%);

	transition:
		transform .42s cubic-bezier(.2,.8,.2,1);

	pointer-events: none;
}


.cab-product__schematic img {
	display: block;

	width: 100%;
	height: calc(100% - 26px);

	object-fit: contain;
}


.cab-product__schematic span {
	display: block;

	margin-top: 8px;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .14em;

	text-transform: uppercase;

	color: #555;
}


/* SHOW DRAWING ONLY WHEN HOVERING VIEW SCHEMATIC */

.cab-product:has(.cab-product__schematic-trigger:hover)
	.cab-product__schematic,

.cab-product:has(.cab-product__schematic-trigger:focus-visible)
	.cab-product__schematic {
	transform: translateX(0);
}


/* MOVE PRODUCT LEFT WHEN DRAWING APPEARS */

.cab-product:has(.cab-product__schematic-trigger:hover)
	.cab-product__hero,

.cab-product:has(.cab-product__schematic-trigger:focus-visible)
	.cab-product__hero {
	transform:
		translate(-78%, -50%)
		scale(.88) !important;

	opacity: .55;
}


/* DON'T FLOAT TEXT WHILE DRAWING IS OPEN */

.cab-product:has(.cab-product__schematic-trigger:hover)
	.cab-product__overlay,

.cab-product:has(.cab-product__schematic-trigger:focus-visible)
	.cab-product__overlay {
	transform: none;
}


/* PRODUCT LINK BELOW */

.cab-product__link {
	display: inline-block;

	margin-top: 12px;

	padding-bottom: 2px;

	font-size: 13px;
	font-weight: 700;

	color: var(--cab-ink);

	text-decoration: none;

	border-bottom: 1px solid rgba(0,0,0,.25);

	transition:
		border-color .2s ease,
		color .2s ease;
}


.cab-product__link:hover {
	color: var(--cab-pink-dark);
	border-color: var(--cab-pink-dark);
}


/* =========================
   VIDEO MODAL
========================= */

.cab-video-modal {
	position: fixed;

	z-index: 999999;

	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 30px;

	visibility: hidden;

	opacity: 0;

	transition:
		opacity .2s ease,
		visibility .2s ease;
}


.cab-video-modal.is-open {
	visibility: visible;
	opacity: 1;
}


.cab-video-modal__backdrop {
	position: absolute;
	inset: 0;

	background: rgba(10,10,10,.88);

	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}


.cab-video-modal__dialog {
	position: relative;

	z-index: 2;

	width: min(950px, 100%);
}


.cab-video-modal__media {
	position: relative;

	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #000;

	border-radius: 4px;

	box-shadow:
		0 30px 80px rgba(0,0,0,.4);
}


.cab-video-modal__media iframe,
.cab-video-modal__media video {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	border: 0;

	object-fit: contain;
}


.cab-video-modal__close {
	position: absolute;

	z-index: 5;

	top: -50px;
	right: 0;

	width: 40px;
	height: 40px;

	border: 1px solid rgba(255,255,255,.3);

	border-radius: 50%;

	background: rgba(255,255,255,.08);

	font-size: 25px;

	color: #fff;

	cursor: pointer;
}


/* TABLET */

@media (max-width: 900px) {

	.cab-products__grid {
		gap: 12px;
	}

	.cab-product__visual {
		height: 360px;
	}

	.cab-product__hero {
		max-width: 52%;
	}

	.cab-product__overlay {
		padding: 18px;
	}

	.cab-product__actions {
		gap: 10px;
	}

}


/* MOBILE */

@media (max-width: 650px) {

	.cab-products {
		padding-top: 45px;
		padding-bottom: 55px;
	}

	.cab-products__grid {
		grid-template-columns: repeat(3, minmax(250px, 1fr));

		overflow-x: auto;

		padding-bottom: 12px;

		scroll-snap-type: x mandatory;

		-webkit-overflow-scrolling: touch;
	}

	.cab-product {
		scroll-snap-align: start;
	}

	.cab-product__visual {
		height: 365px;
	}

	.cab-product__hero {
		max-width: 54%;
	}

	.cab-product__overlay {
		padding: 18px;
	}

	.cab-product__schematic {
		display: none;
	}

	.cab-product__actions {
		flex-direction: column;
		align-items: flex-start;

		gap: 8px;
	}

	.cab-video-modal {
		padding: 15px;
	}

}

.cab-downloads {
					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
					gap: 10px;
					margin: 0;
					padding: 0;
					list-style: none;
				}

				.cab-downloads li {
					margin: 0;
					padding: 0;
				}

				.cab-download {
					display: flex;
					align-items: center;
					gap: 12px;
					width: 100%;
					min-height: 64px;
					padding: 10px 14px;
					background: #fff;
					border: 1px solid #d8d8d8;
					border-left: 4px solid #111;
					color: #111;
					text-decoration: none;
					transition:
						background-color .18s ease,
						color .18s ease,
						border-color .18s ease,
						transform .18s ease;
				}

				.cab-download:hover {
					background: #111;
					border-color: #111;
					color: #fff;
					text-decoration: none;
					transform: translateY(-1px);
				}

				.cab-download__type {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					flex: 0 0 auto;
					height: 30px;
					padding: 0 8px;
					background: #111;
					color: #fff;
					font-size: 10px;
					font-weight: 800;
					letter-spacing: .08em;
					line-height: 1;
				}

				.cab-download:hover .cab-download__type {
					background: #fff;
					color: #111;
				}

				.cab-download__content {
					flex: 1;
					min-width: 0;
				}

				.cab-download__title {
					display: block;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.2;
				}

				.cab-download__meta {
					display: block;
					margin-top: 3px;
					font-size: 11px;
					font-weight: 500;
					color: #777;
					line-height: 1.35;
				}

				.cab-download:hover .cab-download__meta {
					color: #ccc;
				}

				.cab-download__arrow {
					flex: 0 0 auto;
					font-size: 18px;
					font-weight: 400;
					line-height: 1;
					transition: transform .18s ease;
				}

				.cab-download:hover .cab-download__arrow {
					transform: translateX(3px);
				}

				@media (max-width: 767px) {
					.cab-downloads {
						grid-template-columns: 1fr;
					}
				}

.cab-spec-band {
			width: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background: #fff;
		}

		.cab-spec-band__row {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
			align-items: stretch;
			width: 100%;
			min-height: 340px;
			margin: 0;
			padding: 0;
			gap: 0;
			background: #fff;
			border-top: 1px solid #e0e0e0;
			border-bottom: 1px solid #e0e0e0;
			overflow: hidden;
		}

		.cab-spec-band__row > *,
		.cab-spec-band__row .lc-block {
			min-width: 0;
			margin: 0 !important;
		}

		/* =========================
		   IMAGES
		   ========================= */

		.cab-spec-band__img {
			position: relative;
			display: flex;
			align-items: stretch;
			justify-content: center;
			min-width: 0;
			min-height: 0;
			overflow: hidden;
			padding: 0 !important;
			background: #fff;
		}

		.cab-spec-band__img img {
			display: block;
			width: 100%;
			height: 100%;
			min-width: 0;
			margin: 0 !important;
			padding: 0 !important;
			object-fit: contain;
			object-position: center;
			background: #fff;
			transition:
				transform .5s cubic-bezier(.2,.8,.2,1),
				opacity .35s ease;
		}

		/* soft fade into center so it reads as one composition */

		.cab-spec-band__img--left::after,
		.cab-spec-band__img--right::after {
			content: "";
			position: absolute;
			z-index: 2;
			top: 0;
			bottom: 0;
			width: 22%;
			pointer-events: none;
		}

		.cab-spec-band__img--left::after {
			right: -1px;
			background:
				linear-gradient(
					to right,
					rgba(255,255,255,0),
					rgba(255,255,255,.96)
				);
		}

		.cab-spec-band__img--right::after {
			left: -1px;
			background:
				linear-gradient(
					to left,
					rgba(255,255,255,0),
					rgba(255,255,255,.96)
				);
		}

		/* subtle movement */

		.cab-spec-band__row:hover .cab-spec-band__img--left img {
			transform: translateX(-4px) scale(1.01);
		}

		.cab-spec-band__row:hover .cab-spec-band__img--right img {
			transform: translateX(4px) scale(1.01);
		}


		/* =========================
		   CENTER
		   ========================= */

		.cab-spec-band__center {
			position: relative;
			z-index: 3;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			min-width: 0;

			padding:
				clamp(26px, 3vw, 42px)
				clamp(28px, 4vw, 56px) !important;

			background: #fff;
		}

		.cab-spec-band__center .lc-block {
			width: 100%;
			padding: 0 !important;
		}

		.cab-spec-title {
			max-width: 700px;
			margin: 0 0 12px;
			font-size: clamp(24px, 2.4vw, 38px);
			line-height: 1.04;
			letter-spacing: -.035em;
		}

		.cab-spec-band__center p {
			max-width: 720px;
			margin: 0 0 18px;
			font-size: clamp(14px, 1vw, 17px);
			line-height: 1.55;
		}

		.cab-spec-band__center .btn {
			margin: 0;
			white-space: nowrap;
		}


		/* =========================
		   TABLET
		   ========================= */

		@media (max-width: 991px) {

			.cab-spec-band__row {
				grid-template-columns: 26% 48% 26%;
				min-height: 285px;
			}

			.cab-spec-band__center {
				padding: 22px 24px !important;
			}

			.cab-spec-title {
				font-size: clamp(20px, 3vw, 28px);
			}

			.cab-spec-band__center p {
				font-size: clamp(12px, 1.7vw, 15px);
			}

		}


		/* =========================
		   MOBILE
		   Preserve horizontal shape
		   ========================= */

		@media (max-width: 767px) {

			.cab-spec-band__row {
				grid-template-columns: 27% 46% 27%;
				min-height: 235px;
			}

			.cab-spec-band__center {
				justify-content: center;
				padding: 14px 10px !important;
			}

			.cab-spec-title {
				margin-bottom: 7px;
				font-size: clamp(15px, 4.2vw, 20px);
				line-height: 1.03;
				letter-spacing: -.025em;
			}

			.cab-spec-band__center p {
				display: -webkit-box;
				overflow: hidden;
				margin-bottom: 10px;

				font-size: clamp(9px, 2.4vw, 12px);
				line-height: 1.3;

				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
			}

			.cab-spec-band__center .btn {
				padding: 7px 11px;
				font-size: 10px;
				line-height: 1.1;
			}

			.cab-spec-band__img--left::after,
			.cab-spec-band__img--right::after {
				width: 16%;
			}

			.cab-spec-band__row:hover .cab-spec-band__img--left img,
			.cab-spec-band__row:hover .cab-spec-band__img--right img {
				transform: none;
			}

		}


		/* =========================
		   SMALL PHONE
		   ========================= */

		@media (max-width: 430px) {

			.cab-spec-band__row {
				grid-template-columns: 26% 48% 26%;
				min-height: 215px;
			}

			.cab-spec-band__center {
				padding: 11px 8px !important;
			}

			.cab-spec-title {
				margin-bottom: 6px;
				font-size: clamp(14px, 4.2vw, 18px);
				line-height: 1.03;
			}

			.cab-spec-band__center p {
				margin-bottom: 8px;
				font-size: clamp(8px, 2.3vw, 10px);
				line-height: 1.25;
				-webkit-line-clamp: 4;
			}

			.cab-spec-band__center .btn {
				padding: 6px 9px;
				font-size: 9px;
			}

		}


		/* =========================
		   VERY SMALL PHONE
		   ========================= */

		@media (max-width: 360px) {

			.cab-spec-band__row {
				grid-template-columns: 25% 50% 25%;
				min-height: 205px;
			}

			.cab-spec-title {
				font-size: 13px;
			}

			.cab-spec-band__center p {
				font-size: 8px;
				-webkit-line-clamp: 3;
			}

		}
/* ===== END CAB_HOME_INLINE_STYLES_V1 ===== */


/* ===== IN-PAGE ANCHOR OFFSET V1 =====
   .site-header is position:sticky and ~141px tall, so a jump to #id parked the
   target heading underneath it. scroll-margin-top only applies when an element
   is scrolled into view, so this is inert for normal layout. */
main section[id],
main h1[id],
main h2[id],
main h3[id] {
	scroll-margin-top: 160px;
}
/* ===== END IN-PAGE ANCHOR OFFSET V1 ===== */