/*
Theme Name:   Twenty Twenty Child
Theme URI:    https://kingdomgroup.com
Description:  Child theme for Twenty Twenty, used for the Kingdom Group site.
Author:       Kingdom Group
Author URI:   https://kingdomgroup.com
Template:     twentytwenty
Version:      1.1.5
Text Domain:  twenty-twenty-child
*/

/* ===== Kingdom Group — custom styles (extends Bootstrap 5.3) ===== */
:root {
  --kg-navy: #14294d;
  --kg-red: #d81f26;
  --kg-gold: #f4b81e;
  --kg-green: #2f8f4e;
  --kg-bg: #f6f4f1;
  --kg-muted: #54607a;
  --kg-muted-2: #8089a0;
  --kg-muted-3: #7c85a0;
  --kg-line: #ecebe7;
  --kg-line-2: #eeece8;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Mulish", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  /* Several inner pages have decorative elements that bleed slightly past
     their container (ribbon accents, the footer skyline graphic) — this
     was previously duplicated identically in 5 separate page stylesheets;
     applying it sitewide once is equivalent and covers every page. */
  overflow-x: hidden;
}
body {
  font-family: var(--sans);
  color: var(--kg-navy);
  background: var(--kg-bg);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--kg-red);
  text-decoration: none;
}
a:hover {
  color: #b3161c;
}
::selection {
  background: var(--kg-gold);
  color: var(--kg-navy);
}

.serif {
  font-family: var(--serif);
}
.text-red {
  color: var(--kg-red);
}
.text-navy {
  color: var(--kg-navy);
}
.text-gold {
  color: var(--kg-gold);
}
.text-green {
  color: var(--kg-green);
}
.bg-cream {
  background: #fff;
}

/* front-page section spacing — companies/values/projects/timeline/news
   each carried their own hardcoded inline padding; consolidated here so
   they share one set of responsive breakpoints instead of each needing
   its own media query. .kg-section covers the two sections that used
   an identical 82px 0. */
.kg-section {
  padding: 82px 0;
}
.sec-companies {
  padding: 80px 0;
}
.sec-values {
  padding: 88px 0;
}
.sec-news {
  padding: 72px 0 96px;
}
/* description paragraph under a section's eyebrow/title (front-page
   "Our Companies" column) */
.sec-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--kg-muted);
}
/* icon-sizing wrapper for the small arrow/date SVGs inside .btn-gold
   links and .news-meta */
.ico-16 {
  font-size: 16px;
}

.kg-container {
  max-width: 94%;
}
.approach-panel-copy {
  border-right: 1px solid var(--kg-line);
}

/* wrapper for hand-pasted custom SVG icons (the 'svg' repeater field
   type, inc/icons.php kg_render_svg_code()) — sized/tinted via inline
   style set at render time, svg itself just fills the box. */
.kg-svg-icon {
  line-height: 0;
}

.kg-milestone-dot .kg-svg-icon {
  color: #df0a0a;
}
.kg-milestone-dot .kg-svg-icon svg {
  width: 60px;
  height: 60px;
  display: block;
}
/* eyebrow label */
.eyebrow {
  color: var(--kg-red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* section heading */
.sec-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.14;
  color: var(--kg-navy);
}

/* gold button */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--kg-gold);
  color: var(--kg-navy);
  padding: 15px 26px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
}
.btn-gold:hover {
  background: #e6a90c;
  color: var(--kg-navy);
}

/* red button — used on Company Overview, Our Leadership and CSR CTAs.
   Was previously defined identically (plus a near-duplicate with a
   slightly different padding) in two separate page stylesheets, and not
   defined at all for the third page that used the class. */
.btn-red {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--kg-red);
  color: #fff;
  padding: 15px 26px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  width: fit-content;
}
.btn-red:hover {
  background: #b3161c;
  color: #fff;
}

/* breadcrumb — one shared implementation used by every inner page
   (Company Overview, Vision/Mission/Values, Our Leadership, Leadership
   Team, CSR). Previously the base rules lived in one page's stylesheet
   with a different (navy) current-page colour, while every other page
   carried its own near-identical override to red; consolidated here so
   there's a single definition and a single colour everywhere. */
.kg-breadcrumb {
  padding: 16px 0;
  font-size: 14px;
  color: var(--kg-muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--kg-line);
}
.kg-breadcrumb a {
  color: var(--kg-muted-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kg-breadcrumb a:hover {
  color: var(--kg-red);
}
.kg-breadcrumb .sep {
  color: #c7ccd6;
}
.kg-breadcrumb .current {
  color: var(--kg-red);
  font-weight: 700;
}

/* ===== NAV ===== */
.kg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kg-line);
}
.kg-nav .navbar-brand img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

/* Centered menu: Bootstrap already renders #kgNav (.navbar-collapse)
   as one flex row containing the <ul> then .kg-header-utils once it
   expands past navbar-expand-xl's own breakpoint — no need to guess
   that breakpoint's exact pixel value or fight Bootstrap's !important
   rules with a competing display:grid/contents. Just let the <ul>
   grow to fill the row and center its own items inside that space,
   so it sits centered between the logo and the social/contact icons
   (which stay their natural width at the end of the row). Harmless
   on mobile: .navbar-collapse is display:block there (not flex), so
   flex:1 on the <ul> is inert, and justify-content:center on its own
   (always-flex) column has nothing extra to center into. */
.kg-nav .navbar-nav {
  flex: 1 1 auto;
  justify-content: center;
}
.kg-nav .nav-link {
  color: var(--kg-navy);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.kg-nav .nav-link:hover {
  color: var(--kg-red);
}
.kg-nav .nav-link:focus,
.kg-nav .nav-link:focus-visible,
.kg-nav .dropdown-toggle:focus,
.kg-nav .dropdown-toggle.show {
  box-shadow: none;
}
.kg-nav .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}
.kg-nav .dropdown-menu {
  border: 1px solid var(--kg-line);
  border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(20, 41, 77, 0.35);
  padding: 8px 0;
  margin-top: 10px;
}
.kg-nav .dropdown-item {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-navy);
  padding: 8px 20px;
}
.kg-nav .dropdown-item:hover,
.kg-nav .dropdown-item:focus {
  background: var(--kg-bg);
  outline: none;
  border: none;
  color: var(--kg-red);
}
.kg-nav .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
  transform: rotate(-90deg);
}
.kg-nav .dropdown-submenu-menu {
  margin-top: 0;
  position: absolute;
  left: 170px;
  top: 35px;
}
/* parent-page link repeated inside its own submenu for touch users
   (header.php) — mouse users on desktop click the parent directly */
.kg-nav .kg-nav-parent-link > .dropdown-item {
  font-weight: 800;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .kg-nav .kg-nav-parent-link {
    display: none;
  }
}
/* collapsed (hamburger) menu below navbar-expand-xl: the fly-out offset
   above pushed nested submenus off to the side where they couldn't be
   tapped — stack them indented under their parent instead. */
@media (max-width: 1199.98px) {
  .kg-nav .dropdown-menu {
    border: 0;
    box-shadow: none;
    margin-top: 0;
    padding: 0 0 6px;
  }
  .kg-nav .dropdown-submenu-menu {
    position: static;
    margin: 0 0 0 16px;
    padding: 0;
  }
  .kg-nav .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    transform: none;
  }
}
.btn-touch {
  background: var(--kg-red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-touch:hover {
  background: #dc3545;
  color: #fff;
}

/* ===== HEADER UTILS (social + contact, right of the primary nav) ===== */
.kg-header-social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kg-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}
.kg-header-social:hover {
  background: var(--kg-red);
  color: #fff;
}
.kg-header-sep {
  width: 1px;
  height: 20px;
  background: var(--kg-line);
}

/* ===== HERO ===== */
.hero {
  background: #fff;
  position: relative;
}
.hero-copy {
  padding: 96px 56px 96px 0;
  max-width: 520px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 66px;
  line-height: 1.02;
  color: var(--kg-navy);
  letter-spacing: -1px;
}
.unique {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: 52px !important;
  line-height: 1.08 !important;
  color: var(--kg-navy) !important;
  letter-spacing: -0.5px !important;
}

.hero-rule {
  width: 88px;
  height: 5px;
  background: var(--kg-gold);
  margin: 28px 0 26px;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 420px;
}
.hero-media {
  position: relative;
  min-height: 540px;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}

/* stats bar */
.stats-wrap {
  position: relative;
  transform: translateY(-46px);
}
.stats-bar {
  background: #fff;
  box-shadow: 0 24px 60px -28px rgba(20, 41, 77, 0.35);
  border: 1px solid var(--kg-line-2);
  border-radius: 12px;
}
.stat {
  padding: 34px 24px;
  text-align: center;
  border-right: 1px solid var(--kg-line-2);
}
.stat:last-child {
  border-right: none;
}
.stat svg {
  margin: 0 auto 14px;
  display: block;
}
.stat .num {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--kg-navy);
  line-height: 1;
}
.stat .num.sm {
  font-size: 34px;
}
.stat .lbl {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--kg-muted-2);
  text-transform: uppercase;
}
.stat .lbl.faint {
  color: #c7ccd6;
}
.stat .lbl.gold {
  color: #c68a12;
  margin-bottom: 2px;
}

/* ===== COMPANIES ===== */
.co-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.co-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(20, 41, 77, 0.4);
}
.co-thumb {
  height: 350px;
  position: relative;
  overflow: hidden;
}
.co-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-body {
  padding: 16px 14px 0;
  flex: 1;
}
.co-name {
  margin-top: 10px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--kg-navy);
  text-transform: uppercase;
  line-height: 1.25;
}
.co-arrow {
  margin: 14px 0 12px;
  color: var(--kg-navy);
  font-size: 16px;
}
.co-strip {
  height: 5px;
}
.strip-red {
  background: var(--kg-red);
}
.strip-gold {
  background: var(--kg-gold);
}
.strip-navy {
  background: var(--kg-navy);
}
.strip-green {
  background: var(--kg-green);
}
.co-slider {
  position: relative;
  overflow: hidden;
}
.co-track {
  flex-wrap: nowrap;
  transition: transform 0.45s ease;
}
.co-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 2;
}
.co-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--kg-line);
  cursor: pointer;
  font-size: 16px;
  background: #fff;
  color: var(--kg-navy);
  transition: 0.4s;
}
.co-nav button svg {
  display: block;
  margin: auto;
}
/* the arrow SVGs use fill="currentColor", so the icon colour is set here:
   navy prev / red next normally, white on the navy hover/pressed state
   (a hard-coded navy fill used to vanish against the navy background) */
.co-nav button.next {
  color: var(--kg-red);
}
.co-nav button:hover,
.co-nav button:active,
.co-nav button:focus-visible {
  background: var(--kg-navy);
  color: #fff;
  border-color: var(--kg-navy);
}
.hint {
  text-align: center;
  margin-top: 26px;
  font-size: 14px;
  color: var(--kg-muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 575px) {
 .co-thumb {
  height: 160px;
}
}

/* ===== VALUES ===== */
.value {
  padding: 0 28px;
  text-align: center;
  border-left: 1px solid var(--kg-line);
}
.value svg {
  margin: 0 auto 20px;
  display: block;
}
.value h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--kg-navy);
  line-height: 1.25;
}
.value p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--kg-muted-2);
}

/* ===== PROJECTS ===== */
.proj {
  display: block;
  position: relative;
  pointer-events: none;
  height: 300px;
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.proj:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(20, 41, 77, 0.4);
}
.proj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.proj:hover img {
  transform: scale(1.08);
}
.proj::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(9, 18, 38, 0.85) 0%,
    rgba(9, 18, 38, 0) 55%
  );
}
.proj-cap {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #fff;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  z-index: 1;
}
.proj-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 1;
}
.proj-nav button {
  width: 42px;
  height: 42px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  background: #fff;
  color: var(--kg-navy);
  transition: 0.4s;
}
.proj-nav button svg {
  display: block;
  margin: auto;
}
/* the arrow SVGs use fill="currentColor", so the icon colour is set here:
   navy prev / red next normally, white on the navy hover/pressed state
   (a hard-coded navy fill used to vanish against the navy background) */
.proj-nav button.next {
  color: var(--kg-red);
}
.proj-nav button:hover,
.proj-nav button:active,
.proj-nav button:focus-visible {
  background: var(--kg-navy);
  color: #fff;
}

.proj-slider {
  position: relative;
  overflow: hidden;
}
.proj-track {
  flex-wrap: nowrap;
  transition: transform 0.45s ease;
}

/* ===== TIMELINE ===== */
/* Bootstrap's .row-cols-* utilities only go up to 6 by default, so a
   7-column tier (all milestones in a single row) needs a real rule
   rather than a "row-cols-lg-7" class, which doesn't exist in Bootstrap
   and silently does nothing. */
@media (min-width: 992px) {
  .timeline .row-cols-lg-7 > * {
    flex: 0 0 auto;
    width: 14.2857143%;
  }
}
.timeline {
  position: relative;
}
.timeline .track {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  height: 2px;
  background: #e6e4df;
  transform-origin: left center;
  transition: transform 1.1s ease;
}
.timeline.tl-js .track {
  transform: scaleX(0);
}
.timeline.in-view .track {
  transform: scaleX(1);
}
.tl-item {
  text-align: center;
  padding: 0 6px;
  position: relative;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  transition-delay: calc(var(--tl-i, 0) * 90ms);
}
.timeline.tl-js .tl-item {
  opacity: 0;
  transform: translateY(16px);
}
.timeline.in-view .tl-item {
  opacity: 1;
  transform: translateY(0);
}
.tl-year {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--kg-navy);
  margin-bottom: 16px;
}
.tl-year.now {
  color: var(--kg-red);
}
.tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  margin: 0 auto 18px;
  position: relative;
}
.tl-dot.red {
  border: 4px solid var(--kg-red);
}
.tl-dot.gold {
  border: 4px solid var(--kg-gold);
}
.tl-dot.navy {
  border: 4px solid var(--kg-navy);
}
.tl-dot.solid {
  background: var(--kg-red);
  border: 4px solid var(--kg-red);
}
.tl-dot.solid::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--kg-red);
  opacity: 0;
  animation: tlPulse 2.2s ease-out infinite;
}
.tl-item p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kg-muted-3);
}

@keyframes tlPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline .track,
  .tl-item,
  .tl-dot.solid::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== SUSTAINABILITY ===== */
.sustainability {
  padding: 50px 0;
}
.property-card .property-card-link {
  display: none;
}
.sus-media {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}
.sus-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.sus-media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70px;
  background: linear-gradient(90deg, rgba(246, 244, 241, 0), var(--kg-bg));
}
.sus-copy {
  padding: 76px 40px 76px 24px;
}
.sus-item {
  padding-right: 20px;
  border-right: 1px solid #e2e0db;
}
.sus-item:last-child {
  border-right: none;
  padding-right: 4px;
}
.sus-item svg {
  margin-bottom: 16px;
}
.sus-item .big {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--kg-navy);
}
.sus-item .med {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--kg-navy);
  line-height: 1.2;
}
.sus-item p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--kg-muted-3);
}
.sus-item p strong {
  color: #3c465f;
}

/* ===== NEWS ===== */
.news-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  display: block;
  height: 100%;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -24px rgba(20, 41, 77, 0.4);
}
.news-thumb {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.news-body {
  padding: 22px 22px 26px;
}
.news-body h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--kg-navy);
  line-height: 1.3;
}
.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.news-meta .date {
  font-size: 13px;
  color: #9aa2b5;
}

/* ===== FOOTER =====
   .kg-footer's own padding/border stay at 0 while the mega-footer
   markup above .foot-bottom is disabled (commented out) — it's just
   this one bottom bar right now, and that bar supplies its own
   border-top/padding below. Restore 64px 0 0 + border-top here if the
   mega-footer block is ever brought back. */
.kg-footer {
  background: #fff;
  border-top: none;
  padding: 0;
}
.kg-footer .brand img {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 24px;
}
.flag {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.flag span {
  width: 36px;
  height: 5px;
}
.foot-about {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-muted);
  max-width: 260px;
}
.foot-h {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--kg-navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.foot-underline {
  width: 28px;
  height: 3px;
  background: var(--kg-red);
  margin-bottom: 22px;
}
.foot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-list a {
  color: var(--kg-muted);
  font-size: 15px;
  font-weight: 600;
}
.foot-list a:hover {
  color: var(--kg-red);
}
.foot-list a .car {
  color: var(--kg-red);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-row.top {
  align-items: flex-start;
}
.contact-row span,
.contact-row a {
  color: #3c465f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.social {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}
.social a {
  width: 36px;
  height: 36px;
  color: white;
  background: var(--kg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s;
}
.social a:hover {
  background: #e6a90c;
  color: var(--kg-navy);
}

.foot-bottom {
  border-top: 1px solid var(--kg-line);
  margin-top: 8px;
}
.foot-bottom .inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 22px 0;
}
.foot-bottom .copy {
  color: var(--kg-muted-2);
  font-size: 14px;
  font-weight: 600;
  padding-right: 26px;
  border-right: 1px solid #e2e0db;
}
.foot-bottom a {
  color: #3c465f;
  font-size: 14px;
  font-weight: 600;
  padding: 0 26px;
  border-right: 1px solid #e2e0db;
}
.foot-bottom a:last-child {
  border-right: none;
}
.foot-bottom a:hover {
  color: var(--kg-red);
}

/* ----- Footer bottom bar (current single-row footer) -----
   .foot-bottom-inner a resets the legacy .foot-bottom a rule above
   (padding/border-right/color meant for the old privacy/terms/
   sitemap links) so it doesn't leak into the logo, social icons and
   nav links here — .foot-bottom-social a's own width/height was
   getting swallowed by that leftover 26px side padding. */
.foot-bottom-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.foot-bottom-inner a {
  padding: 0;
  border-right: none;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 32px;
}
.foot-logo {
  display: block;
  line-height: 0;
}
.foot-logo img {
  height: 80px;
  width: auto;
  display: block;
}
.foot-bottom-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-bottom-social a {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f0f0f0;
  color: var(--kg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.foot-bottom-social a:hover {
  background: var(--kg-navy);
  color: #fff;
}
.foot-bottom-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
}
.foot-bottom-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-navy);
}
.foot-bottom-nav a:hover {
  color: var(--kg-red);
}
.foot-bottom-copy {
  justify-self: end;
  font-size: 13px;
  color: var(--kg-muted-2);
  white-space: nowrap;
}

/* Tablet: the 1fr-auto-1fr grid above only leaves the nav's auto
   column its full width by squeezing brand/copy below their real
   size, which crushes the logo+social row between roughly 768-991px.
   Stack to one centered column here instead of waiting for 767px. */
@media (max-width: 991px) {
  .foot-bottom-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
    text-align: center;
  }
  .foot-bottom-copy {
    justify-self: center;
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .foot-brand {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .foot-logo img {
    height: 52px;
  }
  .foot-bottom-social a {
    width: 34px;
    height: 34px;
  }
  .foot-bottom-nav {
    gap: 10px 18px;
  }
  .foot-bottom-copy {
    font-size: 12px;
  }
}

/* ===== RESPONSIVE ===== */
/* .hero-copy/.hero-media switched from col-lg-5/7 to col-xl-5/7 (they
   now stack below 1200px instead of 992px) because the two-column
   split with this section's desktop-sized heading/padding only has
   real room once the column is a true desktop width — at 992-1199px
   (e.g. iPad Pro portrait, 1024px) the 5-col text side was squeezed
   to ~1/3 of the container while still carrying a 66px heading. This
   block covers that whole stacked range, not just <=991px. */
@media (max-width: 1199.98px) {
  .hero-copy {
    padding: 64px 0;
    max-width: none;
  }
  .hero-media {
    min-height: 340px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .sec-title {
    font-size: 32px;
  }
  .stat .num {
    font-size: 32px;
  }
  .sus-copy {
    padding: 48px 24px;
  }
  .sus-media {
    min-height: 300px;
  }
  .kg-section,
  .sec-companies,
  .sec-values,
  .sec-news {
    padding: 56px 0;
  }
}
@media (max-width: 1199.98px) {
  .hero-media::after {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero h1 {
    font-size: 42px;
  }
  .stats-wrap {
    transform: translateY(-24px);
  }
  .stat {
    padding: 22px 16px;
  }
  .stat:nth-child(2n) {
    border-right: none;
  }
  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--kg-line-2);
  }
  .kg-section,
  .sec-companies,
  .sec-values,
  .sec-news {
    padding: 44px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .stat:nth-child(3n) {
    border-right: none;
  }
  .stat:nth-child(n + 4) {
    border-top: 1px solid var(--kg-line-2);
  }
}

/* =========================================================================
   FRONT PAGE — MOBILE & TABLET (< 1200px)
   Desktop (>= 1200px) is untouched. Tablet = 768-1199px, mobile < 768px.
   Carousels: rows marked [data-kg-mc] become swipeable scroll-snap strips;
   the inline script at the end of front-page.php adds their dots/arrows.
   ========================================================================= */
.kg-mc-wrap {
  position: relative;
}
.kg-mc-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
}
.kg-mc-dots button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kg-mc-dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5d8df;
  transition: background 0.25s;
}
.kg-mc-dots button.active::before {
  background: var(--kg-red);
}
.kg-mc-arrow {
  position: absolute;
  top: var(--mc-arrow-top, 50%);
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  box-shadow: 0 6px 14px -8px rgba(20, 41, 77, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}
.kg-mc-arrow.prev {
  left: 0;
}
.kg-mc-arrow.prev svg {
  transform: rotate(180deg);
}
.kg-mc-arrow.next {
  right: 0;
}
.kg-mc-arrow.is-disabled,
.kg-card-slider-nav button.is-disabled {
  opacity: 0.4;
}
.kg-mc-static .kg-mc-dots,
.kg-mc-static .kg-mc-arrow {
  display: none;
}
@media (min-width: 1200px) {
  .kg-mc-dots,
  .kg-mc-arrow {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  /* --- section headings: gold button top-right on the eyebrow's row,
         title full width below it --- */
  .sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
  }
  .sec-head > * {
    grid-column: 1 / -1;
  }
  .sec-head > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .sec-head > .btn-gold {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0 !important;
    white-space: nowrap;
  }
  .sec-head > .sec-title {
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* --- hero: copy over the image, image fading in from the right --- */
  .hero > .kg-container:first-child {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero > .kg-container:first-child > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 500px;
  }
  .hero > .kg-container:first-child > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    padding: 0;
    position: relative;
  }
  .hero .hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  .hero .hero-media img {
    object-position: right center;
  }
  .hero .hero-media::after {
    display: block;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 34%,
      rgba(255, 255, 255, 0.5) 55%,
      rgba(255, 255, 255, 0) 75%
    );
  }
  .hero .hero-copy {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding: 64px 24px 110px calc(3% + 1.5rem);
  }
  .hero .hero-cta {
    margin-top: 28px;
    width: 56px;
    height: 50px;
    padding: 0;
    justify-content: center;
  }

  /* --- "Our Numbers" card --- */
  .hero .stats-bar > .stats-head {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100%;
    padding: 22px 22px 4px;
  }
  .stats-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 26px;
    color: var(--kg-navy);
    margin: 0;
  }

  /* --- companies: square "next" arrow to the right of the title --- */
  .sec-companies .sec-head > .sec-title {
    grid-column: 1;
    grid-row: 2;
  }
  .sec-head > .sec-head-arrow {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 12px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--kg-line);
    border-radius: 4px;
    background: #fff;
    color: var(--kg-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
  }
  .sec-head > .sec-head-arrow:hover,
  .sec-head > .sec-head-arrow:focus-visible {
    background: var(--kg-navy);
    border-color: var(--kg-navy);
    color: #fff;
  }

  /* --- companies: swipe slider, 2 image cards in view (dots only) --- */
  .sec-companies [data-kg-mc] {
    --mc-w: 50%;
  }
  .sec-companies .co-nav {
    display: none !important;
  }
  .sec-companies .co-card {
    position: relative;
    border: 0;
    border-radius: 10px;
  }
  .sec-companies .co-thumb {
    height: 200px;
  }
  .sec-companies .co-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      0deg,
      rgba(9, 18, 38, 0.85) 0%,
      rgba(9, 18, 38, 0.1) 70%
    );
  }
  .sec-companies .co-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 12px 12px 14px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
  }
  .sec-companies .co-body > :not(.co-name):not(.co-arrow) {
    display: none;
  }
  .sec-companies .co-name {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  .sec-companies .co-arrow {
    margin: 0;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sec-companies .co-arrow svg {
    width: 16px;
    height: 16px;
  }
  .sec-companies .co-strip {
    display: none;
  }

  /* --- shared swipe-carousel behaviour --- */
  .kg-mc-wrap [data-kg-mc] {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .kg-mc-wrap [data-kg-mc]::-webkit-scrollbar {
    display: none;
  }
  .kg-mc-wrap [data-kg-mc] > * {
    flex: 0 0 var(--mc-w, 100%);
    width: var(--mc-w, 100%);
    max-width: none;
    scroll-snap-align: start;
  }
  .kg-mc-wrap [data-kg-mc-arrows] {
    padding-left: 30px;
    padding-right: 30px;
    scroll-padding-inline: 30px;
  }

  /* values */
  .sec-values .kg-mc-wrap {
    --mc-arrow-top: 23px;
  }
  .sec-values [data-kg-mc] {
    --mc-w: 20%;
  }
  .sec-values .value {
    padding: 0 10px;
  }
  .sec-values .value h3 {
    font-size: 17px;
  }

  /* projects */
  .sec-projects [data-kg-mc] {
    --mc-w: 50%;
  }
  .sec-projects .proj {
    height: 280px;
    border-radius: 12px;
  }
  .sec-projects .proj:hover {
    transform: none;
  }
  .sec-projects .proj-nav {
    right: 6px;
  }
  .sec-projects .proj-nav button + button {
    border-left: 1px solid var(--kg-line);
  }
  .sec-projects .proj-nav button:last-child {
    border-bottom-right-radius: 12px;
  }

  /* timeline (dot line sits 44px down once the row's gutter-y is 0) */
  .sec-timeline .kg-mc-wrap {
    --mc-arrow-top: 44px;
  }
  .sec-timeline [data-kg-mc] {
    --mc-w: 25%;
  }
  .sec-timeline .timeline .track {
    top: 43px;
  }

  /* news */
  .sec-news [data-kg-mc] {
    --mc-w: 33.3333%;
  }
  .sec-news .news-card {
    border-radius: 10px;
    overflow: hidden;
  }
  .sec-news .news-thumb {
    height: 150px;
  }
  .sec-news .news-body {
    padding: 16px 16px 18px;
  }
  .sec-news .news-body h3 {
    font-size: 16px;
  }
}

/* tablet + mobile: stats 3 per row, a short last row stretches to fill
   (5 stats -> 3 + 2), with inset dividers. Child 1 is .stats-head, so
   rows start at children 2, 5, 8... */
@media (max-width: 991.98px) {
  .hero .stats-bar > .col {
    flex: 1 0 33.3333%;
    width: auto;
  }
  .hero .stats-bar .stat {
    position: relative;
    border-right: 0;
  }
  .hero .stats-bar > .col:not(:nth-child(3n + 2)) .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--kg-line-2);
  }
  .hero .stats-bar > .col:nth-child(n + 5) .stat::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--kg-line-2);
  }
}

/* mobile */
@media (max-width: 767.98px) {
  .sec-projects,
  .sec-timeline,
  .sec-companies,
  .sec-values,
  .sec-news {
    padding: 40px 0;
  }
  .sec-head > .sec-title {
    font-size: 28px;
  }
  .sec-head > .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
  }
  .sec-head > .btn-gold {
    padding: 9px 12px;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    gap: 8px;
  }

  .hero > .kg-container:first-child > .row {
    min-height: 0;
  }
  .hero .hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 42%,
      rgba(255, 255, 255, 0.35) 68%,
      rgba(255, 255, 255, 0) 90%
    );
  }
  .hero .hero-copy {
    max-width: 70%;
    padding: 44px 0 80px calc(3% + 1.5rem);
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero .hero-rule {
    width: 56px;
    height: 4px;
    margin: 18px 0;
  }
  .hero .hero-lead {
    font-size: 15px;
    line-height: 1.6;
  }
  .hero .hero-cta {
    margin-top: 22px;
    width: 52px;
    height: 46px;
  }

  .hero .stats-bar {
    border-radius: 14px;
  }
  .hero .stats-bar > .stats-head {
    padding: 18px 18px 0;
  }
  .stats-title {
    font-size: 24px;
  }
  .hero .stat {
    padding: 18px 4px;
  }
  .hero .stat svg {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
  }
  .hero .stat .num,
  .hero .stat .num.sm {
    font-size: 24px;
  }
  .hero .stat .lbl {
    font-size: 10px;
    letter-spacing: 0.6px;
    margin-top: 6px;
  }

  .sec-companies [data-kg-mc] {
    --bs-gutter-x: 10px;
  }
  .sec-companies .co-thumb {
    height: 150px;
  }
  .sec-companies .co-body {
    padding: 10px 10px 12px 12px;
  }
  .sec-companies .co-name {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  .sec-companies .co-arrow {
    flex-basis: 26px;
    height: 26px;
  }

  .sec-values .kg-mc-wrap {
    --mc-arrow-top: 17px;
  }
  .sec-values [data-kg-mc] {
    --mc-w: 25%;
  }
  .sec-values .value {
    padding: 0 4px;
    border-left: 0;
  }
  .sec-values .value svg {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
  }
  .sec-values .value h3 {
    font-size: 13px;
  }
  .sec-values .value p {
    display: none;
  }

  .sec-projects [data-kg-mc] {
    --mc-w: 100%;
  }
  .sec-projects .proj {
    height: 230px;
  }
  .sec-projects .proj-cap {
    font-size: 22px;
  }

  .sec-timeline [data-kg-mc] {
    --mc-w: 33.3333%;
  }
  .sec-timeline .tl-item p {
    font-size: 11.5px;
  }

  .sec-news [data-kg-mc] {
    --mc-w: 48%;
  }
  .sec-news .news-thumb {
    height: 110px;
  }
  .sec-news .news-body {
    padding: 12px 12px 14px;
  }
  .sec-news .news-body h3 {
    font-size: 14px;
  }
  .sec-news .news-meta {
    margin-top: 12px;
  }
  .sec-news .news-meta .date {
    font-size: 11px;
  }
}
@media (max-width: 575.98px) {
  .sec-values [data-kg-mc] {
    --mc-w: 33.3333%;
  }
}
.footer_top_wrapper {
  padding-bottom: 120px;
}
.footer_img {
  max-height: 190px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* =========================================================================
   COMPANY OVERVIEW PAGE (template-company-overview.php)
   ========================================================================= */
.cov-hero {
  background: #fff;
}
.cov-hero-copy {
  padding: 64px 0 60px;
}
.cov-hero-copy .hero-lead {
  max-width: 460px;
}
/* Hero switched from col-lg-5/7 to col-xl-5/7 (stacks below 1200px
   instead of 992px) — same iPad Pro squeeze as the front-page hero.
   Its h1 borrows .vmv-hero h1's size (that div carries both classes),
   so shrink it here instead of widening the shared VMV-page rule,
   which still needs 52px down to 992px for its own col-lg split. */
@media (max-width: 1199.98px) {
  .cov-hero-copy.vmv-hero h1 {
    font-size: 40px;
  }
}
.btn-outline-kg {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  color: var(--kg-navy);
  border: 1.5px solid var(--kg-line-2);
  padding: 10px 20px 10px 10px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.btn-outline-kg:hover {
  border-color: var(--kg-navy);
  color: var(--kg-navy);
  box-shadow: 0 12px 26px -16px rgba(20, 41, 77, 0.5);
}
.btn-outline-kg .ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.story-copy {
  border-left: 1px solid var(--kg-line);
}
/* Who We Are / Our Story section (was an inline style) */
.cov-about {
  background: #fff;
  padding: 88px 0;
}

/* stats bar (6-up) reuses .stats-bar / .stat above */

.wwa-copy p,
.story-copy p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--kg-muted);
}
.wwa-copy p + p,
.story-copy p + p {
  margin-top: 16px;
}
.wwa-quote {
  color: var(--kg-red) !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 22px;
}
.story-highlight {
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--kg-line);
}
.story-item {
  text-align: center;
  padding: 0 10px;
  border-left: 1px solid var(--kg-line);
}
.story-item:first-child {
  border-left: none;
}
.story-item svg {
  margin: 0 auto 12px;
  display: block;
}
.story-item h4 {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kg-navy);
  line-height: 1.3;
}
.story-item p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--kg-muted-2);
}

.presence-map {
  position: relative;
  background: #eeece7;
  border: 1px solid var(--kg-line);
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.presence-map svg {
  max-width: 78%;
  height: auto;
}
.region-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.region-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.region-item .pin {
  flex-shrink: 0;
  margin-top: 2px;
}
.region-item h4 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 2px;
}
.region-item p {
  font-size: 12.5px;
  color: var(--kg-muted-2);
  margin: 0;
}

.value-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--kg-line);
}
.value-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.value-row:first-child {
  padding-top: 0;
}
.value-row .ic {
  width: 30px;
  flex-shrink: 0;
  margin-top: 2px;
}
.value-row h4 {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 3px;
}
.value-row p {
  font-size: 13px;
  color: var(--kg-muted-2);
  margin: 0;
  line-height: 1.55;
}

.vm-banner {
  background: var(--kg-navy);
  color: #fff;
  padding: 64px 0;
}
.vm-col {
  padding: 0 44px;
}
.vm-col + .vm-col {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.vm-col svg {
  margin-bottom: 20px;
}
.vm-col h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 14px;
}
.vm-col p {
  font-size: 15px;
  line-height: 1.7;
  color: #c3cade;
  max-width: 440px;
  margin: 0;
}

.cta-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 18, 38, 0.9),
    rgba(9, 18, 38, 0.45)
  );
  z-index: 1;
}
.cta-banner .inner {
  position: relative;
  z-index: 2;
}
.cta-banner h2 {
  font-family: var(--serif);
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 620px;
}

/* ----- Curb Stones page only: "Let's build better, together." CTA strip.
   Deliberately namespaced "bc-cta2" (not "bc-cta-banner") — that
   shared class still carries the full-bleed background-image design used
   by wheel-stoppers.php/aac-blocks.php, so redefining it here would have
   bled into those pages. Light panel, copy flush left, photo flush to the
   row's right edge (no radius, no gap), with a navy/gold/red diagonal
   corner accent layered over the photo's right edge using three
   same-box/same-right-anchor clip-path wedges — the same parallel-diagonal
   approach as .chv-band, just anchored right instead of left. ----- */
.bc-cta2 {
  background: var(--kg-bg);
}
.bc-cta2-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.bc-cta2-copy {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px 40px max(3%, 1.5rem);
}
.bc-cta2-copy h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  color: var(--kg-navy);
  margin: 0 0 10px;
}
.bc-cta2-copy p {
  font-size: 14.5px;
  color: var(--kg-muted);
  max-width: 380px;
  margin: 0 0 20px;
}
.bc-cta2-photo {
  position: relative;
  flex: 1 1 420px;
  overflow: hidden;
}
.bc-cta2-photo img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

@media (max-width: 767px) {
  .bc-cta2-copy {
    padding: 32px 24px;
    flex-basis: 100%;
  }
  .bc-cta2-photo {
    flex-basis: 100%;
    min-height: 220px;
  }
}

@media (max-width: 991px) {
  .vm-col + .vm-col {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 36px;
    margin-top: 36px;
  }
  .story-item {
    border-left: none;
    border-top: 1px solid var(--kg-line);
    padding-top: 16px;
    margin-top: 16px;
  }
  .story-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .cta-banner h2 {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .region-list {
    margin-top: 24px;
  }
}

/* =========================================================================
   COMPANY OVERVIEW — MOBILE & TABLET (< 1200px; desktop untouched)
   Hero copy in white over the full-bleed photo, stats card overlapping
   its bottom edge (3 + 2), and Our Story highlights kept 3 across.
   ========================================================================= */
@media (max-width: 1199.98px) {
  .cov-hero > .kg-container:first-child {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .cov-hero > .kg-container:first-child > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 520px;
  }
  .cov-hero > .kg-container:first-child > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    padding: 0;
    position: relative;
  }
  .cov-hero .hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  .cov-hero .hero-media img {
    object-position: 70% center;
  }
  .cov-hero .hero-media::after {
    display: block;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 34%,
      rgba(255, 255, 255, 0.5) 55%,
      rgba(255, 255, 255, 0) 75%
    );
  }
  .cov-hero .cov-hero-copy {
    position: relative;
    z-index: 1;
    background: transparent;
    max-width: 560px;
    padding: 64px 24px 120px calc(3% + 1.5rem);
  }

  .cov-hero .stats-wrap {
    transform: translateY(-56px);
    margin-bottom: -56px;
  }

  .cov-about {
    padding: 56px 0;
  }
  .story-item,
  .story-item:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
  .story-highlight > .col {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }
  .story-highlight > .col + .col .story-item {
    border-left: 1px solid var(--kg-line);
  }
  .story-item {
    height: 100%;
    padding: 0 8px;
  }
  .story-item svg {
    width: 44px;
    height: 44px;
  }
}

/* tablet + mobile: stats 3 per row, short last row stretches (3 + 2) */
@media (max-width: 991.98px) {
  .cov-hero .stats-bar > .col {
    flex: 1 0 33.3333%;
    width: auto;
  }
  .cov-hero .stats-bar .stat {
    position: relative;
    border-right: 0;
    border-top: 0;
    height: 100%;
  }
  .cov-hero .stats-bar > .col:not(:nth-child(3n + 1)) .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--kg-line-2);
  }
  .cov-hero .stats-bar > .col:nth-child(n + 4) .stat::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--kg-line-2);
  }
  /* a text stat ("All Areas / Kingdom of Bahrain") sits icon-left */
  .cov-hero .stat:has(.num.sm) {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: 14px;
    text-align: left;
  }
  .cov-hero .stat:has(.num.sm) > :first-child {
    grid-row: 1 / span 2;
    margin: 0;
  }
  .cov-hero .stat:has(.num.sm) .lbl {
    margin-top: 4px;
  }

  .story-copy {
    border-left: 0;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  .cov-hero > .kg-container:first-child > .row {
    min-height: 0;
  }
  .cov-hero .hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  .cov-hero .cov-hero-copy {
    max-width: 78%;
    padding: 40px 0 88px calc(3% + 1.5rem);
  }
  .cov-hero .cov-hero-copy.vmv-hero h1 {
    font-size: 36px;
  }
  .cov-hero .hero-rule {
    width: 56px;
    height: 4px;
    margin: 18px 0;
  }
  .cov-hero .cov-hero-copy .hero-lead {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .cov-hero .stats-wrap {
    transform: translateY(-40px);
    margin-bottom: -40px;
  }
  .cov-hero .stats-bar {
    border-radius: 14px;
  }
  .cov-hero .stat {
    padding: 18px 4px;
  }
  .cov-hero .stat svg {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }
  .cov-hero .stat .num {
    font-size: 24px;
  }
  .cov-hero .stat .num.sm {
    font-size: 22px;
  }
  .cov-hero .stat .lbl {
    font-size: 10px;
    letter-spacing: 0.6px;
    margin-top: 6px;
  }

  .cov-about {
    padding: 40px 0 48px;
  }
  .cov-about > .kg-container > .row {
    --bs-gutter-y: 2.5rem;
  }
  .cov-about .sec-title {
    font-size: 30px;
    margin-bottom: 14px !important;
  }
  .wwa-copy p,
  .story-copy p {
    font-size: 15px;
    line-height: 1.65;
  }
  .wwa-quote {
    font-size: 14.5px;
    margin-top: 14px;
  }
  .story-highlight {
    padding-top: 24px;
    margin-top: 24px;
  }
  .story-item {
    padding: 0 4px;
  }
  .story-item svg {
    width: 40px;
    height: 40px;
  }
  .story-item h4 {
    font-size: 14px;
  }
  .story-item p {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* =========================================================================
   VISION, MISSION & VALUES PAGE (template-vision-mission-values.php)
   ========================================================================= */
.vmv-hero {
  background: #fff;
}
.vmv-hero-copy {
  padding: 72px 0 72px;
}
.vmv-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.08;
  color: var(--kg-navy);
  letter-spacing: -0.5px;
}
.vmv-hero-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 420px;
  margin-top: 22px;
}
.vmv-hero-media {
  position: relative;
  min-height: 490px;
  overflow: hidden;
}
.vmv-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vmv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}
/* decorative angular ribbons, top-right of the hero photo */

.vm-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 32px;
  height: 100%;
}
.vm-card.tint-red {
  background: #fbebea;
}
.vm-card.tint-gold {
  background: #fdf3e0;
}
.vm-card-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-card-divider {
  flex-shrink: 0;
  width: 2px;
  align-self: stretch;
  background: var(--kg-red);
}
.vm-card.tint-gold .vm-card-divider {
  background: var(--kg-gold);
}
.vm-card-body h3 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 10px;
}
.vm-card-body p {
  font-size: 18px;
  max-width: 450px;
  width: 100%;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 0;
}
/* Below ~576px the icon+divider (106px incl. gaps) leaves the text
   only a ~130px sliver next to it, wrapping one word per line — stack
   the card instead of shrinking it further. */
@media (max-width: 575px) {
  .vm-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .vm-card-divider {
    display: none;
  }
  .vm-card-body {
    width: 100%;
  }
}

.values-panel {
  background: #fff;
  border: 1px solid var(--kg-line);
  box-shadow: 0 30px 60px -36px rgba(20, 41, 77, 0.25);
  padding: 48px;
}
.values-panel-head {
  margin-bottom: 40px;
}
.values-panel-head .foot-underline {
  margin-bottom: 16px;
}
.values-panel-head p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 640px;
}
.value-circle-item {
  text-align: center;
}
.values-panel .row > .col .value-circle-item {
  height: 100%;
}
.values-panel .row > .col:not(:last-child) .value-circle-item {
  border-right: 1px solid var(--kg-line);
}
.col .values-panel-head:last-child {
  border-right: none !important;
  padding-right: 0;
}
.br-none {
  border-right: 1px solid rgb(26 26 26 / 30%);
}
.br-none:last-child {
  border-right: none;
}
.value-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-circle.tint-red {
  background: #fbebea;
}
.value-circle.tint-gold {
  background: #fdf3e0;
}
.value-circle.tint-navy {
  background: #e8ecf3;
}
.value-circle-item h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 8px;
}
.value-circle-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--kg-muted-2);
  width: 136px;
  margin: 0 auto;
}

.purpose-banner {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.purpose-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.purpose-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 18, 38, 0.95) 0%,
    rgba(9, 18, 38, 0.9) 45%,
    rgba(9, 18, 38, 0.45) 100%
  );
  z-index: 1;
}
.purpose-banner .inner {
  position: relative;
  z-index: 2;
}
.purpose-heading {
  font-family: var(--serif);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}
.purpose-col {
  padding-left: 30px;
  border-left: 2px solid var(--kg-gold);
}
.purpose-col p {
  color: #c3cade;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 991px) {
  .vmv-hero-copy {
    padding: 48px 0;
  }
  .vmv-hero h1 {
    font-size: 40px;
  }
  .vmv-hero-media {
    min-height: 280px;
  }
  .values-panel {
    padding: 32px 24px;
  }
  .purpose-col {
    border-left: none;
    border-top: 2px solid var(--kg-gold);
    padding-left: 0;
    padding-top: 24px;
    margin-top: 24px;
  }
  .purpose-banner {
    padding: 40px 0;
  }
}

/* section spacing (were inline styles) */
.vmv-vm {
  padding: 56px 0 0;
}
.vmv-values {
  padding: 56px 0 88px;
}

/* =========================================================================
   VISION, MISSION & VALUES — MOBILE & TABLET (< 992px, where the hero
   and cards stack; desktop untouched). Hero copy over the photo with a
   white fade, Vision + Mission side by side as centred tinted cards, and
   Our Values as a list: tinted circle icon left, heading/underline/text
   right, divider between rows.
   ========================================================================= */
@media (max-width: 991.98px) {
  section.vmv-hero > .kg-container:first-child {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.vmv-hero > .kg-container:first-child > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 480px;
  }
  section.vmv-hero > .kg-container:first-child > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    padding: 0;
    position: relative;
  }
  section.vmv-hero .vmv-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  section.vmv-hero .vmv-hero-media img {
    object-position: 70% center;
  }
  section.vmv-hero .vmv-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 34%,
      rgba(255, 255, 255, 0.5) 55%,
      rgba(255, 255, 255, 0) 75%
    );
  }
  section.vmv-hero .vmv-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 72px 24px 72px calc(3% + 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
  }
  section.vmv-hero h1 {
    font-size: 48px;
  }

  .vmv-vm {
    padding-top: 32px;
  }
  .vmv-vm .row {
    --bs-gutter-x: 14px;
  }
  .vmv-vm .row > .col-12 {
    flex: 0 0 50%;
    width: 50%;
  }
  .vmv-vm .vm-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 28px 20px;
  }
  .vmv-vm .vm-card svg {
    width: 56px;
    height: 56px;
  }
  .vmv-vm .vm-card-divider {
    display: none;
  }
  .vmv-vm .vm-card-body {
    width: 100%;
  }
  .vmv-vm .vm-card-body h3 {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .vmv-vm .vm-card-body p {
    font-size: 15px;
    line-height: 1.6;
    max-width: none;
  }

  .vmv-values {
    padding: 48px 0 64px;
  }
  .vmv-values .values-panel {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .vmv-values .values-panel-head {
    margin-bottom: 20px;
  }
  .vmv-values .values-panel-head .sec-title {
    font-size: 40px;
  }
  .vmv-values .values-panel-head .foot-underline {
    width: 50px;
    height: 4px;
    margin: 14px 0 18px;
  }
  .vmv-values .values-panel-head p {
    font-size: 16px;
  }
  .vmv-values .values-panel .row {
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  .vmv-values .values-panel .row > .col {
    flex: 0 0 100%;
    width: 100%;
  }
  .vmv-values .values-panel .row > .col .value-circle-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
    text-align: left;
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--kg-line);
  }
  .vmv-values .values-panel .row > .col:last-child .value-circle-item {
    border-bottom: 0;
  }
  .vmv-values .value-circle {
    grid-row: 1 / span 3;
    width: 110px;
    height: 110px;
    margin: 0;
  }
  .vmv-values .value-circle svg {
    width: 40px;
    height: 40px;
  }
  .vmv-values .value-circle-item h4 {
    font-size: 26px;
    margin: 0;
    align-self: end;
  }
  .vmv-values .values-panel .row > .col:nth-child(n) .value-circle-item .pi-underline {
    margin: 10px 0 12px;
    background: var(--kg-red) !important;
  }
  .vmv-values .value-circle-item p {
    width: auto;
    margin: 0;
    font-size: 15px;
    align-self: start;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  section.vmv-hero > .kg-container:first-child > .row {
    min-height: 420px;
  }
  section.vmv-hero .vmv-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  section.vmv-hero .vmv-hero-copy {
    max-width: 80%;
    padding: 48px 0 48px calc(3% + 1.5rem);
  }
  section.vmv-hero h1 {
    font-size: 40px;
  }
  section.vmv-hero .hero-rule {
    width: 56px;
    height: 4px;
    margin: 18px 0;
  }
  section.vmv-hero .vmv-hero-lead {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 0;
  }

  .vmv-vm {
    padding-top: 20px;
  }
  .vmv-vm .row {
    --bs-gutter-x: 10px;
  }
  .vmv-vm .vm-card {
    gap: 10px;
    padding: 20px 10px;
  }
  .vmv-vm .vm-card svg {
    width: 48px;
    height: 48px;
  }
  .vmv-vm .vm-card-body h3 {
    font-size: 21px;
  }
  .vmv-vm .vm-card-body p {
    font-size: 13px;
    line-height: 1.55;
  }

  .vmv-values {
    padding: 40px 0 48px;
  }
  .vmv-values .values-panel-head .sec-title {
    font-size: 34px;
  }
  .vmv-values .values-panel-head p {
    font-size: 15px;
  }
  .vmv-values .values-panel .row > .col .value-circle-item {
    column-gap: 18px;
    padding: 14px 0;
  }
  .vmv-values .value-circle {
    width: 84px;
    height: 84px;
  }
  .vmv-values .value-circle svg {
    width: 34px;
    height: 34px;
  }
  .vmv-values .value-circle-item h4 {
    font-size: 21px;
  }
  .vmv-values .values-panel .row > .col:nth-child(n) .value-circle-item .pi-underline {
    width: 26px;
    height: 3px;
    margin: 8px 0 10px;
  }
  .vmv-values .value-circle-item p {
    font-size: 13.5px;
    line-height: 1.55;
  }
}

/* =========================================================================
   LEADERSHIP SHARED COMPONENTS
   Used by both Our Leadership and Leadership Team (template-our-leadership.php,
   template-leadership-team.php) — the leader photo/arrow card and the
   shared bio-popup modal (template-parts/leader-modal.php).
   ========================================================================= */
.leader-photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.leader-photo:hover img {
  transform: scale(1.06);
}
.leader-photo .no-photo {
  position: absolute;
  inset: 0;
  background: var(--kg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7ccd6;
}
.leader-photo .leader-arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    background 0.25s,
    color 0.25s;
}
.leader-photo:hover .leader-arrow {
  background: var(--kg-red);
  color: #fff;
}
.leader-photo.with-caption::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(9, 18, 38, 0.85) 0%,
    rgba(9, 18, 38, 0) 55%
  );
  z-index: 1;
}
.leader-photo.with-caption .leader-cap {
  position: absolute;
  left: 16px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.kg-leader-modal .modal-content {
  border: none;
  border-radius: 0;
}
.kg-leader-modal .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}
.kg-leader-modal .modal-body {
  padding: 40px;
}
.kg-modal-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kg-bg);
}
.kg-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kg-modal-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.kg-modal-position {
  color: var(--kg-red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kg-modal-rule {
  width: 48px;
  height: 3px;
  background: var(--kg-gold);
  margin-bottom: 16px;
}
.kg-modal-bio {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--kg-muted);
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 767px) {
  .kg-leader-modal .modal-body {
    padding: 28px 20px;
  }
  .kg-modal-photo {
    max-width: 200px;
    margin: 0 auto 20px;
  }
}

/* =========================================================================
   OUR LEADERSHIP PAGE (template-our-leadership.php)
   ========================================================================= */
.ol-hero {
  background: #fff;
}

.ol-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.15;
  color: var(--kg-navy);
  letter-spacing: -0.5px;
}
.ol-hero-copy {
  padding: 50px 0;
}
.ol-hero-lead {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--kg-muted);
  max-width: 440px;
  margin-top: 20px;
}
.ol-hero-media {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}
.ol-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ol-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}

.ol-approach-section {
  padding: 56px 0;
  background: #fff;
}
.ol-principles-section {
  padding: 64px 0;
}
.ol-experience-section {
  background: #fff;
  padding: 64px 0 88px;
}

.approach-panel {
  background: var(--kg-bg);
  position: relative;
  padding: 44px;
  border-radius: 20px;
  margin-top: -120px;
  z-index: 99;
}
.approach-panel-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-muted);
  margin-top: 14px;
}
.approach-item {
  display: flex;
  gap: 16px;
  align-items: center;
}
.approach-icon {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.approach-icon.tint-red {
  background: #fbebea;
}
.approach-icon.tint-gold {
  background: #fdf3e0;
}
.approach-item h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 6px;
}
.approach-item p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--kg-muted-2);
  margin: 0;
}

.experience-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-muted);
  margin-top: 14px;
}
.experience-leader {
  height: 340px;
}
.experience-leader .leader-photo {
  height: 100%;
}

@media (max-width: 991px) {
  .ol-hero-copy {
    padding: 44px 0;
  }
  .ol-hero-copy h1 {
    font-size: 38px;
  }
  .ol-hero-media {
    min-height: 280px;
  }
  .approach-panel {
    padding: 28px;
  }
  .experience-leader {
    height: 280px;
  }
  .ol-approach-section {
    padding: 40px 0;
  }
  .ol-principles-section {
    padding: 44px 0;
  }
  .ol-experience-section {
    padding: 44px 0 56px;
  }
  /* .approach-icon is a fixed 120px circle (!important) with no other
     override — beside a 16px heading + 13.5px paragraph in a stacked
     (row-cols-1) or 2-up (row-cols-sm-2) panel column, it was leaving
     the text as little as ~110px to wrap in. Shrinking it to match
     the site's other "compact" icon-circle size (60-64px, e.g.
     .vm-card-icon) gives the text room without changing the desktop
     layout below 992px. */
  .approach-icon {
    width: 64px !important;
    height: 64px !important;
  }
}
@media (max-width: 575px) {
  /* Below row-cols-sm-2's own breakpoint, items are already full width
     (row-cols-1) — stack icon above text instead of just shrinking
     the icon further, matching .vm-card's mobile treatment. */
  .approach-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .approach-item > div:last-child {
    width: 100%;
  }
}

/* =========================================================================
   OUR LEADERSHIP — MOBILE & TABLET (< 992px, where the columns stack;
   desktop untouched). Hero copy over the photo (white fade), Approach
   points 4 across (icon + heading), Principles and Leadership Team as
   swipe sliders ([data-ol-mc], dots/arrows from the template's script),
   "View All" beside the team heading, full-width red button below.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* shared slider behaviour */
  .ol-mc-wrap {
    position: relative;
  }
  .ol-mc-wrap [data-ol-mc] {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ol-mc-wrap [data-ol-mc]::-webkit-scrollbar {
    display: none;
  }
  .ol-mc-wrap [data-ol-mc] > * {
    flex: 0 0 var(--ol-w, 100%);
    width: var(--ol-w, 100%);
    max-width: none;
    scroll-snap-align: start;
  }
  /* arrows sit in the wrap's side padding, outside the scroll area */
  .ol-principles-section .ol-mc-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* hero */
  .ol-hero > .kg-container:first-child {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .ol-hero > .kg-container:first-child > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 560px;
  }
  .ol-hero > .kg-container:first-child > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    padding: 0;
    position: relative;
  }
  .ol-hero .ol-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  .ol-hero .ol-hero-media img {
    object-position: 70% center;
  }
  .ol-hero .ol-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 36%,
      rgba(255, 255, 255, 0.5) 58%,
      rgba(255, 255, 255, 0) 78%
    );
  }
  .ol-hero .ol-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 56px 24px 150px calc(3% + 1.5rem);
  }
  .ol-hero .ol-hero-rule {
    width: 64px;
    height: 4px;
    background: var(--kg-gold);
    margin: 20px 0 0;
  }

  /* approach panel: overlaps the hero's bottom edge */
  .ol-approach-section {
    padding-top: 0;
  }
  .ol-approach-section .approach-panel {
    margin-top: -90px;
    padding: 30px 28px;
  }
  .ol-approach-section .approach-panel-copy .sec-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    background: var(--kg-red);
    margin-top: 12px;
  }
  .ol-approach-section .approach-panel-copy {
    border-right: 0;
  }
  .ol-approach-section .approach-panel .row .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  .ol-approach-section .approach-panel .row .row > .col {
    flex: 0 0 25%;
    width: 25%;
  }
  .ol-approach-section .approach-panel .row .row > .col + .col .approach-item {
    border-left: 1px solid #e2e0db;
  }
  .ol-approach-section .approach-item {
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 12px;
    padding: 4px 10px;
  }
  .ol-approach-section .approach-icon {
    width: 76px !important;
    height: 76px !important;
  }
  .ol-approach-section .approach-icon svg {
    width: 34px;
    height: 34px;
  }
  .ol-approach-section .approach-item h4 {
    font-size: 17px;
    margin: 0;
  }
  .ol-approach-section .approach-item p {
    display: none;
  }

  /* principles: white cards, icon left, heading + text right */
  .ol-principles-section .sec-title {
    margin-bottom: 22px !important;
  }
  .ol-principles-section .ol-mc-wrap {
    --mc-arrow-top: 50%;
  }
  .ol-principles-section [data-ol-mc] {
    --ol-w: 50%;
  }
  .ol-principles-section .value {
    height: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-content: center;
    text-align: left;
    background: #fff;
    border: 1px solid var(--kg-line);
    border-radius: 12px;
    padding: 22px 20px;
  }
  .ol-principles-section .value > :first-child {
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* custom-SVG icons carry their own (60px) size — fit them to the box */
  .ol-principles-section .value > :first-child svg,
  .ol-principles-section .value > svg:first-child {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .ol-principles-section .value h3 {
    font-size: 18px;
    margin: 0;
    align-self: end;
  }
  .ol-principles-section .value p {
    margin-top: 6px;
    align-self: start;
  }

  /* leadership team */
  .ol-experience-section .row:first-child {
    align-items: flex-start !important;
  }
  .ol-experience-section .experience-copy {
    display: contents;
  }
  .ol-experience-section .experience-copy > * {
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: calc(var(--bs-gutter-x) * 0.5);
  }
  .ol-experience-section .experience-copy > .sec-title {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    margin-top: var(--bs-gutter-y);
    margin-right: 0;
  }
  .ol-experience-section .experience-copy > .sec-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    background: var(--kg-red);
    margin-top: 12px;
  }
  .ol-experience-section .ol-view-all {
    order: 2;
    flex: none;
    align-self: flex-start;
    margin-top: calc(var(--bs-gutter-y) + 10px);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--kg-gold);
    font-weight: 700;
    font-size: 15px;
    color: var(--kg-navy);
  }
  .ol-experience-section .ol-view-all:hover {
    color: var(--kg-red);
  }
  .ol-experience-section .experience-copy > p {
    display: none;
  }
  .ol-experience-section .ol-mc-wrap {
    order: 3;
  }
  .ol-experience-section .experience-copy > .btn-red {
    order: 4;
    width: calc(100% - var(--bs-gutter-x));
    justify-content: center;
    margin-top: var(--bs-gutter-y) !important;
    padding: 17px 26px;
    letter-spacing: 2px;
  }
  .ol-experience-section [data-ol-mc] {
    --ol-w: 33.3333%;
  }
  .ol-experience-section .experience-leader {
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
  }
  .ol-experience-section .leader-photo.with-caption .leader-cap {
    right: 64px;
    line-height: 1.3;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  .ol-hero > .kg-container:first-child > .row {
    min-height: 0;
  }
  .ol-hero .ol-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  .ol-hero .ol-hero-copy {
    max-width: 80%;
    padding: 40px 0 120px calc(3% + 1.5rem);
  }
  .ol-hero .ol-hero-copy h1 {
    font-size: 34px;
  }
  .ol-hero .ol-hero-rule {
    width: 56px;
    margin-top: 16px;
  }
  .ol-hero .ol-hero-lead {
    font-size: 14.5px;
    line-height: 1.6;
    margin-top: 16px;
            max-width: 68%;

  }

  .ol-approach-section .approach-panel {
    margin-top: -70px;
    padding: 24px 8px 20px;
    border-radius: 16px;
  }
  .ol-approach-section .approach-panel-copy {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ol-approach-section .approach-panel-copy .sec-title {
    font-size: 26px;
  }
  .ol-approach-section .approach-panel-copy p {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .ol-approach-section .approach-item {
    gap: 8px;
    padding: 2px 2px;
    min-width: 0;
  }
  .ol-approach-section .approach-icon {
    width: 54px !important;
    height: 54px !important;
  }
  .ol-approach-section .approach-icon svg {
    width: 26px;
    height: 26px;
  }
  .ol-approach-section .approach-item h4 {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: -0.1px;
  }

  .ol-principles-section .sec-title {
    font-size: 26px;
  }
  .ol-principles-section [data-ol-mc] {
    --ol-w: 100%;
  }
  .ol-principles-section .value {
    padding: 18px 16px;
    column-gap: 14px;
  }
  .ol-principles-section .value > :first-child {
    width: 44px;
    height: 44px;
  }
  .ol-principles-section .value h3 {
    font-size: 16px;
  }
  .ol-principles-section .value p {
    font-size: 13px;
    line-height: 1.5;
  }

  .ol-experience-section .experience-copy > .sec-title {
    font-size: 24px;
  }
  .ol-experience-section .leader-photo.with-caption .leader-cap {
    left: 12px;
    right: 52px;
    bottom: 16px;
    font-size: 12.5px;
  }
  .ol-experience-section .leader-photo .leader-arrow {
    right: 10px;
    bottom: 12px;
    width: 34px;
    height: 34px;
  }
  .ol-experience-section .ol-view-all {
    font-size: 14px;
    margin-top: calc(var(--bs-gutter-y) + 4px);
  }
  .ol-experience-section [data-ol-mc] {
    --bs-gutter-x: 10px;
    --ol-w: 50%;
  }
  .ol-experience-section .experience-leader {
    height: 220px;
  }
  .ol-experience-section .experience-copy > .btn-red {
    padding: 15px 20px;
    font-size: 12px;
    letter-spacing: 1.6px;
  }
}

/* =========================================================================
   LEADERSHIP TEAM PAGE (template-leadership-team.php)
   ========================================================================= */
.page-id-71 .lt-group-title,
.lt-group-rule {
  display: none;
}

.lt-hero {
  background: #fff;
  padding: 56px 0 40px;
  text-align: center;
}
.lt-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.2;
  text-align: left;
  color: var(--kg-navy);
}
.lt-hero-lead {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--kg-muted);
  max-width: 620px;
  text-align: left;
}
.lt-tabs {
  justify-content: start;
  gap: 8px;
  border-bottom: 1px solid var(--kg-line);
  margin-top: 8px;
}
.lt-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--kg-muted);
  padding: 12px 0px;
  margin-right: 20px;
}
.lt-tabs .nav-link:hover {
  color: var(--kg-navy);
}
.lt-tabs .nav-link.active {
  color: var(--kg-navy);
  border-bottom-color: var(--kg-red);
}
.lt-group {
  padding: 40px 0;
}
.lt-group-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  color: var(--kg-navy);
  text-align: center;
  margin-bottom: 8px;
}
.lt-group-rule {
  width: 48px;
  height: 3px;
  background: var(--kg-red);
  margin: 0 auto 40px;
}

.lt-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  height: 100%;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.lt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(20, 41, 77, 0.4);
}
.lt-card-photo {
  height: 430px;
}
.lt-card-photo .leader-photo {
  height: 100%;
}
.lt-card-body {
  padding: 18px 16px 22px;
  text-align: center;
}
.lt-card-body h5 {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.lt-card-body .lt-position {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--kg-red);
}

@media (max-width: 767px) {
  .lt-hero h1 {
    font-size: 32px;
  }
  .lt-card-photo {
    height: 188px;
  }
}

/* =========================================================================
   CSR PAGE (template-csr.php)
   ========================================================================= */
/* eyebrow triple-dash accent (used under the hero + quote eyebrows) */
.tri-dash {
  display: flex;
  margin: 10px 0 20px;
}
.tri-dash span {
  width: 32px;
  height: 5px;
}
.tri-dash span:nth-child(1) {
  background: var(--kg-red);
}
.tri-dash span:nth-child(2) {
  background: var(--kg-gold);
}
.tri-dash span:nth-child(3) {
  background: var(--kg-navy);
}

.csr-hero {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.csr-hero-copy {
  padding: 30px 0;
  position: relative;
  max-width: 480px;
}
.csr-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.18;
  color: var(--kg-navy);
}
.csr-hero-lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-muted);
  margin-top: 18px;
}
.csr-dots {
  position: absolute;
  left: 0;
  bottom: -80px;
  width: 150px;
  height: 60px;
  background-image: radial-gradient(circle, #d7d3cb 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: 0.9;
}
.csr-hero-media {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}
.csr-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
  z-index: 99;
}
.csr-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csr-ribbon {
  position: absolute;
  left: 3%;
  top: -10%;
  width: 46px;
  height: 130%;
  z-index: 2;
  pointer-events: none;
}
.csr-ribbon span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: skewX(-12deg);
}
.csr-ribbon span:nth-child(1) {
  left: 0;
  background: var(--kg-red);
}
.csr-ribbon span:nth-child(2) {
  left: 16px;
  background: var(--kg-gold);
  opacity: 0.9;
}
.csr-ribbon span:nth-child(3) {
  left: 30px;
  background: var(--kg-navy);
  opacity: 0.85;
}

.approach-heading-wrap {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.approach-heading-wrap .hero-rule {
  margin: 14px auto 18px;
}
.approach-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  border-top: 4px solid var(--kg-green);
  text-align: center;
  height: 100%;
}
.diff-color:nth-child(2) .approach-card {
  border-top: 4px solid var(--kg-red) !important;
}
.diff-color:nth-child(3) .approach-card {
  border-top: 4px solid var(--kg-navy) !important;
}
.diff-color:nth-child(4) .approach-card {
  border-top: 4px solid var(--kg-gold) !important;
}

.approach-card-content {
  padding: 30px 20px;
}

.ac-media {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kg-line);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ac-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.approach-card h3 {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kg-green);
  margin-bottom: 15px;
}
.diff-color:nth-child(2) .approach-card h3 {
  color: var(--kg-red) !important;
}
.diff-color:nth-child(3) .approach-card h3 {
  color: var(--kg-navy) !important;
}
.diff-color:nth-child(4) .approach-card h3 {
  color: var(--kg-gold) !important;
}

.ac-underline {
  width: 26px;
  height: 2px;
  background: currentColor;
  color: var(--kg-green);
  margin: 0 auto 14px;
}
.diff-color:nth-child(2) .approach-card .ac-underline {
  color: var(--kg-red) !important;
}
.diff-color:nth-child(3) .approach-card .ac-underline {
  color: var(--kg-navy) !important;
}
.diff-color:nth-child(4) .approach-card .ac-underline {
  color: var(--kg-gold) !important;
}

.approach-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--kg-muted-2);
  margin: 0;
}

.principles-panel {
  background: #fff;
  padding: 48px;
}
.principles-copy {
  border-left: 1px solid #00000021;
}
.principles-copy p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--kg-muted);
  margin-top: 14px;
}
.principle-item {
  text-align: center;
  padding: 6px 10px;
  border-right: 1px solid #00000030;
}
.brnone:nth-child(3) .principle-item {
  border-right: none !important;
}
.principle-item svg {
  margin: 0 auto 14px;
  display: block;
}
.principle-item h4 {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.principle-item .pi-underline {
  width: 22px;
  height: 2px;
  background: var(--kg-red);
  margin: 0 auto 12px;
}
.principle-item p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kg-muted-2);
  margin: 0;
}

.csr-quote-photo {
  position: relative;
  min-height: 220px;
  height: 100%;
  overflow: hidden;
}
.csr-quote-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* mirror of .csr-ribbon (hero), anchored to the photo's RIGHT edge instead */
.csr-ribbon-right {
  left: auto;
  right: 3%;
}
.csr-quote-copy {
  position: relative;
  height: 440px;
  padding: 40px 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: 70%;
}
/* .csr-quote-copy.has-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
    z-index: 99;
} */
/* watermark skyline — rendered via a CSS background-image (not an <img> tag)
   on .csr-quote-copy.has-bg, using a ::before so opacity fades only the
   watermark and not the quote text sitting above it. */
/* ----- Quote / Illustration ----- */

/* Card ab panel (row) par hai, copy par nahi */
.csr-quote-panel {
  background-color: #fcfbf8; /* sketch ke paper tone se match — seam nahi dikhega */
  border: 1px solid var(--kg-border, #ececec);
  overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(20, 41, 77, 0.28);
}

/* --- Copy column --- */
.csr-quote-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 34px 16px 34px 44px;
}

.csr-quote-copy-inner {
  position: relative;
  max-width: 430px;
  padding-left: 26px; /* dots ke liye jagah */
}

/* Gold dotted marker — extra markup nahi chahiye */
.csr-quote-copy-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 34px;
  background-image: radial-gradient(
    circle,
    var(--kg-gold) 1.4px,
    transparent 1.5px
  );
  background-size: 3px 9px;
  background-repeat: repeat-y;
}

.csr-quote-mark {
  color: var(--kg-red);
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.75;
  display: block;
  margin-bottom: 10px;
}

.csr-quote h2 {
  font-family: inherit;
  font-weight: 800;
  font-size: 27px;
  line-height: 1.4;
  color: var(--kg-navy);
  margin: 0;
}
.csr-quote h2 .kg-red {
  color: var(--kg-red);
}

/* Tri-color line: red | gold | navy */
.csr-quote .hero-rule {
  width: 132px;
  height: 3px;
  border-radius: 2px;
  background: none;
  background-image: linear-gradient(
    90deg,
    var(--kg-red) 0 30%,
    transparent 30% 35%,
    var(--kg-gold) 35% 65%,
    transparent 65% 70%,
    var(--kg-navy) 70% 100%
  );
  margin: 16px 0 13px;
}

.csr-quote-sub {
  font-size: 13px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 330px;
  margin: 0;
}

/* --- Media column --- */
.csr-quote-media {
  position: relative;
  height: 100%;
  min-height: 225px; /* section ki height ka lever */
}
.csr-quote-media img {
  width: 100%;
  height: 350px;
  display: block;
  object-fit: contain; /* cover mat karo — sketch crop ho jaati hai */
  object-position: right center;
  opacity: 0.5;
}
/* Column boundary ko blend karta hai — yahi "opacity" ka kaam bhi karta hai */
.csr-quote-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #fcfbf8 0%,
    rgba(252, 251, 248, 0.8) 16%,
    rgba(252, 251, 248, 0.4) 36%,
    rgba(252, 251, 248, 0.14) 62%,
    rgba(252, 251, 248, 0) 88%
  );
}

@media (max-width: 991px) {
  .csr-quote {
    padding: 28px 0;
  }
  .csr-quote-copy {
    padding: 30px 24px 22px;
  }
  .csr-quote-copy-inner {
    max-width: none;
  }
  .csr-quote h2 {
    font-size: 23px;
  }
  .csr-quote-sub {
    max-width: none;
  }
  .csr-quote-media {
    min-height: 190px;
  }
  .csr-quote-media img {
    object-position: center bottom;
  }
  .csr-quote-media::after {
    background: linear-gradient(
      180deg,
      #fcfbf8 0%,
      rgba(252, 251, 248, 0.35) 40%,
      rgba(252, 251, 248, 0) 100%
    );
  }
}
.csr-cta-bar {
  background: var(--kg-navy);
  padding: 24px 0;
  position: relative;
  overflow: hidden;
}
.csr-cta-bar::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 90px;
  height: 220%;
  background: var(--kg-red);
  opacity: 0.9;
  transform: skewX(-16deg);
}
.csr-cta-bar::before {
  content: "";
  position: absolute;
  right: 2%;
  top: -40%;
  width: 34px;
  height: 220%;
  background: var(--kg-gold);
  opacity: 0.85;
  transform: skewX(-16deg);
  z-index: 1;
}
.csr-cta-bar .inner {
  position: relative;
  z-index: 2;
}
.csr-cta-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.csr-cta-bar h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}
.csr-cta-bar p {
  color: #c3cade;
  font-size: 13px;
  margin: 0;
}
/* CSR's bottom bar uses a slightly tighter button than the shared .btn-red
   default (which matches .btn-gold's padding) — kept as a scoped override
   so consolidating .btn-red didn't change this page's approved sizing. */
.csr-cta-bar .btn-red {
  padding: 13px 24px;
}

@media (max-width: 991px) {
  .csr-hero-copy {
    padding: 44px 0;
    max-width: none;
  }
  .csr-hero-copy h1 {
    font-size: 34px;
  }
  .csr-hero-media {
    min-height: 280px;
    clip-path: none;
  }
  .csr-ribbon {
    display: none;
  }
  .principles-panel {
    padding: 28px;
  }
  .csr-cta-bar .inner .row {
    text-align: center;
  }
}

/* =========================================================================
   OUR BUSINESSES — [kg_our_businesses] shortcode (inc/our-businesses.php)
   Two-part card for the /our-businesses/ page: featured image on top,
   a solid dark panel below it holding the title + "Explore Company" link.
   ========================================================================= */
.ob-section {
  padding: 72px 0;
}
.ob-empty {
  text-align: center;
  color: var(--kg-muted);
  padding: 40px 0;
}

@media (max-width: 991px) {
  .ob-section {
    padding: 52px 0;
  }
}

/* =========================================================================
   OUR BUSINESSES — MOBILE & TABLET (< 992px; desktop untouched)
   Red last word on the page title, intro line, then a swipe slider of
   tall photo cards (counter, tri-colour rule, name and round arrow over
   the image; next card peeking in from the right edge), with round
   prev/next buttons and dots + "Swipe to explore" below. Controls are
   wired by the script in inc/our-businesses.php.
   ========================================================================= */
@media (max-width: 991.98px) {
  .ob-title-accent {
    color: var(--kg-red);
  }
  .ob-intro {
    font-size: 16px;
    line-height: 1.65;
    color: var(--kg-muted);
    max-width: 620px;
    margin: 0;
  }
  .ob-section {
    padding: 28px 0 8px;
  }

  .ob-track {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 0;
    --ob-w: 46%;
    margin-top: 0;
    /* bleed to the right screen edge so the next card peeks in */
    margin-right: calc(50% - 50vw);
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ob-track::-webkit-scrollbar {
    display: none;
  }
  .ob-track > .col {
    flex: 0 0 var(--ob-w);
    width: var(--ob-w);
    max-width: none;
    scroll-snap-align: start;
  }

  .ob-section .co-card {
    position: relative;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
  }
  .ob-section .co-card:hover {
    transform: none;
  }
  .ob-section .co-thumb {
    height: 380px;
  }
  .ob-section .co-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      0deg,
      rgba(9, 18, 38, 0.88) 0%,
      rgba(9, 18, 38, 0.35) 35%,
      rgba(9, 18, 38, 0) 60%
    );
  }
  .ob-section .co-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 18px 22px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: end;
  }
  .ob-section .co-body > :not(.ob-count):not(.ob-rule):not(.co-name):not(.co-arrow) {
    display: none;
  }
  .ob-section .ob-count {
    grid-column: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .ob-section .ob-rule {
    grid-column: 1;
    margin: 6px 0 10px;
  }
  .ob-section .ob-rule span {
    width: 16px;
    height: 3px;
  }
  .ob-section .co-name {
    grid-column: 1;
    margin: 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #fff;
    text-transform: uppercase;
  }
  .ob-section .co-arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ob-section .co-strip {
    display: none;
  }

  .ob-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
  }
  .ob-controls.is-static {
    display: none !important;
  }
  .ob-controls-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .ob-controls .ob-dots {
    margin-top: 0;
  }
  .ob-hint {
    font-size: 12px;
    color: var(--kg-muted-2);
  }
  .ob-btn {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--kg-line);
    border-radius: 50%;
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 8px 18px -10px rgba(20, 41, 77, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s, background 0.25s, color 0.25s;
  }
  .ob-btn:hover,
  .ob-btn:focus-visible {
    background: var(--kg-navy);
    color: #fff;
  }
  .ob-btn.is-disabled {
    opacity: 0.4;
  }
}

/* mobile: one big card with the next one peeking in */
@media (max-width: 767.98px) {
  .ob-intro {
    font-size: 15px;
    line-height: 1.6;
  }
  .ob-track {
    --ob-w: 84%;
  }
  .ob-section .co-thumb {
    height: 340px;
  }
  .ob-section .co-name {
    font-size: 19px;
  }
  .ob-section .co-arrow {
    width: 44px;
    height: 44px;
  }
}

/* =========================================================================
   SINGLE COMPANY PAGE (single-kg_company.php)
   Shared by every `kg_company` post. Content for every section comes from
   the "Company Page — ..." meta boxes (inc/company-single-meta-boxes.php);
   a section renders nothing at all when its fields are empty.
   ========================================================================= */
.cs-center-title {
  text-align: center;
  /* max-width: 760px; */
  margin: 0 auto 44px;
}

/* shared colour-tint icon chips, reused by the hero badges, use-case
   badges and "why choose us" icons below */
/* .icon-red {
  background: rgba(216, 31, 38, 0.12);
}
.icon-gold {
  background: rgba(244, 184, 30, 0.18);
}
.icon-navy {
  background: rgba(20, 41, 77, 0.1);
}
.icon-green {
  background: rgba(47, 143, 78, 0.12);
} */

/* ----- Hero ----- */
.cs-hero {
  background: #fff;
}
.cs-hero-copy {
  padding: 50px 0;
}
.cs-hero-copy h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.18;
  color: var(--kg-navy);
}
.cs-hero-subheading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--kg-navy);
  margin-top: 10px;
}
.cs-hero-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 440px;
  margin-top: 40px;
}
.cs-hero-tags {
  display: flex;
  gap: 20px;
  margin-top: 22px;
}
.cs-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kg-navy);
}
.cs-hero-tag:not(:last-child) {
  padding-right: 20px;
  border-right: 1px solid var(--kg-line);
}
.cs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.cs-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--kg-navy);
  border: 1.5px solid var(--kg-navy);
  border-radius: 8px;
  padding: 13.5px 26px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.cs-btn-outline:hover {
  border-color: var(--kg-navy);
  color: var(--kg-navy);
}
.cs-hero-media {
  position: relative;
  min-height: 520px;
  height: 100%;
  overflow: hidden;
}
.cs-hero-media img,
.cs-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}
.page-id-202 .cs-hero-media {
  min-height: 320px;
}
.cs-hero-badges {
  position: absolute;
  top: 100px;
  right: 90px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
}
.cs-hero-badges .cs-hero-badge:last-child {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}
.cs-hero-badges .cs-hero-badge:last-child .cs-hero-badge-text,
.cs-hero-badges .cs-hero-badge:last-child .cs-hero-badge-text strong,
.cs-hero-badges .cs-hero-badge:last-child .cs-hero-badge-text span {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}
.cs-hero-badge {
  display: flex;
  align-items: center;
  gap: 30px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 15px;
  box-shadow: 0 12px 24px -14px rgba(20, 41, 77, 0.4);
}
.cs-why .cs-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.postid-22 .cs-why .cs-why-grid,
.postid-25 .cs-why .cs-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
/* .cs-why-card .cs-why-icon {
  background: #d81f26;
}
.cs-why-card:nth-child(2) .cs-why-icon {
  background: #f4b81e !important;
}
.cs-why-card:nth-child(3) .cs-why-icon {
  background: #14294d !important;
}
.cs-why-card:nth-child(4) .cs-why-icon {
  background: var(--kg-green) !important;
} */
.cs-hero-badge-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cs-hero-badge-text strong {
  font-size: 16px;
  color: var(--kg-navy);
}
.cs-hero-badge-text span {
  font-size: 12px;
  color: var(--kg-muted-2);
}

/* ----- Hero, "overlay" layout (full-bleed image behind copy + a
   floating stats bar) — e.g. Kingdom Readymix. Sibling alternative to
   the "split" layout above; toggled via _kg_cs_hero_style. ----- */
/* =========================================
   HERO
========================================= */

.cs-hero-overlay {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #fff;
}

/* =========================================
   HERO MAIN 2 COLUMNS
========================================= */

.cs-hero-main {
  min-height: 430px;
}

/* =========================================
   LEFT CONTENT
========================================= */

.cs-hero-overlay-copy {
  position: relative;
  z-index: 2;
  padding-right: 50px;
}

.cs-hero-overlay-copy .eyebrow {
  margin-bottom: 15px;
}

.cs-hero-overlay-copy h1 {
  margin-bottom: 18px;
}

.hero-rule {
  width: 70px;
  height: 4px;
  background: #d71920;
  margin: 18px 0 22px;
}

.cs-hero-subheading {
  margin-bottom: 12px;
}

.cs-hero-lead {
  margin-bottom: 25px;
}

.cs-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================
   RIGHT IMAGE
========================================= */

.cs-hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}

.cs-hero-image img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* =========================================
   HERO STATS BOX
========================================= */

.icons-box {
  position: relative;
  background: var(--kg-bg);
  top: -80px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 0;
  overflow: hidden;
  border-bottom: 4px solid transparent;
}

/* Top red decorative line */

.icons-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 150px;
  height: 8px;
  background: #d71920;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  z-index: 2;
}

/* Bottom blue decorative line */

.icons-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 150px;
  height: 8px;
  background: #102f4f;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  z-index: 2;
}

/* =========================================
   STATS ROW
========================================= */

.cs-hero-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
  min-height: 150px;
  padding: 8px 18px;
}

/* =========================================
   INDIVIDUAL STAT
========================================= */

.cs-hero-stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 15px;
  min-width: 0;
}

/* Vertical divider */

.cs-hero-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: calc(100% - 16px);
  background: #e4e4e4;
}

/* =========================================
   ICON
========================================= */

.cs-hero-stat-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d71920;
}
.cs-hero-stat-icon img {
      width: 80px;
    height: 80px;
    object-fit: contain;
}

/* =========================================
   TEXT
========================================= */

.cs-hero-stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
}

.cs-hero-stat-text strong {
  display: block;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  font-weight: 700;
  color: #1d2733;
  white-space: nowrap;
}

.cs-hero-stat-text span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 500;
  color: #3f4a55;
  text-transform: uppercase;
  white-space: normal;
}

/* =========================================
   YELLOW BOTTOM ACCENT
========================================= */

.icons-box .cs-hero-stats {
  position: relative;
}

.icons-box .cs-hero-stats::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 8px;
  background: #f5c400;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {
  .cs-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 5px;
    padding: 12px 15px;
  }

  .cs-hero-stat {
    padding: 8px 10px;
  }

  .cs-hero-stat:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 575px) {
  .cs-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 10px;
  }

  .cs-hero-stat {
    justify-content: flex-start;
    padding: 8px 12px;
  }

  .cs-hero-stat:nth-child(3)::after {
    display: block;
  }

  .cs-hero-stat:nth-child(even)::after {
    display: none;
  }

  .cs-hero-stat-text strong {
    font-size: 9px;
  }

  .cs-hero-stat-text span {
    font-size: 7px;
  }
}

/* =========================================================
   DELIVERY SYSTEM — fleet hero band with a floating 5-item
   feature row overlapping its image, plus the Digital
   Delivery System (POS tablet) block beneath it. Sits above
   Product Range on Kingdom Ready Mix.
========================================================= */
.cs-delivery-section {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.cs-delivery-copy {
  padding: 40px 0;
}

.cs-delivery-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.18;
  color: var(--kg-navy);
  margin: 10px 0 16px;
}

.cs-delivery-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 250px;
}

.cs-delivery-image {
  position: relative;
  width: 100%;
}
.cs-delivery-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 18%);
  z-index: 2;
}

.cs-delivery-image img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

/* floating feature row, pulled up over the image's bottom edge */
.cs-delivery-box {
  position: relative;
  top: -55px;
  margin-bottom: -55px;
  z-index: 2;
}

.cs-delivery-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(20, 41, 77, 0.14);
  padding: 32px 8px;
}

.cs-delivery-feature {
  position: relative;
  padding: 0 22px;
}

.cs-delivery-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--kg-line);
}

.cs-delivery-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: var(--kg-red);
  margin-bottom: 14px;
}
.cs-delivery-feature-icon svg {
  width: 100%;
  height: 100%;
}
.cs-delivery-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-delivery-feature h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--kg-navy);
  margin: 0 0 8px;
}

.cs-delivery-feature p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kg-muted);
  margin: 0;
}

/* ----- Digital Delivery System ----- */
.cs-digital-section {
  background: #fff;
  padding: 50px 0 60px;
}
.cs-digital-row {
  background: var(--kg-bg);
  border-radius: 12px;
}
.cs-digital-image {
  display: flex;
  justify-content: center;
}
.cs-digital-image img {
  max-width: 100%;
  width: 300px;
  height: auto;
  display: block;
}

.cs-digital-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 26px;
  color: var(--kg-navy);
  margin: 0 0 4px;
}

.cs-digital-tagline {
  font-weight: 800;
  font-size: 18px;
  color: var(--kg-red);
  margin: 0 0 16px;
}

.cs-digital-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 480px;
  margin: 0 0 30px;
}

.cs-digital-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cs-digital-feature {
  padding: 0 20px;
  text-align: center;
}

.cs-digital-feature:not(:last-child) {
  border-right: 1px solid var(--kg-line);
}

.cs-digital-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: var(--kg-red);
  box-shadow: 0 3px 10px rgba(20, 41, 77, 0.08);
}
.cs-digital-feature-icon svg {
  width: 40px;
  height: 40px;
}

.cs-digital-feature h5 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-navy);
  margin-top: 15px;
}

.cs-digital-feature p {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--kg-muted);
  margin: 0;
}

.cs-digital-note {
  position: relative;
  padding-left: 30px;
  border-left: 1px solid var(--kg-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cs-digital-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  color: var(--kg-red);
  box-shadow: 0 3px 10px rgba(20, 41, 77, 0.08);
  overflow: hidden;
}
.cs-digital-note-icon svg {
  width: 60px;
  height: 60px;
}

.cs-digital-note p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 0;
}

@media (max-width: 991px) {
  .cs-delivery-image img {
    height: 320px;
    border-radius: 6px;
  }
  .cs-delivery-box {
    top: -30px;
    margin-bottom: -30px;
  }
  .cs-delivery-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
    padding: 24px 16px;
  }
  .cs-delivery-feature:nth-child(2n)::after {
    display: none;
  }
  .cs-delivery-feature {
    padding: 0 10px;
  }
  .cs-digital-note {
    border-left: none;
    border-top: 1px solid var(--kg-line);
    padding-left: 0;
    padding-top: 24px;
    margin-top: 24px;
  }
}

@media (max-width: 575px) {
  .cs-delivery-heading {
    font-size: 28px;
  }
  .cs-delivery-features {
    grid-template-columns: 1fr;
  }
  .cs-delivery-feature:not(:last-child)::after {
    display: none;
  }
  .cs-digital-features {
    grid-template-columns: 1fr;
  }
  .cs-digital-feature:not(:last-child) {
    border-right: none;
  }
}

/* ----- Use Cases ("The ... Behind Every Stage") ----- */
.cs-usecases {
  background: #fff;
  padding: 80px 0;
}
.cs-usecase-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px -8px rgba(20, 41, 77, 0.18);
  padding-bottom: 20px;
  height: 100%;
  color: inherit;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.cs-usecase-card:hover {
  box-shadow: 0 12px 28px -10px rgba(20, 41, 77, 0.3);
  transform: translateY(-3px);
  color: inherit;
}
.cs-usecase-media {
  position: relative;
  height: 300px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--kg-bg);
}
.cs-usecase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-usecase-title {
  margin: 18px 20px 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--kg-navy);
}
.cs-usecase-text {
  margin: 0 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--kg-muted);
}
.cs-usecase-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kg-red);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-usecase-arrow {
  transition: transform 0.2s ease;
}
.cs-usecase-card:hover .cs-usecase-arrow {
  transform: translateX(3px);
}

/* ----- Products ----- */
.cs-products {
  background: var(--kg-bg);
  padding: 80px 0;
}
.cs-product-card {
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  color: #fff;
}
.cs-product-card.tint-navy {
  background: var(--kg-navy);
}
.cs-product-card.tint-red {
  background: var(--kg-red);
}
.cs-product-card.tint-gold {
  background: var(--kg-gold);
  color: var(--kg-navy);
}
.cs-product-card.tint-green {
  background: var(--kg-green);
}
.cs-product-copy {
  height: 100%;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-product-copy h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
}
.cs-product-grade {
  color: var(--kg-gold);
}
.tint-gold .cs-product-grade {
  color: var(--kg-red);
}
.cs-product-subtitle {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 6px;
}
.cs-product-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.75;
  margin: 16px 0 10px;
}
.cs-product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cs-product-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.4;
}
.cs-product-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.cs-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cs-product-tags span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.tint-gold .cs-product-tags span {
  background: rgba(20, 41, 77, 0.1);
}
.cs-product-btn {
  align-self: flex-start;
  margin-top: 22px;
  background: #fff;
  color: var(--kg-navy);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 3px;
  text-decoration: none;
}
.cs-product-btn:hover {
  background: var(--kg-bg);
  color: var(--kg-navy);
}
.cs-product-media {
  height: 100%;
  min-height: 220px;
  position: relative;
}
.cs-product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Why Choose Us ----- */
.cs-why {
  background: var(--kg-bg);
  padding: 80px 0;
}
.cs-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.cs-why-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: transparent;
  border-radius: 0;
}
.cs-why-card:first-child {
  padding-left: 0;
}
.cs-why-card:last-child {
  padding-right: 0;
}
.cs-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.cs-why-icon svg {
  stroke: #fff !important;
}
.cs-why-icon.icon-red {
  background: var(--kg-red);
}
.cs-why-icon.icon-gold {
  background: var(--kg-gold);
}
.cs-why-icon.icon-navy {
  background: var(--kg-navy);
}
.cs-why-icon.icon-green {
  background: var(--kg-green);
}
/* force a fixed red/gold/navy/red pattern by position, regardless of
   whatever color value is saved on each item in wp-admin */
.cs-why-grid .cs-why-card:nth-child(4n + 1) .cs-why-icon {
  background: var(--kg-red) !important;
}
.cs-why-grid .cs-why-card:nth-child(4n + 2) .cs-why-icon {
  background: var(--kg-gold) !important;
}
.cs-why-grid .cs-why-card:nth-child(4n + 3) .cs-why-icon {
  background: var(--kg-navy) !important;
}
.cs-why-grid .cs-why-card:nth-child(4n + 4) .cs-why-icon {
  background: var(--kg-red) !important;
}
.cs-why-content {
  flex: 1;
}
.cs-why-card h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--kg-navy);
  margin-bottom: 6px;
}
.cs-why-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--kg-muted);
}
.cs-why-card:not(:last-child) {
  border-right: 1px solid var(--kg-line);
}
/* ----- Why Choose Us — Kingdom Asphalt (kingdomasphalt.php) -----
   Laid out with Bootstrap .row / .col-12 .col-sm-6 .col-lg in the
   template (no CSS grid). The row deliberately does NOT carry the shared
   .cs-why-grid class, so the grid rules above (still used by other
   company pages) never touch it; these rules only add spacing, dividers
   and icon sizes on top of the Bootstrap columns.
   Desktop: all items in one row. Tablet: 2 per row. Phone: 1 per row,
   icon on the left (flex-row via Bootstrap utilities in the markup). */
.cs-why .cs-why-row .cs-why-card {
  gap: 16px;
  padding: 8px 24px;
  border: 0 !important;
}
.cs-why .cs-why-row .cs-why-content {
  width: 100%;
}
.cs-why .cs-why-row .cs-why-card p {
  max-width: 300px;
  margin: 0 auto;
}
.cs-why .cs-why-row .kg-svg-icon svg {
  width: 80px;
  height: 80px;
}
/* same fixed red / gold / navy / red icon pattern as the other pages,
   counted per column now that each card sits in its own .col */
.cs-why .cs-why-row .cs-why-col:nth-child(4n + 1) .cs-why-icon { background: var(--kg-red) !important; }
.cs-why .cs-why-row .cs-why-col:nth-child(4n + 2) .cs-why-icon { background: var(--kg-gold) !important; }
.cs-why .cs-why-row .cs-why-col:nth-child(4n + 3) .cs-why-icon { background: var(--kg-navy) !important; }
.cs-why .cs-why-row .cs-why-col:nth-child(4n + 4) .cs-why-icon { background: var(--kg-red) !important; }

/* desktop: one row, divider between neighbouring columns */
@media (min-width: 992px) {
  .cs-why .cs-why-row .cs-why-col + .cs-why-col {
    border-left: 1px solid var(--kg-line);
  }
}
@media (max-width: 1199.98px) {
  .cs-why .cs-why-row .cs-why-icon {
    width: 96px;
    height: 96px;
  }
  .cs-why .cs-why-row .kg-svg-icon svg {
    width: 60px;
    height: 60px;
  }
  .cs-why .cs-why-row .cs-why-card {
    padding: 8px 16px;
  }
}
/* tablet: 2 per row (col-sm-6) — divider between the pair, line between rows */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cs-why .cs-why-row .cs-why-card {
    padding: 28px 22px;
  }
  .cs-why .cs-why-row .cs-why-col:nth-child(even) {
    border-left: 1px solid var(--kg-line);
  }
  .cs-why .cs-why-row .cs-why-col:nth-child(n + 3) {
    border-top: 1px solid var(--kg-line);
  }
  .cs-why .cs-why-row .cs-why-card h3,
  .cs-why .cs-why-row .cs-why-card p {
    font-size: 14px;
  }
}
/* phone: 1 per row, icon left + text right */
@media (max-width: 575.98px) {
  .cs-why .cs-why-row .cs-why-card {
    padding: 20px 0;
  }
  .cs-why .cs-why-row .cs-why-col:first-child .cs-why-card {
    padding-top: 4px;
  }
  .cs-why .cs-why-row .cs-why-col + .cs-why-col {
    border-top: 1px solid var(--kg-line);
  }
  .cs-why .cs-why-row .cs-why-icon {
    width: 72px;
    height: 72px;
  }
  .cs-why .cs-why-row .kg-svg-icon svg {
    width: 42px;
    height: 42px;
  }
  .cs-why .cs-why-row .cs-why-card h3 {
    margin: 6px 0 4px;
  }
  .cs-why .cs-why-row .cs-why-card p {
    max-width: none;
    font-size: 14px;
    line-height: 1.6;
  }
}
/* ----- Quality You Can Trust ----- */
/* ----- At a Glance (reuses the Hero's Stats Bar data) ----- */
.cs-glance {
  background: #fff;
  padding: 64px 0;
}
.cs-glance-stat {
  text-align: center;
}
.cs-glance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kg-bg);
  margin-bottom: 14px;
}
.cs-glance-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--kg-red);
  text-align: left;
}
.cs-glance-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--kg-muted);
  text-transform: uppercase;
  margin-top: 4px;
  text-align: left;
}
/* Vertical divider between cards - matches the 2-up/4-up grid
   (row-cols-2 row-cols-lg-4): border after every item except the row's
   last one, with the border dropped off the 2nd/4th item on the 2-up
   layout so it doesn't show right before the row wraps. */
.cs-glance .col:not(:last-child) {
  border-right: 1px solid #bdbdbd;
}
@media (max-width: 991.98px) {
  .cs-glance .col:nth-child(2n) {
    border-right: none;
  }
}

/* ----- Manufacturing Excellence (dark stats banner) ----- */
.cs-stats-banner {
  background: url("images/why_us_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  padding: 56px 0;
}
.cs-stats-banner-title {
  color: #fff;
}
.cs-stats-banner-item {
  text-align: center;
}
.cs-stats-banner-icon {
  display: inline-flex;
  margin-bottom: 12px;
}
.cs-stats-banner-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--kg-gold);
}
.cs-stats-banner-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  margin-top: 4px;
}
/* Vertical divider between items - matches the 2-up/5-up grid
   (row-cols-2 row-cols-lg-5): border after every item except the row's
   last one, with the border dropped off the 2nd/4th item on the 2-up
   layout so it doesn't show right before the row wraps. */
.cs-stats-banner .col:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 991.98px) {
  .cs-stats-banner .col:nth-child(2n) {
    border-right: none;
  }
}

.cs-quality {
  background: #fff;
  padding: 40px 0;
}
.cs-quality-head {
  max-width: 250px;
  margin: 0 auto 44px;
  text-align: center;
}
.cs-quality-intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin-top: 12px;
}
.cs-quality-media {
  border-radius: 12px 12px 0px 0px;
  overflow: hidden;
  height: 320px;
}
.cs-quality-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-quality-stat {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 26px 12px;
  height: 100%;
}
.Qyct {
  background-color: #fff !important;
  border-radius: 0 12px 12px 0 !important;
  height: 120px;
}
.cs-quality-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  margin: 12px 0 6px;
}
.cs-quality-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kg-muted-2);
}

/* ----- Technical Resources ----- */
.cs-resources {
  background: #fff;
  padding: 80px 0;
}
.cs-resources-list {
  border-top: 1px solid var(--kg-line);
}
.cs-resource-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--kg-line);
}
.cs-resource-name {
  flex: 1 1 200px;
  font-weight: 700;
  color: var(--kg-navy);
}
.cs-resource-type {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--kg-bg);
  color: var(--kg-muted);
  padding: 4px 10px;
  border-radius: 4px;
}
.cs-resource-size {
  font-size: 12.5px;
  color: var(--kg-muted-2);
}
.cs-resource-download {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kg-red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
}
.cs-resource-download:hover {
  text-decoration: underline;
}
.cs-resources-media img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(20, 41, 77, 0.35);
  display: block;
}

/* ----- Featured Projects (latest kg_project posts) ----- */
.cs-featured-projects {
  background: var(--kg-bg);
  padding: 80px 0;
}
.cs-project-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px -8px rgba(20, 41, 77, 0.18);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.cs-project-media {
  aspect-ratio: 4 / 3;
}
.cs-project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-project-caption {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kg-navy);
}
.cs-featured-projects-cta {
  text-align: center;
  margin-top: 32px;
}

/* ----- simple Bottom CTA Bar (Kingdom Blocks) — distinct from Ready
   Mix's .cs-cta-bar, which has its own different structure/media. ----- */
.cs-cta-simple {
  background: var(--kg-navy);
  padding: 36px 0;
}
.cs-cta-simple-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-cta-simple h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 2px;
}
.cs-cta-simple p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  margin: 0;
}

@media (max-width: 991px) {
  .cs-hero-copy {
    padding: 32px 0;
  }
  .cs-hero-copy h1 {
    font-size: 32px;
  }
  .cs-hero-media {
    min-height: 300px;
  }
  .cs-hero-overlay {
    min-height: 460px;
  }
  .cs-hero-overlay-copy h1 {
    font-size: 30px;
  }
  .cs-hero-stat {
    min-width: 50%;
    border-right: none;
    border-bottom: 1px solid var(--kg-line);
  }
  .cs-why-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .cs-why-card {
    padding: 0 16px;
  }
  .cs-why-card:nth-child(odd) {
    padding-left: 0;
  }
  .cs-why-card:nth-child(even) {
    padding-right: 0;
    border-right: none;
  }
}
@media (max-width: 767px) {
  .cs-product-card .row {
    flex-direction: column;
  }
  .cs-product-media {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
  .cs-hero-badges {
    position: static;
    width: auto;
    margin-top: 16px;
  }
  .cs-hero-media::after {
    display: none;
  }
  .cs-hero-overlay {
    min-height: 0;
    padding-top: 36px;
  }
  .cs-hero-overlay-media {
    position: absolute;
    height: 100%;
  }
  .cs-hero-overlay-copy {
    padding-bottom: 40px;
    max-width: 100%;
  }
  .cs-hero-stats {
    margin-top: 0;
    flex-direction: column;
  }
  .cs-hero-stat {
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--kg-line);
  }
  .cs-hero-stat:last-child {
    border-bottom: none;
  }
  .cs-why-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .cs-why-card {
    padding: 0 0 20px;
    border-right: none !important;
    border-bottom: 1px solid var(--kg-line);
  }
  .cs-why-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .cs-usecases,
  .cs-products,
  .cs-why,
  .cs-quality,
  .cs-resources {
    padding: 52px 0;
  }
}

/* =========================================================================
   SINGLE COMPANY PAGE — Kingdom Readymix-style sections
   (template-parts/companies/kingdom-ready-mix.php). A dedicated page can
   mix and match any of these with the base sections above; every one
   follows the same rule — no content saved, nothing rendered.
   ========================================================================= */
.cs-subheading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--kg-navy);
  margin: 8px 0 22px;
}

/* ----- Video ----- */
.cs-video {
  background: #fff;
  padding: 70px 0;
}
.cs-video-text {
  max-width: 640px;
  color: var(--kg-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.cs-video-player {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(20, 41, 77, 0.4);
}
.cs-video-player video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}
.cs-video-wrap {
  position: relative;
}
.cs-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--kg-red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.cs-video-play svg {
  margin-left: 3px;
}
.cs-video-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}
.cs-video-wrap.is-playing .cs-video-play {
  display: none;
}
.cs-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}
.cs-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----- About & Features ----- */
.cs-about {
  background: var(--kg-bg);
  padding: 80px 0;
}
.cs-about-media {
  border-radius: 16px;
  overflow: hidden;
}
.cs-about-media img {
  width: 100%;
  display: block;
}
.cs-about-text {
  margin-top: 14px;
  color: var(--kg-muted);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 520px;
}
.cs-about-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.cs-about-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cs-about-feature-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-about-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cs-about-feature-copy strong {
  font-weight: 700;
  font-size: 14px;
  color: var(--kg-navy);
}
.cs-about-feature-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--kg-muted);
}

/* =========================================================
   PROCESS SECTION
========================================================= */

.cs-process {
  background: #fff;
  padding: 45px 0 35px;
}

/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.cs-process .eyebrow {
  margin: 0 0 7px;

  text-align: center;

  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  color: var(--kg-red);
}

/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.cs-process .sec-title {
  margin: 0 0 43px;

  text-align: center;

  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;

  color: var(--kg-navy);
}

/* =========================================================
   PROCESS TRACK
========================================================= */

.cs-process-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  gap: 0;
}

/* ---------------------------------------------------------
   RED CONNECTING LINE

   The line sits exactly behind the middle of the circles.
   The small vertical ends reproduce the shape in the image.
--------------------------------------------------------- */

.cs-process-track::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 80px;
  left: 0;
  right: 0;
  height: 15px;
  border-top: 1px solid var(--kg-red);
  border-left: 1px solid var(--kg-red);
  border-right: 1px solid var(--kg-red);

  border-radius: 14px 14px 0 0;

  pointer-events: none;
}

/* =========================================================
   INDIVIDUAL STEP
========================================================= */

.cs-process-step {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 16.666666%;

  text-align: center;
}

/* =========================================================
   NUMBER
========================================================= */

.cs-process-number {
  display: block;

  width: 100%;
  height: 18px;

  margin: 0 0 9px;

  color: var(--kg-red);

  font-size: 11px;
  line-height: 18px;
  font-weight: 700;

  text-align: center;
}

/* =========================================================
   CIRCLE
========================================================= */

.cs-process-circle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 0 13px;
  border-radius: 50%;
  background: #14294d;
  color: #fff;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Make sure icon is white */
.cs-process-circle svg {
  width: 50px;
  height: 50px;
  color: #fff;
  stroke: #fff;
}

/* =========================================================
   TITLE
========================================================= */

.cs-process-title {
  display: block;

  width: 100%;
  max-width: 105px;

  margin: 0;

  color: var(--kg-navy);

  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;

  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.cs-process-text {
  display: block;

  width: 100%;
  max-width: 105px;

  margin-top: 6px;

  color: var(--kg-muted);

  font-size: 7.5px;
  line-height: 1.55;
  font-weight: 400;

  text-align: center;
}

/* =========================================================
   REMOVE OLD ARROWS
========================================================= */

.cs-process-arrow {
  display: none !important;
}

/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1200px) {
  .cs-process-circle {
    width: 100px;
    height: 100px;
  }

  .cs-process-title {
    font-size: 14px;
  }

  .cs-process-text {
    font-size: 12px;
  }
}

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

@media (max-width: 991px) {
  .cs-process {
    padding: 40px 0 35px;
  }

  .cs-process .sec-title {
    margin-bottom: 40px;
    font-size: 20px;
  }

  .cs-process-track {
    max-width: 700px;
  }

  .cs-process-title {
    max-width: 95px;
  }

  .cs-process-text {
    max-width: 100px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .cs-process {
    padding: 40px 0;
  }

  .cs-process .sec-title {
    margin-bottom: 35px;
    font-size: 19px;
  }

  .cs-process-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    row-gap: 35px;
    column-gap: 10px;

    max-width: 400px;
  }

  .cs-process-track::before {
    display: none;
  }

  .cs-process-step {
    width: 100%;
  }

  .cs-process-circle {
    width: 58px;
    height: 58px;
  }

  .cs-process-title {
    max-width: 120px;
    font-size: 9px;
  }

  .cs-process-text {
    max-width: 125px;
    font-size: 8px;
  }
}

/* ----- Product Range & Machinery ----- */
.cs-range {
  background: #fff;
  padding: 80px 0;
}
.cs-range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cs-range-item {
  text-align: center;
}
.cs-range-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--kg-bg);
}
.cs-range-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-range-item span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--kg-navy);
}
.cs-range-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--kg-muted);
  margin-top: 3px;
}
.cs-machinery-card {
  background: var(--kg-bg);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  height: 100%;
}
.cs-machinery-media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #fff;
}
.cs-machinery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-machinery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-bottom: 6px;
}
.cs-machinery-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kg-navy);
}
.cs-machinery-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--kg-muted);
  margin-top: 4px;
}

/* ----- Batching Plants & Quality Assurance ----- */
.cs-batching {
  background: var(--kg-bg);
  padding: 80px 0;
}
.cs-batching-stats-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-navy);
  margin: 22px 0 12px;
}
.cs-batching-text {
  margin-top: 8px;
  color: var(--kg-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.cs-batching-images {
  display: flex;
  gap: 12px;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}
.cs-batching-image {
  flex: 1 1 100px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}
.cs-batching-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-batching-stat {
  background: #fff;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  height: 100%;
}
.cs-batching-stat-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  margin: 8px 0 4px;
}
.cs-batching-stat-label {
  font-size: 11px;
  color: var(--kg-muted-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.cs-qa-item {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  height: 100%;
}
.cs-qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.cs-qa-item h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--kg-navy);
  margin-bottom: 6px;
}
.cs-qa-item p {
  font-size: 12.5px;
  color: var(--kg-muted);
  line-height: 1.6;
  margin: 0;
}

/* ----- Bottom CTA Bar ----- */
.cs-cta-bar {
  background: var(--kg-navy);
  padding: 50px 0;
  color: #fff;
}
.cs-cta-media {
  border-radius: 12px;
  overflow: hidden;
}
.cs-cta-media img {
  width: 100%;
  display: block;
}
.cs-cta-bar h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 8px;
}
.cs-cta-bar p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.cs-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-cta-actions .btn-gold,
.cs-cta-actions .cs-btn-outline-light {
  justify-content: center;
}

@media (max-width: 767px) {
  .cs-about-features {
    grid-template-columns: 1fr;
  }
  .cs-range-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-process-track {
    justify-content: flex-start;
  }
}

/* =======================================================================
   OUR HISTORY / JOURNEY (template-history.php)
   Base rules below are the accessible, always-visible default: a plain
   vertical list, fully readable with no JS/CSS support for anything
   fancier. ".is-enhanced" (added by assets/front/history-journey.js only
   on desktop, with GSAP+ScrollTrigger loaded, and no prefers-reduced-motion)
   layers the pinned horizontal road experience on top of the exact same
   markup. ".is-simple"/".journey-reveal-js" is the same base layout with a
   lightweight IntersectionObserver fade-in, used on narrow viewports and
   as the reduced-motion / no-GSAP fallback.
   ======================================================================= */

.kg-history-intro {
  padding: 88px 0 44px;
  background: #fff;
  position: relative;
}

.kg-history-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--kg-muted);
  /* max-width: 620px; */
}

.journey-section {
  position: relative;
  background: var(--kg-bg);
  background-image: radial-gradient(
    circle,
    rgba(20, 41, 77, 0.08) 1.5px,
    transparent 1.5px
  );
  background-size: 22px 22px;
  background-position: -6px -6px;
}

/* ----- base / accessible layout (also the mobile + reduced-motion layout) ----- */
.journey-sticky {
  position: static;
  height: auto;
  overflow: visible;
}
.journey-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  transform: none;
}
.journey-road,
.journey-vehicle {
  display: none;
}

.journey-section.is-simple .journey-track {
  padding-left: 44px;
}
.journey-section.is-simple .journey-track::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 26px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--kg-line-2) 0 8px,
    transparent 8px 16px
  );
}

.kg-milestone {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  opacity: 1;
  transform: none;
}
.kg-milestone-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kg-milestone-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kg-line-2);
  box-shadow: 0 10px 24px -10px rgba(20, 41, 77, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
.kg-milestone-dot img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.kg-milestone-dot-default {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kg-red);
  display: block;
}
.kg-milestone-year {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--kg-navy);
  white-space: nowrap;
}
.kg-milestone-year.is-today {
  color: var(--kg-red);
}

.kg-milestone-card {
  position: static;
  flex: 1 1 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 46px -24px rgba(20, 41, 77, 0.35);
  padding: 20px 22px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.kg-milestone-media {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  line-height: 0;
}
.kg-milestone-media img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.kg-milestone-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--kg-navy);
  margin-bottom: 8px;
}
.kg-milestone-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 0;
}

/* gentle reveal used only when JS + IntersectionObserver are both
   available (assets/front/history-journey.js setupSimpleMode()) — items
   start fully visible below this, this only adds a fade/slide-in. */
.journey-section.journey-reveal-js .kg-milestone {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.journey-section.journey-reveal-js .kg-milestone.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ----- enhanced desktop mode: pinned, scroll-driven horizontal road ----- */
@media (min-width: 992px) {
  .journey-section.is-enhanced {
    background-image: none;
  }
  .journey-section.is-enhanced .journey-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .journey-section.is-enhanced .journey-track {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    will-change: transform;
  }
  .journey-section.is-enhanced .journey-track::before {
    content: none;
  }
  .journey-section.is-enhanced .journey-road,
  .journey-section.is-enhanced .journey-vehicle {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .journey-section.is-enhanced .road-outline {
    stroke: var(--kg-gold);
    stroke-width: 46;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .journey-section.is-enhanced .road-surface {
    stroke: #1b2436;
    stroke-width: 36;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .journey-section.is-enhanced .road-centre-line {
    stroke: #fff;
    stroke-width: 3;
    stroke-dasharray: 18 18;
    stroke-linecap: round;
    opacity: 0.85;
  }
  /* the mask content stroking .road-reveal — its width just needs to
     comfortably cover .road-centre-line's own 3px so the whole dashed
     line unmasks, not a hairline sliver down its centre; the mask's
     dashoffset (set in history-journey.js, in lockstep with the other
     road paths) is what actually drives the progressive reveal. */
  .journey-section.is-enhanced .road-reveal {
    stroke-width: 40;
  }

  .journey-section.is-enhanced .journey-vehicle-icon rect {
    fill: var(--kg-gold);
  }
  .journey-section.is-enhanced .journey-vehicle-icon path {
    fill: var(--kg-navy);
  }
  .journey-section.is-enhanced .journey-vehicle-icon circle {
    fill: #1b2436;
  }

  .journey-section.is-enhanced .kg-milestone {
    position: absolute;
    left: var(--mx, 0);
    top: var(--my, 0);
    transform: translate(-50%, -50%);
    z-index: 2;
    gap: 0;
  }
  .journey-section.is-enhanced .kg-milestone-marker {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 0;
    top: 0;
  }
  .journey-section.is-enhanced .kg-milestone-dot {
    width: 50px;
    height: 50px;
  }
  .journey-section.is-enhanced .kg-milestone.is-active .kg-milestone-dot {
    border-color: var(--kg-gold);
    box-shadow:
      0 0 0 7px rgba(244, 184, 30, 0.25),
      0 10px 24px -8px rgba(20, 41, 77, 0.45);
    transform: scale(1.1);
  }
  .journey-section.is-enhanced .kg-milestone.is-future .kg-milestone-dot {
    opacity: 0.35;
  }
  .journey-section.is-enhanced .kg-milestone.is-past .kg-milestone-dot {
    opacity: 0.9;
  }
  .journey-section.is-enhanced .kg-milestone-year {
    background: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    box-shadow: 0 8px 18px -8px rgba(20, 41, 77, 0.35);
    font-size: 16px;
  }
  .journey-section.is-enhanced .kg-milestone.is-active .kg-milestone-year {
    color: var(--kg-red);
  }
  .journey-section.is-enhanced .kg-milestone.is-future .kg-milestone-year {
    opacity: 0.45;
  }

  .journey-section.is-enhanced .kg-milestone-card {
    position: absolute;
    left: 50%;
    width: 300px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 16px) scale(0.96);
    transition:
      opacity 0.5s ease,
      transform 0.5s ease,
      visibility 0s linear 0.5s;
  }
  .journey-section.is-enhanced .kg-milestone.pos-bottom .kg-milestone-card {
    top: calc(100% + 30px);
  }
  .journey-section.is-enhanced .kg-milestone.pos-top .kg-milestone-card {
    bottom: calc(100% + 30px);
    top: auto;
    transform: translate(-50%, -16px) scale(0.96);
  }
  .journey-section.is-enhanced .kg-milestone.pos-left .kg-milestone-card {
    left: auto;
    right: calc(100% + 30px);
    top: 50%;
    transform: translate(-16px, -50%) scale(0.96);
  }
  .journey-section.is-enhanced .kg-milestone.pos-right .kg-milestone-card {
    left: calc(100% + 30px);
    top: 50%;
    transform: translate(16px, -50%) scale(0.96);
  }
  .journey-section.is-enhanced .kg-milestone.is-active .kg-milestone-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.6s ease 0.1s,
      transform 0.6s ease 0.1s;
  }
  .journey-section.is-enhanced
    .kg-milestone.is-active.pos-bottom
    .kg-milestone-card,
  .journey-section.is-enhanced
    .kg-milestone.is-active.pos-top
    .kg-milestone-card {
    transform: translate(-50%, 0) scale(1);
  }
  .journey-section.is-enhanced
    .kg-milestone.is-active.pos-left
    .kg-milestone-card,
  .journey-section.is-enhanced
    .kg-milestone.is-active.pos-right
    .kg-milestone-card {
    transform: translate(0, -50%) scale(1);
  }
}

/* content must never disappear if JS fails to add .is-enhanced correctly,
   and must never stay pinned/complex if the user asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .journey-section.is-enhanced .journey-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .journey-section.is-enhanced .journey-track {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }
  .journey-section.is-enhanced .journey-road,
  .journey-section.is-enhanced .journey-vehicle {
    display: none !important;
  }
  .journey-section.is-enhanced .kg-milestone {
    position: static !important;
    transform: none !important;
  }
  .journey-section.is-enhanced .kg-milestone-card {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    width: auto !important;
  }
}

@media (max-width: 767px) {
  .kg-history-intro {
    padding: 56px 0 32px;
  }
  .journey-track {
    gap: 32px;
    padding: 40px 16px 56px;
  }
  .journey-section.is-simple .journey-track {
    padding-left: 36px;
  }
  .journey-section.is-simple .journey-track::before {
    left: 20px;
  }
  .kg-milestone {
    gap: 16px;
  }
  .kg-milestone-dot {
    width: 42px;
    height: 42px;
  }
  .kg-milestone-dot img {
    width: 20px;
    height: 20px;
  }
  .kg-milestone-card {
    padding: 16px 18px;
  }
  .kg-milestone-media img {
    max-height: 160px;
  }
}

/* =======================================================================
   BLOCK PRODUCTS / CATEGORIES
   template-blocks.php (category index), taxonomy-kg_block_category.php
   + template-parts/block-categories/*.php (one design per category),
   single-kg_block_product.php.
   ======================================================================= */

/* ----- shared hero accent colours, used by every block-category design ----- */
.bc-hero-red {
  background: #fdf1f1;
}
.bc-hero-gold {
  background: #fdf8ea;
}
.bc-hero-navy {
  background: #eef1f6;
}
.bc-hero-green {
  background: #eef7f0;
}
/* "None" — Accent Colour field's 5th option: no tinted wash, just a
   plain white hero instead of a coloured one. */
.bc-hero-none {
  background: #fff;
}

/* ----- category index (template-blocks.php) ----- */
.bc-index {
  padding: 56px 0 88px;
  background: #fff;
}
.bc-index-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 620px;
  margin: 4px 0 40px;
}
.bc-index-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px -8px rgba(20, 41, 77, 0.18);
  color: inherit;
  height: 100%;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.bc-index-card:hover {
  box-shadow: 0 12px 28px -10px rgba(20, 41, 77, 0.3);
  transform: translateY(-3px);
  color: inherit;
}
.bc-index-media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.bc-index-media img,
.bc-index-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bc-index-img--placeholder {
  background: var(--kg-bg);
}
/* Circular accent-coloured icon badge, straddling the image/body seam,
   colour driven per-category by the term's own Accent Colour field. */
.bc-index-icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px -4px rgba(20, 41, 77, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-index-body {
  padding: 34px 20px 20px;
  text-align: center;
}
.bc-index-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--kg-navy);
  margin-bottom: 8px;
}
.bc-index-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--kg-muted);
  margin-bottom: 14px;
}
.bc-index-cta,
.bc-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kg-red);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bc-index-arrow,
.bc-product-arrow {
  transition: transform 0.2s ease;
}
.bc-index-card:hover .bc-index-arrow,
.bc-product-card:hover .bc-product-arrow {
  transform: translateX(3px);
}

/* ----- category hero (all variants share this base, each design only
   overrides layout, not colour/spacing tokens) ----- */

.bc-hero-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  max-width: 560px;
  margin-top: 12px;
}
.bc-hero-media img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
}
.bc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}
/* default + concrete-blocks (split) */

/* concrete-blocks — bold uppercase sans-serif section headings, matching
   its reference design's distinct type treatment. Added alongside
   .sec-title (never replacing it) so every other category/page keeps the
   sitewide serif heading untouched. */
.cb-sec-title {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
}

/* concrete-blocks — dark, photographic hero treatment. Reuses the
   category's own Hero image both as a low-opacity full-bleed backdrop
   (via the --bc-hero-bg custom property set inline on the section) and,
   crisp, in the right-hand column — no separate "background image"
   field needed. */
.bc-hero-dark {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.bc-hero-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bc-hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}

.bc-hero-dark .kg-container {
  position: relative;
  z-index: 1;
}

.bc-hero-dark .bc-hero-media img {
  height: 540px;
}

/* aac-blocks (full-bleed banner) */
.bc-hero-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.bc-hero-banner-overlay {
  width: 100%;
  padding: 40px 0;
  background: linear-gradient(
    90deg,
    rgba(20, 41, 77, 0.88) 0%,
    rgba(20, 41, 77, 0.55) 60%,
    rgba(20, 41, 77, 0.15) 100%
  );
}
.bc-hero-banner-overlay .eyebrow,
.bc-hero-banner-overlay .sec-title,
.bc-hero-banner-overlay .bc-hero-text {
  color: #fff;
}

/* paving (centered) */
.bc-hero-centered .bc-hero-text {
  margin-left: auto;
  margin-right: auto;
}
.bc-hero-media-wide {
  margin-top: 28px;
}
.bc-hero-media-wide img {
  max-height: 360px;
  object-fit: cover;
}

/* curb-stones (compact) */
.bc-hero-compact {
  padding: 40px 0;
}

/* wheel-stoppers (icon-led) */
.bc-hero-icon-badge {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(20, 41, 77, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- products grid (kg_render_block_products_grid(), used by every
   category design) ----- */
.bc-products {
  padding: 24px 0 72px;
  background: #fff;
}
.bc-product-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px -8px rgba(20, 41, 77, 0.18);
  color: inherit;
  height: 100%;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.bc-product-card:hover {
  box-shadow: 0 12px 28px -10px rgba(20, 41, 77, 0.3);
  transform: translateY(-3px);
  color: inherit;
}
.bc-product-media {
  /* aspect-ratio: 4 / 3; */
  height: 240px;
}
.bc-product-media img,
.bc-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bc-product-img--placeholder {
  background: var(--kg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}
.bc-product-body {
  padding: 16px 18px 18px;
}
.bc-product-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.bc-product-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--kg-muted);
  margin-bottom: 10px;
}
.bc-product-specs {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--kg-muted);
}
.bc-product-specs li span {
  font-weight: 600;
  color: var(--kg-navy);
}
.bc-empty {
  color: var(--kg-muted);
}

/* ----- single product page ----- */
.bp-hero {
  padding: 40px 0 64px;
  background: #fff;
}
.bp-hero-media img {
  width: 100%;
  border-radius: 14px;
  display: block;
}
.bp-icon {
  display: inline-flex;
  margin-bottom: 14px;
}
.bp-tagline {
  font-size: 16px;
  color: var(--kg-muted);
  margin-top: 6px;
}
.bp-description {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kg-muted);
}
.bp-specs {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--kg-line);
}
.bp-specs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kg-line);
  font-size: 14px;
}
.bp-spec-label {
  color: var(--kg-muted-2);
  font-weight: 600;
}
.bp-spec-value {
  color: var(--kg-navy);
  font-weight: 700;
  text-align: right;
}
.bp-gallery {
  padding: 0 0 72px;
  background: #fff;
}
.bp-gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}
.bp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .bc-hero-split .bc-hero-copy {
    padding: 24px 0 0;
  }
  .bc-hero-icon-led .kg-container {
    flex-direction: column;
    text-align: center;
  }
}
/*  */
/* Upgraded to a small icon+title+description feature card whenever a
   Description is actually filled in (e.g. Kingdom Blocks' "Superior
   Quality" row) — plain availability pills (e.g. "Bulk Supply", no
   description set) on other company pages are untouched. */
.cs-hero-tag.has-description {
  align-items: flex-start;
  gap: 12px;
  max-width: 220px;
}
.cs-hero-tag-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-tag-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-hero-tag-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-navy);
}
.cs-hero-tag-desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--kg-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* ----- hero feature badges (below hero text, no image overlay) -----
   Each row can be a plain label (existing behaviour) or, once its
   optional Description text is filled in, an icon + label + description
   column — the concrete-blocks reference design uses the latter. */
.bc-hero-features {
  display: flex;
  gap: 20px;
  margin: 26px 0 8px;
}
.bc-hero-feature {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 190px;
}

.bc-hero-feature:not(:last-child) {
  border-right: 1px solid #ddd;
  padding-right: 25px;
  margin-right: 25px;
}
.bc-hero-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.bc-hero-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bc-hero-feature-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-navy);
}

.bc-hero-feature-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--kg-muted);
  font-weight: 500;
}

/* ----- Product Range teaser ----- */
.bc-range {
  padding: 64px 0;
  background: #fff;
}
.bc-range-intro .btn-red {
  margin-top: 18px;
}
.bc-range-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 10px 0 20px;
}
.bc-range-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.bc-range-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 30px;
  border: 1.5px solid var(--kg-line);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-navy);
  background: #fff;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.bc-range-pill:hover {
  border-color: var(--kg-red);
  color: var(--kg-red);
}
.bc-range-pill.is-active {
  background: var(--kg-red);
  border-color: var(--kg-red);
  color: #fff;
}

/* ----- compact product card (teaser + catalogue groups) ----- */
.bc-mini-card {
  pointer-events: none;
  position: relative;
  display: block;
  background: #f6f6f6;
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  color: inherit;
  box-shadow: 0 4px 16px -10px rgba(20, 41, 77, 0.2);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}
.bc-mini-card:hover {
  box-shadow: 0 12px 26px -14px rgba(20, 41, 77, 0.35);
  transform: translateY(-2px);
  border-color: var(--kg-red);
  color: inherit;
}
.bc-mini-card-media {
  /* aspect-ratio: 1 / 1; */
  height: 218px;
  background: var(--kg-bg);
}
.bc-mini-card-media img,
.bc-mini-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.bc-mini-card-img--placeholder {
  background: var(--kg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}
.bc-mini-card-body {
  padding: 12px 14px 16px;
}
.bc-mini-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.bc-mini-card-spec {
  font-size: 11px;
  color: var(--kg-muted);
  margin: 0;
  line-height: 1.5;
}
.bc-mini-card-tagline {
  font-size: 12px;
  color: var(--kg-muted);
  margin: 0 0 10px;
  line-height: 1.55;
}
.bc-mini-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-red);
}

/* ----- Key Features / Technical Specifications (term-level, side-by-side
   panel — separate from the Featured Product spotlight's own specs
   table further down the page) ----- */
.cb-fs {
  padding: 56px 0;
  background: var(--kg-bg);
}
.cb-fs-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--kg-navy);
  margin-bottom: 20px;
}
.cb-key-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cb-key-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kg-navy);
  font-weight: 600;
}
.cb-key-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kg-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ----- Catalogue ----- */
.bc-catalogue {
  padding: 64px 0;
  background: var(--kg-bg);
}
.bc-catalogue-group {
  margin-bottom: 40px;
}
.bc-catalogue-group-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kg-navy);
  border-left: 3px solid var(--kg-gold);
  padding-left: 10px;
  margin-bottom: 18px;
}
/* Catalogue footer: Key Features + Download Brochure */
.bc-catalogue-footer {
  margin-top: 32px;
  font-family: var(--sans);
  color: #1a1a1a;
}
.bc-kf-title {
  display: inline-block;
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1a1a1a;
}
.bc-kf-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--kg-gold);
}
.bc-kf-card {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 34px 32px 30px;
}
.bc-kf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.bc-kf-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 0 24px;
  border-left: 1px solid #e2e2e2;
}
.bc-kf-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.bc-kf-item:last-child {
  padding-right: 0;
}
.bc-kf-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #1a1a1a;
}
.bc-kf-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bc-kf-item h3 {
  margin: 2px 0 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: #1a1a1a;
}
.bc-kf-item p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #555;
}
.bc-kf-download {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  padding: 20px 32px 20px 38px;
  border-radius: 6px;
  background: #2e2e2e;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.bc-kf-download:hover,
.bc-kf-download:focus-visible {
  background: #1c1c1c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.bc-kf-download-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.bc-kf-download-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bc-kf-download strong {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bc-kf-download span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #d4d4d4;
}
@media (max-width: 991px) {
  .bc-kf-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .bc-kf-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .bc-kf-item:nth-child(even) {
    padding-right: 0;
  }
}
@media (max-width: 575px) {
  .bc-kf-title {
    font-size: 22px;
  }
  .bc-kf-card {
    padding: 24px 20px;
  }
  .bc-kf-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-bottom: 24px;
  }
  .bc-kf-item {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid #e2e2e2;
  }
  .bc-kf-item:nth-child(odd),
  .bc-kf-item:nth-child(even) {
    padding: 16px 0;
  }
  .bc-kf-item:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .bc-kf-download {
    gap: 18px;
    padding: 18px 20px;
  }
  .bc-kf-download strong {
    font-size: 15px;
  }
  .bc-kf-download span {
    font-size: 13.5px;
  }
}

/* ----- Process ("How We Make Our Blocks") ----- */
.bc-process {
  padding: 64px 0;
  background: #fff;
}
.bc-process-steps {
  margin-bottom: 32px;
}
.bc-process-step {
  text-align: center;
  position: relative;
  height: 100%;
}
.bc-process-step-number {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: #00000026;
  margin-bottom: 6px;
}
.bc-process-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--kg-bg);
  margin-bottom: 10px;
}
.bc-process-step h4 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--kg-navy);
  margin-bottom: 10px;
  margin-top: 20px;
}
.bc-process-step p {
  font-size: 12px;
  color: var(--kg-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}
.bc-process-photo {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}
.bc-process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-clear-filter {
  border: 1px solid #d7d7d7;
  background: #e9e9e9;
  padding: 4px 10px;
  border-radius: 4px;
  margin-left: 10px;
}
/* ----- Featured Product Spotlight ----- */
.bc-spotlight {
  padding: 64px 0 32px;
  background: var(--kg-bg);
}
.bc-spotlight-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-spotlight-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--kg-line);
}
.bc-spotlight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bc-spotlight-media {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--kg-line);
}
.bc-spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bc-spotlight-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kg-bg);
  opacity: 0.5;
}
.bc-spotlight-tagline {
  font-size: 14px;
  color: var(--kg-red);
  font-weight: 700;
  margin-top: 4px;
}
.bc-spotlight-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 12px 0;
}
.bc-spotlight-specs {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.bc-spotlight-specs li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--kg-line);
  padding-bottom: 6px;
  font-size: 13px;
}
.bc-spotlight-specs li span {
  color: var(--kg-muted-2);
}
.bc-spotlight-specs li strong {
  color: var(--kg-navy);
}
.bc-spotlight-why {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  margin-top: 32px;
}
.bc-spotlight-why h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--kg-navy);
  margin-bottom: 14px;
}
.bc-spotlight-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.bc-spotlight-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--kg-navy);
  font-weight: 600;
}
.bc-spotlight-why-check {
  color: var(--kg-red);
  font-weight: 800;
  flex-shrink: 0;
}
.bc-spotlight-caption {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--kg-muted);
  font-style: italic;
}

/* ----- Technical Specifications ----- */
.bc-specs {
  padding: 32px 0 64px;
  background: var(--kg-bg);
}
.bc-specs-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}
.bc-specs-table tr:nth-child(odd) {
  background: var(--kg-bg);
}
.bc-specs-table th,
.bc-specs-table td {
  padding: 14px 20px;
  font-size: 13.5px;
  text-align: left;
}
.bc-specs-table th {
  width: 40%;
  font-weight: 700;
  color: var(--kg-navy);
}
.bc-specs-table td {
  color: var(--kg-muted);
}

/* ----- Built for Every Application ----- */
.bc-applications {
  padding: 64px 0;
  background: #fff;
}
.bc-application-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--kg-navy);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 22px 16px;
  color: #fff;
}
.bc-application-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 41, 77, 0.15) 0%,
    rgba(13, 20, 33, 0.88) 100%
  );
}
.bc-application-icon,
.bc-application-card h4,
.bc-application-card p {
  position: relative;
  z-index: 1;
}
.bc-application-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}
.bc-application-card h4 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bc-application-card p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ----- Need Help Choosing (contact banner) ----- */
.bc-contact {
  background: var(--kg-navy);
  color: #fff;
  padding: 48px 0;
}
.bc-contact h3 {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.bc-contact p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.6;
}
.bc-contact-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 1 / 1;
}
.bc-contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
}
.bc-contact-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 41, 77, 0) 45%,
    var(--kg-navy) 100%
  );
}
.bc-contact-info p {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.bc-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.bc-contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.bc-contact-phone:hover {
  color: var(--kg-gold);
}
.bc-contact-phone-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bc-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  padding: 13px 24px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
}
.bc-contact .cs-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.bc-contact .cs-btn-outline:hover {
  border-color: #fff;
}

/* ----- Footer trust strip ----- */
.bc-trust-strip {
  background: #fff;
  border-top: 1px solid var(--kg-line);
  padding: 24px 0;
}
.bc-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kg-navy);
}

/* concrete-blocks' own trust badge treatment — icon-in-a-circle + label +
   optional description, stacked and centered. Kept separate from
   .bc-trust-badge above (used by paving.php's simpler inline row) so this
   richer layout doesn't change that page's look. */
.cb-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.cb-trust-badge-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--kg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(20, 41, 77, 0.3);
}
.cb-trust-badge-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--kg-navy);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cb-trust-badge-desc {
  font-size: 12px;
  color: var(--kg-muted);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .bc-hero-features {
    gap: 20px;
  }
  .bc-spotlight-specs,
  .bc-spotlight-why-list {
    grid-template-columns: 1fr;
  }
}

/*  */
.csr-quote-photo::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}

.ac-bg-illustration {
  position: relative;
  opacity: 0.25;
  pointer-events: none;
}
.ac-bg-illustration img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

/* ===== RESOURCES PAGE (template-resources.php) ===== */

/* Short red rule under the "Resources" H1 — .cs-hero/.cs-hero-copy/
   .cs-hero-lead/.cs-hero-media themselves are the shared split-hero
   styles already used by template-blocks.php etc. */
.res-hero-bar {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--kg-red);
  border-radius: 2px;
  margin: 4px 0 20px;
}

.res-filters {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  box-shadow: 0 18px 40px -28px rgba(20, 41, 77, 0.25);
}
.res-filters-row + .res-filters-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--kg-line);
}
.res-filters-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kg-muted-2);
  margin-bottom: 12px;
}
.res-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.res-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.res-filter-chip:hover {
  border-color: var(--kg-red);
  color: var(--kg-red);
}
.res-filter-chip.active {
  background: var(--kg-red);
  border-color: var(--kg-red);
  color: #fff;
}
.res-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--kg-line);
  color: var(--kg-muted-2);
}
.res-search-row input {
  flex: 1;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--kg-navy);
}
.res-search-row input:focus {
  outline: none;
  border-color: var(--kg-red);
}

.res-section {
  margin: 40px 0;
}
.res-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kg-line);
}
.res-section-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--kg-navy);
  margin: 0;
}
.res-section-head h2 svg {
  color: var(--kg-red);
  flex-shrink: 0;
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.res-card:hover {
  box-shadow: 0 18px 40px -24px rgba(20, 41, 77, 0.35);
  transform: translateY(-2px);
}
.res-card-thumb {
  position: relative;
  height: 240px;
  background: var(--kg-bg);
  overflow: hidden;
}
.res-card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.res-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 22, 42, 0.55);
  opacity: 0;
  transition: opacity 0.2s;
}
.res-card:hover .res-card-overlay {
  opacity: 1;
}
.res-card-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--kg-navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.res-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kg-navy);
}
.res-card-badge.type-brochures {
  background: var(--kg-red) !important;
}
.res-card-badge.type-presentations {
  background: var(--kg-gold) !important;
  color: var(--kg-navy) !important;
}
.res-card-badge.type-reports,
.res-card-badge.type-policies-documents {
  background: var(--kg-navy) !important;
}
.res-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.res-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.res-card-filetype-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  border-radius: 3px;
  background: var(--kg-red);
  color: #fff;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.res-card-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--kg-navy);
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-card-subtitle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--kg-muted);
  margin: 0 0 12px;
}
.res-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--kg-muted);
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: none;
}
.res-card-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--kg-red);
  transition: color 0.2s;
}
.res-card-download:hover {
  color: var(--kg-navy);
}

.res-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--kg-muted-2);
}
.res-empty svg {
  color: var(--kg-muted-2);
  margin-bottom: 16px;
}
.res-empty p {
  max-width: 420px;
  margin: 0 auto;
}
.res-empty strong {
  color: var(--kg-navy);
}

@media (max-width: 991px) {
  .res-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .res-filters {
    padding: 16px;
  }
  .res-filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .res-filter-group::-webkit-scrollbar {
    height: 4px;
  }
  .res-filter-chip {
    flex-shrink: 0;
  }
}

@media (max-width: 575px) {
  .res-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1600px) {
  .res-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* ===== CAREERS PAGE (template-careers.php) ===== */

.btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--kg-navy);
  color: #fff;
  padding: 15px 26px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
}
.btn-navy:hover {
  background: #0d1c38;
  color: #fff;
}

.career-hero {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.career-hero-inner {
  position: relative;
  z-index: 2;
  padding: 56px 0;
}
.career-hero-copy h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.15;
  color: var(--kg-navy);
  margin: 0;
}
.career-hero-line {
  display: block;
}
.career-hero-highlight {
  color: var(--kg-red);
}
.career-hero-bar {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--kg-red);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.career-hero-lead {
  font-size: 16px;
  color: var(--kg-muted);
  max-width: 480px;
  margin-bottom: 24px;
}
.career-hero-btn {
  text-decoration: none;
}

/* Full-bleed photo + a nested gold/red/navy corner ribbon, all
   clipped from the SAME box via percentage-based clip-path (photo box
   itself isn't clipped — just square, no radius, so it can genuinely
   bleed to the section edges). Each ribbon triangle is anchored at
   the box's bottom-right corner and is progressively smaller than the
   one below it in stacking order, so from the photo inward you see:
   photo -> gold sliver -> red sliver -> navy (the actual corner) —
   the same "shared box + percentages, not transform" principle as the
   Contact Us hero's diagonal seam (template-contact.php), just shaped
   as a corner triangle instead of a full-height seam. Using
   percentages here (rather than the previous fixed-px
   repeating-linear-gradient + skewY, which had no relationship to the
   photo box at all) is what keeps the ribbon actually attached to the
   photo's corner at any viewport width. */

.chv-photo-career {
  position: relative;
  inset: 0;
  overflow: hidden;
  height: 500px;
}
.chv-photo-career img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chv-photo-career::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
  z-index:9;
}
.career-benefits {
  padding: 8px 0 48px;
}
.cb-bar {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -28px rgba(20, 41, 77, 0.25);
  overflow: hidden;
}
.cb-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  height: 100%;
  border-right: 1px solid var(--kg-line);
  border-bottom: 1px solid var(--kg-line);
}
.cb-bar .col-lg-3:last-child .cb-item,
.cb-bar .col-6:nth-child(2n) .cb-item {
  border-right: none;
}
.cb-item-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cb-item-icon.icon-red {
  background: var(--kg-red);
}
.cb-item-icon.icon-gold {
  background: var(--kg-gold);
}
.cb-item-icon.icon-navy {
  background: var(--kg-navy);
}
.cb-item-icon.icon-green {
  background: var(--kg-green);
}
.cb-item-icon svg {
  stroke: #fff !important;
}
.cb-item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cb-item-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cb-item-text {
  font-size: 13px;
  color: var(--kg-muted);
  line-height: 1.4;
}

.career-main {
  padding: 48px 0 80px;
}
.career-why-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  color: var(--kg-navy);
  margin: 0;
}
.career-underline-bar {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--kg-gold);
  border-radius: 2px;
  margin: 10px 0 16px;
}
.career-underline-bar-sm {
  background: var(--kg-gold);
  margin: 8px 0 12px;
}
.career-why-text {
  color: var(--kg-muted);
  max-width: 640px;
  margin-bottom: 32px;
}
.career-positions-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--kg-navy);
  margin-bottom: 16px;
}

.career-jobs-list {
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
}
.job-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--kg-line);
  background: #fff;
}
.job-row:last-child {
  border-bottom: none;
}
.job-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(216, 31, 38, 0.1);
  color: var(--kg-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-row-info {
  flex: 1;
  min-width: 0;
}
.job-row-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--kg-navy);
  margin: 0 0 4px;
}
.job-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--kg-muted-2);
}
.job-row-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.job-row-apply {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--kg-red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.job-row-apply:hover {
  text-decoration: underline;
}

.career-jobs-empty {
  border: 1px dashed var(--kg-line);
  border-radius: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--kg-muted);
}
.career-jobs-empty p:first-child {
  color: var(--kg-navy);
  font-size: 16px;
}

.career-ready-card {
  background: var(--kg-bg);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.career-ready-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 12px;
}
.career-ready-card h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--kg-navy);
  margin: 0;
}
.career-ready-card p {
  color: var(--kg-muted);
  font-size: 14px;
}
.career-ready-btn {
  border: none;
  width: 100%;
  justify-content: center;
  margin: 8px 0 20px;
}
.career-ready-bottom {
  font-size: 13px;
  border-top: 1px solid var(--kg-line-2);
  padding-top: 16px;
  text-align: center;
}
.career-ready-bottom a {
  color: var(--kg-red);
  font-weight: 700;
}

.career-upload-box {
  border: 1.5px dashed var(--kg-red);
  border-radius: 10px;
  background: #fff;
  padding: 20px 16px;
  margin: 16px 0;
  text-align: center;
  cursor: pointer;
}
.career-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(216, 31, 38, 0.08);
  margin-bottom: 10px;
}
.career-upload-title {
  display: block;
  color: var(--kg-red);
  font-weight: 800;
  font-size: 14px;
}
.career-upload-text {
  display: block;
  color: var(--kg-navy);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
}
.career-upload-hint {
  display: block;
  color: var(--kg-muted);
  font-size: 12px;
  margin-top: 6px;
}
.career-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kg-muted);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 16px;
}
.career-or-divider::before,
.career-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kg-line-2);
}

/* ---- Application modal chrome (modal-only; the CF7 form styling
   itself lives in the shared ".kg-cf7-form" block below, reused by
   both this modal and the plain Contact page card) ---- */
.kg-application-modal .modal-content {
  padding: 32px;
  border-radius: 12px;
}
.kg-application-modal h3 {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--kg-navy);
  margin-bottom: 20px;
}

/* ---- Shared Contact Form 7 styling (".kg-cf7-form" wraps the
   shortcode output wherever it's embedded — the Careers application
   modal AND the Contact Us "Send Us a Message" card) ----
   The form itself is rendered by CF7 (a shortcode, not our markup —
   see template-parts/careers/application-form.php and
   template-parts/contact/message-form.php), so none of our own form
   classes exist inside it. Everything below targets CF7's own default
   output classes instead (.wpcf7-form-control, .wpcf7-acceptance,
   .wpcf7-submit, .wpcf7-response-output, etc.) plus the
   .cf7-grid/.cf7-col-* wrapper classes each form's own Form-tab markup
   (see those files' header comments) is expected to use for its
   two-column layout — CF7 has no layout opinion of its own, a plain
   [text] tag just outputs one unstyled <input>. */
.kg-cf7-form .cf7-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.kg-cf7-form .cf7-grid p {
  margin-bottom: 16px;
}
.kg-cf7-form .cf7-col-6 {
  flex: 1 1 calc(50% - 8px);
  min-width: 200px;
}
.kg-cf7-form .cf7-col-12 {
  flex: 1 1 100%;
}

.kg-cf7-form .cf7-grid > p > label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--kg-navy);
  margin-bottom: 6px;
}
.kg-app-hint {
  font-weight: 400;
  color: var(--kg-muted-2);
  font-size: 12px;
}

.kg-cf7-form input[type="text"],
.kg-cf7-form input[type="email"],
.kg-cf7-form input[type="tel"],
.kg-cf7-form input[type="file"],
.kg-cf7-form textarea.wpcf7-form-control {
  display: block;
  width: 100%;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--kg-navy);
  background: #fff;
}
.kg-cf7-form textarea.wpcf7-form-control {
  min-height: 100px;
  resize: vertical;
}
.kg-cf7-form input:focus,
.kg-cf7-form textarea:focus {
  outline: none;
  border-color: var(--kg-red);
}
.kg-cf7-form .wpcf7-not-valid {
  border-color: var(--kg-red) !important;
}
.kg-cf7-form .wpcf7-not-valid-tip {
  display: block;
  color: var(--kg-red);
  font-size: 12px;
  margin-top: 4px;
}

.kg-cf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.kg-cf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--kg-muted);
}
.kg-cf7-form .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.kg-cf7-form .wpcf7-acceptance a {
  color: var(--kg-red);
  font-weight: 700;
}

.kg-cf7-form input.wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: var(--kg-red);
  color: #fff;
  border: none;
  padding: 15px 26px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.kg-cf7-form input.wpcf7-submit:hover {
  background: #b3161c;
}
.kg-cf7-form input.wpcf7-submit:disabled {
  opacity: 0.7;
}
.kg-cf7-form .wpcf7-spinner {
  margin: 0 0 0 10px;
}

.kg-cf7-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  border-width: 1px;
}
.kg-cf7-form .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(47, 143, 78, 0.12);
  color: var(--kg-green);
  border-color: transparent;
}
.kg-cf7-form .wpcf7 form.invalid .wpcf7-response-output,
.kg-cf7-form .wpcf7 form.failed .wpcf7-response-output,
.kg-cf7-form .wpcf7 form.aborted .wpcf7-response-output {
  background: rgba(216, 31, 38, 0.1);
  color: var(--kg-red);
  border-color: transparent;
}

.kg-app-cf7-missing {
  padding: 16px;
  border: 1px dashed var(--kg-line);
  border-radius: 8px;
  color: var(--kg-muted);
}

@media (max-width: 575px) {
  .kg-cf7-form .cf7-col-6 {
    flex: 1 1 100%;
  }
}

@media (max-width: 991px) {
  .career-hero-copy h1 {
    font-size: 34px;
  }
  .cb-item {
    border-right: none;
  }
  .cb-bar .col-6 {
    border-right: 1px solid var(--kg-line);
  }
  .cb-bar .col-6:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 767px) {
  /* Same trade-off as the Contact Us hero at this breakpoint — the
     absolutely-positioned photo+ribbon visual covers 56% of the
     width regardless of viewport, which doesn't leave room for the
     text below this size, so it simplifies to text-only. */
  .career-hero-visual {
    display: none;
  }
  .career-hero {
    min-height: 0;
  }
  .career-hero-copy h1 {
    font-size: 28px;
  }
  .job-row {
    flex-wrap: wrap;
  }
  .job-row-apply {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 575px) {
  .cb-item {
    border-right: none !important;
  }
}

/* ===== CONTACT US PAGE (template-contact.php) ===== */

.contact-hero {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, #fdf3e7 0%, #fdf3e7 55%, #fbfaf8 100%);
}
.contact-hero-inner {
  position: relative;
  z-index: 2;
}
.contact-hero-copy {
  max-width: 480px;
  padding: 48px 0;
}

/* Photo + accent stripes as three stacked, same-width/same-right-edge
   layers, each clipped with a percentage-based diagonal polygon. Using
   percentages (not px/skew/rotate) on boxes that all share the exact
   same width and right anchor is what keeps the three diagonals
   genuinely parallel and aligned at any viewport width — a mismatch
   here (e.g. one layer using transform:skew, another using clip-path)
   is exactly what made the previous version's stripes float
   disconnected from the photo instead of sitting in its seam.
   .chv-band's shorter box (top:38%) is intentional — in the reference
   design the two colour slivers only run along the lower portion of
   the photo's edge, not its full height. */
.contact-hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  pointer-events: none;
}
.chv-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 2% 100%);
  overflow: hidden;
  background: var(--kg-bg);
}
.chv-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: bottom;
}
.chv-band {
  position: absolute;
  top: 38%;
  right: 0;
  bottom: 0;
  left: 0;
}
.chv-band-gold {
  background: var(--kg-gold);
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 5% 100%);
}
.chv-band-red {
  background: var(--kg-red);
  clip-path: polygon(15.5% 0, 100% 0, 100% 100%, 3.5% 100%);
}

.contact-hero-copy h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 52px;
  color: var(--kg-navy);
  margin: 0;
}
.contact-hero-bars {
  display: flex;
  /* gap: 8px; */
  margin: 14px 0 20px;
}
.contact-hero-bars i {
  display: block;
  width: 32px;
  height: 5px;
  background: var(--kg-red);
  font-style: normal;
}
.contact-hero-bars i:last-child {
  background: var(--kg-gold);
}
.contact-hero-lead {
  font-size: 16px;
  color: var(--kg-muted);
  max-width: 420px;
  margin-bottom: 24px;
}
.contact-hero-tag {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.contact-hero-tag-bar {
  width: 3px;
  background: var(--kg-gold);
  border-radius: 2px;
}
.contact-hero-tag-copy {
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--kg-navy);
  line-height: 1.4;
}

.contact-main {
  padding: 48px 0;
}
.contact-section-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--kg-navy);
  margin: 0;
}
.contact-map-heading {
  margin-top: 28px;
}

.contact-form-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  height: 100%;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 18px 40px -28px rgba(20, 41, 77, 0.25);
}
.contact-form-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--kg-navy);
  margin: 0 0 10px;
}
.contact-form-card .kg-cf7-form {
  margin-top: 20px;
}

.gt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
.gt-card {
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.gt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.gt-card-icon-red {
  background: var(--kg-red);
}
.gt-card-icon-gold {
  background: var(--kg-gold);
}
.gt-card-icon-navy {
  background: var(--kg-navy);
}
.gt-card-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--kg-navy);
  margin: 0 0 6px;
}
.gt-card-text {
  font-size: 13px;
  color: var(--kg-muted);
  margin: 0;
}
.gt-card-text a {
  color: var(--kg-muted);
}
.gt-card-text a:hover {
  color: var(--kg-red);
}

.contact-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--kg-line);
}
.contact-map iframe {
  display: block;
}

.contact-bottom {
  background: var(--kg-bg);
}
.ql-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}
.ql-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 24px;
  border-right: 1px solid var(--kg-line-2);
  text-decoration: none;
  position: relative;
}
.ql-item:last-child {
  border-right: none;
}
.ql-item-icon {
  color: var(--kg-red);
}
.ql-item-title {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--kg-navy);
}
.ql-item-text {
  display: block;
  font-size: 13px;
  color: var(--kg-muted);
  margin-top: 4px;
}
.ql-item-arrow {
  position: absolute;
  right: 20px;
  bottom: 24px;
  color: var(--kg-red);
  font-size: 20px;
}

.contact-urgent-cta {
  background: var(--kg-red);
  height: 100%;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-urgent-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-urgent-heading {
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}
.contact-urgent-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin: 0 0 8px;
}
.contact-urgent-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
}

@media (max-width: 991px) {
  .contact-hero-copy h1 {
    font-size: 40px;
  }
  .ql-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .ql-item {
    border-bottom: 1px solid var(--kg-line-2);
  }
}

@media (max-width: 767px) {
  /* The diagonal photo/stripe layers are absolutely positioned over
     58% of the hero's width regardless of viewport — below this
     width there isn't room for both that visual and the text without
     overlapping, so the hero simplifies to text-only on a plain
     gradient, same trade-off every other hero image in this theme
     makes at this breakpoint. */
  .contact-hero-visual {
    display: none;
  }
  .contact-hero {
    min-height: 0;
  }
  .contact-hero-copy {
    max-width: none;
    padding: 40px 0;
  }
  .contact-hero-copy h1 {
    font-size: 32px;
  }
  .gt-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .ql-bar {
    grid-template-columns: 1fr;
  }
  .contact-form-card {
    padding: 20px;
  }
}

/* ===== PROJECTS PORTFOLIO — "Our Projects" (template-projects.php,
   single-kg_property.php). Every class here is prefixed ".property-"
   deliberately, NOT ".proj-" — the pre-existing kg_project single page
   (single-kg_project.php) already uses a ".proj-*" class vocabulary
   for an unrelated paving/road project type; keeping these fully
   separate avoids any future collision between the two. ===== */

.property-hero {
  background-color: #fff;
}
.property-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 48px;
  color: var(--kg-navy);
  margin: 0;
}
.property-hero-bar {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--kg-red);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.property-hero-lead {
  font-size: 15px;
  color: var(--kg-muted);
  max-width: 440px;
}
.property-hero-media {
  position: relative;
  overflow: hidden;
}
.property-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
  /* z-index: 99; */
}
.property-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.property-hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 40%;
  opacity: 0.9;
  pointer-events: none;
}

.property-filters {
  margin: 24px 0 32px;
}
.property-status-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--kg-line);
  padding-bottom: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.property-status-tab {
  background: none;
  border: none;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--kg-muted);
  padding-bottom: 12px;
  position: relative;
}
.property-status-tab.active {
  color: var(--kg-red);
}
.property-status-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 2px;
  background: var(--kg-red);
}
.property-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.property-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.property-chip {
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
}
.property-chip.active {
  background: var(--kg-navy);
  border-color: var(--kg-navy);
  color: #fff;
}
.property-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--kg-muted-2);
  min-width: 240px;
}
.property-search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--kg-navy);
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  transition: opacity 0.2s;
}
.property-grid.is-loading {
  opacity: 0.5;
}

.property-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}
.property-card-media {
  position: relative;
  height: 200px;
  background: var(--kg-bg);
}
.property-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.property-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
}
.property-badge.status-completed {
  background: var(--kg-navy);
}
.property-badge.status-ongoing {
  background: var(--kg-gold);
}
.property-badge.status-upcoming {
  background: var(--kg-red);
}

.property-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.property-card-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--kg-navy);
  margin: 0 0 4px;
}
.property-card-category {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--kg-red);
  margin: 0 0 8px;
}
.property-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--kg-muted-2);
  margin: 0 0 12px;
}
.property-card-desc {
  font-size: 13px;
  color: var(--kg-muted);
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}
.property-card-link {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--kg-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.property-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--kg-muted-2);
}
.property-empty svg {
  margin-bottom: 16px;
}
.property-empty p strong {
  color: var(--kg-navy);
  font-size: 16px;
}
.property-empty #property-reset-filters {
  margin-top: 16px;
}

.property-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 40px 0 60px;
}
.property-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
}
.property-page-btn.active {
  background: var(--kg-navy);
  border-color: var(--kg-navy);
  color: #fff;
}
.property-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Arrows only: hide the page numbers (and any ellipsis) between prev/next */
.property-pagination > :not(:first-child):not(:last-child) {
  display: none;
}

/* ---- Single project page ---- */
.property-single-header {
  padding: 24px 0;
}
.property-title {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--kg-navy);
  margin: 12px 0 6px;
}
.property-single-category {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--kg-red);
  margin: 0 0 8px;
}
.property-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kg-muted-2);
  font-size: 14px;
}
.property-single-hero {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
}
.property-single-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.property-body {
  padding: 40px 0;
}
.property-section-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 20px;
  color: var(--kg-navy);
  margin: 0 0 16px;
}
.property-highlights-title,
.property-gallery-title {
  margin-top: 32px;
}
.property-overview-content {
  color: var(--kg-muted);
  line-height: 1.7;
}
.property-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.property-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kg-navy);
  font-size: 14px;
}
.property-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.property-gallery-item {
  border-radius: 8px;
  overflow: hidden;
  height: 160px;
}
.property-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.property-info-card {
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  padding: 24px;
}
.property-info-card h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  color: var(--kg-navy);
  margin: 0 0 16px;
}
.property-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kg-line-2);
}
.property-info-row:last-child {
  border-bottom: none;
}
.property-info-icon {
  color: var(--kg-red);
  flex-shrink: 0;
}
.property-info-label {
  font-size: 13px;
  color: var(--kg-muted-2);
  flex: 1;
}
.property-info-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--kg-navy);
  text-align: right;
}

.property-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--kg-line);
}
.property-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.property-related-viewall {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--kg-red);
  text-decoration: none;
}

@media (max-width: 991px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .property-hero-copy h1 {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .property-grid {
    grid-template-columns: 1fr;
  }
  .property-status-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 14px;
  }
  .property-status-tab {
    flex-shrink: 0;
  }
  .property-category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .property-chip {
    flex-shrink: 0;
  }
  .property-search-box {
    width: 100%;
  }
  .property-gallery {
    grid-template-columns: 1fr;
  }
  .property-info-value {
    text-align: left;
  }
}

/* ===== LATEST NEWS PAGE (template-latest-news.php, single-kg_news.php) =====
   Deliberately its own ".news-*" class set rather than reusing
   ".property-hero"/".property-card" etc. from the Projects page — the
   visual pattern (split hero + yellow curve, card layout) is the same
   technique, but keeping the selectors separate avoids touching the
   already-stabilized Projects CSS just for the sake of sharing a
   class name. */

.news-hero {
  background-color: #fff;
}
.news-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 48px;
  color: var(--kg-navy);
  margin: 0;
}
.news-hero-bar {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--kg-red);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.news-hero-lead {
  font-size: 15px;
  color: var(--kg-muted);
  max-width: 440px;
}
.news-hero-media {
  position: relative;
  overflow: hidden;
  height: 430px;
  object-fit: cover;
}
.news-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
}
.news-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 40%;
  opacity: 0.9;
  pointer-events: none;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--kg-line);
}
.news-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.news-chip {
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.news-chip.active {
  background: var(--kg-red);
  border-color: var(--kg-red);
  color: #fff;
}
.news-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--kg-line);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--kg-muted-2);
  min-width: 240px;
}
.news-search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--kg-navy);
}

.news-main {
  margin-bottom: 56px;
}

.news-list {
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s;
}
.news-list.is-loading {
  opacity: 0.5;
}

.news-list-card {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--kg-line);
}
.news-list-card:first-child {
  padding-top: 0;
}
.news-card-media {
  flex: 0 0 220px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--kg-bg);
}
.news-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-card-body {
  flex: 1;
  min-width: 0;
}
.news-card-category {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--kg-red);
  margin: 0 0 6px;
}
.news-card-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--kg-navy);
  margin: 0 0 8px;
  line-height: 1.3;
}
.news-card-desc {
  font-size: 14px;
  color: var(--kg-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kg-muted-2);
  margin: 0;
}
.news-card-sep {
  color: var(--kg-line);
}
.news-card-link {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  color: var(--kg-red);
  text-decoration: none;
}

.news-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--kg-muted-2);
}
.news-empty svg {
  margin-bottom: 16px;
}
.news-empty p strong {
  color: var(--kg-navy);
  font-size: 16px;
}
.news-empty #news-reset-filters {
  margin-top: 16px;
}

.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}
.news-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--kg-line);
  background: #fff;
  color: var(--kg-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
}
.news-page-btn.active {
  background: var(--kg-navy);
  border-color: var(--kg-navy);
  color: #fff;
}
.news-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.news-sidebar-box {
  margin-bottom: 32px;
}
.news-sidebar-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--kg-navy);
  margin: 0;
}
.news-underline-bar {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--kg-gold);
  border-radius: 2px;
  margin: 10px 0 16px;
}

.news-featured-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-featured-card {
  display: block;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
}
.news-featured-media {
  position: relative;
  height: 160px;
  background: var(--kg-bg);
}
.news-featured-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--kg-gold);
  color: var(--kg-navy);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 4px;
}
.news-featured-category {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--kg-red);
  margin: 14px 16px 6px;
}
.news-featured-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--kg-navy);
  margin: 0 16px 6px;
  line-height: 1.35;
}
.news-featured-desc {
  font-size: 13px;
  color: var(--kg-muted);
  line-height: 1.5;
  margin: 0 16px 12px;
}
.news-featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kg-muted-2);
  margin: 0 16px 16px;
}
.news-featured-link {
  font-weight: 800;
  color: var(--kg-red);
}

.news-social {
  display: flex;
  gap: 12px;
}
.news-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kg-navy);
}
.news-social a:hover {
  background: var(--kg-red);
  border-color: var(--kg-red);
  color: #fff;
}

/* ---- Single news page ---- */
.news-badge-pill {
  display: inline-block;
  background: var(--kg-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.news-single-header {
  padding: 24px 0;
}
.news-single-title {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--kg-navy);
  margin: 0 0 10px;
}
.news-single-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kg-muted-2);
  font-size: 14px;
}
.news-single-row {
  margin: 16px 0 0;
}
.news-single-content {
  color: var(--kg-muted);
  line-height: 1.75;
}
.news-single-image {
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  min-height: 260px;
}
.news-single-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 48px;
  padding-top: 24px;
  border-top: 1px solid var(--kg-line);
}
.news-share-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--kg-navy);
}
.news-share a,
.news-copy-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kg-navy);
  padding: 0;
  cursor: pointer;
}
.news-share a:hover,
.news-copy-link:hover {
  background: var(--kg-red);
  border-color: var(--kg-red);
  color: #fff;
}
.news-copy-link.is-copied {
  background: var(--kg-green);
  border-color: var(--kg-green);
  color: #fff;
}

.news-more-updates {
  background: var(--kg-bg);
  padding: 48px 0 56px;
}
.news-more-heading {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 26px;
  color: var(--kg-navy);
  margin: 0;
}
.news-more-highlight {
  color: var(--kg-red);
}
.news-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.news-grid-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  overflow: hidden;
}
.news-grid-card-media {
  height: 250px;
  background: var(--kg-bg);
}
.news-grid-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-grid-card-body {
  padding: 18px;
}
.news-grid-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kg-muted-2);
  font-size: 12px;
  margin: 12px 0 8px;
}
.news-grid-card-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--kg-navy);
  line-height: 1.35;
  margin: 0 0 10px;
}
.news-grid-card-link {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  color: var(--kg-red);
  text-decoration: none;
}

@media (max-width: 991px) {
  .news-hero-copy h1 {
    font-size: 38px;
  }
  .news-more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .news-list-card {
    flex-direction: column;
    gap: 12px;
  }
  .news-card-media {
    flex: none;
    width: 100%;
    height: 200px;
  }
  .news-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .news-category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .news-chip {
    flex-shrink: 0;
  }
  .news-search-box {
    width: 100%;
  }
  .news-single-image {
    min-height: 200px;
  }
  .news-more-grid {
    grid-template-columns: 1fr;
  }
}

.cs-icon-card {
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 10px;
  padding: 22px 20px;
  height: 100%;
}
.cs-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cs-icon-box-image {
  overflow: hidden;
}
.cs-icon-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cs-icon-box.border-red {
  border-color: var(--kg-red);
}
.cs-icon-box.border-red svg {
  stroke: var(--kg-red);
}
.cs-icon-box.border-gold {
  border-color: var(--kg-gold);
}
.cs-icon-box.border-gold svg {
  stroke: var(--kg-gold);
}
.cs-icon-box.border-navy {
  border-color: var(--kg-navy);
}
.cs-icon-box.border-navy svg {
  stroke: var(--kg-navy);
}
.cs-icon-box.border-green {
  border-color: var(--kg-green);
}
.cs-icon-box.border-green svg {
  stroke: var(--kg-green);
}

/* ----- "Why Choose Neo Chemicals" cards (icon-box treatment above, in
   a bordered card, instead of the filled-circle .cs-why-icon look used
   by other companies) ----- */
.cs-why-grid.is-boxed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cs-why-grid.is-boxed .cs-why-card {
  flex: none;
  max-width: none;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.cs-why-grid.is-boxed .cs-why-card h3 {
  font-size: 18px;
}
.cs-why-grid.is-boxed .cs-why-card p {
  font-size: 14px;
  margin-bottom: 0;
}

/* ----- "Solutions Across Every Stage" — connecting timeline with a
   solid filled colour circle per stage, overlapping a light card ----- */
.cs-stage-row {
  position: relative;
  padding-top: 40px;
}
.cs-stage-line {
  position: absolute;
  top: 80px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  transform: translateY(-50%);
  /* stops are % of the line's own box (inset 12.5% from the row on
     each side), so they're mapped from the dots' row-relative 25/50/75%
     positions to line-relative 16.6667/50/83.3333% -- otherwise the
     colour change lands off to the side of the dot instead of on it */
  background: linear-gradient(
    to right,
    var(--kg-red) 0%,
    var(--kg-red) 16.6667%,
    var(--kg-gold) 16.6667%,
    var(--kg-gold) 50%,
    var(--kg-navy) 50%,
    var(--kg-navy) 83.3333%,
    var(--kg-red) 83.3333%,
    var(--kg-red) 100%
  );
  z-index: 0;
}
.cs-stage-dot {
  position: absolute;
  top: 80px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kg-red);
  transform: translate(-50%, -50%);
  z-index: 0;
}
.cs-stage-dot-1 {
  left: 25%;
}
.cs-stage-dot-2 {
  left: 50%;
}
.cs-stage-dot-3 {
  left: 75%;
}
.cs-stage-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cs-stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs-stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.cs-stage-icon svg {
  stroke: #fff !important;
}
.cs-stage-icon.bg-red {
  background: var(--kg-red);
}
.cs-stage-icon.bg-gold {
  background: var(--kg-gold);
}
.cs-stage-icon.bg-navy {
  background: var(--kg-navy);
}
.cs-stage-icon.bg-green {
  background: var(--kg-green);
}
/* force a fixed red/gold/navy/red pattern by position, regardless of
   whatever color value is saved on each item in wp-admin */
.cs-stage-items .cs-stage-item:nth-child(4n + 1) .cs-stage-icon {
  background: var(--kg-red) !important;
}
.cs-stage-items .cs-stage-item:nth-child(4n + 2) .cs-stage-icon {
  background: var(--kg-gold) !important;
}
.cs-stage-items .cs-stage-item:nth-child(4n + 3) .cs-stage-icon {
  background: var(--kg-navy) !important;
}
.cs-stage-items .cs-stage-item:nth-child(4n + 4) .cs-stage-icon {
  background: var(--kg-red) !important;
}
.cs-stage-card {
  width: 100%;
  background: var(--kg-bg);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.cs-stage-card h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--kg-navy);
  margin-bottom: 8px;
}
.cs-stage-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--kg-muted);
  max-width: 200px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .cs-stage-line {
    display: none;
  }
  .cs-stage-items {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .cs-stage-row {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  .cs-stage-items {
    grid-template-columns: 1fr;
  }
}

/* ----- Manufacturing Excellence — eyebrow/intro/feature-row pairing
   with the existing Quality image + a stat BAR under it (instead of the
   stats-beside-image grid other companies use via .cs-quality-stat in a
   row-cols grid) ----- */
.cs-quality-eyebrow {
  margin-bottom: 10px;
}
.cs-quality-intro {
  font-size: 14px;
  line-height: 1.7;
  text-align: start;
  color: var(--kg-muted);
  margin: 14px 0 24px;
  max-width: 480px;
}
.cs-quality-features {
  display: flex;
  gap: 10px;
}
.cs-quality-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 0;
}
.cs-quality-feature h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--kg-navy);
  margin: 0 0 3px;
}
.cs-quality-feature p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--kg-muted);
  margin: 0;
}
.cs-quality-stats-bar {
  display: flex;
  background: #fff;
  border-radius: 0 0 10px 10px;
}
.cs-quality-stats-bar .cs-quality-stat {
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  border-right: 1px solid var(--kg-line);
  background: var(--kg-bg);
  border-radius: 0;
  height: auto;
}
.cs-quality-stats-bar .cs-quality-stat:last-child {
  border-right: none;
}
.cs-quality-stats-bar .cs-quality-stat:first-child {
  border-radius: 0 0 0 10px;
}
.cs-quality-stats-bar .cs-quality-stat:last-child {
  border-radius: 0 0 10px 0;
}
.cs-quality-stats-bar .cs-quality-value {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
}
.cs-quality-stats-bar .cs-quality-label {
  font-size: 11.5px;
  color: var(--kg-muted);
  margin-top: 2px;
}

/* ----- Industries We Serve — plain icon-card row, icon+label only ----- */
.cs-industries-grid .cs-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.cs-industries-grid .cs-icon-box {
  width: 60px;
  height: 60px;
}
.cs-industries-grid .cs-icon-box svg {
  stroke: var(--kg-navy);
}
.cs-industry-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--kg-navy);
  letter-spacing: 0.2px;
}

/* ----- Bottom CTA — red panel, diagonal-cut photo on the right (same
   clip-path technique as .cs-cta2-photo, just as its own standalone
   pattern rather than nested inside that class's navy/script-heading
   design) ----- */
.cs-cta-diag {
  border-radius: 16px;
  overflow: hidden;
  background: var(--kg-bg);
}
.cs-cta-diag-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.cs-cta-diag-copy {
  flex: 1 1 340px;
  background: var(--kg-red);
  color: #fff;
  padding: 48px 44px;
}
.cs-cta-diag-copy h2 {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: 12px;
}
.cs-cta-diag-copy p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 380px;
  margin-bottom: 22px;
}
.cs-cta-diag-media {
  flex: 1 1 280px;
  position: relative;
  min-height: 220px;
  background: var(--kg-bg);
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -60px;
}
.cs-cta-diag-media img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .cs-why-grid.is-boxed {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-quality-stats-bar {
    flex-wrap: wrap;
  }
  .cs-quality-stats-bar .cs-quality-stat {
    flex: 1 1 33%;
  }
}

@media (max-width: 767px) {
  .cs-why-grid.is-boxed {
    grid-template-columns: 1fr;
  }
  .cs-cta-diag-media {
    clip-path: none;
    margin-left: 0;
    min-height: 180px;
    flex-basis: 100%;
    order: -1;
  }
}

/* =========================================================================
   Neo Chemicals page (neo-chemicals.php): responsive fixes.
   .cs-neo-hero / .cs-neo-systems are added in that template so the shared
   .cs-hero / .cs-usecases rules used by other company pages are untouched;
   the other selectors below (stages, quality stats bar, boxed "why" grid,
   CTA diag) only exist on this page.
   ========================================================================= */

/* ---- Hero ---- */
@media (max-width: 1199.98px) {
  .cs-neo-hero .unique {
    font-size: 44px !important;
  }
}
@media (max-width: 991.98px) {
  .cs-neo-hero .cs-hero-copy {
    padding: 36px 0 30px;
  }
  .cs-neo-hero .unique {
    font-size: 40px !important;
  }
  .cs-neo-hero .cs-hero-lead {
    margin-top: 20px;
    max-width: 620px;
  }
  .cs-neo-hero .cs-hero-media {
    min-height: 340px;
  }
  /* the white left-edge fade only makes sense beside the copy column */
  .cs-neo-hero .cs-hero-media::after {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .cs-neo-hero .unique {
    font-size: 34px !important;
  }
  .cs-neo-hero .cs-hero-media {
    min-height: 230px;
  }
  .cs-neo-hero .cs-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cs-neo-hero .cs-hero-actions a {
    justify-content: center;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    letter-spacing: 0.6px;
  }
}
/* small laptops: the copy column already has ps-lg-5, so the copy's own
   ps-lg-5 doubled the indent and squeezed the buttons onto two lines */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .cs-neo-hero .cs-hero-copy.ps-lg-5 {
    padding-left: 0 !important;
  }
}

/* ---- Product Systems: shorter photos once cards get narrow/stacked ---- */
@media (max-width: 991.98px) {
  .cs-neo-systems .cs-usecase-media {
    height: 230px;
  }
}
@media (max-width: 575.98px) {
  .cs-neo-systems .cs-usecase-media {
    height: 200px;
  }
}

/* ---- Solutions Across Every Stage ---- */
@media (max-width: 991.98px) {
  /* the connecting line is already hidden here; its dots were left
     floating on their own between / beside the circles */
  .cs-stage-dot {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .cs-stage-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
  }
  .cs-stage-items {
    row-gap: 26px;
  }
  .cs-stage-card p {
    max-width: 280px;
  }
}

/* ---- Manufacturing Excellence: feature row + stats bar ----
   One layout at every size: icon on the left, label + text beside it,
   two features per row (a 4-across row was too narrow in the half-width
   column and wrapped every label onto 2-3 lines), one per row on phones. */
.cs-quality-features {
  flex-wrap: wrap;
  gap: 22px 24px;
}
.cs-quality-feature {
  flex: 1 1 calc(50% - 12px);
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.cs-quality-feature > span:last-child {
  display: block;
  min-width: 0;
}
.cs-quality-feature .cs-icon-box {
  width: 56px;
  height: 56px;
}
.cs-quality-feature h4 {
  font-size: 13.5px;
}
.cs-quality-feature p {
  font-size: 12.5px;
}
@media (max-width: 991.98px) {
  /* the media column has .mt-0, so without this the photo sits flush
     against the feature row once the two columns stack */
  .cs-quality-features {
    margin-bottom: 28px;
  }
  /* 2 x 2 stats instead of 3 + 1 leftover */
  .cs-quality-stats-bar {
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
  }
  .cs-quality-stats-bar .cs-quality-stat:nth-child(n) {
    flex: 1 1 50%;
    border-right: none;
    border-radius: 0;
  }
  .cs-quality-stats-bar .cs-quality-stat:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  .cs-quality-stats-bar .cs-quality-stat:nth-child(n + 3) {
    border-top: 1px solid var(--kg-line);
  }
}
/* phone: one feature per row */
@media (max-width: 575.98px) {
  .cs-quality-features {
    row-gap: 16px;
  }
  .cs-quality-feature {
    flex-basis: 100%;
  }
  .cs-quality-feature .cs-icon-box {
    width: 52px;
    height: 52px;
  }
  .cs-quality-feature h4 {
    font-size: 14px;
  }
  .cs-quality-feature p {
    font-size: 13px;
  }
}

/* ---- Why Choose Neo Chemicals (boxed cards) ---- */
/* minmax(0, 1fr): a long word can no longer push the 4th card past the
   container's right edge (it overflowed at ~1100px) */
.cs-why-grid.is-boxed {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* the icon span never shrinks, so every card's icon lines up */
.cs-why-grid.is-boxed .cs-why-card > span:first-child {
  flex: 0 0 auto;
  display: inline-flex;
}
.cs-why-grid.is-boxed .cs-why-card > div {
  min-width: 0;
}
/* the shared (non-boxed) .cs-why-card tablet/phone rules strip the odd
   cards' left padding, the right border and the last card's bottom
   border/padding. Keep these boxed cards as full, evenly padded boxes. */
.cs-why-grid.is-boxed .cs-why-card.cs-icon-card {
  padding: 22px 20px !important;
  border: 1px solid var(--kg-line) !important;
}
@media (max-width: 1199.98px) {
  .cs-why-grid.is-boxed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cs-why-grid.is-boxed .kg-svg-icon svg {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 767.98px) {
  .cs-why-grid.is-boxed {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .cs-why-grid.is-boxed .kg-svg-icon svg {
    width: 44px;
    height: 44px;
  }
  .cs-why-grid.is-boxed .cs-why-card h3 {
    font-size: 16px;
  }
}

/* ---- Bottom CTA (red panel + diagonal photo) ---- */
@media (max-width: 991.98px) {
  .cs-cta-diag-copy {
    padding: 38px 32px;
  }
  .cs-cta-diag-copy h2 {
    font-size: 22px;
  }
}
@media (max-width: 575.98px) {
  .cs-cta-diag-copy {
    flex-basis: 100%;
    padding: 30px 22px;
  }
  .cs-cta-diag-copy h2 {
    font-size: 19px;
  }
  .cs-cta-diag-media img {
    height: 200px;
  }
}

.cs-usecase-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px -4px rgba(20, 41, 77, 0.35);
}
.cs-usecase-media-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
}
.bp-company {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--kg-muted);
}
.bp-company a {
  color: var(--kg-red);
  font-weight: 700;
}

/* =========================================================================
   Chemical Category catalog listing (taxonomy-chemical_category.php) —
   the shared Hero above reuses .cs-hero/.cs-hero-media/.cs-hero-stat*
   (defined earlier in this file); everything below is new to this page:
   the plain (non-floating-card) stats row, the category tab bar, the
   category head strip, and the redesigned product cards.
   ========================================================================= */

/* ----- Hero stat row, inline in the copy column (not the floating
   card .cs-hero-stats is normally used as) ----- */
.chem-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 50px;
}
.chem-hero-stats .cs-hero-stat {
  flex: none;
  min-width: 0;
  padding: 0 16px 0 0;
  border-right: 1px solid #e4e4e4;
}
.chem-hero-stats .cs-hero-stat::after {
  content: none;
}
.chem-hero-stats .cs-hero-stat:last-child {
  padding-right: 0;
  border-right: none;
}

/* ----- Category tab bar ----- */
.chem-catalog {
  padding: 48px 0 64px;
}
.chem-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 14px;
  padding: 30px;
  margin-top: -100px;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.25);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chem-tabs::-webkit-scrollbar {
  height: 6px;
}
.chem-tabs::-webkit-scrollbar-thumb {
  background: var(--kg-line);
  border-radius: 6px;
}
.chem-tab {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--kg-navy);
  white-space: nowrap;
}
.chem-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--kg-line);
}
.chem-tab:hover {
  background: var(--kg-bg);
  color: var(--kg-navy);
}
.chem-tab.is-active {
  color: var(--kg-red);
  background: var(--kg-bg);
}
.chem-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
}

/* ----- Category head (heading + description + product count) ----- */
.chem-category-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.chem-category-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  color: var(--kg-navy);
  margin-bottom: 6px;
}
.chem-category-desc {
  font-size: 13.5px;
  color: var(--kg-muted);
  max-width: 560px;
  margin: 0;
}
.chem-category-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kg-muted-2);
  white-space: nowrap;
}

/* ----- Product card: horizontal (copy left, image right), 3-up grid;
   clicking it opens #kgProductModal (see taxonomy-chemical_category.
   php) rather than navigating away. Stacks to image-top/copy-bottom
   only on narrow phones, where a side-by-side split has no room. ----- */
.chem-product-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.chem-product-card:hover {
  box-shadow: 0 16px 34px -18px rgba(20, 41, 77, 0.3);
  transform: translateY(-2px);
  color: inherit;
}
.chem-product-media {
  flex: 1 1 50%;
  min-height: 160px;
  background: var(--kg-bg);
  order: 2;
}
.chem-product-media img,
.chem-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.term-75 .chem-product-media img,
.chem-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  display: block;
}

.chem-product-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  object-fit: contain;
}
.chem-product-body {
  flex: 1 1 50%;
  order: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.chem-product-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--kg-red);
}
.chem-product-eyebrow-icon {
  display: inline-flex;
}
.chem-product-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--kg-navy);
  margin: 0 0 8px;
}
.chem-product-title-accent {
  color: var(--kg-red);
}
.chem-product-tagline {
  font-size: 13px;
  font-weight: 700;
  color: var(--kg-navy);
  margin: 0 0 6px;
}
.chem-product-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kg-muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chem-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--kg-red);
}
.chem-product-arrow {
  transition: transform 0.2s ease;
}
.chem-product-card:hover .chem-product-arrow {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .chem-product-media {
    flex-basis: 100%;
    min-height: 200px;
    order: 1;
  }
  .chem-product-body {
    flex-basis: 100%;
    order: 2;
  }
}

@media (max-width: 575px) {
  .chem-category-head {
    align-items: flex-start;
  }
}

/* ----- Product detail modal (populated per-card via <template>) ----- */
.kg-product-modal .modal-content {
  border-radius: 14px;
  overflow: hidden;
}
.kg-product-modal .modal-body {
  padding: 0;
  scrollbar-width: thin;
}
.kg-product-modal .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 32px;
  height: 32px;
  background-color: #fff;
  background-size: 14px;
  border-radius: 50%;
  opacity: 1;
}
.kg-pm-header {
  display: flex;
  flex-wrap: wrap;
}
.kg-pm-media {
  flex: 1 1 40%;
  min-height: 260px;
  background: var(--kg-bg);
}
.kg-pm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kg-pm-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}
.kg-pm-intro {
  flex: 1 1 60%;
  padding: 32px;
}
.kg-pm-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 24px;
  color: var(--kg-navy);
  margin: 10px 0 6px;
}
.kg-pm-tagline {
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-navy);
  margin: 0 0 10px;
}
.kg-pm-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin: 0 0 20px;
}
.kg-pm-link {
  border: none;
}
.kg-pm-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--kg-line-2);
}
.kg-pm-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-right: 1px solid var(--kg-line-2);
  border-bottom: 1px solid var(--kg-line-2);
}
.kg-pm-spec:nth-child(3n) {
  border-right: none;
}
.kg-pm-spec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.kg-pm-spec-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.kg-pm-spec-icon.icon-red {
  background: rgba(216, 31, 38, 0.1);
}
.kg-pm-spec-icon.icon-navy {
  background: rgba(20, 41, 77, 0.08);
}
.kg-pm-spec-icon.icon-gold {
  background: rgba(244, 184, 30, 0.18);
}
.kg-pm-spec-icon.icon-green {
  background: rgba(47, 143, 78, 0.1);
}
.kg-pm-spec-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kg-navy);
}
.kg-pm-spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.kg-pm-spec-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kg-muted);
}
.kg-pm-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kg-navy);
}
.kg-pm-spec-list.list-red li::before {
  background: var(--kg-red);
}
.kg-pm-spec-list.list-navy li::before {
  background: var(--kg-navy);
}
.kg-pm-spec-list.list-gold li::before {
  background: var(--kg-gold);
}
.kg-pm-spec-list.list-green li::before {
  background: var(--kg-green);
}

@media (max-width: 767px) {
  .kg-pm-header {
    flex-direction: column;
  }
  .kg-pm-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .kg-pm-spec:nth-child(3n) {
    border-right: 1px solid var(--kg-line-2);
  }
  .kg-pm-spec:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 480px) {
  .kg-pm-specs {
    grid-template-columns: 1fr;
  }
  .kg-pm-spec {
    border-right: none !important;
  }
}

/* =========================================================================
   Chemical Category page (taxonomy-chemical_category.php): responsive
   fixes. Everything is scoped to .chem-* / .kg-pm-* (only used on this
   page), except the hero stats, which are scoped via .chem-hero-stats.
   ========================================================================= */

/* ---- Category tabs ----
   One horizontal strip on every device. The native scrollbar is hidden
   and replaced by .chem-tabs-scrollbar (track + red thumb, kept in sync
   by the page script), because phones/tablets only flash a native bar
   while you're actively scrolling. The track only shows when the tabs
   actually overflow (.is-scrollable). The white box (margins, border,
   shadow) moves from .chem-tabs to .chem-tabs-wrap so the bar can sit
   inside it. */
.chem-tabs-wrap {
  position: relative;
  z-index: 2;
  margin-top: -100px;
  margin-bottom: 32px;
  background: #fff;
  border: 1px solid var(--kg-line);
  border-radius: 14px;
  box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.25);
  overflow: hidden;
}
.chem-tabs-wrap .chem-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  scrollbar-width: none;
}
.chem-tabs-wrap .chem-tabs::-webkit-scrollbar {
  display: none;
}
.chem-tabs-wrap.is-scrollable .chem-tabs {
  padding-bottom: 32px;
}
/* flex-grow: when every tab fits (e.g. 1920px) they share out the spare
   width, so there's no empty gap after the last tab; when they overflow
   there is no spare width, so the scrolling strip is unaffected */
.chem-tab {
  flex: 1 0 auto;
  justify-content: center;
  white-space: nowrap;
}
.chem-tabs-scrollbar {
  display: none;
  position: absolute;
  z-index: 3; /* .chem-tabs itself is position: relative; z-index: 2 */
  left: 24px;
  right: 24px;
  bottom: 14px;
  height: 6px;
  border-radius: 6px;
  background: var(--kg-bg);
  cursor: pointer;
  touch-action: none;
}
.chem-tabs-wrap.is-scrollable .chem-tabs-scrollbar {
  display: block;
}
/* taller invisible hit area so the bar is easy to grab on touch screens */
.chem-tabs-scrollbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}
.chem-tabs-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  border-radius: 6px;
  background: var(--kg-red);
  transition: background 0.2s ease;
}
.chem-tabs-scrollbar:hover .chem-tabs-thumb,
.chem-tabs-wrap.is-dragging .chem-tabs-thumb {
  background: #b3141a;
}
@media (max-width: 1199.98px) {
  .chem-tabs-wrap {
    margin-top: -60px;
  }
  .chem-tabs-wrap .chem-tabs {
    padding: 18px;
  }
  .chem-tabs-wrap.is-scrollable .chem-tabs {
    padding-bottom: 28px;
  }
  .chem-tabs-scrollbar {
    left: 18px;
    right: 18px;
    bottom: 12px;
  }
  .chem-tab {
    font-size: 16px;
    padding: 10px 14px;
  }
}
@media (max-width: 991.98px) {
  .chem-catalog {
    padding: 40px 0 52px;
  }
  .chem-tabs-wrap {
    margin-top: -40px;
  }
}
@media (max-width: 575.98px) {
  .chem-tabs-wrap {
    margin-top: -28px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  .chem-tabs-wrap .chem-tabs {
    padding: 12px;
  }
  .chem-tabs-wrap.is-scrollable .chem-tabs {
    padding-bottom: 24px;
  }
  .chem-tabs-scrollbar {
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 5px;
  }
  .chem-tab {
    font-size: 14px;
    padding: 9px 12px;
  }
}

/* ---- Hero stats ----
   A grid of small tiles instead of a divider-separated row: the thin
   dividers dangled at the end of a wrapped row, the 4th stat was cut off
   on tablets, and squeezing them onto one phone row made long labels
   ("Years of Experience") overlap. Works for any number of stats:
     - desktop (narrow copy column): 2 per row
     - tablet (copy is full width):  all on one row, equal widths
     - phone:                        2 per row
   an odd last tile spans the full row so there's never a lone gap. */
.chem-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 36px;
  /* the category tab bar below is pulled up over the hero by
     margin-top: -100px (desktop) / -60px (small laptop); keep the tiles
     clear of it */
  margin-bottom: 70px;
}
@media (max-width: 1199.98px) {
  .chem-hero-stats {
    margin-bottom: 36px;
  }
}
.chem-hero-stats .cs-hero-stat {
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--kg-bg);
  border: none;
  border-radius: 10px;
}
.chem-hero-stats .cs-hero-stat:last-child {
  padding-right: 14px;
}
.chem-hero-stats .cs-hero-stat::after,
.chem-hero-stats .cs-hero-stat:nth-child(n)::after {
  display: none;
}
.chem-hero-stats .cs-hero-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.chem-hero-stats .cs-hero-stat > span:first-child {
  display: inline-flex;
  flex-shrink: 0;
}
.chem-hero-stats .cs-hero-stat-text strong {
  font-size: 18px;
}
.chem-hero-stats .cs-hero-stat-text span {
  font-size: 11.5px;
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .chem-hero-stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .chem-hero-stats .cs-hero-stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
@media (max-width: 767.98px) {
  .chem-hero-stats {
    margin-top: 26px;
    margin-bottom: 8px;
  }
  /* a shared phone rule shrinks every .cs-hero-stat-text strong to 9px */
  .chem-hero-stats .cs-hero-stat-text strong {
    font-size: 16px;
  }
  .chem-hero-stats .cs-hero-stat {
    padding: 10px 12px;
  }
}

/* ---- Product cards ----
   One card per row below 992px (the template's row-cols now start
   2-up at lg), so the copy half of the side-by-side card has room. */
@media (max-width: 991.98px) {
  .chem-product-body {
    padding: 22px 24px;
  }
  .chem-product-media {
    min-height: 220px;
  }
  .chem-product-title {
    font-size: 20px;
  }
  .chem-product-desc {
    font-size: 13.5px;
  }
}
@media (max-width: 480px) {
  .chem-product-media {
    min-height: 190px;
  }
  .chem-product-body {
    padding: 18px 20px 20px;
  }
}

/* ---- Product modal ----
   Bootstrap's .modal-lg only widens the dialog from 992px up; below that
   it's ~500px wide, where 3 spec columns clipped the last one. */
.kg-pm-specs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991.98px) {
  .kg-pm-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kg-pm-spec:nth-child(3n) {
    border-right: 1px solid var(--kg-line-2);
  }
  .kg-pm-spec:nth-child(2n) {
    border-right: none;
  }
  .kg-pm-intro {
    padding: 28px 24px 24px;
  }
  .kg-pm-spec {
    padding: 20px;
  }
}
@media (max-width: 575.98px) {
  .kg-pm-intro {
    padding: 26px 20px 20px;
  }
  .kg-pm-title {
    font-size: 21px;
    padding-right: 36px;
  }
}
@media (max-width: 480px) {
  .kg-pm-specs {
    grid-template-columns: minmax(0, 1fr);
  }
  .kg-pm-spec {
    border-right: none !important;
  }
}


.value-circle-item .pi-underline {
  width: 28px;
  height: 4px;
  background: var(--kg-red);
  margin: 12px auto;
  display: block;
}
.values-panel .col:nth-child(odd) .value-circle-item .pi-underline {
  background: var(--kg-red) !important;
}
.values-panel .col:nth-child(even) .value-circle-item .pi-underline {
  background: #f4b81e !important;
}

/* contact-us */
.wpcf7-form br {
  display: none;
}
#csInquiryModalLabel {
  font-size: 22px;
  font-weight: 600;
}
.cs-inquiry-modal .modal-body {
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.postid-159 .kg-breadcrumb {
  display: none;
}

/* ----- Our Capabilities (Kingdom Asphalt only) ----- */
.cs-capabilities {
  background: var(--kg-bg);
  padding: 60px 0;
}
.cs-capabilities-title {
  margin: 0 0 36px;
}
/* Desktop: every capability in one row, split by thin vertical dividers.
   Below 1200px: a fixed number of columns per breakpoint (4 / 3 / 2);
   a short last row is centred, a vertical divider only appears BETWEEN
   items on the same row (never dangling at a row's end), and rows are
   separated by a horizontal line. Works for any number of items. */
.cs-capabilities-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cs-capability-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 12px 18px;
}
.cs-capability-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--kg-line);
}
.cs-capability-item:first-child::before {
  display: none;
}
.cs-capability-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.cs-capability-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kg-navy);
  overflow-wrap: break-word;
}

@media (max-width: 1199.98px) {
  .cs-capabilities {
    padding: 52px 0;
  }
  .cs-capability-item {
    flex: 0 0 25%;
    padding: 22px 16px;
  }
  .cs-capability-item:nth-child(4n + 1)::before {
    display: none;
  }
  .cs-capability-item:nth-child(n + 5) {
    border-top: 1px solid var(--kg-line);
  }
  .cs-capability-label {
    font-size: 16.5px;
  }
}

@media (max-width: 991.98px) {
  .cs-capability-item {
    flex-basis: 33.3333%;
  }
  .cs-capability-item:nth-child(4n + 1)::before {
    display: block;
  }
  .cs-capability-item:nth-child(3n + 1)::before {
    display: none;
  }
  .cs-capability-item:nth-child(n + 4) {
    border-top: 1px solid var(--kg-line);
  }
}

@media (max-width: 575.98px) {
  .cs-capabilities {
    padding: 40px 0;
  }
  .cs-capabilities-title {
    margin-bottom: 24px;
  }
  .cs-capability-item {
    flex-basis: 50%;
    gap: 10px;
    padding: 18px 10px;
  }
  .cs-capability-item:nth-child(3n + 1)::before {
    display: block;
  }
  .cs-capability-item:nth-child(2n + 1)::before {
    display: none;
  }
  .cs-capability-item:nth-child(n + 3) {
    border-top: 1px solid var(--kg-line);
  }
  .cs-capability-icon {
    width: 42px;
    height: 42px;
  }

  .cs-capability-label {
    font-size: 14.5px;
  }
}

.cs-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================
   Material Storage & Cooling Capacity
   ========================================================== */

.cs-storage-section {
  padding: 42px 0 38px;
  background: #fff;
}

/* Eyebrow */
.cs-storage-eyebrow {
  margin-bottom: 7px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #e52329;
}

/* Main heading */
.cs-storage-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: #171b24;
}

/* Description */
.cs-storage-text {
  margin: 8px 0 28px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: #777b83;
}

/* ==========================================================
   Stats
   ========================================================== */

.cs-storage-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

/* Individual stat */
.cs-storage-stat {
  position: relative;
  min-height: 115px;
  padding: 14px 15px 12px;

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

  text-align: center;
}
.page-id-111 .cs-why-card svg {
  height: 70px !important;
  width: 70px !important;
}
/* Vertical divider */
.cs-storage-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  width: 1px;
  height: calc(100% - 24px);
  background: #e7e7e7;
}

/* Icon */
.cs-storage-icon {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e52329;
}

.cs-storage-value {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* Number */
.cs-storage-number {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #171b24;
  white-space: nowrap;
}

.cs-storage-unit {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  padding: 15px 0;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  color: #e52329;
  letter-spacing: 0.2px;
}

/* Label */
.cs-storage-label {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--kg-muted);
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 991.98px) {
  .cs-storage-heading {
    font-size: 26px;
  }

  .cs-storage-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-storage-stat:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .cs-storage-section {
    padding: 32px 0;
  }

  .cs-storage-heading {
    font-size: 24px;
  }

  .cs-storage-text {
    margin-bottom: 22px;
  }

  .cs-storage-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-storage-stat:nth-child(3)::after {
    display: block;
  }

  .cs-storage-stat:nth-child(2n)::after {
    display: none;
  }

  .cs-storage-stat {
    min-height: 110px;
  }
}

@media (max-width: 480px) {
  .cs-storage-stats {
    grid-template-columns: 1fr 1fr;
  }

  .cs-storage-heading {
    font-size: 22px;
  }

  .cs-storage-value {
    font-size: 16px;
  }
}

/* ==========================================================
   BATCHING PLANTS
   ========================================================== */

.batching-plants-section {
  padding: 48px 0 50px;
  background: var(--kg-bg);
}
.cb-box {
  max-width: 70%;
  background: var(--kg-bg);
  padding: 30px;
}

.batching-plants-wrap {
  display: grid;
  grid-template-columns: 28% 72%;
  gap: 20px;
  align-items: stretch;
}

/* ==========================================================
   LEFT SIDE
   ========================================================== */

.batching-plants-intro {
  padding: 3px 8px 0 0;
}

.batching-yellow-line {
  width: 25px;
  height: 3px;
  margin: 13px 0 11px;
  background: #f2b400;
}

.batching-description {
  max-width: 270px;
  margin: 0 0 11px;
  color: #555b64;
  font-size: 9.5px;
  line-height: 1.55;
  font-weight: 400;
}

.batching-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.batching-features li {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  color: var(--kg-muted);
  font-size: 14px;
  line-height: 1.2;
}

.feature-check {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e3262e;
  color: #fff;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
}

/* ==========================================================
   PLANT GRID
   ========================================================== */

.batching-plants-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ==========================================================
   CARD
   ========================================================== */

.batching-plant-card {
  position: relative;
  justify-content: center;
  padding: 16px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #ededed;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.035);
}

/* ==========================================================
   RED NUMBER
   ========================================================== */

.plant-number {
  position: absolute;
  top: 18px;
  left: 26px;

  width: 25px;
  height: 25px;

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

  border-radius: 50%;
  background: #df292d;

  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

/* ==========================================================
   PLANT SVG
   ========================================================== */

.plant-icon {
  width: 72px;
  height: 78px;
  margin-top: 1px;
  margin-bottom: 2px;

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

  color: #69727b;
}

.plant-icon svg {
  width: 68px;
  height: 73px;
  display: block;
}

/* ==========================================================
   PLANT TITLE
   ========================================================== */

.batching-plant-card h3 {
  margin: 0 0 10px;
  color: var(--kg-muted);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ==========================================================
   CARD DETAILS
   ========================================================== */

.plant-detail {
  margin-bottom: 10px;
}

.plant-detail span {
  display: block;
  margin-bottom: 4px;
  color: var(--kg-muted-3);
  font-size: 14px;
  line-height: 24px;
}

.plant-detail strong {
  display: block;
  color: #252a32;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.plant-detail.location {
  margin-bottom: 0;
}

/* =========================================================
   QUOTATION SECTION
========================================================= */

.quotation-section {
  background: #fff;
  overflow: hidden;
}

.quotation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.quotation-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* =========================================================
   FEATURES
========================================================= */

.quotation-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 25px;
}

.quotation-feature {
  display: flex;
  align-items: center;
  gap: 17px;
}

.feature-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ed1c24;
  font-size: 25px;
  line-height: 1;
}

.feature-text {
  font-size: 12px;
  line-height: 1.65;
  font-weight: 800;
  letter-spacing: 1.25px;
  color: #142544;
  text-transform: uppercase;
}

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

.quotation-center {
  height: 560px;
  display: flex;
  align-items: center;
  text-align: center;
}

.center-art {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.quotation-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Contact heading */

.contact-heading {
  position: relative;
  display: inline-block;
  width: fit-content;
  margin-bottom: 42px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: #df1e26;
  text-transform: uppercase;
}

.contact-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 36px;
  height: 2px;
  background: #df1e26;
}

/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-card {
  min-height: 85px;
  margin-bottom: 14px;
  padding: 16px 16px 15px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(20, 35, 67, 0.1);
}

/* Icon circle */

.contact-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fbfbfb;
  color: #ed1c24;
  font-size: 27px;
  line-height: 1;
}

/* Contact text */

.contact-content {
  min-width: 0;
}

.contact-label {
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #142544;
  text-transform: uppercase;
}

.contact-value {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #27344d;
}

.contact-note {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: #707887;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .quotation-section .kg-container {
    padding-left: 35px;
    padding-right: 35px;
  }

  .quotation-left {
    width: 30%;
    flex-basis: 30%;
  }

  .quotation-center {
    width: 39%;
    flex-basis: 39%;
    height: 500px;
  }

  .quotation-right {
    width: 29%;
    flex-basis: 29%;
  }

  .quotation-left .cb-sec-title {
    font-size: 58px;
  }

  .center-art {
    width: 350px;
  }

  .contact-card {
    gap: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .contact-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: 23px;
  }
}

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

@media (max-width: 991.98px) {
  .quotation-section {
    min-height: auto;

    padding: 70px 0;
  }

  .quotation-section .kg-container {
    min-height: auto;

    padding-left: 25px;
    padding-right: 25px;
  }

  .quotation-wrapper {
    min-height: auto;

    display: flex;
    flex-direction: column;

    gap: 50px;
  }

  .quotation-left,
  .quotation-center,
  .quotation-right {
    width: 100%;
    flex-basis: auto;
  }

  /* Left */

  .quotation-left {
    align-items: center;

    text-align: center;
  }

  .quotation-left .eyebrow::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .quotation-left .cb-sec-title {
    font-size: 60px;
    text-align: center;
  }

  .quotation-left .bc-hero-text {
    max-width: 350px;

    text-align: center;
  }

  /* Features */

  .quotation-features {
    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    text-align: left;
  }

  /* Center */

  .quotation-center {
    height: auto;

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

  .center-art {
    width: 390px;
    max-width: 90%;
  }

  /* Right */

  .quotation-right {
    max-width: 500px;

    align-items: stretch;

    margin-left: auto;
    margin-right: auto;
  }

  .contact-heading {
    align-self: center;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .quotation-section {
    padding: 50px 0;
  }

  .quotation-left .cb-sec-title {
    font-size: 52px;
  }

  .quotation-left .bc-hero-text {
    font-size: 10.5px;
  }

  .quotation-feature {
    gap: 14px;
  }

  .feature-text {
    font-size: 8px;
  }

  .center-art {
    width: 330px;
  }

  .contact-card {
    min-height: 82px;
  }
}
.ws-reliability-media {
}

/* =========================================================
   PRODUCT RANGE SECTION
========================================================= */

.product-range-section {
  width: 100%;
  background: #ffffff;
}

/* =========================================================
   HEADER
========================================================= */

.product-range-header {
  margin-bottom: 18px;
}

.product-range-heading span {
  color: #d92d36;
}

.product-range-intro {
  margin: 6px 0 0;
  color: #555b65;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 400;
}

/* =========================================================
   PRODUCT GRID
========================================================= */

.product-range-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px 12px;

  width: 100%;
}

/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #e6e6e6;
  border-radius: 6px;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   CARD IMAGE
========================================================= */

.product-card-image {
  width: 100%;
  overflow: hidden;
  background: #ddd;
}

.product-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   CARD CONTENT
========================================================= */

.product-card-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
}

/* =========================================================
   CARD ICON
========================================================= */

.product-card-icon {
  width: 40px;
  height: 40px;
  margin-right: 7px;
  border-radius: 50%;
  background: #d92d36;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

/* =========================================================
   CARD TEXT
========================================================= */

.product-card-info {
  flex: 1;
  min-width: 0;
}

.product-card-info h3 {
  margin: 0 0 4px;
  color: var(--kg-navy);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
}

.product-card-info p {
  margin: 0;
  color: var(--kg-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}

/* =========================================================
   BOTTOM FEATURES
========================================================= */

.product-features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 10px;
  width: 100%;
}

/* =========================================================
   FEATURE
========================================================= */

.product-feature {
  position: relative;

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

  min-height: 32px;

  padding: 3px 8px;
}

/* Vertical yellow separator */

.product-feature:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 5px;
  right: 0;

  width: 1px;
  height: 22px;

  background: #f2d35b;
}

/* =========================================================
   FEATURE ICON
========================================================= */

.product-feature-icon {
  flex: 0 0 auto;

  margin-right: 6px;

  color: #d92d36;

  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   FEATURE TEXT
========================================================= */

.product-feature-text {
  display: flex;
  flex-direction: column;

  color: #27334b;

  font-size: 7px;
  line-height: 1.2;
}

.product-feature-text strong {
  font-weight: 800;
  font-size: 14px;
}

.product-feature-text span {
  font-weight: 600;
  font-size: 12px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
  .product-range-section {
    padding: 30px 0;
  }

  .product-range-heading {
    font-size: 27px;
  }

  .product-range-grid {
    gap: 10px;
  }

  .product-card-image {
    height: 80px;
  }

  .product-feature {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 767px) {
  .product-range-section {
    padding: 30px 15px;
  }

  .product-range-section .container {
    padding-left: 0;
    padding-right: 0;
  }

  .product-range-heading {
    font-size: 27px;
  }

  .product-range-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-card-image {
    height: 110px;
  }

  .product-card-content {
    min-height: 85px;
  }

  .product-card-info h3 {
    font-size: 9px;
  }

  .product-card-info p {
    font-size: 7.5px;
  }

  .product-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .product-feature {
    justify-content: flex-start;
  }

  .product-feature:nth-child(2)::after,
  .product-feature:nth-child(4)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .product-range-heading {
    font-size: 24px;
  }

  .product-range-intro {
    font-size: 8px;
  }

  .product-range-grid {
    grid-template-columns: 1fr;
  }

  .product-card-image {
    height: 145px;
  }

  .product-card-content {
    min-height: 80px;
  }

  .product-features {
    grid-template-columns: 1fr 1fr;
  }
}

/*  */
.bc-mini-card-media {
  /* aspect-ratio: 1 / 1; */
  position: relative;
  height: 210px;
  background: #ffffff;
  overflow: hidden;
}

.bc-mini-card-hover {
  position: absolute;
  inset: 0;
  background: rgba(20, 41, 77, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.bc-mini-card:hover .bc-mini-card-hover {
  opacity: 1;
  visibility: visible;
}
.bc-mini-card-hover p {
  margin: 0;
  font-size: 12px;
  color: #fff;
}
.bc-mini-card-hover p span {
  font-weight: 700;
  margin-right: 4px;
}

/* =========================================================================
   Message From Leader page (template-message-from-leader.php)
   ========================================================================= */
.mfl-hero {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}
.mfl-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mfl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.78) 42%,
    rgba(255, 255, 255, 0.15) 100%
  );
  z-index: 1;
}
.mfl-hero .kg-container {
  position: relative;
  z-index: 2;
}
.mfl-hero-title {
  max-width: 620px;
}
@media(min-width: 1550px) {
  .bc-mini-card-media {
  height: 300px;
}
}
@media (max-width: 767px) {
  /* .unique's 52px is sized for the intended 2-line <br> break — on a
     phone-width column it wraps to 5+ short lines instead, making the
     hero unnecessarily tall. !important matches .unique's own. */
  .mfl-hero-title {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
}
.mfl-hero-tag {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--kg-navy);
  text-transform: uppercase;
}

.mfl-letters {
  padding: 70px 0;
}
.mfl-letters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.mfl-letter-card {
  flex: 1 1 420px;
  display: block;
  background: var(--kg-bg);
  min-width: 320px;
  height: 100%;
}
.mfl-letter-card > .row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.mfl-letter-photo {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-height: 365px;
}
.mfl-letter-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mfl-letter-copy {
  flex: 1 1 auto;
  padding: 32px 30px;
}
.mfl-letter-eyebrow {
  margin-bottom: 4px;
}
.mfl-letter-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--kg-navy);
  margin-bottom: 12px;
}
.mfl-letter-rule {
  width: 46px;
  height: 3px;
  margin-bottom: 14px;
}
.mfl-letter-rule-gold {
  background: var(--kg-gold);
}
.mfl-letter-rule-red {
  background: var(--kg-red);
}
.mfl-letter-copy .csr-quote-mark {
  font-size: 40px;
  margin-bottom: 2px;
}
.mfl-letter-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin-bottom: 12px;
}
.mfl-letter-text-bold {
  font-weight: 700;
  color: var(--kg-navy);
}
.mfl-letter-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.mfl-letter-clamp.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.mfl-letter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 8px;
}
.mfl-letter-name {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  color: var(--kg-navy);
  margin: 18px 0 2px;
}
.mfl-letter-role {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--kg-muted-2);
  text-transform: uppercase;
}

.mfl-banner {
  position: relative;
  background: var(--kg-navy);
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 220px;
  padding: 40px 56px;
  gap: 40px;
}
.mfl-banner-eyebrow {
  color: var(--kg-gold);
  margin-bottom: 10px;
}
.mfl-banner-title {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}
.mfl-banner-icons {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #fff;
}
.mfl-banner-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.mfl-banner-icon-svg {
  color: #fff;
  display: inline-flex;
}
.mfl-banner-sep {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.25);
}
.mfl-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
}
.mfl-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mfl-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--kg-navy);
  clip-path: polygon(0 0, 64% 0, 44% 100%, 0 100%);
}
.mfl-banner-copy,
.mfl-banner-icons,
.mfl-banner-btn {
  position: relative;
  z-index: 1;
}
.mfl-banner-btn {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

@media (max-width: 991px) {
  .mfl-hero-img {
    object-position: right;
  }
  .mfl-letter-card > .row {
    flex-direction: column;
  }
  .mfl-letter-photo {
    width: 100%;
    min-height: 260px;
  }
}

/* .mfl-banner's diagonal split (::before / .mfl-banner-media) is cut
   at fixed % points, so the navy area's actual pixel width shrinks
   with the section — below ~1150px the "POSSIBILITIES" icon lands
   past the split, on top of the photo, and is barely readable. The
   >=992px 3-icon row needs the full simplified (no-diagonal, static
   button) mobile treatment before that happens, not just <=991px. */
@media (max-width: 1199.98px) {
  /* no diagonal here, so the copy, icons and button are centred in the
     banner — horizontally and vertically — with even padding */
  .mfl-banner {
    padding: 44px 24px;
    justify-content: center;
    align-content: center;
    text-align: center;
    column-gap: 48px;
    row-gap: 24px;
  }
  .mfl-banner-icons {
    justify-content: center;
  }
  .mfl-banner::before {
    clip-path: none;
    background: var(--kg-navy);
  }
  .mfl-banner-media {
    clip-path: none;
    opacity: 0.18;
  }
  .mfl-banner-btn {
    position: static;
    transform: none;
  }
}

/* phones/small tablets: stack copy, icons and button in one centred column */
@media (max-width: 767.98px) {
  .mfl-banner {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
}

@media (max-width: 575px) {
  .mfl-banner-icons {
    flex-wrap: wrap;
    gap: 14px;
  }
}

/* very small phones: keep PEOPLE / PROGRESS / POSSIBILITIES on one row
   (wrapping left a divider dangling at the end of the first line) */
@media (max-width: 400px) {
  .mfl-banner-icons {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .mfl-banner-icon {
    font-size: 10px;
    letter-spacing: 0.4px;
  }
  .mfl-banner-sep {
    height: 36px;
  }
}

/* =========================================================================
   Neo Holding page (template-neo-holding-page.php)
   ========================================================================= */
.nh-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--kg-navy);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.nh-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--kg-red);
  display: inline-block;
}

.nh-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 40px 24px;
}
.nh-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.nh-hero-kicker-wrap {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 1;
}
.nh-hero-kicker-wrap .hero-rule {
  margin: 12px 0 0;
}
.nh-hero-kicker {
  color: #14294d;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.nh-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.nh-hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 20px;
}
.nh-hero-logo {
  height: 150px;
  width: auto;
}
.nh-hero-sep {
  width: 1px;
  height: 40px;
  background: rgba(20, 41, 77, 0.3);
}
.nh-hero-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--kg-navy);
  margin-bottom: 8px;
}
.nh-hero-sub {
  font-size: 16px;
  color: black;
  margin-bottom: 26px;
}
.nh-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--kg-navy);
  color: var(--kg-navy);
  background: rgba(255, 255, 255, 0.6);
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nh-btn-outline:hover {
  background: var(--kg-navy);
  color: #fff;
}

.nh-structure {
  padding: 70px 0;
}
.nh-structure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* align-items: center; */
}
.nh-structure-copy {
  flex: 1 1 300px;
}
.nh-structure-title {
  font-size: 38px;
  font-weight: 700;
  color: var(--kg-navy);
  line-height: 1.15;
  margin-bottom: 16px;
}
.nh-structure-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kg-muted);
  margin-bottom: 20px;
  max-width: 380px;
}
.nh-text-link {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: var(--kg-navy);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--kg-gold);
}
.nh-text-link:hover {
  color: var(--kg-red);
}

.nh-structure-diagram {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-right: 1px solid #ededed;
}
.nh-structure-card {
  width: 100%;
  max-width: 260px;
  background: #f9f9f9;
  border: 1px solid var(--kg-line);
  padding: 22px 20px;
  text-align: center;
}
.nh-structure-card img {
  height: 100px;
  width: auto;
  margin-bottom: 12px;
}
.nh-structure-card span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--kg-muted-2);
  text-transform: uppercase;
}
.nh-structure-connector {
  width: 1px;
  height: 36px;
  background: var(--kg-line-2);
  position: relative;
}
.nh-structure-connector::before,
.nh-structure-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kg-navy);
  transform: translateX(-50%);
}
.nh-structure-connector::before {
  top: -3px;
}
.nh-structure-connector::after {
  bottom: -3px;
}

.nh-structure-points {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: space-around;
}
.nh-structure-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.nh-structure-point-icon {
  flex: none;
  color: var(--kg-navy);
}
.nh-structure-point-icon svg {
  height: 40px;
  width: 40px;
}
.nh-structure-point h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--kg-navy);
  margin-bottom: 4px;
}
.nh-structure-point p {
  font-size: 14px;
  color: var(--kg-muted-2);
  margin: 0;
}

.nh-companies {
  padding: 70px 0;
}
.nh-companies-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
}
.nh-companies-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--kg-navy);
}
.nh-companies-lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--kg-muted);
  max-width: 340px;
  margin: 0;
}
.nh-companies-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.nh-company-card {
  display: flex;
  flex-direction: column;
  color: var(--kg-navy);
  transition: transform 0.3s ease;
}
.nh-company-card:hover {
  color: var(--kg-navy);
  transform: translateY(-6px);
}
.nh-company-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 14px;
}
.nh-company-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 30%;
  transition: transform 0.5s ease;
}
.nh-company-card:hover .nh-company-photo img {
  transform: scale(1.08);
}
.nh-company-card h3 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--kg-navy);
  margin-bottom: 10px;
  transition: color 0.25s ease;
}
.nh-company-card:hover h3 {
  color: var(--kg-red);
}
.nh-company-rule {
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 10px;
  transition: width 0.3s ease;
}
.nh-company-card:hover .nh-company-rule {
  width: 54px;
}
.nh-company-rule-gold {
  background: var(--kg-gold);
}
.nh-company-rule-red {
  background: var(--kg-red);
}
.nh-company-arrow {
  display: inline-flex;
  font-size: 16px;
  transition:
    transform 0.3s ease,
    color 0.25s ease;
}
.nh-company-card:hover .nh-company-arrow {
  color: var(--kg-red);
  transform: translateX(6px);
}

.nh-eyebrow-light {
  color: #fff;
}
.nh-eyebrow-light::before {
  background: var(--kg-gold);
}

.nh-impact {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--kg-navy);
}
.nh-impact-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.nh-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(10, 22, 46, 0.92) 0%,
    rgba(10, 22, 46, 0.75) 45%,
    rgba(10, 22, 46, 0.1) 78%
  );
}
.nh-impact-copy {
  position: relative;
  z-index: 2;
  margin: auto;
  max-width: 620px;
  text-align: center;
}
.nh-impact-title {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 26px;
}
.nh-impact-points {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}
.nh-impact-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.nh-impact-point-icon {
  color: #fff;
}
.nh-impact-point-icon svg {
  height: 40px;
  width: 40px;
}
.nh-impact-point span:last-child {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .nh-impact-copy {
    padding: 36px 24px;
  }
  .nh-impact-points {
    gap: 24px;
  }
}

.nh-cta {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.nh-cta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.nh-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0.05) 68%
  );
}
.nh-cta-copy {
  position: relative;
  z-index: 2;
  padding: 48px 56px;
  max-width: 480px;
}
.nh-cta-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--kg-navy);
  margin-bottom: 10px;
}
.nh-cta-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--kg-muted);
  margin-bottom: 22px;
}
.nh-btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--kg-navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nh-btn-navy:hover {
  background: #0d1c38;
  color: #fff;
}

@media (max-width: 991px) {
  .nh-companies-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nh-structure-row {
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .nh-hero-title {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .nh-hero-logo {
    height: 46px;
  }
  .nh-cta-copy {
    padding: 36px 24px;
  }
}

@media (max-width: 575px) {
  .nh-companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nh-hero-kicker-wrap {
    left: 20px;
    top: 20px;
  }
  .nh-hero-kicker {
    font-size: 11px;
  }
}

/* slider controls below the companies strip: ← dots → (< 992px only) */
.nh-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.nh-slider-controls[hidden] {
  display: none;
}
.nh-slider-controls .nh-companies-dots {
  margin-top: 0;
}
.nh-slider-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kg-line);
  border-radius: 4px;
  background: #fff;
  color: var(--kg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.nh-slider-btn.next {
  color: var(--kg-red);
}
.nh-slider-btn:hover,
.nh-slider-btn:focus-visible {
  background: var(--kg-navy);
  border-color: var(--kg-navy);
  color: #fff;
}
@media (min-width: 992px) {
  .nh-slider-controls {
    display: none !important;
  }
}

/* =========================================================================
   NEO HOLDING — MOBILE & TABLET (< 992px; desktop untouched)
   Structure: copy full width, the two logos side by side in one light
   panel joined by a dotted connector, the 3 points in a row with
   dividers. Companies: photo cards with name/rule/arrow over the image.
   Impact: the 3 points kept in one row with dividers.
   ========================================================================= */
@media (max-width: 991.98px) {
  .nh-structure {
    padding: 48px 0;
  }
  .nh-structure-row {
    gap: 28px;
  }
  .nh-structure-copy,
  .nh-structure-diagram,
  .nh-structure-points {
    flex: 0 0 100%;
  }
  .nh-structure-title br {
    display: none;
  }
  .nh-structure-title {
    font-size: 40px;
    margin-bottom: 12px;
  }
  .nh-structure-text {
    max-width: none;
    font-size: 16px;
  }

  .nh-structure-diagram {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-right: 0;
    background: #f7f7f7;
    border: 1px solid var(--kg-line);
    border-radius: 10px;
    padding: 22px 16px;
  }
  .nh-structure-card {
    flex: 1 1 0;
    max-width: none;
    background: transparent;
    border: 0;
    padding: 0 12px;
  }
  .nh-structure-card img {
    height: 80px;
  }
  .nh-structure-connector {
    flex: none;
    width: 1px;
    height: 90px;
  }
  .nh-structure-connector::before {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nh-structure-connector::after {
    display: none;
  }

  .nh-structure-points {
    flex-direction: row;
    gap: 0;
  }
  .nh-structure-point {
    flex: 1 1 0;
    flex-direction: column;
    gap: 12px;
    padding: 0 18px;
  }
  .nh-structure-point:first-child {
    padding-left: 0;
  }
  .nh-structure-point + .nh-structure-point {
    border-left: 1px solid var(--kg-line);
  }
  .nh-structure-point h3 {
    font-size: 16px;
  }

  .nh-companies {
    padding: 48px 0;
  }
  .nh-companies-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
  }
  .nh-companies-title {
    font-size: 36px;
    margin: 0;
  }
  .nh-companies-lead {
    max-width: none;
    font-size: 16px;
  }
  /* companies: swipe slider (3 in view on tablet, 2 on phones) */
  .nh-companies-grid {
    --nh-gap: 12px;
    --nh-per-view: 3;
    display: flex;
    gap: var(--nh-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .nh-companies-grid::-webkit-scrollbar {
    display: none;
  }
  .nh-companies-grid > .nh-company-card {
    flex: 0 0
      calc((100% - (var(--nh-per-view) - 1) * var(--nh-gap)) / var(--nh-per-view));
    scroll-snap-align: start;
  }
  .nh-company-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }
  .nh-company-card:hover {
    transform: none;
  }
  .nh-company-photo {
    aspect-ratio: auto;
    height: 170px;
    margin: 0;
    position: relative;
  }
  .nh-company-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      0deg,
      rgba(9, 18, 38, 0.8) 0%,
      rgba(9, 18, 38, 0.1) 60%
    );
  }
  .nh-company-card h3,
  .nh-company-card:hover h3 {
    position: absolute;
    left: 16px;
    right: 56px;
    bottom: 22px;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.25;
    z-index: 1;
  }
  .nh-company-rule {
    position: absolute;
    left: 16px;
    bottom: 12px;
    width: 30px;
    margin: 0;
    z-index: 1;
  }
  .nh-company-arrow,
  .nh-company-card:hover .nh-company-arrow {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--kg-navy);
    align-items: center;
    justify-content: center;
    transform: none;
  }

  .nh-impact-copy {
    width: 100%;
    padding: 40px 24px;
  }
  .nh-impact-title {
    font-size: 30px;
  }
  .nh-impact-points {
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch !important;
  }
  .nh-impact-point {
    flex: 1 1 0;
    padding: 0 12px;
    text-align: center;
  }
  .nh-impact-point + .nh-impact-point {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }
}

/* mobile */
@media (max-width: 767.98px) {
  .nh-hero {
    min-height: 380px;
    padding: 96px 16px 40px;
  }
  .nh-hero-logos {
    gap: 18px;
    margin-bottom: 14px;
  }
  .nh-hero-logo {
    height: 64px;
  }
  .nh-hero-title {
    font-size: 19px;
    letter-spacing: 0.5px;
  }
  .nh-hero-sub {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .nh-btn-outline {
    padding: 11px 22px;
  }

  .nh-structure {
    padding: 32px 0 40px;
  }
  .nh-structure-row {
    gap: 22px;
  }
  .nh-structure-title {
    font-size: 32px;
  }
  .nh-structure-text {
    font-size: 15px;
    margin-bottom: 14px;
  }
  .nh-structure-card img {
    height: 60px;
    margin-bottom: 8px;
  }
  .nh-structure-card span {
    font-size: 10px;
  }
  .nh-structure-connector {
    height: 70px;
  }
  .nh-structure-point {
    min-width: 0;
    gap: 8px;
    padding: 0 8px;
  }
  .nh-structure-point:last-child {
    padding-right: 0;
  }
  .nh-structure-point-icon svg {
    width: 34px;
    height: 34px;
  }
  .nh-structure-point h3 {
    font-size: 11.5px;
    letter-spacing: 0;
    margin-bottom: 4px;
    overflow-wrap: break-word;
  }
  .nh-structure-point p {
    font-size: 12px;
  }

  .nh-companies {
    padding: 36px 0 40px;
  }
  .nh-companies-title {
    font-size: 28px;
  }
  .nh-companies-lead {
    font-size: 14.5px;
  }
  .nh-companies-grid {
    --nh-gap: 10px;
    --nh-per-view: 2;
  }
  .nh-company-photo {
    height: 130px;
  }
  .nh-company-arrow svg {
    width: 16px;
    height: 16px;
  }
  .nh-company-card h3,
  .nh-company-card:hover h3 {
    left: 12px;
    right: 44px;
    bottom: 18px;
    font-size: 13px;
  }
  .nh-company-rule {
    left: 12px;
    bottom: 10px;
    width: 26px;
  }
  .nh-company-arrow,
  .nh-company-card:hover .nh-company-arrow {
    right: 10px;
    bottom: 12px;
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .nh-impact-copy {
    padding: 32px 12px;
  }
  .nh-impact-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .nh-impact-point {
    padding: 0 6px;
  }
  .nh-impact-point-icon svg {
    width: 32px;
    height: 32px;
  }
  .nh-impact-point span:last-child {
    font-size: 11px;
    letter-spacing: 0.3px;
  }
}


/* Inquiry Actions */
.inquiry-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}


/* Direct Call Button */
.direct-call-btn {
    border: 1px solid #d81f26;
    background: transparent;
    color: #d81f26;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 146px;
    min-height: 38px;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.direct-call-btn:hover {
    background: #d81f26;
    color: #fff;
    text-decoration: none;
}


/* Phone Icon */
.direct-call-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.direct-call-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}


/* Call Text */
.direct-call-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.direct-call-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.direct-call-number {
    font-size: 14px;
    font-weight: 600;
}


/* Mobile */
@media (max-width: 767.98px) {

    .inquiry-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 20px;
    }

    .direct-call-btn,
    .inquiry-submit-btn {
        width: 100%;
        justify-content: center;
    }

}
/* =========================================================
   QUOTATION BANNER (concrete-blocks.php) — single-row strip
   Sizes are taken 1:1 from the 1920px design and scaled with
   --qb-u (1px at ≥ ~2050px viewport, shrinking with the screen).
========================================================= */
.qb-section {
  --qb-u: min(1px, 0.0487vw);
  --qb-navy: #14294d;
  --qb-red: #d81f26;
  padding: calc(40 * var(--qb-u)) 0;
  background: #fff;
  font-family: var(--sans);
}
.qb-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(177 * var(--qb-u));
  padding: 0 calc(42 * var(--qb-u)) 0 calc(40 * var(--qb-u));
  background: #fff;
  border-radius: calc(8 * var(--qb-u));
  box-shadow: 0 calc(6 * var(--qb-u)) calc(28 * var(--qb-u)) rgba(20, 41, 77, 0.08), 0 0 0 1px rgba(20, 41, 77, 0.03);
}

/* Heading block */
.qb-head {
  flex: 0 0 auto;
  padding: calc(22 * var(--qb-u)) 0 calc(34 * var(--qb-u));
}
.qb-eyebrow {
  position: relative;
  margin-bottom: calc(40 * var(--qb-u));
  font-size: max(11px, calc(17 * var(--qb-u)));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qb-red);
}
.qb-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-22 * var(--qb-u));
  width: calc(48 * var(--qb-u));
  height: max(2px, calc(3 * var(--qb-u)));
  background: var(--qb-red);
}
.qb-title {
  margin: 0;
  font-family: "Oswald", var(--sans);
  font-size: max(34px, calc(68 * var(--qb-u)));
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--qb-navy);
  white-space: nowrap;
}

/* Features */
.qb-features {
  display: flex;
  align-items: center;
  margin: 0 0 0 calc(33 * var(--qb-u));
  padding: 0;
  list-style: none;
}
.qb-feature {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--qb-u));
  padding: 0 calc(26 * var(--qb-u));
  border-left: 1px solid #cfd3da;
}
.qb-feature:first-child {
  padding-left: 0;
  border-left: 0;
}
.qb-feature:last-child {
  padding-right: 0;
}
.qb-feature-icon {
  flex: 0 0 auto;
  width: calc(46 * var(--qb-u));
  height: calc(50 * var(--qb-u));
  color: var(--qb-red);
}
.qb-feature:last-child .qb-feature-icon {
  width: calc(58 * var(--qb-u));
}
.qb-feature-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.qb-feature-text {
  font-size: max(10px, calc(15 * var(--qb-u)));
  font-weight: 800;
  line-height: 1.47;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qb-navy);
  white-space: nowrap;
}

/* Blocks artwork */
.qb-art {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-end;
  width: calc(275 * var(--qb-u));
  height: calc(181 * var(--qb-u));
  margin: 0 calc(22 * var(--qb-u)) 0 calc(35 * var(--qb-u));
}
.qb-art-red,
.qb-art-blue,
.qb-art-dots {
  position: absolute;
  display: block;
}
.qb-art-red {
  left: calc(17 * var(--qb-u));
  top: calc(35 * var(--qb-u));
  width: calc(80 * var(--qb-u));
  height: calc(78 * var(--qb-u));
  background: var(--qb-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.qb-art-blue {
  right: 0;
  bottom: 0;
  width: calc(70 * var(--qb-u));
  height: calc(58 * var(--qb-u));
  background: #1d4f91;
  clip-path: polygon(62% 0, 100% 0, 78% 100%, 0 100%);
}
.qb-art-dots {
  right: calc(8 * var(--qb-u));
  top: calc(20 * var(--qb-u));
  width: calc(62 * var(--qb-u));
  height: calc(58 * var(--qb-u));
  background-image: radial-gradient(circle, #c3c8d1 1.1px, transparent 1.6px);
  background-size: calc(12.4 * var(--qb-u)) calc(11.6 * var(--qb-u));
}
.qb-art-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}

/* Button */
.qb-btn {
  flex: 0 0 auto;
  display: inline-flex;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--qb-u));
  width: calc(374 * var(--qb-u));
  min-width: 250px;
  height: max(48px, calc(68 * var(--qb-u)));
  padding: 0 calc(24 * var(--qb-u)) 0 calc(40 * var(--qb-u));
  border-radius: calc(8 * var(--qb-u));
  background: var(--qb-red);
  color: #fff;
  font-size: max(13px, calc(19 * var(--qb-u)));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.qb-btn svg {
  flex: 0 0 auto;
  width: max(20px, calc(28 * var(--qb-u)));
  height: max(20px, calc(28 * var(--qb-u)));
  transition: transform 0.25s ease;
}
.qb-btn:hover,
.qb-btn:focus-visible {
  background: #b3161c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(216, 31, 38, 0.25);
}
.qb-btn:hover svg {
  transform: translateX(4px);
}

/* Tablet: heading + button on top row, features + art below */
@media (max-width: 1199.98px) {
  .qb-section {
    --qb-u: 0.8px;
    padding: 40px 0;
  }
  .qb-card {
    flex-wrap: wrap;
    row-gap: 24px;
    padding: 28px 32px 0;
  }
  .qb-head {
    order: 1;
    padding: 0;
  }
  .qb-btn {
    order: 2;
  }
  .qb-features {
    order: 3;
    margin: 0;
    padding-bottom: 28px;
  }
  .qb-art {
    order: 4;
    margin: 0;
  }
}

/* Mobile: everything stacked and centred */
@media (max-width: 767.98px) {
  .qb-section {
    --qb-u: 0.75px;
    padding: 32px 0;
  }
  .qb-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 0;
  }
  .qb-head {
    order: 1;
  }
  .qb-eyebrow::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .qb-title {
    font-size: 40px;
    white-space: normal;
  }
  .qb-features {
    order: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 0;
  }
  .qb-feature {
    padding: 0;
    border-left: 0;
  }
  .qb-feature-text br {
    display: none;
  }
  .qb-feature-text {
    white-space: normal;
    text-align: left;
  }
  .qb-btn {
    order: 3;
    width: 100%;
    max-width: 340px;
    min-width: 0;
  }
  .qb-art {
    order: 4;
    align-self: center;
  }
}
#catalogue #group-concrete-blocks{
  display: none;
}

/* ===================================================
   Our History / Our Journey — road timeline (template-history.php)
   Base rules = plain, always-visible list (no JS). ".is-ready" (added by
   the template's inline script) turns it into the slider + road + truck.
   =================================================== */
.kg-ht-section {
	--ht-gold: #e9a52b;
	--ht-gold-soft: rgba(233, 165, 43, 0.22);
	--ht-navy: var(--kg-navy, #14294d);
	--ht-body: var(--kg-muted, #54607a);
	--ht-asphalt: #2e2e2e;
	--ht-paper: #ffffff;
	position: relative;
	padding: 60px 0 0;
	background: var(--kg-bg, #f6f4f1);
	overflow: hidden;
}

/* ---------- intro ---------- */
.kg-ht-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.kg-ht-eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font-size: 14px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
	color: var(--ht-gold); margin: 0 0 14px;
}
.kg-ht-eyebrow::before,
.kg-ht-eyebrow::after { content: ""; display: block; width: 34px; height: 2px; background: var(--ht-gold); flex: 0 0 auto; }
.kg-ht-heading {
	font-size: clamp(30px, 4.5vw, 46px); line-height: 1.12; font-weight: 700;
	color: var(--ht-navy); letter-spacing: -0.4px; margin: 0;
}
.kg-ht-rule { width: 52px; height: 5px; border-radius: 3px; background: var(--ht-gold); margin: 20px auto 22px; }
.kg-ht-lead { font-size: 16px; line-height: 1.9; color: var(--ht-body); margin: 0; }

/* ---------- content panel ---------- */
.kg-ht-panel {
	position: relative;
	display: flex; align-items: center; gap: 14px;
	max-width: 1100px; margin: 0 auto;
	padding: 38px 0 40px;
}
.kg-ht-slides { flex: 1 1 auto; position: relative; min-width: 0; }

/* no-JS: every slide shows, stacked */
.kg-ht-slide { margin-bottom: 28px; }
.kg-ht-slide-inner {
	display: flex; gap: 32px; align-items: flex-start;
	background: var(--ht-paper); border-radius: 13px;
	border: 1px solid var(--ht-gold-soft);
	box-shadow: 0 20px 46px -24px rgba(20, 41, 77, 0.35);
	padding: 26px 28px;
}
.kg-ht-slide-left {
	flex: 0 0 auto; width: 110px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.kg-ht-slide-year {
	width: 86px; height: 86px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--ht-gold); color: #fff;
	font-size: 18px; font-weight: 800; letter-spacing: 0.5px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.kg-ht-slide-year.is-today { background: var(--ht-navy); }
.kg-ht-slide-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--ht-paper);
	box-shadow: 0 8px 20px -8px rgba(20, 41, 77, 0.4);
	display: flex; align-items: center; justify-content: center;
}
.kg-ht-slide-icon img { width: 26px; height: 26px; object-fit: contain; }
.kg-ht-slide-icon .kg-svg-icon svg, .kg-ht-slide-icon svg { width: 26px; height: 26px; display: block; }
.kg-ht-dot-default { width: 12px; height: 12px; border-radius: 50%; background: var(--kg-red, #d81f26); display: block; }

.kg-ht-slide-right { flex: 1 1 auto; min-width: 0; }
.kg-ht-slide-right h3 {
	font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.35;
	color: var(--ht-navy); margin: 0 0 10px; overflow-wrap: break-word;
}
.kg-ht-slide-right p { font-size: 15px; line-height: 1.8; color: var(--ht-body); margin: 0; overflow-wrap: break-word; }

.kg-ht-slide-media { flex: 0 0 34%; max-width: 360px; height: 200px; border-radius: 10px; overflow: hidden; }
.kg-ht-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* arrows, counter and road only exist once the script is running */
.kg-ht-arrow, .kg-ht-counter, .kg-ht-road-section { display: none; }

/* ---------- slider mode ----------
   Every slide sits in the SAME grid cell, so the panel is always as tall
   as the tallest milestone and never changes height while slides swap.
   (Absolutely-positioned slides made the panel collapse for a frame on
   every click, which shortened the page, scrolled it up and flashed the
   sticky header.) */
/* The panel's height is set by the script to the ACTIVE card's height and
   eases between values, so a short text-only card doesn't inherit the
   blank space of the tallest one. It is always an explicit pixel value
   (never collapses to 0); the script also pauses the browser's scroll
   anchoring while it changes, so the page itself never jumps. */
.kg-ht-section.is-ready .kg-ht-slides {
	display: grid; align-items: start; overflow: hidden;
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.kg-ht-section.is-ready .kg-ht-slide {
	grid-area: 1 / 1; margin: 0;
	display: flex;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateX(70px);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, visibility 0s linear 0.55s;
}
.kg-ht-section.is-ready .kg-ht-slide-inner { flex: 1 1 auto; }
.kg-ht-section.is-ready .kg-ht-slide.is-active {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(0);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}
.kg-ht-section.is-ready .kg-ht-slide.is-exit-left   { transform: translateX(-70px); }
.kg-ht-section.is-ready .kg-ht-slide.is-exit-right  { transform: translateX(70px); }
.kg-ht-section.is-ready .kg-ht-slide.is-enter-left  { transform: translateX(-70px); transition: none; }
.kg-ht-section.is-ready .kg-ht-slide.is-enter-right { transform: translateX(70px); transition: none; }

.kg-ht-section.is-ready .kg-ht-arrow {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--ht-paper); color: var(--ht-navy); border: 0; cursor: pointer; z-index: 2;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: background 0.22s, color 0.22s, transform 0.18s, box-shadow 0.22s;
}
.kg-ht-section.is-ready .kg-ht-arrow:hover:not(:disabled),
.kg-ht-section.is-ready .kg-ht-arrow:focus-visible {
	background: var(--ht-gold); color: #fff; transform: scale(1.08);
	box-shadow: 0 4px 18px rgba(233, 165, 43, 0.35);
}
.kg-ht-section.is-ready .kg-ht-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.kg-ht-arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.kg-ht-section.is-ready .kg-ht-counter {
	display: flex; align-items: baseline; gap: 2px;
	position: absolute; right: 62px; bottom: 8px;
	font-weight: 700; color: var(--ht-navy);
}
.kg-ht-counter-current { font-size: 22px; color: var(--ht-gold); }
.kg-ht-counter-sep { font-size: 17px; color: #bbb; margin: 0 3px; }
.kg-ht-counter-total { font-size: 14px; color: #aaa; font-weight: 500; }

/* ---------- road ---------- */
.kg-ht-section.is-ready .kg-ht-road-section { display: block; width: 100%; position: relative; }
.kg-ht-road-scroll {
	width: 100%; overflow-x: auto; overflow-y: hidden;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.kg-ht-road-scroll::-webkit-scrollbar { display: none; height: 0; }
/* each marker gets at least 96px, so a long timeline scrolls sideways
   on small screens instead of squashing the years together */
.kg-ht-road-inner { position: relative; min-width: 100%; width: calc(var(--kg-ht-count, 5) * 96px + 8%); }

.kg-ht-markers {
	display: flex; justify-content: space-between;
	padding: 0 4%;
	position: relative; z-index: 3;
}
.kg-ht-marker {
	display: flex; flex-direction: column; align-items: center;
	flex: 0 0 auto; min-width: 60px;
	padding: 14px 0 0; background: none; border: 0; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease;
}
.kg-ht-marker:hover { transform: translateY(-4px); }
.kg-ht-marker:focus-visible { outline: 2px solid var(--ht-gold); outline-offset: 2px; border-radius: 6px; }
.kg-ht-marker-year {
	font-size: 14px; font-weight: 700; color: #9aa1b1; margin-bottom: 6px;
	white-space: nowrap; letter-spacing: 0.03em;
	transition: color 0.3s, transform 0.3s;
}
.kg-ht-marker-pin {
	width: 14px; height: 14px; border-radius: 50%;
	background: #ccc; border: 3px solid #bbb; flex-shrink: 0;
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kg-ht-marker-stem { width: 2px; height: 20px; background: #ccc; transition: background 0.3s; }
.kg-ht-marker.is-passed .kg-ht-marker-pin { background: var(--ht-gold-soft); border-color: var(--ht-gold); }
.kg-ht-marker.is-passed .kg-ht-marker-stem { background: var(--ht-gold-soft); }
.kg-ht-marker.is-active .kg-ht-marker-year { color: var(--ht-navy); transform: scale(1.18); }
.kg-ht-marker.is-active .kg-ht-marker-pin {
	background: var(--ht-gold); border-color: var(--ht-gold);
	transform: scale(1.4); box-shadow: 0 0 0 4px var(--ht-gold-soft);
}
.kg-ht-marker.is-active .kg-ht-marker-stem { background: var(--ht-gold); }

.kg-ht-road { position: relative; height: 92px; background: var(--ht-asphalt); overflow: hidden; }
.kg-ht-road-stripe { position: absolute; left: 0; right: 0; height: 6px; background: var(--ht-gold); }
.kg-ht-road-stripe--top { top: 0; }
.kg-ht-road-stripe--bottom { bottom: 0; }
.kg-ht-road-dashes {
	position: absolute; top: 50%; left: -100px;
	width: calc(100% + 200px); height: 5px; transform: translateY(-50%);
	background: repeating-linear-gradient(to right, #fff 0, #fff 45px, transparent 45px, transparent 85px);
	will-change: transform;
}
.kg-ht-road.is-driving-fwd .kg-ht-road-dashes { animation: kgHtDashFwd 0.22s linear infinite; }
.kg-ht-road.is-driving-bwd .kg-ht-road-dashes { animation: kgHtDashBwd 0.22s linear infinite; }
@keyframes kgHtDashFwd { from { transform: translate(0, -50%); } to { transform: translate(-85px, -50%); } }
@keyframes kgHtDashBwd { from { transform: translate(-85px, -50%); } to { transform: translate(0, -50%); } }

/* The outer .kg-ht-truck only ever moves left/right; the inner body only
   ever flips. Keeping those two transforms on separate elements means
   they can never override each other mid-drive (which made it jerk). */
.kg-ht-truck {
	position: absolute; left: 0; bottom: 8px; z-index: 4;
	transition: transform 1.1s cubic-bezier(0.45, 0.05, 0.25, 1);
	will-change: transform;
	backface-visibility: hidden;
}
.kg-ht-truck-body {
	display: block;
	transition: transform 0.35s ease;
	will-change: transform;
}
.kg-ht-truck.is-flipped .kg-ht-truck-body { transform: scaleX(-1); }
.kg-ht-truck-img {
	display: block; height: 70px; width: auto; max-width: none;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.kg-ht-ground {
	height: 28px; border-top: 3px solid #a09070;
	background: linear-gradient(to bottom, #b8a98a 0%, #c9ba9e 100%);
}

/* ---------- responsive ----------
   Desktop (>=992px): year/icon | text | photo side by side, arrows either
   side of the card. Tablet: arrows + counter move under the card, photo
   drops below the text. Phone: everything stacks in one column. The card
   switches to a grid below 992px — flex-basis values meant for a row
   layout would otherwise turn into HEIGHTS once the card stacks (that was
   what squashed the photo into a strip and left big blank gaps). */
@media (hover: none) {
	.kg-ht-marker:hover { transform: none; }
}

@media (min-width: 1600px) {
	.kg-ht-panel { max-width: 1240px; }
	.kg-ht-road { height: 100px; }
	.kg-ht-truck-img { height: 78px; }
}

@media (max-width: 1199.98px) {
	.kg-ht-slide-inner { gap: 24px; padding: 24px; }
	.kg-ht-slide-media { flex-basis: 38%; height: 190px; }
}

@media (max-width: 991.98px) {
	.kg-ht-section { padding-top: 50px; }

	/* arrows + counter sit in one centred row under the card */
	.kg-ht-section.is-ready .kg-ht-panel { flex-wrap: wrap; justify-content: center; gap: 14px; padding: 30px 0 32px; }
	.kg-ht-section.is-ready .kg-ht-slides { flex: 1 1 100%; order: -1; }
	.kg-ht-section.is-ready .kg-ht-counter { position: static; order: 0; min-width: 72px; justify-content: center; }
	.kg-ht-section.is-ready .kg-ht-arrow-next { order: 1; }

	.kg-ht-slide-inner {
		display: grid; grid-template-columns: auto minmax(0, 1fr);
		column-gap: 24px; row-gap: 20px; align-items: start; align-content: start;
	}
	.kg-ht-slide-left { width: 96px; }
	.kg-ht-slide-media { grid-column: 1 / -1; width: 100%; max-width: none; height: clamp(180px, 38vw, 300px); }

	/* road scrolls sideways once the years no longer fit; fade the edges
	   so it's obvious there is more to swipe to */
	.kg-ht-road-scroll {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
		        mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	}
	.kg-ht-road-inner { width: calc(var(--kg-ht-count, 5) * 92px + 72px); }
	.kg-ht-markers { padding: 0 36px; }
	.kg-ht-road { height: 80px; }
	.kg-ht-truck-img { height: 60px; }
}

@media (max-width: 767.98px) {
	.kg-ht-section { padding-top: 44px; }
	.kg-ht-eyebrow { font-size: 13px; letter-spacing: 2px; gap: 10px; }
	.kg-ht-eyebrow::before, .kg-ht-eyebrow::after { width: 24px; }
	.kg-ht-rule { margin: 16px auto 18px; }
	.kg-ht-lead { font-size: 15px; line-height: 1.75; }

	.kg-ht-section.is-ready .kg-ht-panel { padding: 24px 0 28px; }
	.kg-ht-section.is-ready .kg-ht-arrow { width: 42px; height: 42px; }
	.kg-ht-slide-inner { column-gap: 18px; padding: 20px; }
	.kg-ht-slide-left { width: 76px; gap: 10px; }
	.kg-ht-slide-year { width: 72px; height: 72px; font-size: 16px; }
	.kg-ht-slide-icon { width: 44px; height: 44px; }
	.kg-ht-slide-right p { font-size: 14.5px; line-height: 1.75; }

	.kg-ht-road-inner { width: calc(var(--kg-ht-count, 5) * 84px + 56px); }
	.kg-ht-markers { padding: 0 28px; }
	.kg-ht-marker-year { font-size: 12.5px; }
	.kg-ht-road { height: 68px; }
	.kg-ht-road-stripe { height: 5px; }
	.kg-ht-truck { bottom: 6px; }
	.kg-ht-truck-img { height: 50px; }
	.kg-ht-ground { height: 22px; }
}

@media (max-width: 575.98px) {
	/* single column: year + icon in a row on top, then text, then photo */
	.kg-ht-slide-inner { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 18px; }
	.kg-ht-slide-left { flex-direction: row; width: auto; gap: 12px; }
	.kg-ht-slide-year { width: 64px; height: 64px; font-size: 15px; }
	.kg-ht-slide-media { height: clamp(170px, 52vw, 240px); }
	.kg-ht-slide-right h3 { font-size: 18px; }

	.kg-ht-road-inner { width: calc(var(--kg-ht-count, 5) * 78px + 48px); }
	.kg-ht-markers { padding: 0 24px; }
	.kg-ht-marker { min-width: 52px; }
	.kg-ht-marker-year { font-size: 12px; }
	.kg-ht-road { height: 62px; }
	.kg-ht-truck-img { height: 44px; }
}

@media (max-width: 359.98px) {
	.kg-ht-slide-inner { padding: 16px; }
	.kg-ht-slide-right p { font-size: 14px; }
	.kg-ht-section.is-ready .kg-ht-arrow { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.kg-ht-section.is-ready .kg-ht-slide,
	.kg-ht-section.is-ready .kg-ht-slides,
	.kg-ht-truck,
	.kg-ht-truck-body,
	.kg-ht-marker,
	.kg-ht-marker-pin { transition: none !important; }
	.kg-ht-road-dashes { animation: none !important; }
}

/* =========================================================================
   BLOCKS PAGE — MOBILE & TABLET (template-blocks.php, < 992px only;
   desktop untouched). Scoped to this template's body class because the
   cs-* sections are shared with the company pages.
   - Hero: copy over the photo (white fade); the hero tags drop into a
     white strip under the photo (icon + title, 3 across).
   - At a Glance: light panel, 2 x 2 stats with icon left.
   - Product Range / Built for Every Application: swipe sliders with dots
     ([data-bl-mc], dots from the template's script).
   - Quality: 3 certificate cards in a row; Manufacturing Excellence: 4
     stats in one row. Section headings left-aligned with a gold rule.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* shared: left-aligned headings with a short gold rule */
  body.page-template-template-blocks .cs-glance .cs-center-title,
  body.page-template-template-blocks .bc-index .cs-center-title,
  body.page-template-template-blocks .cs-stats-banner .cs-center-title,
  body.page-template-template-blocks .cs-why .cs-center-title {
    text-align: left;
    margin: 0 0 22px;
    font-size: 30px;
  }
  body.page-template-template-blocks .cs-glance .cs-center-title::after,
  body.page-template-template-blocks .bc-index .cs-center-title::after,
  body.page-template-template-blocks .cs-stats-banner .cs-center-title::after,
  body.page-template-template-blocks .cs-why .cs-center-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: var(--kg-gold);
    margin-top: 12px;
  }

  /* shared swipe strip */
  body.page-template-template-blocks [data-bl-mc] {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-blocks [data-bl-mc]::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-blocks [data-bl-mc] > * {
    flex: 0 0 var(--bl-w, 30%);
    width: var(--bl-w, 30%);
    max-width: none;
    scroll-snap-align: start;
  }
  body.page-template-template-blocks .bl-mc-dots[hidden] {
    display: none;
  }

  /* ----- hero ----- */
  body.page-template-template-blocks .cs-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, auto) 56px auto;
    margin: 0;
  }
  body.page-template-template-blocks .cs-hero > div > .row > .col-12:first-child,
  body.page-template-template-blocks .cs-hero-copy {
    display: contents;
  }
  body.page-template-template-blocks .cs-hero > div > .row > .col-12:last-child {
    grid-column: 1;
    grid-row: 1 / 8;
    width: auto;
    padding: 0;
    position: relative;
  }
  body.page-template-template-blocks .cs-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
  }
  body.page-template-template-blocks .cs-hero-media img {
    object-position: 75% center;
  }
  body.page-template-template-blocks .cs-hero-media::after {
    display: block;
    z-index: 0;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 36%,
      rgba(255, 255, 255, 0.5) 58%,
      rgba(255, 255, 255, 0) 78%
    );
  }
  body.page-template-template-blocks .cs-hero-badges {
    display: none;
  }
  body.page-template-template-blocks .cs-hero-copy > * {
    grid-column: 1;
    position: relative;
    z-index: 1;
    margin-left: calc(3% + 1.5rem);
    max-width: 520px;
  }
  body.page-template-template-blocks .cs-hero-copy > .eyebrow {
    grid-row: 1;
    margin-top: 48px;
  }
  body.page-template-template-blocks .cs-hero-copy > h1 {
    grid-row: 2;
    margin-top: 56px;
    margin-bottom: 0;
  }
  body.page-template-template-blocks .cs-hero-copy > .eyebrow + h1 {
    margin-top: 0;
  }
  body.page-template-template-blocks .cs-hero-copy > .hero-rule {
    grid-row: 3;
    width: 60px;
    height: 4px;
    background: var(--kg-gold);
    margin-top: 18px;
    margin-bottom: 0;
  }
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-lead {
    grid-row: 4;
    margin-top: 18px;
  }
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-lead + .cs-hero-lead {
    grid-row: 5;
    margin-top: 10px;
  }
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-actions {
    grid-row: 6;
    margin-top: 22px;
  }
  body.page-template-template-blocks .cs-hero-copy h1.unique {
    font-size: 46px !important;
  }
  body.page-template-template-blocks .cs-hero-lead br {
    display: none;
  }

  /* hero tags -> white strip under the photo */
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-tags {
    grid-row: 8;
    margin: 0;
    max-width: none;
    padding: 20px calc(3% + 1.5rem) !important;
    background: #fff;
    border-bottom: 1px solid var(--kg-line);
    display: flex;
    gap: 0;
  }
  body.page-template-template-blocks .cs-hero-tag {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 0 10px;
  }
  body.page-template-template-blocks .cs-hero-tag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }
  body.page-template-template-blocks .cs-hero-tag-copy {
    width: 100%;
    text-align: center;
  }
  body.page-template-template-blocks .cs-hero-tag:not(:last-child) {
    padding-right: 10px;
    border-right: 1px solid var(--kg-line);
  }
  body.page-template-template-blocks .cs-hero-tag-icon .kg-svg-icon,
  body.page-template-template-blocks .cs-hero-tag-icon svg {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
  body.page-template-template-blocks .cs-hero-tag-copy {
    display: block;
  }
  body.page-template-template-blocks .cs-hero-tag-title {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body.page-template-template-blocks .cs-hero-tag-desc {
    display: none;
  }

  /* ----- at a glance ----- */
  body.page-template-template-blocks .cs-glance {
    background: var(--kg-bg);
    padding: 40px 0;
  }
  body.page-template-template-blocks .cs-glance .row {
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  body.page-template-template-blocks .cs-glance .col {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  body.page-template-template-blocks .cs-glance .col:nth-child(-n + 2) {
    border-bottom: 1px solid #e2e0db;
  }
  body.page-template-template-blocks .cs-glance .col:not(:last-child) {
    border-right-color: #e2e0db;
  }
  body.page-template-template-blocks .cs-glance-stat svg,
  body.page-template-template-blocks .cs-glance-stat .kg-svg-icon {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
  body.page-template-template-blocks .cs-glance-value {
    font-size: 22px;
  }
  body.page-template-template-blocks .cs-glance-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kg-muted-2);
  }

  /* ----- product range ----- */
  body.page-template-template-blocks .bc-index {
    padding: 40px 0;
  }
  body.page-template-template-blocks .bc-index > .kg-container > .eyebrow {
    display: none;
  }
  /* heading + "View All" on one row */
  body.page-template-template-blocks .bl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }
  body.page-template-template-blocks .bl-head .cs-center-title {
    margin-bottom: 0;
  }
  body.page-template-template-blocks .bl-view-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kg-red);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  body.page-template-template-blocks .bl-view-all svg {
    transition: transform 0.25s;
  }
  body.page-template-template-blocks .bl-view-all.is-open svg {
    transform: rotate(-90deg);
  }
  /* expanded: every category as a grid instead of the slider */
  body.page-template-template-blocks .bc-index-grid.is-expanded {
    --bs-gutter-y: 12px;
    flex-wrap: wrap;
    overflow: visible;
    row-gap: var(--bs-gutter-y);
  }
  body.page-template-template-blocks .bc-index-grid.is-expanded > * {
    flex-basis: 33.3333%;
    width: 33.3333%;
  }
  body.page-template-template-blocks .bc-index-grid {
    --bl-w: 30%;
  }
  body.page-template-template-blocks .bc-index-card {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
  }
  body.page-template-template-blocks .bc-index-card:hover {
    transform: none;
  }
  body.page-template-template-blocks .bc-index-media,
  body.page-template-template-blocks .bc-index-media img,
  body.page-template-template-blocks .bc-index-img {
    height: 150px;
  }
  body.page-template-template-blocks .bc-index-icon,
  body.page-template-template-blocks .bc-index-desc,
  body.page-template-template-blocks .bc-index-cta {
    display: none;
  }
  body.page-template-template-blocks .bc-index-body {
    padding: 12px 10px 14px;
    text-align: center;
  }
  body.page-template-template-blocks .bc-index-title {
    margin: 0;
    font-size: 16px;
  }

  /* ----- quality ----- */
  body.page-template-template-blocks .cs-quality {
    padding: 40px 0;
  }
  body.page-template-template-blocks .cs-quality > .kg-container > .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  body.page-template-template-blocks .cs-quality-head {
    max-width: none;
    margin: 0;
    text-align: left;
  }
  body.page-template-template-blocks .cs-quality-head .sec-title {
    font-size: 30px;
  }
  body.page-template-template-blocks .cs-quality-head .hero-rule {
    width: 44px;
    height: 4px;
    background: var(--kg-gold);
    margin: 12px 0 0;
  }
  body.page-template-template-blocks .cs-quality-intro {
    margin: 14px 0 0 !important;
    max-width: 640px;
  }
  body.page-template-template-blocks .cs-quality .row .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  body.page-template-template-blocks .cs-quality-stat {
    border: 1px solid var(--kg-line);
    border-radius: 10px;
    box-shadow: 0 10px 24px -18px rgba(20, 41, 77, 0.35);
    padding: 16px 8px;
  }
  body.page-template-template-blocks .cs-quality-stat svg,
  body.page-template-template-blocks .cs-quality-stat .kg-svg-icon {
    width: 56px !important;
    height: 56px !important;
    display: block;
    margin: 0 auto 6px;
  }
  body.page-template-template-blocks .cs-quality-value {
    font-size: 16px;
  }
  body.page-template-template-blocks .cs-quality-label {
    font-size: 12px;
    line-height: 1.35;
  }

  /* ----- manufacturing excellence ----- */
  body.page-template-template-blocks .cs-stats-banner {
    padding: 40px 0;
  }
  body.page-template-template-blocks .cs-stats-banner .cs-center-title {
    color: #fff;
  }
  body.page-template-template-blocks .cs-stats-banner .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  body.page-template-template-blocks .cs-stats-banner .row > .col {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 8px;
  }
  body.page-template-template-blocks .cs-stats-banner .row > .col:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
  body.page-template-template-blocks .cs-stats-banner-icon svg,
  body.page-template-template-blocks .cs-stats-banner-icon .kg-svg-icon {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
  body.page-template-template-blocks .cs-stats-banner-value {
    font-size: 20px;
  }
  body.page-template-template-blocks .cs-stats-banner-label {
    font-size: 11px;
    color: var(--kg-gold);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ----- built for every application ----- */
  body.page-template-template-blocks .cs-why {
    padding: 40px 0;
    background: #fff;
  }
  body.page-template-template-blocks .cs-why .cs-why-grid {
    --bl-w: 30%;
    display: flex;
  }
  body.page-template-template-blocks .cs-why .cs-why-card {
    padding: 0 6px;
    border: 0;
    background: transparent;
    display: block;
  }
  body.page-template-template-blocks .cs-why-card > * {
    background: #fff;
  }
  body.page-template-template-blocks .cs-why .cs-why-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  body.page-template-template-blocks .cs-why .cs-why-card > .d-flex {
    width: 100%;
    background: transparent;
  }
  body.page-template-template-blocks .cs-why-icon {
    width: 84px;
    height: 84px;
    box-shadow: 0 0 0 6px #fff, 0 10px 22px -12px rgba(20, 41, 77, 0.5);
  }
  body.page-template-template-blocks .cs-why-icon svg,
  body.page-template-template-blocks .cs-why-icon .kg-svg-icon {
    width: 38px !important;
    height: 38px !important;
    display: block;
  }
  body.page-template-template-blocks .cs-why-card h3 {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
  }
  body.page-template-template-blocks .cs-why-card p {
    font-size: 13px;
    margin: 0;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-blocks .cs-glance .cs-center-title,
  body.page-template-template-blocks .bc-index .cs-center-title,
  body.page-template-template-blocks .cs-stats-banner .cs-center-title,
  body.page-template-template-blocks .cs-why .cs-center-title,
  body.page-template-template-blocks .cs-quality-head .sec-title {
    font-size: 24px;
  }

  /* hero */
  body.page-template-template-blocks .cs-hero > div > .row {
    grid-template-rows: repeat(6, auto) 40px auto;
  }
  body.page-template-template-blocks .cs-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  body.page-template-template-blocks .cs-hero-copy > * {
    max-width: 66%;
  }
  body.page-template-template-blocks .cs-hero-copy > h1 {
    margin-top: 40px;
  }
  body.page-template-template-blocks .cs-hero-copy h1.unique {
    font-size: 34px !important;
  }
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-lead {
    font-size: 14px;
    line-height: 1.6;
    width: 50%;
  }
  body.page-template-template-blocks .cs-hero-copy > .cs-hero-tags {
    padding: 16px 12px !important;
  }
  body.page-template-template-blocks .cs-hero-tag {
    padding: 0 6px;
    gap: 8px;
  }
  body.page-template-template-blocks .cs-hero-tag:not(:last-child) {
    padding-right: 6px;
  }
  body.page-template-template-blocks .cs-hero-tag-icon .kg-svg-icon,
  body.page-template-template-blocks .cs-hero-tag-icon svg {
    width: 38px !important;
    height: 38px !important;
  }
  body.page-template-template-blocks .cs-hero-tag-title {
    font-size: 11.5px;
  }

  /* at a glance: value + icon only, as in the design */
  body.page-template-template-blocks .cs-glance {
    padding: 32px 0;
  }
  body.page-template-template-blocks .cs-glance-stat svg,
  body.page-template-template-blocks .cs-glance-stat .kg-svg-icon {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-template-template-blocks .cs-glance-stat .ms-3 {
    margin-left: 10px !important;
  }
  body.page-template-template-blocks .cs-glance-value {
    font-size: 17px;
    line-height: 1.3;
  }
  body.page-template-template-blocks .cs-glance-label {
    display: none;
  }

  /* product range */
  body.page-template-template-blocks .bc-index {
    padding: 32px 0;
  }
  body.page-template-template-blocks .bc-index-lead {
    display: none;
  }
  body.page-template-template-blocks .bc-index-grid {
    --bs-gutter-x: 10px;
    --bl-w: 42%;
  }
  body.page-template-template-blocks .bc-index-grid.is-expanded > * {
    flex-basis: 50%;
    width: 50%;
  }
  body.page-template-template-blocks .bl-head {
    gap: 8px;
  }
  body.page-template-template-blocks .bl-view-all {
    margin-top: 4px;
    gap: 4px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
  }
  body.page-template-template-blocks .bc-index-media,
  body.page-template-template-blocks .bc-index-media img,
  body.page-template-template-blocks .bc-index-img {
    height: 110px;
  }
  body.page-template-template-blocks .bc-index-title {
    font-size: 14px;
  }

  /* quality */
  body.page-template-template-blocks .cs-quality {
    padding: 32px 0;
  }
  body.page-template-template-blocks .cs-quality-intro {
    display: none;
  }
  body.page-template-template-blocks .cs-quality .row .row {
    --bs-gutter-x: 8px;
  }
  body.page-template-template-blocks .cs-quality-stat {
    padding: 12px 4px;
  }
  body.page-template-template-blocks .cs-quality-stat svg,
  body.page-template-template-blocks .cs-quality-stat .kg-svg-icon {
    width: 46px !important;
    height: 46px !important;
  }
  body.page-template-template-blocks .cs-quality-value {
    font-size: 12.5px;
  }
  body.page-template-template-blocks .cs-quality-label {
    font-size: 10.5px;
  }

  /* manufacturing excellence */
  body.page-template-template-blocks .cs-stats-banner {
    padding: 32px 0;
  }
  /* 5 stats: 3 + 2 (short last row stretches), labels hidden */
  body.page-template-template-blocks .cs-stats-banner .row > .col {
    flex: 1 0 33.3333%;
    padding: 14px 4px;
  }
  body.page-template-template-blocks .cs-stats-banner .row > .col:nth-child(3n) {
    border-right: 0;
  }
  body.page-template-template-blocks .cs-stats-banner .row > .col:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  body.page-template-template-blocks .cs-stats-banner-icon svg,
  body.page-template-template-blocks .cs-stats-banner-icon .kg-svg-icon {
    width: 34px !important;
    height: 34px !important;
  }
  body.page-template-template-blocks .cs-stats-banner-value {
    font-size: 15px;
    line-height: 1.25;
  }
  body.page-template-template-blocks .cs-stats-banner-label {
    display: none;
  }

  /* built for every application */
  body.page-template-template-blocks .cs-why {
    padding: 32px 0;
  }
  body.page-template-template-blocks .cs-why .cs-why-grid {
    --bl-w: 40%;
  }
  body.page-template-template-blocks .cs-why-icon {
    width: 68px;
    height: 68px;
  }
  body.page-template-template-blocks .cs-why-icon svg,
  body.page-template-template-blocks .cs-why-icon .kg-svg-icon {
    width: 30px !important;
    height: 30px !important;
  }
  body.page-template-template-blocks .cs-why-card h3 {
    font-size: 14px;
  }
  body.page-template-template-blocks .cs-why-card p {
    display: none;
  }
}

/* =========================================================================
   CONTACT US — MOBILE & TABLET (template-contact.php, < 992px only;
   desktop untouched). Scoped to this template because .kg-cf7-form and
   .gt-card are shared with other pages.
   - Hero: the photo returns as a full-bleed background with a soft
     cream fade on the left (the diagonal clip + accent stripes stay
     desktop-only); the "We build the future" tag is hidden.
   - Order: Phone / Email / Hours cards (3 across) -> message form ->
     Our Location map. The second column is flattened (display:contents)
     so its pieces can be ordered around the form column.
   - Form: labels visually hidden, icons inside the fields, 2 per row,
     full-width red Send button.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* the page's containers lack mx-auto, which left all the spare width
     on the right — centre them so both side gutters match */
  body.page-template-template-contact .contact-hero-inner,
  body.page-template-template-contact .contact-main > .kg-container {
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- hero ----- */
  body.page-template-template-contact .contact-hero {
    min-height: 460px;
    background: #fdf3e7;
  }
  body.page-template-template-contact .contact-hero-visual {
    display: block;
    width: 100%;
    z-index: 1;
  }
  body.page-template-template-contact .contact-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      #fdf3e7 0%,
      rgba(253, 243, 231, 0.94) 36%,
      rgba(253, 243, 231, 0.5) 58%,
      rgba(253, 243, 231, 0) 80%
    );
  }
  body.page-template-template-contact .chv-photo {
    clip-path: none;
  }
  body.page-template-template-contact .chv-photo img {
    object-position: 70% bottom;
  }
  body.page-template-template-contact .chv-band {
    display: none;
  }
  body.page-template-template-contact .contact-hero-copy {
    max-width: 520px;
    padding: 56px 0 72px;
  }
  body.page-template-template-contact .contact-hero-tag {
    display: none;
  }
  body.page-template-template-contact .contact-hero-lead {
    color: #3c465f;
    font-size: 17px;
    line-height: 1.6;
  }

  /* ----- reorder: cards, form, map ----- */
  body.page-template-template-contact .contact-main {
    padding: 0 0 48px;
  }
  body.page-template-template-contact .contact-main .row {
    --bs-gutter-y: 16px;
  }
  body.page-template-template-contact .contact-main .row > .col-12:first-child {
    order: 2;
  }
  body.page-template-template-contact .contact-main .row > .col-12:last-child {
    display: contents;
  }
  body.page-template-template-contact .contact-main .row > .col-12:last-child > * {
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: calc(var(--bs-gutter-x) * 0.5);
  }
  body.page-template-template-contact .contact-main .row > .col-12:last-child > .contact-section-heading:first-child,
  body.page-template-template-contact .contact-main .row > .col-12:last-child > .contact-section-heading:first-child + .career-underline-bar {
    display: none;
  }
  body.page-template-template-contact .gt-cards {
    order: 1;
    flex: 0 0 auto;
    width: calc(100% - var(--bs-gutter-x));
    /* pull the cards up so they overlap the hero's bottom edge */
    margin-top: -44px;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    gap: 10px;
  }
  body.page-template-template-contact .contact-map-heading {
    order: 3;
    flex: 0 0 auto;
    width: calc(100% - var(--bs-gutter-x));
    margin-top: calc(var(--bs-gutter-y) + 12px);
  }
  body.page-template-template-contact .contact-map-heading + .career-underline-bar {
    order: 4;
    flex: none;
    margin-top: 10px;
    margin-bottom: 16px;
  }
  body.page-template-template-contact .contact-map {
    order: 5;
    flex: 0 0 auto;
    width: calc(100% - var(--bs-gutter-x));
  }
  body.page-template-template-contact .contact-map iframe {
    height: 300px;
  }

  /* ----- contact cards ----- */
  body.page-template-template-contact .gt-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  body.page-template-template-contact .gt-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 10px;
    box-shadow: 0 14px 30px -22px rgba(20, 41, 77, 0.4);
  }
  body.page-template-template-contact .gt-card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }
  body.page-template-template-contact .gt-card-icon svg {
    width: 24px;
    height: 24px;
  }
  body.page-template-template-contact .gt-card-title {
    font-size: 14px;
  }
  body.page-template-template-contact .gt-card-text {
    font-size: 14px;
    line-height: 1.45;
  }

  /* ----- form ----- */
  body.page-template-template-contact .contact-form-heading {
    font-size: 22px;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-grid {
    gap: 0 12px;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-grid p {
    margin-bottom: 12px;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-col-6 {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  /* labels stay for screen readers; the placeholders carry the text */
  body.page-template-template-contact .kg-cf7-form .cf7-grid > p > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-grid > p > br {
    display: none;
  }
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap input.wpcf7-form-control,
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    padding: 14px 14px 14px 48px;
    font-size: 15px;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 20px 20px;
  }
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    height: 130px;
    min-height: 110px;
    background-position: 15px 15px;
  }
  /* CF7's inline spinner otherwise adds an empty line under the button */
  body.page-template-template-contact .kg-cf7-form .cf7-grid > p:has(.wpcf7-submit) {
    position: relative;
  }
  body.page-template-template-contact .kg-cf7-form .wpcf7-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    margin: -12px 0 0;
  }
  body.page-template-template-contact .kg-cf7-form [data-name="your-name"] input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  }
  body.page-template-template-contact .kg-cf7-form [data-name="your-email"] input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  }
  body.page-template-template-contact .kg-cf7-form [data-name="your-phone"] input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 3a2 2 0 0 1-.5 2.1L8 10.1a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c1 .3 2 .5 3 .7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  }
  body.page-template-template-contact .kg-cf7-form [data-name="your-subject"] input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E");
  }
  body.page-template-template-contact .kg-cf7-form [data-name="your-message"] textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E");
  }
  body.page-template-template-contact .kg-cf7-form .cf7-grid > p:has(.wpcf7-submit) {
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }
  body.page-template-template-contact .kg-cf7-form input.wpcf7-submit {
    border-radius: 8px;
    padding: 17px 26px;
    font-size: 15px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-contact .contact-hero {
    min-height: 400px;
  }
  body.page-template-template-contact .contact-hero-visual::after {
    background: linear-gradient(
      90deg,
      #fdf3e7 0%,
      rgba(253, 243, 231, 0.92) 50%,
      rgba(253, 243, 231, 0.4) 75%,
      rgba(253, 243, 231, 0) 95%
    );
  }
  body.page-template-template-contact .contact-hero-copy {
    max-width: 72%;
    padding: 44px 0 64px;
  }
  body.page-template-template-contact .contact-hero-copy h1 {
    font-size: 36px;
  }
  body.page-template-template-contact .contact-hero-lead {
    font-size: 15px;
  }

  body.page-template-template-contact .gt-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: -36px;
  }
  body.page-template-template-contact .gt-card {
    padding: 14px 3px;
    border-radius: 10px;
  }
  body.page-template-template-contact .gt-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }
  body.page-template-template-contact .gt-card-icon svg {
    width: 20px;
    height: 20px;
  }
  body.page-template-template-contact .gt-card-title {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  body.page-template-template-contact .gt-card-text {
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: normal;
  }

  body.page-template-template-contact .contact-form-card {
    padding: 22px 18px;
  }
  body.page-template-template-contact .contact-form-heading {
    font-size: 20px;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-grid {
    gap: 0 8px;
  }
  body.page-template-template-contact .kg-cf7-form .cf7-col-6 {
    flex-basis: calc(50% - 4px);
  }
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap input.wpcf7-form-control,
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    padding: 12px 6px 12px 32px;
    font-size: 13px;
    background-position: 9px center;
    background-size: 17px 17px;
  }
  body.page-template-template-contact .kg-cf7-form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
    background-position: 9px 13px;
  }
  body.page-template-template-contact .contact-map iframe {
    height: 220px;
  }
}

/* =========================================================================
   CAREERS — MOBILE & TABLET (template-careers.php, < 992px only;
   desktop untouched). Scoped to this template's body class.
   - Hero: copy over the photo with a white fade (the corner ribbon stays
     desktop-only).
   - Benefits: 4 across — tinted icon circle + short uppercase title.
   - "Why build your career" intro hidden (not in the mobile design).
   - Open Positions: heading + "View All" (list shows 3 until expanded),
     rows with a chevron; the Apply button is stretched over the whole row
     so tapping anywhere on it opens the application form.
   - Ready to join: pink card — icon left, heading + text, chevron right;
     the upload box is stretched over the card and opens the CV form.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-careers .career-hero {
    min-height: 0;
  }
  body.page-template-template-careers .career-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 480px;
  }
  body.page-template-template-careers .career-hero > div > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    position: relative;
  }
  body.page-template-template-careers .career-hero > div > .row > .col-12:last-child {
    position: absolute;
    inset: 0;
  }
  body.page-template-template-careers .career-hero-visual,
  body.page-template-template-careers .chv-photo-career {
    display: block;
    position: absolute;
    inset: 0;
    height: auto;
  }
  body.page-template-template-careers .chv-photo-career img {
    object-position: 70% center;
  }
  body.page-template-template-careers .chv-photo-career::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 36%,
      rgba(255, 255, 255, 0.5) 58%,
      rgba(255, 255, 255, 0) 80%
    );
    z-index: 1;
  }
  body.page-template-template-careers .chv-ribbon {
    display: none;
  }
  body.page-template-template-careers .career-hero-cop {
    position: relative;
    z-index: 2;
    max-width: 540px;
    padding: 64px 24px 72px calc(3% + 1.5rem);
  }
  body.page-template-template-careers .career-hero h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.12;
    color: var(--kg-navy);
    margin: 0;
  }
  body.page-template-template-careers .career-hero-bar {
    background: var(--kg-gold);
    width: 56px;
  }
  body.page-template-template-careers .career-hero-lead {
    color: #3c465f;
  }
  body.page-template-template-careers .career-hero-btn {
    border-radius: 6px;
    padding: 16px 28px;
    white-space: nowrap;
  }

  /* ----- benefits: swipe slider of tinted cards ----- */
  body.page-template-template-careers .career-benefits {
    padding: 20px 0 8px;
    background: #fff;
  }
  body.page-template-template-careers .cb-bar {
    --bs-gutter-x: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-left: 0;
    margin-right: calc(50% - 50vw);
    gap: 12px;
  }
  body.page-template-template-careers .cb-bar::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-careers .cb-bar > .col-6 {
    flex: 0 0 34%;
    width: 34%;
    padding: 0;
    border: 0;
    scroll-snap-align: start;
  }
  body.page-template-template-careers .cb-bar > .col-6:last-child {
    margin-right: 16px;
  }
  body.page-template-template-careers .cb-bar .cb-item {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding: 18px 16px 20px;
    border: 0;
    border-radius: 12px;
    background: #fdf0ef;
  }
  body.page-template-template-careers .cb-bar > .col-6:has(.icon-gold) .cb-item {
    background: #fdf6e6;
  }
  body.page-template-template-careers .cb-bar > .col-6:has(.icon-navy) .cb-item {
    background: #eef1f7;
  }
  body.page-template-template-careers .cb-bar > .col-6:has(.icon-green) .cb-item {
    background: #eaf4ee;
  }
  /* solid colour circle, white icon (the icons ship white) */
  body.page-template-template-careers .cb-item-icon {
    width: 52px;
    height: 52px;
  }
  body.page-template-template-careers .cb-item-icon .kg-svg-icon,
  body.page-template-template-careers .cb-item-icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block;
  }
  body.page-template-template-careers .cb-item-copy {
    align-items: flex-start;
    gap: 6px;
  }
  body.page-template-template-careers .cb-item-title {
    font-size: 15px;
    line-height: 1.3;
  }
  body.page-template-template-careers .cb-item-title.text-gold {
    color: #e6a90c !important;
  }
  body.page-template-template-careers .cb-item-text {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--kg-muted);
  }
  body.page-template-template-careers .cb-dots[hidden] {
    display: none;
  }
  body.page-template-template-careers .cb-dots {
    margin-top: 14px;
  }

  /* ----- open positions ----- */
  body.page-template-template-careers .career-main {
    padding: 32px 0 56px;
  }
  body.page-template-template-careers .career-why-heading,
  body.page-template-template-careers .career-why-heading + .career-underline-bar,
  body.page-template-template-careers .career-why-text {
    display: none;
  }
  body.page-template-template-careers .career-positions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  body.page-template-template-careers .career-positions-heading {
    font-size: 22px;
    margin: 0;
  }
  body.page-template-template-careers .career-positions-heading::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    background: var(--kg-gold);
    border-radius: 2px;
    margin-top: 10px;
  }
  body.page-template-template-careers .career-view-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kg-red);
    font-weight: 700;
    font-size: 15px;
  }
  body.page-template-template-careers .career-view-all svg {
    transition: transform 0.25s;
  }
  body.page-template-template-careers .career-view-all.is-open svg {
    transform: rotate(-90deg);
  }
  body.page-template-template-careers .career-jobs-list {
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body.page-template-template-careers .job-row {
    position: relative;
    gap: 16px;
    padding: 16px 48px 16px 16px;
    border: 1px solid var(--kg-line);
    border-radius: 10px;
    box-shadow: 0 10px 24px -22px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-careers .job-row:last-child {
    border-bottom: 1px solid var(--kg-line);
  }
  body.page-template-template-careers .job-row-icon {
    width: 48px;
    height: 48px;
  }
  body.page-template-template-careers .job-row-title {
    font-size: 16px;
  }
  body.page-template-template-careers .job-row-meta span {
    text-transform: capitalize;
  }
  /* Apply button covers the whole row; its text is kept for screen
     readers, and a chevron is drawn at the right */
  body.page-template-template-careers .job-row-apply {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    font-size: 0;
    color: transparent;
    border-radius: 10px;
  }
  body.page-template-template-careers .job-row-apply span {
    display: none;
  }
  body.page-template-template-careers .job-row-apply::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid var(--kg-red);
    border-right: 2.5px solid var(--kg-red);
    transform: translateY(-50%) rotate(45deg);
  }
  body.page-template-template-careers .job-row-apply:focus-visible {
    outline: 2px solid var(--kg-red);
    outline-offset: 2px;
  }

  /* ----- ready to join ----- */
  body.page-template-template-careers .career-ready-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    background: #fdf0ef;
    padding: 22px 52px 22px 20px;
    position: relative;
  }
  body.page-template-template-careers .career-ready-icon {
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    margin: 0;
    box-shadow: 0 8px 20px -14px rgba(20, 41, 77, 0.5);
  }
  body.page-template-template-careers .career-ready-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--kg-red);
  }
  body.page-template-template-careers .career-ready-card h3 {
    font-size: 17px;
    align-self: end;
  }
  body.page-template-template-careers .career-ready-card .career-underline-bar-sm {
    display: none;
  }
  body.page-template-template-careers .career-ready-card p {
    grid-column: 2;
    margin: 6px 0 0;
    align-self: start;
  }
  /* the upload box becomes an invisible full-card tap target + chevron */
  body.page-template-template-careers .career-upload-box {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 12px;
  }
  body.page-template-template-careers .career-upload-box > * {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  body.page-template-template-careers .career-upload-box::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-top: 2.5px solid var(--kg-red);
    border-right: 2.5px solid var(--kg-red);
    transform: translateY(-50%) rotate(45deg);
  }
  body.page-template-template-careers .career-upload-box:focus-visible {
    outline: 2px solid var(--kg-red);
    outline-offset: 2px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-careers .career-hero > div > .row {
    min-height: 0;
  }
  body.page-template-template-careers .chv-photo-career::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  body.page-template-template-careers .career-hero-cop {
    max-width: 78%;
    padding: 48px 0 52px calc(3% + 1.5rem);
  }
  body.page-template-template-careers .career-hero h1 {
    font-size: 27px;
  }
  body.page-template-template-careers .career-hero-lead {
    font-size: 14.5px;
    line-height: 1.55;
    width: 65%;

  }
  body.page-template-template-careers .career-hero-btn {
    padding: 14px 20px;
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  body.page-template-template-careers .cb-bar > .col-6 {
    flex-basis: 46%;
    width: 46%;
  }
  body.page-template-template-careers .cb-bar .cb-item {
    padding: 14px 12px 16px;
    gap: 10px;
  }
  body.page-template-template-careers .cb-item-icon {
    width: 44px;
    height: 44px;
  }
  body.page-template-template-careers .cb-item-icon .kg-svg-icon,
  body.page-template-template-careers .cb-item-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  body.page-template-template-careers .cb-item-title {
    font-size: 13px;
  }
  body.page-template-template-careers .cb-item-text {
    font-size: 12.5px;
  }

  body.page-template-template-careers .career-positions-heading {
    font-size: 19px;
  }
  body.page-template-template-careers .career-view-all {
    font-size: 14px;
  }
  body.page-template-template-careers .job-row {
    gap: 12px;
    padding: 12px 40px 12px 12px;
  }
  body.page-template-template-careers .job-row-icon {
    width: 42px;
    height: 42px;
  }
  body.page-template-template-careers .job-row-title {
    font-size: 15px;
  }
  body.page-template-template-careers .job-row-meta {
    gap: 12px;
    font-size: 12.5px;
  }
  body.page-template-template-careers .job-row-apply::after {
    right: 16px;
  }

  body.page-template-template-careers .career-ready-card {
    column-gap: 14px;
    padding: 18px 44px 18px 14px;
  }
  body.page-template-template-careers .career-ready-icon {
    width: 60px;
    height: 60px;
  }
  body.page-template-template-careers .career-ready-icon svg {
    width: 26px;
    height: 26px;
  }
  body.page-template-template-careers .career-ready-card h3 {
    font-size: 15px;
  }
  body.page-template-template-careers .career-ready-card p {
    font-size: 13px;
  }
  body.page-template-template-careers .career-upload-box::after {
    right: 18px;
  }
}

/* =========================================================================
   LATEST NEWS — MOBILE & TABLET (template-latest-news.php, < 992px only;
   desktop untouched). Scoped to this template's body class.
   - Hero: copy over the photo with a white fade + "View All News" button.
   - Order: Featured News (one-card slider, arrows beside the heading,
     dots below) -> Recent News list -> Follow Us. The sidebar column is
     flattened (display:contents) so its boxes can sit around the list.
   - Recent News: compact rows — thumbnail, title, date, chevron; the
     whole row links to the article (the news-filter.js AJAX list keeps
     the same markup, so re-rendered pages get the same look).
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-latest-news .news-hero {
    position: relative;
    overflow: hidden;
  }
  body.page-template-template-latest-news .news-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 500px;
    position: relative;
  }
  body.page-template-template-latest-news .news-hero > div > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    position: relative;
  }
  body.page-template-template-latest-news .news-hero > div > .row > .col-12:last-child {
    position: absolute;
    inset: 0;
  }
  body.page-template-template-latest-news .news-hero-media {
    position: absolute;
    inset: 0;
    height: auto;
  }
  body.page-template-template-latest-news .news-hero-media img {
    object-position: 70% center;
  }
  body.page-template-template-latest-news .news-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 36%,
      rgba(255, 255, 255, 0.5) 58%,
      rgba(255, 255, 255, 0) 80%
    );
  }
  body.page-template-template-latest-news .news-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    padding: 56px 24px 60px calc(3% + 1.5rem);
    display: flex;
    flex-direction: column;
  }
  /* gold rule above the title, as in the design */
  body.page-template-template-latest-news .news-hero-copy .hero-rule {
    order: -1;
    width: 60px;
    height: 4px;
    background: var(--kg-gold);
    margin: 0 0 22px;
  }
  body.page-template-template-latest-news .news-hero-copy h1.unique {
    font-size: 56px !important;
    line-height: 1.02 !important;
  }
  body.page-template-template-latest-news .news-hero-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #3c465f;
    margin: 18px 0 0;
  }
  body.page-template-template-latest-news .news-hero-btn {
    align-self: flex-start;
    margin-top: 22px;
    border-radius: 6px;
    padding: 15px 24px;
  }

  /* ----- reorder: featured, recent list, follow us ----- */
  body.page-template-template-latest-news .news-main {
    --bs-gutter-y: 0;
    padding-top: 36px !important;
  }
  body.page-template-template-latest-news .news-main > .col-lg-8 {
    order: 2;
    margin-bottom: 40px;
  }
  body.page-template-template-latest-news .news-main > .col-lg-4 {
    display: contents;
  }
  body.page-template-template-latest-news .news-main > .col-lg-4 > .news-sidebar-box {
    flex: 0 0 auto;
    width: calc(100% - var(--bs-gutter-x));
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    order: 3;
  }
  body.page-template-template-latest-news .news-main > .col-lg-4 > .news-sidebar-box:first-child {
    order: 1;
    position: relative;
    margin-bottom: 36px;
  }
  body.page-template-template-latest-news .news-sidebar-heading {
    font-size: 24px;
  }
  body.page-template-template-latest-news .news-underline-bar {
    width: 52px;
    height: 4px;
  }

  /* ----- featured slider ----- */
  body.page-template-template-latest-news .news-featured-nav {
    position: absolute;
    top: -4px;
    right: 0;
    display: flex;
    gap: 10px;
  }
  body.page-template-template-latest-news .news-featured-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    color: var(--kg-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -10px rgba(20, 41, 77, 0.45);
    transition: opacity 0.25s;
  }
  body.page-template-template-latest-news .news-featured-btn.is-disabled {
    opacity: 0.45;
  }
  body.page-template-template-latest-news .news-featured-list {
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-latest-news .news-featured-list::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-latest-news .news-featured-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-shadow: 0 14px 30px -24px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-latest-news .news-featured-media {
    height: 260px;
  }
  body.page-template-template-latest-news .news-featured-badge {
    top: 16px;
    left: 16px;
    font-size: 13px;
    padding: 6px 12px;
  }
  body.page-template-template-latest-news .news-featured-title {
    font-size: 20px;
    margin: 18px 20px 8px !important;
  }
  body.page-template-template-latest-news .news-featured-category {
    margin: 18px 20px 0;
  }
  body.page-template-template-latest-news .news-featured-category + .news-featured-title {
    margin-top: 6px !important;
  }
  body.page-template-template-latest-news .news-featured-desc {
    font-size: 15px;
    margin: 0 20px 14px;
  }
  body.page-template-template-latest-news .news-featured-meta {
    margin: 0 20px 18px;
    font-size: 14px;
  }
  body.page-template-template-latest-news .news-featured-meta .news-card-sep {
    display: none;
  }
  body.page-template-template-latest-news .news-featured-link {
    margin-left: auto;
    font-size: 15px;
  }
  body.page-template-template-latest-news .news-featured-dots {
    margin-top: 14px;
  }

  /* ----- recent news rows ----- */
  body.page-template-template-latest-news .news-list {
    gap: 10px;
  }
  body.page-template-template-latest-news .news-list-card,
  body.page-template-template-latest-news .news-list-card:first-child {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 10px 44px 10px 10px;
    border: 1px solid var(--kg-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px -22px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-latest-news .news-list-card::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--kg-navy);
    border-right: 2px solid var(--kg-navy);
    transform: translateY(-50%) rotate(45deg);
  }
  body.page-template-template-latest-news .news-card-media {
    flex: 0 0 160px;
    width: auto;
    height: 104px;
  }
  body.page-template-template-latest-news .news-card-category,
  body.page-template-template-latest-news .news-card-desc,
  body.page-template-template-latest-news .news-card-meta .news-card-sep {
    display: none;
  }
  /* stretch the title link over the whole row */
  body.page-template-template-latest-news .news-card-body > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 10px;
  }
  body.page-template-template-latest-news .news-card-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  body.page-template-template-latest-news .news-card-meta {
    text-transform: capitalize;
  }
  body.page-template-template-latest-news .news-pagination {
    margin-top: 20px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-latest-news .news-hero > div > .row {
    min-height: 0;
  }
  body.page-template-template-latest-news .news-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      rgba(255, 255, 255, 0) 95%
    );
  }
  body.page-template-template-latest-news .news-hero-copy {
    max-width: 66%;
    padding: 36px 0 40px calc(3% + 1.5rem);
  }
  body.page-template-template-latest-news .news-hero-copy h1.unique {
    font-size: 42px !important;
  }
  body.page-template-template-latest-news .news-hero-lead {
    font-size: 14.5px;
    line-height: 1.55;
    width: 80%;

  }
  body.page-template-template-latest-news .news-hero-btn {
    padding: 13px 18px;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  body.page-template-template-latest-news .news-main {
    padding-top: 28px !important;
  }
  body.page-template-template-latest-news .news-sidebar-heading {
    font-size: 21px;
  }
  body.page-template-template-latest-news .news-featured-btn {
    width: 40px;
    height: 40px;
  }
  body.page-template-template-latest-news .news-featured-media {
    height: 190px;
  }
  body.page-template-template-latest-news .news-featured-title {
    font-size: 17px;
    margin: 14px 16px 6px !important;
  }
  body.page-template-template-latest-news .news-featured-category {
    margin: 14px 16px 0;
  }
  body.page-template-template-latest-news .news-featured-desc {
    font-size: 14px;
    margin: 0 16px 12px;
  }
  body.page-template-template-latest-news .news-featured-meta {
    margin: 0 16px 14px;
    font-size: 13px;
  }
  body.page-template-template-latest-news .news-featured-link {
    font-size: 14px;
  }

  body.page-template-template-latest-news .news-list-card,
  body.page-template-template-latest-news .news-list-card:first-child {
    gap: 12px;
    padding: 8px 36px 8px 8px;
  }
  body.page-template-template-latest-news .news-list-card::after {
    right: 14px;
  }
  body.page-template-template-latest-news .news-card-media {
    flex-basis: 104px;
    height: 76px;
  }
  body.page-template-template-latest-news .news-card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  body.page-template-template-latest-news .news-card-meta {
    font-size: 12.5px;
  }
}

/* =========================================================================
   OUR PROJECTS — MOBILE & TABLET (template-projects.php, < 992px only;
   desktop untouched). Scoped to this template's body class.
   - Hero: text only (photo hidden, as in the mobile design).
   - Status tabs and category chips scroll sideways on one line.
   - The project grid becomes a full-width one-project slider: status
     badge + "01 / 06" counter on top, round arrows at the sides, title,
     category | location and "View Details" over the photo; dots and a
     thumbnail strip below (all built by the template's script, which
     rebuilds them after every AJAX filter/page change).
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-projects .property-hero .col-lg-8 {
    display: none;
  }
  body.page-template-template-projects .property-hero {
    background: linear-gradient(180deg, #f6f7f9 0%, #fff 100%);
  }
  body.page-template-template-projects .property-hero-copy {
    padding: 36px 0 8px;
  }
  body.page-template-template-projects .property-hero-copy h1.unique {
    font-size: 56px !important;
    line-height: 1.05 !important;
  }
  body.page-template-template-projects .property-hero-copy .hero-rule {
    width: 60px;
    height: 4px;
    background: var(--kg-gold);
    margin: 18px 0 20px;
  }
  body.page-template-template-projects .property-hero-lead {
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
  }

  /* ----- filters: one scrolling line each ----- */
  body.page-template-template-projects .property-filters {
    margin: 20px 0 24px;
  }
  body.page-template-template-projects .property-status-tabs,
  body.page-template-template-projects .property-category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(50% - 50vw);
    padding-right: 16px;
  }
  body.page-template-template-projects .property-status-tabs::-webkit-scrollbar,
  body.page-template-template-projects .property-category-chips::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-projects .property-status-tabs {
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 18px;
  }
  body.page-template-template-projects .property-status-tab {
    flex: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 14px 20px;
    white-space: nowrap;
  }
  body.page-template-template-projects .property-status-tab.active::after {
    bottom: -1px;
    height: 3px;
  }
  body.page-template-template-projects .property-chip {
    flex: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 13px;
  }

  /* ----- slider ----- */
  body.page-template-template-projects .property-slider {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  body.page-template-template-projects .property-grid {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-projects .property-grid::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-projects .property-grid > .property-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    height: 560px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: var(--kg-navy);
    /* photo is the base layer; the text sits at the bottom in normal
       flow, so the stretched link below can cover the whole card */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
  }
  body.page-template-template-projects .property-card-media {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: -1;
  }
  body.page-template-template-projects .property-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      0deg,
      rgba(9, 18, 38, 0.88) 0%,
      rgba(9, 18, 38, 0.35) 32%,
      rgba(9, 18, 38, 0) 55%
    );
  }
  body.page-template-template-projects .property-card-media img {
    height: 100%;
  }
  body.page-template-template-projects .property-badge {
    top: 28px;
    left: calc(3% + 1.5rem);
    z-index: 1;
    background: var(--kg-navy) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  /* title on its own line, then "Category | Location" with View Details
     pushed to the right (wraps under on narrow screens) */
  body.page-template-template-projects .property-card-body {
    position: static;
    flex: none;
    padding: 0 calc(3% + 1.5rem) 36px;
    background: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    row-gap: 6px;
  }
  body.page-template-template-projects .property-card-title {
    flex: 0 0 100%;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-transform: capitalize;
  }
  body.page-template-template-projects .property-card-category,
  body.page-template-template-projects .property-card-location {
    margin: 0 0 9px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: capitalize;
  }
  body.page-template-template-projects .property-card-category::after {
    content: "|";
    margin: 0 12px;
    opacity: 0.7;
  }
  body.page-template-template-projects .property-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  body.page-template-template-projects .property-card-location svg {
    stroke: #fff;
    color: #fff;
  }
  body.page-template-template-projects .property-card-desc {
    display: none;
  }
  /* "View Details" isn't shown; the (invisible) link is stretched over
     the whole card so tapping anywhere on the project still opens it */
  body.page-template-template-projects .property-card .property-card-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    font-size: 0;
    color: transparent !important;
    border: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }
  body.page-template-template-projects .property-card .property-card-link:focus-visible {
    outline: 3px solid var(--kg-gold);
    outline-offset: -3px;
  }

  body.page-template-template-projects .property-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 8px 20px -10px rgba(9, 18, 38, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-projects .property-slider-btn.prev {
    left: 24px;
  }
  body.page-template-template-projects .property-slider-btn.next {
    right: 24px;
  }
  body.page-template-template-projects .property-slider.is-single .property-slider-btn,
  body.page-template-template-projects .property-slider.is-single ~ .property-slider-dots,
  body.page-template-template-projects .property-slider.is-single ~ .property-slider-thumbs {
    display: none !important;
  }
  body.page-template-template-projects .property-grid[hidden] ~ * {
    display: none !important;
  }

  body.page-template-template-projects .property-slider-dots {
    margin-top: 16px;
  }
  body.page-template-template-projects .property-slider-dots button {
    width: 30px;
  }
  body.page-template-template-projects .property-slider-dots button::before {
    width: 22px;
    height: 7px;
    border-radius: 4px;
  }
  body.page-template-template-projects .property-slider-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.page-template-template-projects .property-slider-thumbs::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-projects .property-slider-thumb {
    flex: 0 0 calc((100% - 40px) / 5);
    aspect-ratio: 1.1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--kg-bg);
    opacity: 0.85;
    transition: border-color 0.25s, opacity 0.25s;
  }
  body.page-template-template-projects .property-slider-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  body.page-template-template-projects .property-slider-thumb.active {
    border-color: var(--kg-red);
    opacity: 1;
  }
  body.page-template-template-projects .property-pagination {
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 48px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-projects .property-hero-copy {
    padding-top: 28px;
  }
  body.page-template-template-projects .property-hero-copy h1.unique {
    font-size: 42px !important;
  }
  body.page-template-template-projects .property-hero-lead {
    font-size: 15px;
  }
  body.page-template-template-projects .property-status-tab {
    font-size: 14px;
    padding: 12px 14px;
  }
  body.page-template-template-projects .property-chip {
    padding: 10px 18px;
    font-size: 12px;
  }
  body.page-template-template-projects .property-grid > .property-card {
    height: 440px;
  }
  body.page-template-template-projects .property-badge {
    top: 20px;
    padding: 7px 16px;
    font-size: 12px;
  }
  body.page-template-template-projects .property-card-body {
    padding-bottom: 24px;
    column-gap: 10px;
  }
  body.page-template-template-projects .property-page-btn {
    min-width: 38px;
    height: 38px;
  }
  body.page-template-template-projects .property-card-title {
    font-size: 26px;
    margin-bottom: 8px;
  }
  body.page-template-template-projects .property-card-category,
  body.page-template-template-projects .property-card-location {
    font-size: 14px;
  }
  body.page-template-template-projects .property-slider-btn {
    width: 44px;
    height: 44px;
  }
  body.page-template-template-projects .property-slider-btn.prev {
    left: 14px;
  }
  body.page-template-template-projects .property-slider-btn.next {
    right: 14px;
  }
  body.page-template-template-projects .property-slider-thumbs {
    gap: 8px;
  }
  body.page-template-template-projects .property-slider-thumb {
    flex-basis: calc((100% - 32px) / 5);
  }
}

/* =========================================================================
   QUALITY — MOBILE & TABLET (template-quality.php, < 992px only; desktop
   untouched). The page's base styles live in css/block-category-paving.css
   (loaded after this file), so every rule here is scoped to the
   template's body class to out-rank them.
   - Hero: copy over the photo (white fade); the 4 tags in a row below.
   - Section headings left-aligned with a short gold rule.
   - Quality Promise: 4 steps in one row (icon + title), dividers.
   - Certified Excellence: heading + intro, then the certificate cards as a
     swipe slider (the extra title / decor image / feature row / bottom
     bar are hidden, as in the mobile design).
   - Quality in Everything We Do + Quality Pillars: swipe sliders with
     side arrows ([data-q-mc], dots/arrows from the template's script).
   ========================================================================= */
@media (max-width: 991.98px) {
  /* shared slider behaviour */
  body.page-template-template-quality .q-mc-wrap {
    position: relative;
  }
  body.page-template-template-quality .q-mc-wrap [data-q-mc] {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-quality .q-mc-wrap [data-q-mc]::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-quality .q-mc-wrap [data-q-mc] > .col {
    flex: 0 0 var(--q-w, 33.3333%);
    width: var(--q-w, 33.3333%);
    max-width: none;
    scroll-snap-align: start;
  }
  body.page-template-template-quality .qp-business .q-mc-wrap,
  body.page-template-template-quality .qp-pillars .q-mc-wrap {
    padding-left: 36px;
    padding-right: 36px;
  }

  /* shared: left-aligned headings with a gold rule */
  body.page-template-template-quality .qp-section-head {
    text-align: left !important;
    margin-bottom: 20px;
  }
  body.page-template-template-quality .qp-section-title {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 700;
    text-align: left !important;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  body.page-template-template-quality .qp-section-title::after,
  body.page-template-template-quality .qp-underline-center::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: none;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }
  body.page-template-template-quality .qp-underline-center {
    margin-bottom: 24px;
  }
  body.page-template-template-quality .qp-section-intro {
    margin: 0 !important;
    font-size: 16px;
    max-width: 640px;
  }

  /* ----- hero ----- */
  body.page-template-template-quality .qp-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 48px auto;
    margin: 0;
    --bs-gutter-y: 0;
  }
  body.page-template-template-quality .qp-hero > div > .row > .col-lg-4,
  body.page-template-template-quality .qp-hero > div > .row > .col-lg-4 > div {
    display: contents;
  }
  body.page-template-template-quality .qp-hero > div > .row > .col-lg-8 {
    grid-column: 1;
    grid-row: 1 / 6;
    /* the row's align-items-center (!important) would collapse it */
    align-self: stretch;
    width: auto;
    margin: 0;
    padding: 0;
    position: relative;
  }
  body.page-template-template-quality .qp-hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    box-shadow: none;
  }
  body.page-template-template-quality .qp-hero-media img {
    object-position: 70% center;
  }
  body.page-template-template-quality .qp-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.95) 46%,
      rgba(255, 255, 255, 0.5) 66%,
      rgba(255, 255, 255, 0) 86%
    );
  }
  body.page-template-template-quality .qp-hero .col-lg-4 > div > * {
    grid-column: 1;
    position: relative;
    z-index: 1;
    margin-left: calc(3% + 1.5rem);
    max-width: 460px;
  }
  body.page-template-template-quality .qp-hero .eyebrow {
    grid-row: 1;
    margin-top: 48px;
    margin-bottom: 12px;
  }
  body.page-template-template-quality .qp-hero-title {
    grid-row: 2;
    font-size: 52px !important;
    line-height: 1.05 !important;
    margin-bottom: 0;
  }
  body.page-template-template-quality .qp-hero .hero-rule {
    grid-row: 3;
    width: 56px;
    height: 4px;
    background: var(--kg-gold);
    margin-top: 18px;
    margin-bottom: 0;
  }
  body.page-template-template-quality .qp-hero-lead {
    grid-row: 4;
    font-size: 16px;
    color: #3c465f;
    margin: 18px 0 0 calc(3% + 1.5rem);
  }
  body.page-template-template-quality .qp-hero .col-lg-4 > div > .qp-hero-tags {
    grid-row: 6;
    margin: 0;
    max-width: none;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--kg-line);
    gap: 0;
  }
  body.page-template-template-quality .qp-hero-tag {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 8px;
  }
  body.page-template-template-quality .qp-hero-tag:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  body.page-template-template-quality .qp-hero-tag-icon .kg-svg-icon,
  body.page-template-template-quality .qp-hero-tag-icon svg {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
  body.page-template-template-quality .qp-hero-tag span:last-child {
    font-size: 13px;
    font-weight: 600;
  }

  /* ----- quality promise: 4 in a row ----- */
  body.page-template-template-quality .qp-promise {
    padding: 36px 0;
  }
  body.page-template-template-quality .qp-promise-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
  }
  body.page-template-template-quality .qp-promise-arrow {
    display: none;
  }
  body.page-template-template-quality .qp-promise-step {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0 8px;
    background: transparent;
  }
  body.page-template-template-quality .qp-promise-step + .qp-promise-arrow + .qp-promise-step,
  body.page-template-template-quality .qp-promise-arrow + .qp-promise-step {
    border-left: 1px solid var(--kg-line);
  }
  body.page-template-template-quality .qp-promise-icon {
    width: auto;
    height: auto;
    background: none !important;
    margin-bottom: 10px;
  }
  body.page-template-template-quality .qp-promise-icon .kg-svg-icon,
  body.page-template-template-quality .qp-promise-icon svg {
    width: 48px !important;
    height: 48px !important;
    display: block;
  }
  body.page-template-template-quality .qp-promise-step h3 {
    color: var(--kg-navy) !important;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
  }
  body.page-template-template-quality .qp-promise-step p {
    display: none;
  }

  /* ----- certified excellence ----- */
  body.page-template-template-quality .qp-certified {
    padding: 36px 0;
  }
  body.page-template-template-quality .qp-certified-top {
    margin-bottom: 18px;
    --bs-gutter-y: 0;
  }
  body.page-template-template-quality .qp-certified-top > .col-lg-8,
  body.page-template-template-quality .qp-certified-title,
  body.page-template-template-quality .qp-certified-box-title,
  body.page-template-template-quality .qp-cert-bottom-bar {
    display: none;
  }
  /* the eyebrow ("Certified Excellence") becomes the section heading */
  body.page-template-template-quality .qp-certified-eyebrow {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kg-navy);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  body.page-template-template-quality .qp-certified-eyebrow::before {
    width: 52px;
    height: 4px;
  }
  body.page-template-template-quality .qp-certified-intro {
    font-size: 16px;
    max-width: 640px;
    margin: 0;
  }
  body.page-template-template-quality .qp-certified-box {
    border: 0;
    padding: 0;
    background: transparent;
  }
  body.page-template-template-quality .qp-certified-box [data-q-mc] {
    --q-w: 25%;
    --bs-gutter-x: 10px;
  }
  body.page-template-template-quality .qp-certified-box .q-mc-wrap .col .qp-cert-card {
    padding: 14px 8px;
    box-shadow: 0 10px 24px -20px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-quality .qp-certified-box .q-mc-wrap .col .qp-cert-logo,
  body.page-template-template-quality .qp-certified-box .q-mc-wrap .col:nth-child(n) .qp-cert-logo {
    height: 64px;
    margin-bottom: 10px;
  }
  body.page-template-template-quality .qp-certified-box .q-mc-wrap .col .qp-cert-logo img,
  body.page-template-template-quality .qp-certified-box .q-mc-wrap .col:nth-child(n) .qp-cert-logo img {
    max-height: 64px;
  }
  body.page-template-template-quality .qp-certified-box .qp-cert-label,
  body.page-template-template-quality .qp-certified-box .qp-cert-value {
    font-size: 12.5px;
  }
  body.page-template-template-quality .qp-certified-box .qp-cert-status {
    font-size: 12px;
    margin: 5px 0 4px;
  }
  body.page-template-template-quality .qp-certified-box .qp-cert-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }

  /* ----- quality in everything we do ----- */
  body.page-template-template-quality .qp-business,
  body.page-template-template-quality .qp-pillars {
    padding: 36px 0;
  }
  body.page-template-template-quality .qp-business [data-q-mc] {
    --q-w: 25%;
  }
  body.page-template-template-quality .qp-business .q-mc-wrap {
    --mc-arrow-top: 60px;
  }
  body.page-template-template-quality .qp-business-item {
    text-align: center;
    padding: 0 4px;
  }
  /* the paving stylesheet's per-item dividers don't suit a slider */
  body.page-template-template-quality .qp-business-item::after,
  body.page-template-template-quality .qp-pillar-item::after {
    display: none;
  }
  body.page-template-template-quality .qp-business-item .qp-business-icon:empty,
  body.page-template-template-quality .qp-business-item p {
    display: none;
  }
  body.page-template-template-quality .qp-business-photo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 2px solid var(--kg-navy);
    overflow: hidden;
    background: #fff;
  }
  body.page-template-template-quality .qp-business-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.page-template-template-quality .qp-business-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }
  body.page-template-template-quality .qp-business-photo + .qp-business-icon + h3 {
    margin-top: 0;
  }

  /* ----- quality pillars ----- */
  body.page-template-template-quality .qp-pillars [data-q-mc] {
    --q-w: 20%;
  }
  body.page-template-template-quality .qp-pillars .q-mc-wrap {
    --mc-arrow-top: 36px;
  }
  body.page-template-template-quality .qp-pillar-item {
    text-align: center;
    padding: 0 2px;
  }
  body.page-template-template-quality .qp-pillar-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-quality .qp-pillar-icon.icon-red {
    background: #fbebea;
  }
  body.page-template-template-quality .qp-pillar-icon.icon-gold {
    background: #fdf3e0;
  }
  body.page-template-template-quality .qp-pillar-icon.icon-navy {
    background: #e8ecf3;
  }
  body.page-template-template-quality .qp-pillar-icon .kg-svg-icon,
  body.page-template-template-quality .qp-pillar-icon svg {
    width: 34px !important;
    height: 34px !important;
    display: block;
  }
  body.page-template-template-quality .qp-pillar-item h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
  body.page-template-template-quality .qp-pillar-item p {
    display: none;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-quality .qp-section-title,
  body.page-template-template-quality .qp-certified-eyebrow {
    font-size: 26px;
  }
  body.page-template-template-quality .qp-section-intro,
  body.page-template-template-quality .qp-certified-intro {
    font-size: 14.5px;
    line-height: 1.6;
  }

  body.page-template-template-quality .qp-hero > div > .row {
    grid-template-rows: repeat(4, auto) 36px auto;
  }
  body.page-template-template-quality .qp-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.95) 55%,
      rgba(255, 255, 255, 0.45) 78%,
      rgba(255, 255, 255, 0) 96%
    );
  }
  body.page-template-template-quality .qp-hero-media img {
    object-position: 80% center;
  }
  body.page-template-template-quality .qp-hero .col-lg-4 > div > * {
    max-width: 50%;
  }
  body.page-template-template-quality .qp-hero .eyebrow {
    margin-top: 36px;
    font-size: 11px;
    letter-spacing: 2px;
    max-width: none;
  }
  body.page-template-template-quality .qp-hero-title {
    font-size: 40px !important;
  }
  body.page-template-template-quality .qp-hero-lead {
    font-size: 14.5px;
    line-height: 1.6;
  }
  body.page-template-template-quality .qp-hero .col-lg-4 > div > .qp-hero-tags {
    max-width: none;
    padding: 14px 0 16px;
  }
  body.page-template-template-quality .qp-hero-tag {
    padding: 0 4px;
  }
  body.page-template-template-quality .qp-hero-tag-icon .kg-svg-icon,
  body.page-template-template-quality .qp-hero-tag-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-template-template-quality .qp-hero-tag span:last-child {
    font-size: 11px;
  }

  body.page-template-template-quality .qp-promise-step {
    padding: 0 4px;
  }
  body.page-template-template-quality .qp-promise-icon .kg-svg-icon,
  body.page-template-template-quality .qp-promise-icon svg {
    width: 38px !important;
    height: 38px !important;
  }
  body.page-template-template-quality .qp-promise-step h3 {
    font-size: 12.5px;
    line-height: 1.3;
  }

  body.page-template-template-quality .qp-certified-box [data-q-mc] {
    --q-w: 33.3333%;
    --bs-gutter-x: 8px;
  }

  body.page-template-template-quality .qp-business [data-q-mc] {
    --q-w: 33.3333%;
    --bs-gutter-x: 8px;
  }
  body.page-template-template-quality .qp-business .q-mc-wrap {
    --mc-arrow-top: 44px;
  }
  body.page-template-template-quality .qp-business-photo {
    width: 76px;
    height: 76px;
  }
  body.page-template-template-quality .qp-business-item h3 {
    font-size: 14px;
  }

  body.page-template-template-quality .qp-pillars [data-q-mc] {
    --q-w: 33.3333%;
    --bs-gutter-x: 8px;
  }
  body.page-template-template-quality .qp-pillars .q-mc-wrap {
    --mc-arrow-top: 30px;
  }
  body.page-template-template-quality .qp-pillar-icon {
    width: 60px;
    height: 60px;
  }
  body.page-template-template-quality .qp-pillar-icon .kg-svg-icon,
  body.page-template-template-quality .qp-pillar-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  body.page-template-template-quality .qp-pillar-item h3 {
    font-size: 12px;
  }
}

/* =========================================================================
   SUSTAINABILITY — MOBILE & TABLET (template-sustainability.php, < 992px
   only; desktop untouched). Same treatment as the Quality page above.
   - Hero: copy over the photo (white fade); the tags in a row below.
   - Our Commitment: left-aligned heading with a gold rule, then the
     items as an autoplaying swipe slider with dots ([data-q-mc],
     dots/autoplay from the template's script).
   - Our Focus Areas: the cards as the same autoplaying swipe slider,
     2 per view on tablet, 1 on phones (with a peek of the next card).
   - Digital & Paperless: heading/intro, then the features as the same
     autoplaying slider; the photo is hidden.
   - Bahraini Talent: one row of icon + navy label with dividers between
     (no descriptions); more than 4 items scroll sideways.
   ========================================================================= */
@media (min-width: 992px) {
  body.page-template-template-sustainability .q-mc-wrap .kg-mc-dots {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-sustainability .qp-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 48px auto;
    margin: 0;
    --bs-gutter-y: 0;
  }
  body.page-template-template-sustainability .qp-hero > div > .row > .col-lg-4,
  body.page-template-template-sustainability .qp-hero > div > .row > .col-lg-4 > div {
    display: contents;
  }
  body.page-template-template-sustainability .qp-hero > div > .row > .col-lg-8 {
    grid-column: 1;
    grid-row: 1 / 6;
    align-self: stretch;
    width: auto;
    margin: 0;
    padding: 0;
    position: relative;
  }
  body.page-template-template-sustainability .qp-hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    box-shadow: none;
    overflow: hidden;
  }
  body.page-template-template-sustainability .qp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
  }
  body.page-template-template-sustainability .qp-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.95) 46%,
      rgba(255, 255, 255, 0.5) 66%,
      rgba(255, 255, 255, 0) 86%
    );
  }
  body.page-template-template-sustainability .qp-hero .col-lg-4 > div > * {
    grid-column: 1;
    position: relative;
    z-index: 1;
    margin-left: calc(3% + 1.5rem);
    max-width: 460px;
  }
  body.page-template-template-sustainability .qp-hero .eyebrow {
    grid-row: 1;
    margin-top: 48px;
    margin-bottom: 12px;
  }
  body.page-template-template-sustainability .qp-hero-title {
    grid-row: 2;
    font-size: 52px !important;
    line-height: 1.05 !important;
    margin-bottom: 0;
  }
  /* no eyebrow: keep the title off the top edge */
  body.page-template-template-sustainability .qp-hero-title:first-child {
    margin-top: 48px;
  }
  body.page-template-template-sustainability .qp-hero .hero-rule {
    grid-row: 3;
    width: 56px;
    height: 4px;
    background: var(--kg-gold);
    margin-top: 18px;
    margin-bottom: 0;
  }
  body.page-template-template-sustainability .qp-hero-lead {
    grid-row: 4;
    font-size: 16px;
    color: #3c465f;
    margin: 18px 0 0 calc(3% + 1.5rem);
  }
  body.page-template-template-sustainability .qp-hero .col-lg-4 > div > .qp-hero-tags {
    grid-row: 6;
    display: flex;
    margin: 0;
    max-width: none;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--kg-line);
    gap: 0;
  }
  body.page-template-template-sustainability .qp-hero-tag {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  body.page-template-template-sustainability .qp-hero-tag:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  body.page-template-template-sustainability .qp-hero-tag-icon .kg-svg-icon,
  body.page-template-template-sustainability .qp-hero-tag-icon svg {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
  body.page-template-template-sustainability .qp-hero-tag span:last-child {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kg-navy);
  }

  /* ----- our commitment: slider ----- */
  body.page-template-template-sustainability .qp-pillars {
    padding: 36px 0;
  }
  body.page-template-template-sustainability .qp-pillars .qp-section-head {
    text-align: left !important;
    margin-bottom: 20px;
  }
  body.page-template-template-sustainability .qp-pillars .qp-section-title {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 700;
    text-align: left !important;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  body.page-template-template-sustainability .qp-pillars .qp-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: none;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }
  body.page-template-template-sustainability .qp-pillars .qp-section-intro {
    display: none;
  }
  body.page-template-template-sustainability .q-mc-wrap {
    position: relative;
  }
  body.page-template-template-sustainability .q-mc-wrap [data-q-mc] {
    --q-w: 25%;
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-sustainability .q-mc-wrap [data-q-mc]::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-sustainability .q-mc-wrap [data-q-mc] > .col {
    flex: 0 0 var(--q-w);
    width: var(--q-w);
    max-width: none;
    scroll-snap-align: start;
  }
  body.page-template-template-sustainability .qp-pillar-item {
    text-align: center;
    padding: 0 2px;
  }
  body.page-template-template-sustainability .qp-pillar-item::after {
    display: none;
  }
  body.page-template-template-sustainability .qp-pillar-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-sustainability .qp-pillar-icon.red {
    background: #fbebea;
  }
  body.page-template-template-sustainability .qp-pillar-icon.gold {
    background: #fdf3e0;
  }
  body.page-template-template-sustainability .qp-pillar-icon.navy {
    background: #e8ecf3;
  }
  body.page-template-template-sustainability .qp-pillar-icon .kg-svg-icon,
  body.page-template-template-sustainability .qp-pillar-icon svg {
    width: 34px !important;
    height: 34px !important;
    display: block;
  }
  body.page-template-template-sustainability .qp-pillar-item h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
  body.page-template-template-sustainability .qp-pillar-item p {
    display: none;
  }

  /* ----- our focus areas: horizontal card slider ----- */
  body.page-template-template-sustainability .qp-focus {
    padding: 36px 0;
  }
  body.page-template-template-sustainability .qp-focus .q-mc-wrap [data-q-mc] {
    --q-w: 46%; /* 2 cards + a peek of the next */
    --bs-gutter-x: 16px;
    /* a scrolling row clips anything outside it (overflow-x forces
       overflow-y too), so leave room for the ribbon tab / hover lift
       above the card and its shadow below, and pull the row back up */
    padding-top: 32px;
    padding-bottom: 20px;
    margin-top: -16px;
  }
  body.page-template-template-sustainability .qp-focus .q-mc-wrap [data-q-mc] > .col {
    display: flex;
  }
  body.page-template-template-sustainability .qp-focus-card {
    width: 100%;
    height: 100%;
  }

  /* ----- digital & paperless: copy, feature slider, photo stacked ----- */
  body.page-template-template-sustainability .qp-digital {
    padding: 36px 0;
  }
  body.page-template-template-sustainability .qp-digital .row > .col-3,
  body.page-template-template-sustainability .qp-digital .row > .col-6 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  body.page-template-template-sustainability .qp-digital .qp-section-title {
    font-size: 32px;
  }
  body.page-template-template-sustainability .qp-digital .qp-section-intro {
    margin: 0;
    font-size: 16px;
    max-width: 640px;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap [data-q-mc] {
    --q-w: 42%; /* 2 features + a peek of the next */
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0;
    padding: 6px 0 14px; /* keep shadows/borders from being clipped */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap [data-q-mc]::-webkit-scrollbar {
    display: none;
  }
  /* each feature becomes a self-contained card; the desktop dividers /
     side padding from the paving stylesheet don't suit a slider */
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature {
    flex: 0 0 var(--q-w);
    width: var(--q-w);
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 22px 16px;
    border: 1px solid var(--kg-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px -20px rgba(20, 41, 77, 0.45);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature::before,
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature::after {
    display: none;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature-icon {
    margin: 0 0 10px;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap .qp-digital-feature p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
  }
  body.page-template-template-sustainability .qp-digital .row > .qp-digital-photo {
    display: none;
  }

  /* ----- bahraini talent: one row of icon + label, dividers between
     (4 per view; more than 4 scroll sideways) ----- */
  body.page-template-template-sustainability .qp-business {
    padding: 36px 0;
  }
  body.page-template-template-sustainability .qp-business .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 0;
  }
  body.page-template-template-sustainability .qp-business .row::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-sustainability .qp-business .row > .col {
    flex: 0 0 25%;
    width: 25%;
    max-width: none;
    padding: 4px 10px;
    scroll-snap-align: start;
    display: flex;
  }
  body.page-template-template-sustainability .qp-business .row > .col:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  /* the last (large, highlight) item is hidden here; the one before it
     is now the last visible, so it loses its divider */
  body.page-template-template-sustainability .qp-business .row > .col:last-child {
    display: none;
  }
  body.page-template-template-sustainability .qp-business .row > .col:nth-last-child(2) {
    border-right: 0;
  }
  body.page-template-template-sustainability .qp-business .qp-business-item,
  body.page-template-template-sustainability .qp-business .qp-business-item-highlight {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  body.page-template-template-sustainability .qp-business .qp-business-item::before,
  body.page-template-template-sustainability .qp-business .qp-business-item::after {
    display: none;
  }
  /* the icon span's class is "qp-business-icon" + colour (no space) */
  body.page-template-template-sustainability .qp-business [class^="qp-business-icon"] {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-sustainability .qp-business [class^="qp-business-icon"] .kg-svg-icon,
  body.page-template-template-sustainability .qp-business [class^="qp-business-icon"] svg {
    width: 48px !important;
    height: 48px !important;
    display: block;
  }
  body.page-template-template-sustainability .qp-business-item h3 {
    color: var(--kg-navy) !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
  }
  body.page-template-template-sustainability .qp-business-item p {
    display: none;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-sustainability .qp-focus .q-mc-wrap [data-q-mc] {
    --q-w: 86%; /* 1 card + a peek of the next */
    --bs-gutter-x: 14px;
  }
  body.page-template-template-sustainability .qp-digital .q-mc-wrap [data-q-mc] {
    --q-w: 72%; /* 1 feature + a peek of the next */
    gap: 14px;
  }
  body.page-template-template-sustainability .qp-digital .qp-section-title {
    font-size: 26px;
  }
  body.page-template-template-sustainability .qp-business .row > .col {
    padding: 2px 6px;
  }
  body.page-template-template-sustainability .qp-business [class^="qp-business-icon"] .kg-svg-icon,
  body.page-template-template-sustainability .qp-business [class^="qp-business-icon"] svg {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-template-template-sustainability .qp-business-item h3 {
    font-size: 12.5px;
  }
  body.page-template-template-sustainability .qp-digital .qp-section-intro {
    font-size: 14.5px;
    line-height: 1.6;
  }
  body.page-template-template-sustainability .qp-hero > div > .row {
    grid-template-rows: repeat(4, auto) 36px auto;
  }
  body.page-template-template-sustainability .qp-hero-media::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.95) 55%,
      rgba(255, 255, 255, 0.45) 78%,
      rgba(255, 255, 255, 0) 96%
    );
  }
  body.page-template-template-sustainability .qp-hero-media img {
    object-position: 80% center;
  }
  body.page-template-template-sustainability .qp-hero .col-lg-4 > div > * {
    max-width: 60%;
  }
  body.page-template-template-sustainability .qp-hero .eyebrow {
    margin-top: 36px;
    font-size: 11px;
    letter-spacing: 2px;
    max-width: none;
  }
  body.page-template-template-sustainability .qp-hero-title {
    font-size: 40px !important;
  }
  body.page-template-template-sustainability .qp-hero-title:first-child {
    margin-top: 36px;
  }
  body.page-template-template-sustainability .qp-hero-lead {
    font-size: 14.5px;
    line-height: 1.6;
  }
  body.page-template-template-sustainability .qp-hero .col-lg-4 > div > .qp-hero-tags {
    max-width: none;
    padding: 14px 0 16px;
  }
  body.page-template-template-sustainability .qp-hero-tag {
    padding: 0 4px;
  }
  body.page-template-template-sustainability .qp-hero-tag-icon .kg-svg-icon,
  body.page-template-template-sustainability .qp-hero-tag-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-template-template-sustainability .qp-hero-tag span:last-child {
    font-size: 11px;
  }

  body.page-template-template-sustainability .qp-pillars .qp-section-title {
    font-size: 26px;
  }
  body.page-template-template-sustainability .q-mc-wrap [data-q-mc] {
    --q-w: 33.3333%;
    --bs-gutter-x: 8px;
  }
  body.page-template-template-sustainability .qp-pillar-icon {
    width: 60px;
    height: 60px;
  }
  body.page-template-template-sustainability .qp-pillar-icon .kg-svg-icon,
  body.page-template-template-sustainability .qp-pillar-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  body.page-template-template-sustainability .qp-pillar-item h3 {
    font-size: 12px;
  }
}

/* =========================================================================
   SAFETY — MOBILE & TABLET (template-safety.php, < 992px only; desktop
   untouched). The page's base styles live in css/block-category-paving.css
   (loaded after this file), so every rule here is scoped to the
   template's body class to out-rank them.
   - Hero: copy over the photo (white fade from the top); the tags in a
     white card overlapping the bottom of the photo.
   - Our HSE Approach: the items in a circle around the logo.
   - Our HSE Commitment: photo on top, then a rounded white card with the
     heading, text and the tick list.
   - Our HSE Focus Areas: a row of icon tabs + a detail panel with arrows
     (panel filled/driven by the template's script).
   - Bottom panel: navy, red bar on the left; the floating card hidden.
   ========================================================================= */
.sf-approach-center,
.sf-focus-panel {
  display: none;
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-safety .sf-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 0 !important;
  }
  body.page-template-template-safety .sf-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 320px auto;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    padding-bottom: 28px;
  }
  body.page-template-template-safety .sf-hero > div > .row > .col-lg-5,
  body.page-template-template-safety .sf-hero > div > .row > .col-lg-5 > div {
    display: contents;
  }
  body.page-template-template-safety .sf-hero > div > .row > .col-lg-7 {
    grid-column: 1;
    grid-row: 1 / 6;
    /* the row's align-items-center (!important) would collapse it */
    align-self: stretch;
    width: auto;
    margin: 0;
    padding: 0;
    position: relative;
  }
  /* white fade from the top so the copy reads over the photo */
  body.page-template-template-safety .sf-hero > div > .row > .col-lg-7::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* near-solid white behind the whole copy (title → lead), then a
       quick fade so the people/plant in the lower part stay visible */
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.97) 48%,
      rgba(255, 255, 255, 0.88) 60%,
      rgba(255, 255, 255, 0.45) 74%,
      rgba(255, 255, 255, 0) 88%
    );
  }
  body.page-template-template-safety .sf-hero-media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    overflow: hidden;
  }
  body.page-template-template-safety .sf-hero-media::before,
  body.page-template-template-safety .sf-hero-media::after {
    display: none;
  }
  body.page-template-template-safety .sf-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 0;
    clip-path: none;
  }
  body.page-template-template-safety .sf-hero .col-lg-5 > div > * {
    grid-column: 1;
    position: relative;
    z-index: 2;
    margin-left: 24px;
    margin-right: 24px;
    max-width: 600px;
  }
  body.page-template-template-safety .sf-hero .eyebrow {
    grid-row: 1;
    margin-top: 40px;
    margin-bottom: 12px;
  }
  body.page-template-template-safety .sf-hero .qp-hero-title {
    grid-row: 2;
    font-size: 54px !important;
    line-height: 1.08 !important;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  body.page-template-template-safety .sf-hero .qp-hero-title:first-child {
    margin-top: 40px;
  }
  body.page-template-template-safety .sf-hero .hero-rule {
    grid-row: 3;
    width: 64px;
    height: 4px;
    background: var(--kg-gold);
    margin-top: 20px;
    margin-bottom: 0;
  }
  body.page-template-template-safety .sf-hero .qp-hero-lead {
    grid-row: 4;
    font-size: 17px;
    line-height: 1.6;
    color: #3c465f;
    margin-top: 18px;
    margin-bottom: 0;
  }
  body.page-template-template-safety .sf-hero .col-lg-5 > div > .sf-hero-tags {
    grid-row: 6;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: -64px 16px 0;
    max-width: none;
    padding: 20px 6px;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-safety .sf-hero-tag {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0 10px;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  body.page-template-template-safety .sf-hero-tag:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  body.page-template-template-safety .sf-hero-tag-icon {
    margin: 0 0 4px;
    background: none;
  }
  body.page-template-template-safety .sf-hero-tag-icon .kg-svg-icon,
  body.page-template-template-safety .sf-hero-tag-icon svg {
    width: 48px !important;
    height: 48px !important;
    display: block;
  }
  body.page-template-template-safety .sf-hero-tag-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  body.page-template-template-safety .sf-hero-tag-text {
    font-size: 13px;
    line-height: 1.4;
    color: #5b6478;
  }

  /* ----- shared section headings ----- */
  body.page-template-template-safety .sf-approach .qp-section-title,
  body.page-template-template-safety .sf-focus .qp-section-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
  body.page-template-template-safety .sf-approach .qp-section-title::after,
  body.page-template-template-safety .sf-focus .qp-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 4px;
    width: 52px;
    border-radius: 2px;
  }

  /* ----- our hse approach: circle around the logo ----- */
  body.page-template-template-safety .sf-approach {
    padding: 40px 0 32px;
    background: linear-gradient(180deg, #fff 0%, #f7f8fb 100%);
  }
  body.page-template-template-safety .sf-approach .qp-section-head {
    text-align: center !important;
    margin-bottom: 20px;
  }
  body.page-template-template-safety .sf-approach .qp-section-title {
    font-family: inherit;
    text-align: center !important;
    letter-spacing: 0.5px;
  }
  body.page-template-template-safety .sf-approach .qp-section-title::after {
    left: 50%;
    transform: translateX(-50%);
    background: var(--kg-red);
  }
  body.page-template-template-safety .sf-approach .qp-section-intro {
    font-size: 16px;
    line-height: 1.6;
    color: #5b6478;
    max-width: 520px;
    margin: 0 auto !important;
  }
  body.page-template-template-safety .sf-approach .row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      ". . a a . ."
      "b b c c d d"
      ". e e f f .";
    row-gap: 10px;
    margin: 0 auto;
    max-width: 560px;
    position: relative;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  /* the ring behind the items */
  body.page-template-template-safety .sf-approach .row::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid #e3e6ed;
    border-radius: 50%;
    z-index: 0;
  }
  body.page-template-template-safety .sf-approach .row > .col {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0 4px;
    margin: 0;
    position: relative;
    z-index: 1;
    /* the desktop dividers between items don't belong in the circle */
    border: 0 !important;
  }
  body.page-template-template-safety .sf-approach .row > .col::before,
  body.page-template-template-safety .sf-approach .row > .col::after {
    display: none;
  }
  body.page-template-template-safety .sf-approach-item {
    border: 0 !important;
  }
  body.page-template-template-safety .sf-approach .row > .col:nth-child(1) { grid-area: a; }
  body.page-template-template-safety .sf-approach .row > .col:nth-child(2) { grid-area: b; }
  body.page-template-template-safety .sf-approach .row > .col:nth-child(3) { grid-area: d; }
  body.page-template-template-safety .sf-approach .row > .col:nth-child(4) { grid-area: e; }
  body.page-template-template-safety .sf-approach .row > .col:nth-child(5) { grid-area: f; }
  body.page-template-template-safety .sf-approach .row > .sf-approach-center {
    grid-area: c;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-safety .sf-approach-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  body.page-template-template-safety .sf-approach-logo img {
    max-width: 76px;
    max-height: 76px;
    width: auto;
    height: auto;
  }
  body.page-template-template-safety .sf-approach-logo-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--kg-navy);
    text-align: center;
    padding: 8px;
  }
  body.page-template-template-safety .sf-approach-item {
    text-align: center;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  body.page-template-template-safety .sf-approach-item::before,
  body.page-template-template-safety .sf-approach-item::after {
    display: none;
  }
  body.page-template-template-safety .sf-approach-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-safety .sf-approach-item:has(h3.text-red) .sf-approach-icon {
    background: #fdeceb;
  }
  body.page-template-template-safety .sf-approach-item:has(h3.text-gold) .sf-approach-icon {
    background: #fdf3e0;
  }
  body.page-template-template-safety .sf-approach-icon .kg-svg-icon,
  body.page-template-template-safety .sf-approach-icon svg {
    width: 38px !important;
    height: 38px !important;
    display: block;
  }
  body.page-template-template-safety .sf-approach-item h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 4px;
  }
  body.page-template-template-safety .sf-approach-item p {
    font-size: 13px;
    line-height: 1.4;
    color: #5b6478;
    margin: 0;
  }

  /* ----- our hse commitment: photo, then a rounded card ----- */
  body.page-template-template-safety .sf-commitment {
    padding: 0 0 32px;
    background: #fff;
  }
  body.page-template-template-safety .sf-commitment .kg-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
  }
  body.page-template-template-safety .sf-commitment-panel {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  body.page-template-template-safety .sf-commitment-panel::before,
  body.page-template-template-safety .sf-commitment-panel::after {
    display: none;
  }
  body.page-template-template-safety .sf-commitment-media {
    width: 100%;
    height: 340px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  body.page-template-template-safety .sf-commitment-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }
  body.page-template-template-safety .sf-commitment-copy,
  body.page-template-template-safety .sf-commitment-checklist {
    position: relative;
    z-index: 1;
    background: #fff;
    margin: 0 12px;
    width: auto;
    border: 0;
  }
  body.page-template-template-safety .sf-commitment-copy {
    margin-top: -36px;
    padding: 32px 24px 8px;
    border-radius: 24px 24px 0 0;
  }
  body.page-template-template-safety .sf-commitment-media + .sf-commitment-copy {
    box-shadow: 0 -14px 30px -24px rgba(20, 41, 77, 0.35);
  }
  body.page-template-template-safety .sf-commitment-copy h2 {
    position: relative;
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    padding-bottom: 18px;
    margin: 0 0 18px;
  }
  body.page-template-template-safety .sf-commitment-copy h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }
  body.page-template-template-safety .sf-commitment-copy p {
    font-size: 16px;
    line-height: 1.65;
    color: #5b6478;
    margin: 0;
  }
  body.page-template-template-safety .sf-commitment-checklist {
    padding: 12px 24px 0;
  }
  body.page-template-template-safety .sf-checklist-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--kg-line);
    background: none;
  }
  body.page-template-template-safety .sf-checklist-row:last-child {
    border-bottom: 0;
  }
  body.page-template-template-safety .sf-checklist-tick {
    flex: 0 0 auto;
    color: var(--kg-red);
    display: flex;
  }
  body.page-template-template-safety .sf-checklist-tick svg {
    width: 34px;
    height: 34px;
  }
  body.page-template-template-safety .sf-checklist-row > span:last-child {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--kg-navy);
  }

  /* ----- our hse focus areas: icon tabs + detail panel ----- */
  body.page-template-template-safety .sf-focus {
    padding: 40px 0;
  }
  body.page-template-template-safety .sf-focus .qp-section-title {
    font-family: var(--serif);
    text-align: left !important;
    margin-bottom: 24px;
  }
  body.page-template-template-safety .sf-focus .qp-section-title::after {
    left: 0;
    transform: none;
    background: var(--kg-gold);
  }
  /* tabs: equal width in one row (scrolls sideways if they don't fit) */
  body.page-template-template-safety .sf-focus .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.page-template-template-safety .sf-focus .row::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-safety .sf-focus .row > .col {
    flex: 1 0 0;
    min-width: 104px;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    display: flex;
  }
  body.page-template-template-safety .sf-focus-item {
    width: 100%;
    margin: 0;
    padding: 16px 8px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    box-shadow: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    -webkit-tap-highlight-color: transparent;
  }
  body.page-template-template-safety .sf-focus-item::before,
  body.page-template-template-safety .sf-focus-item::after {
    display: none;
  }
  body.page-template-template-safety .sf-focus-item.is-active {
    background: #fdecec;
    border-color: #f8d7d6;
  }
  body.page-template-template-safety .sf-focus-icon {
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
  }
  body.page-template-template-safety .sf-focus-icon .kg-svg-icon,
  body.page-template-template-safety .sf-focus-icon svg {
    width: 36px !important;
    height: 36px !important;
    display: block;
  }
  body.page-template-template-safety .sf-focus-item h3 {
    color: var(--kg-navy) !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
  }
  body.page-template-template-safety .sf-focus-item.is-active h3 {
    color: var(--kg-red) !important;
  }
  body.page-template-template-safety .sf-focus-item p {
    display: none;
  }

  /* one icon colour: navy on the tabs, red on the active tab and in the
     panel (the icons come in per-item colours from the CMS) */
  body.page-template-template-safety .sf-focus-icon,
  body.page-template-template-safety .sf-focus-icon .kg-svg-icon {
    color: var(--kg-navy) !important;
  }
  body.page-template-template-safety .sf-focus-item.is-active .sf-focus-icon,
  body.page-template-template-safety .sf-focus-item.is-active .sf-focus-icon .kg-svg-icon,
  body.page-template-template-safety .sf-focus-panel-icon,
  body.page-template-template-safety .sf-focus-panel-icon .kg-svg-icon {
    color: var(--kg-red) !important;
  }
  /* recolour only the visible shapes — never the ones inside a mask /
     clipPath / defs (recolouring a mask's white hides the icon), and
     leave white "cut-out" details white */
  body.page-template-template-safety :is(.sf-focus-icon, .sf-focus-panel-icon) svg[stroke]:not([stroke="none"]),
  body.page-template-template-safety :is(.sf-focus-icon, .sf-focus-panel-icon) svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"], [stroke="#fff"], [stroke="#ffffff"], [stroke="#FFF"], [stroke="#FFFFFF"], [stroke="white"]) {
    stroke: currentColor !important;
  }
  body.page-template-template-safety :is(.sf-focus-icon, .sf-focus-panel-icon) svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"], [fill="#fff"], [fill="#ffffff"], [fill="#FFF"], [fill="#FFFFFF"], [fill="white"]) {
    fill: currentColor !important;
  }
  /* keep the icon from being clipped, and size uploaded <img> icons too */
  body.page-template-template-safety :is(.sf-focus-icon, .sf-focus-panel-icon) svg {
    overflow: visible;
  }
  body.page-template-template-safety :is(.sf-focus-icon, .sf-focus-panel-icon) img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
  }

  /* detail panel: icon in a white circle | title + text | arrows */
  body.page-template-template-safety .sf-focus-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
    padding: 22px 22px;
    border: 1px solid #f8d7d6;
    border-radius: 14px;
    background: #fdf1f1;
  }
  body.page-template-template-safety .sf-focus-panel-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-safety .sf-focus-panel-icon .kg-svg-icon,
  body.page-template-template-safety .sf-focus-panel-icon svg {
    width: 34px !important;
    height: 34px !important;
    display: block;
  }
  body.page-template-template-safety .sf-focus-panel-copy h3 {
    color: var(--kg-red) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  body.page-template-template-safety .sf-focus-panel-copy p {
    font-size: 14px;
    line-height: 1.55;
    color: #5b6478;
    margin: 0;
  }
  body.page-template-template-safety .sf-focus-panel-nav {
    display: flex;
    gap: 10px;
  }
  body.page-template-template-safety .sf-focus-panel-nav button {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 6px 14px -8px rgba(20, 41, 77, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ----- bottom panel: navy, red bar on the left ----- */
  body.page-template-template-safety .sf-final {
    padding: 0;
    background: var(--kg-navy);
  }
  body.page-template-template-safety .sf-final .kg-container {
    padding: 0 !important;
    max-width: none;
  }
  body.page-template-template-safety .sf-final-panel {
    display: block;
    margin: 0;
    padding: 36px 24px;
    border: 0;
    border-radius: 0;
    background: var(--kg-navy);
    box-shadow: none;
  }
  body.page-template-template-safety .sf-final-panel::before,
  body.page-template-template-safety .sf-final-panel::after {
    display: none;
  }
  body.page-template-template-safety .sf-final-copy {
    max-width: 600px;
    padding: 4px 0 4px 22px;
    border-left: 5px solid var(--kg-red);
  }
  body.page-template-template-safety .sf-final-title {
    position: relative;
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 16px;
    margin: 0 0 16px;
  }
  body.page-template-template-safety .sf-final-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }
  body.page-template-template-safety .sf-final-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
  }
  body.page-template-template-safety .sf-final-card {
    display: none;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-safety .sf-hero > div > .row {
    grid-template-rows: repeat(4, auto) 250px auto;
  }
  body.page-template-template-safety .sf-hero > div > .row > .col-lg-7::after {
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.97) 56%,
      rgba(255, 255, 255, 0.88) 66%,
      rgba(255, 255, 255, 0.45) 79%,
      rgba(255, 255, 255, 0) 92%
    );
  }
  body.page-template-template-safety .sf-hero .col-lg-5 > div > * {
    margin-left: 20px;
    margin-right: 20px;
  }
  body.page-template-template-safety .sf-hero .qp-hero-title {
    font-size: 40px !important;
  }
  body.page-template-template-safety .sf-hero .qp-hero-title:first-child,
  body.page-template-template-safety .sf-hero .eyebrow {
    margin-top: 28px;
  }
  body.page-template-template-safety .sf-hero .hero-rule {
    width: 56px;
    margin-top: 16px;
  }
  body.page-template-template-safety .sf-hero .qp-hero-lead {
    font-size: 15px;
    margin-top: 14px;
  }
  body.page-template-template-safety .sf-hero .col-lg-5 > div > .sf-hero-tags {
    margin: -48px 10px 0;
    padding: 16px 2px;
  }
  body.page-template-template-safety .sf-hero-tag {
    padding: 0 6px;
  }
  body.page-template-template-safety .sf-hero-tag-icon .kg-svg-icon,
  body.page-template-template-safety .sf-hero-tag-icon svg {
    width: 38px !important;
    height: 38px !important;
  }
  body.page-template-template-safety .sf-hero-tag-label {
    font-size: 12px;
  }
  body.page-template-template-safety .sf-hero-tag-text {
    font-size: 11.5px;
  }

  body.page-template-template-safety .sf-approach .qp-section-title,
  body.page-template-template-safety .sf-focus .qp-section-title {
    font-size: 24px;
  }
  body.page-template-template-safety .sf-approach .qp-section-intro {
    font-size: 14.5px;
  }
  body.page-template-template-safety .sf-approach-logo {
    width: 88px;
    height: 88px;
  }
  body.page-template-template-safety .sf-approach-logo img {
    max-width: 56px;
    max-height: 56px;
  }
  body.page-template-template-safety .sf-approach-icon {
    width: 60px;
    height: 60px;
  }
  body.page-template-template-safety .sf-approach-icon .kg-svg-icon,
  body.page-template-template-safety .sf-approach-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body.page-template-template-safety .sf-approach-item h3 {
    font-size: 12px;
  }
  body.page-template-template-safety .sf-approach-item p {
    font-size: 11px;
  }

  body.page-template-template-safety .sf-commitment-media {
    height: 240px;
  }
  body.page-template-template-safety .sf-commitment-copy {
    margin-top: -28px;
    padding: 26px 20px 6px;
  }
  body.page-template-template-safety .sf-commitment-copy h2 {
    font-size: 27px;
  }
  body.page-template-template-safety .sf-commitment-copy p {
    font-size: 14.5px;
  }
  body.page-template-template-safety .sf-commitment-checklist {
    padding: 8px 20px 0;
  }
  body.page-template-template-safety .sf-checklist-tick svg {
    width: 28px;
    height: 28px;
  }
  body.page-template-template-safety .sf-checklist-row > span:last-child {
    font-size: 16px;
  }

  body.page-template-template-safety .sf-focus {
    padding: 32px 0;
  }
  body.page-template-template-safety .sf-focus .qp-section-title {
    margin-bottom: 20px;
  }
  body.page-template-template-safety .sf-focus .row {
    gap: 8px;
    margin-bottom: 16px;
  }
  /* ~3.5 tabs per view so long labels stay readable; swipe for the rest */
  body.page-template-template-safety .sf-focus .row > .col {
    flex: 0 0 calc((100% - 24px) / 3.5);
    min-width: 0;
  }
  body.page-template-template-safety .sf-focus-item {
    padding: 14px 6px 12px;
    gap: 8px;
  }
  body.page-template-template-safety .sf-focus-icon .kg-svg-icon,
  body.page-template-template-safety .sf-focus-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body.page-template-template-safety .sf-focus-item h3 {
    font-size: 10.5px;
    letter-spacing: 0.2px;
  }
  /* panel: icon + copy on top, arrows bottom-right */
  body.page-template-template-safety .sf-focus-panel {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "icon nav";
    column-gap: 14px;
    row-gap: 12px;
    align-items: start;
    padding: 18px 16px;
  }
  body.page-template-template-safety .sf-focus-panel-icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
  }
  body.page-template-template-safety .sf-focus-panel-icon .kg-svg-icon,
  body.page-template-template-safety .sf-focus-panel-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  body.page-template-template-safety .sf-focus-panel-copy {
    grid-area: copy;
  }
  body.page-template-template-safety .sf-focus-panel-copy h3 {
    font-size: 13.5px;
    margin-bottom: 4px;
  }
  body.page-template-template-safety .sf-focus-panel-copy p {
    font-size: 13px;
  }
  body.page-template-template-safety .sf-focus-panel-nav {
    grid-area: nav;
    justify-self: end;
    gap: 8px;
  }
  body.page-template-template-safety .sf-focus-panel-nav button {
    width: 34px;
    height: 34px;
  }

  body.page-template-template-safety .sf-final-panel {
    padding: 30px 20px;
  }
  body.page-template-template-safety .sf-final-copy {
    padding-left: 18px;
  }
  body.page-template-template-safety .sf-final-title {
    font-size: 21px;
  }
  body.page-template-template-safety .sf-final-text {
    font-size: 13.5px;
  }
}

/* =========================================================================
   BAHRAINISATION — MOBILE & TABLET (template-bahrainisation.php, < 992px
   only; desktop untouched). The page's base styles live in
   css/block-category-paving.css (loaded after this file), so every rule
   here is scoped to the template's body class to out-rank them.
   - Hero: copy on the left over the photo (the photo fades in from the
     left via a mask); map + Bahrain flag hidden; the "Grow Together"
     card overlapping the bottom of the photo, link on the right.
   - Our Key Pillars: 2 x 2 bordered cards (icon, title, text centred).
   - How We Make An Impact: 2 columns of icon-left rows, divider between.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-bahrainisation .bz-hero {
    position: relative;
    overflow: hidden;
    padding: 28px 0 24px;
    background: #fff;
  }
  body.page-template-template-bahrainisation .bz-hero .bz-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) 28px auto;
    margin: 0;
    position: relative;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  body.page-template-template-bahrainisation .bz-hero-col-text,
  body.page-template-template-bahrainisation .bz-hero-col-media,
  body.page-template-template-bahrainisation .bz-hero-media {
    display: contents;
  }
  /* copy */
  body.page-template-template-bahrainisation .bz-hero-col-text > :not(.bz-hero-map) {
    grid-column: 1;
    position: relative;
    z-index: 3;
    max-width: 60%;
  }
  body.page-template-template-bahrainisation .bz-hero-pretitle {
    grid-row: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 0 8px;
  }
  body.page-template-template-bahrainisation .bz-hero-title {
    grid-row: 2;
    font-size: 48px !important;
    line-height: 1.08 !important;
    text-transform: uppercase;
    margin: 0;
  }
  body.page-template-template-bahrainisation .bz-hero-col-text > .bz-hero-title {
    max-width: none;
  }
  body.page-template-template-bahrainisation .bz-hero-rule {
    grid-row: 3;
    width: 56px;
    height: 4px;
    background: var(--kg-gold);
    margin: 18px 0 0;
  }
  body.page-template-template-bahrainisation .bz-hero .qp-hero-lead {
    grid-row: 4;
    font-size: 17px;
    line-height: 1.6;
    color: #3c465f;
    margin: 18px 0 0;
  }
  /* photo: right side, fading in from the left, full bleed to the right
     edge; stops half way down the card so the card overlaps it */
  body.page-template-template-bahrainisation .bz-hero-media-frame {
    grid-column: 1;
    grid-row: 1 / 7;
    align-self: stretch;
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    margin: -28px -1.5rem 44px 30%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    transform: none;
    overflow: hidden;
  }
  body.page-template-template-bahrainisation .bz-hero-media-frame::before,
  body.page-template-template-bahrainisation .bz-hero-media-frame::after {
    display: none;
  }
  body.page-template-template-bahrainisation .bz-hero-media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% bottom;
    border-radius: 0;
    clip-path: none;
    /* the copy covers roughly the first 40% of the photo: keep that part
       almost fully faded to white, then bring the photo in after it */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0.75) 62%, #000 78%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0.75) 62%, #000 78%);
  }
  /* map + flag: hidden on mobile/tablet */
  body.page-template-template-bahrainisation .bz-hero .bz-hero-map {
    display: none !important;
  }
  /* "Grow Together" card */
  body.page-template-template-bahrainisation .bz-hero-cta-card {
    grid-column: 1;
    grid-row: 6;
    position: relative;
    inset: auto;
    z-index: 4;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 40px -22px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-bahrainisation .bz-hero-cta-icon {
    flex: 0 0 auto;
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border: 0;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-hero-cta-icon svg {
    width: 40px !important;
    height: 40px !important;
    display: block;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title link"
      "text  link";
    column-gap: 18px;
    align-items: center;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy h4 {
    grid-area: title;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 0 2px;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy p {
    grid-area: text;
    font-size: 14px;
    line-height: 1.45;
    color: #5b6478;
    margin: 0;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-link {
    grid-area: link;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
    border-left: 1px solid var(--kg-line);
    font-size: 15px;
    font-weight: 700;
    color: var(--kg-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  /* ----- shared: centred heading with a short coloured rule ----- */
  body.page-template-template-bahrainisation .bz-lined-heading {
    display: block;
    text-align: center;
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    color: var(--kg-navy);
    margin: 0 0 24px;
  }
  body.page-template-template-bahrainisation .bz-lined-heading::before {
    display: none;
  }
  body.page-template-template-bahrainisation .bz-lined-heading::after {
    content: "";
    display: block;
    position: static;
    flex: none;
    transform: none;
    width: 48px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--kg-red);
  }
  body.page-template-template-bahrainisation .bz-lined-heading span {
    display: inline;
    padding: 0;
    background: none;
  }
  body.page-template-template-bahrainisation .bz-lined-heading span::before,
  body.page-template-template-bahrainisation .bz-lined-heading span::after {
    display: none;
  }

  /* ----- our key pillars: 2 x 2 cards ----- */
  body.page-template-template-bahrainisation .bz-pillars {
    padding: 32px 0;
    background: #f6f6f8;
  }
  body.page-template-template-bahrainisation .bz-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  body.page-template-template-bahrainisation .bz-pillars-grid > .bz-pillar-item {
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 20px 14px;
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 12px;
  }
  /* full-width centred text block (desktop puts it beside the icon) */
  body.page-template-template-bahrainisation .bz-pillar-content {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.page-template-template-bahrainisation .bz-pillar-content h3,
  body.page-template-template-bahrainisation .bz-pillar-content p {
    width: 100%;
    text-align: center;
  }
  body.page-template-template-bahrainisation .bz-pillar-item::before,
  body.page-template-template-bahrainisation .bz-pillar-item::after {
    display: none;
  }
  /* fixed-height icon box so every card's title starts on the same line */
  body.page-template-template-bahrainisation .bz-pillar-icon {
    flex: 0 0 auto;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-bahrainisation .bz-pillar-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-pillar-icon svg {
    width: 52px !important;
    height: 52px !important;
    display: block;
  }
  body.page-template-template-bahrainisation .bz-pillar-content h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0 0 6px;
    /* no underline under the card titles */
    padding-bottom: 0;
    border: 0;
    text-decoration: none;
    background-image: none;
  }
  body.page-template-template-bahrainisation .bz-pillar-content h3::before,
  body.page-template-template-bahrainisation .bz-pillar-content h3::after,
  body.page-template-template-bahrainisation .bz-pillar-content::before,
  body.page-template-template-bahrainisation .bz-pillar-content::after {
    display: none;
  }
  body.page-template-template-bahrainisation .bz-pillar-content p {
    font-size: 15px;
    line-height: 1.5;
    color: #5b6478;
    margin: 0;
  }

  /* ----- how we make an impact: 2 columns, icon left ----- */
  body.page-template-template-bahrainisation .bz-impact {
    padding: 32px 0;
    background: #fff;
  }
  body.page-template-template-bahrainisation .bz-impact .bz-lined-heading::after {
    background: var(--kg-gold);
  }
  body.page-template-template-bahrainisation .bz-impact .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
    column-gap: 0;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  body.page-template-template-bahrainisation .bz-impact .row > .col {
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 2px 18px;
  }
  body.page-template-template-bahrainisation .bz-impact .row > .col:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--kg-line);
  }
  body.page-template-template-bahrainisation .bz-impact .row > .col:nth-child(even) {
    padding-right: 0;
    border-right: 0 !important;
  }
  /* the desktop per-item dividers: only the column divider above stays */
  body.page-template-template-bahrainisation .bz-impact-item {
    border-right: 0 !important;
  }
  body.page-template-template-bahrainisation .bz-impact .row > .col:nth-child(even)::before,
  body.page-template-template-bahrainisation .bz-impact .row > .col:nth-child(even)::after {
    display: none;
  }
  body.page-template-template-bahrainisation .bz-impact-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text";
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-items: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  body.page-template-template-bahrainisation .bz-impact-item::before,
  body.page-template-template-bahrainisation .bz-impact-item::after,
  body.page-template-template-bahrainisation .bz-impact-item .bz-dash {
    display: none;
  }
  body.page-template-template-bahrainisation .bz-impact-icon {
    grid-area: icon;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-template-template-bahrainisation .bz-impact-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-impact-icon svg,
  body.page-template-template-bahrainisation .bz-impact-icon img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    border-radius: 0;
    display: block;
  }
  body.page-template-template-bahrainisation .bz-impact-item h3 {
    grid-area: title;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    margin: 0 0 4px;
  }
  body.page-template-template-bahrainisation .bz-impact-item p {
    grid-area: text;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5b6478;
    margin: 0;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-bahrainisation .bz-hero {
    padding: 22px 0 20px;
  }
  body.page-template-template-bahrainisation .bz-hero .bz-hero-row {
    grid-template-rows: repeat(4, auto) 22px auto;
  }
  body.page-template-template-bahrainisation .bz-hero-col-text > :not(.bz-hero-map) {
    max-width: 56%;
  }
  body.page-template-template-bahrainisation .bz-hero-pretitle {
    font-size: 12px;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
  }
  body.page-template-template-bahrainisation .bz-hero-title {
    font-size: 30px !important;
  }
  body.page-template-template-bahrainisation .bz-hero-rule {
    width: 44px;
    height: 3px;
    margin-top: 14px;
  }
  body.page-template-template-bahrainisation .bz-hero .qp-hero-lead {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 14px;
  }
  body.page-template-template-bahrainisation .bz-hero-media-frame {
    margin: -22px -1.5rem 34px 26%;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-card {
    padding: 14px 14px;
    gap: 12px;
    border-radius: 16px;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-hero-cta-icon svg {
    width: 32px !important;
    height: 32px !important;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy {
    column-gap: 12px;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy h4 {
    font-size: 13.5px;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-copy p {
    font-size: 11.5px;
  }
  body.page-template-template-bahrainisation .bz-hero-cta-link {
    padding-left: 12px;
    font-size: 12.5px;
  }

  body.page-template-template-bahrainisation .bz-lined-heading {
    font-size: 23px;
    margin-bottom: 20px;
  }
  body.page-template-template-bahrainisation .bz-lined-heading::after {
    width: 40px;
    height: 3px;
    margin-top: 10px;
  }

  body.page-template-template-bahrainisation .bz-pillars {
    padding: 26px 0;
  }
  body.page-template-template-bahrainisation .bz-pillars-grid {
    gap: 10px;
  }
  body.page-template-template-bahrainisation .bz-pillars-grid > .bz-pillar-item {
    padding: 16px 10px;
    gap: 10px;
  }
  body.page-template-template-bahrainisation .bz-pillar-icon {
    height: 46px;
  }
  body.page-template-template-bahrainisation .bz-pillar-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-pillar-icon svg {
    width: 42px !important;
    height: 42px !important;
  }
  body.page-template-template-bahrainisation .bz-pillar-content h3 {
    font-size: 12.5px;
    margin-bottom: 4px;
  }
  body.page-template-template-bahrainisation .bz-pillar-content p {
    font-size: 12.5px;
    line-height: 1.45;
  }

  body.page-template-template-bahrainisation .bz-impact {
    padding: 26px 0;
  }
  body.page-template-template-bahrainisation .bz-impact .row {
    row-gap: 22px;
  }
  body.page-template-template-bahrainisation .bz-impact .row > .col {
    padding: 2px 12px;
  }
  body.page-template-template-bahrainisation .bz-impact-item {
    column-gap: 10px;
  }
  body.page-template-template-bahrainisation .bz-impact-icon,
  body.page-template-template-bahrainisation .bz-impact-icon .kg-svg-icon,
  body.page-template-template-bahrainisation .bz-impact-icon svg,
  body.page-template-template-bahrainisation .bz-impact-icon img {
    width: 42px !important;
    height: 42px !important;
  }
  body.page-template-template-bahrainisation .bz-impact-item h3 {
    font-size: 13px;
  }
  body.page-template-template-bahrainisation .bz-impact-item p {
    font-size: 12px;
  }
}

/* =========================================================================
   CSR — MOBILE & TABLET (template-csr.php, < 992px only; desktop
   untouched). Scoped to the template's body class; the approach and
   principles sections carry inline padding, hence the !important there.
   - Hero: copy on the left, photo on the right (full height, to the
     screen edge) fading in from the left.
   - Our Approach: grey band, centred heading, 2 x 2 cards.
   - Our Principles: centred heading with the tri-colour rule, then the
     items as an autoplaying slider showing 3 at a time (dots + loop from
     the template's script).
   - Quote: mark beside the copy, skyline faded in on the right.
   ========================================================================= */
@media (min-width: 992px) {
  body.page-template-template-csr .q-mc-wrap .kg-mc-dots {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-csr .csr-hero > .kg-container > .row {
    position: relative;
    min-height: 440px;
  }
  body.page-template-template-csr .csr-hero > .kg-container > .row > .col-12:first-child {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52%;
    max-width: 52%;
  }
  body.page-template-template-csr .csr-hero > .kg-container > .row > .col-12:last-child {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1.5rem;
    width: 58%;
    max-width: none;
    padding: 0;
    z-index: 1;
  }
  body.page-template-template-csr .csr-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    clip-path: none;
  }
  body.page-template-template-csr .csr-hero-media::after {
    z-index: 1;
    background: linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.85) 14%,
      rgba(255, 255, 255, 0.35) 30%,
      rgba(255, 255, 255, 0) 46%
    );
  }
  body.page-template-template-csr .csr-hero-copy {
    padding: 32px 0 36px;
    max-width: none;
  }
  body.page-template-template-csr .csr-hero-copy .eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--kg-red);
  }
  body.page-template-template-csr .csr-hero-copy .tri-dash {
    margin: 10px 0 24px;
  }
  body.page-template-template-csr .csr-hero-copy h1.unique {
    font-size: 42px !important;
    line-height: 1.15 !important;
    margin: 0;
  }
  body.page-template-template-csr .csr-hero-copy .hero-rule {
    width: 48px;
    height: 3px;
    margin: 18px 0 0;
  }
  body.page-template-template-csr .csr-hero-lead {
    font-size: 16px;
    line-height: 1.65;
    margin-top: 18px;
  }
  body.page-template-template-csr .csr-dots {
    display: none;
  }

  /* ----- shared: eyebrow + serif title + rule, centred ----- */
  body.page-template-template-csr .approach-heading-wrap .eyebrow,
  body.page-template-template-csr .principles-panel .eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--kg-red);
    margin-bottom: 8px;
  }
  body.page-template-template-csr .approach-heading-wrap .sec-title,
  body.page-template-template-csr .principles-panel .sec-title {
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.2;
    color: var(--kg-navy);
    margin: 0;
  }

  /* ----- our approach: 2 x 2 cards ----- */
  body.page-template-template-csr .csr-approach {
    padding: 36px 0 !important;
    background: #f6f5f2;
  }
  body.page-template-template-csr .approach-heading-wrap {
    max-width: 600px;
    margin: 0 auto 24px;
  }
  body.page-template-template-csr .approach-heading-wrap .hero-rule {
    width: 48px;
    height: 3px;
    margin: 14px auto 16px;
  }
  body.page-template-template-csr .approach-heading-wrap p:last-child {
    margin: 0;
  }
  body.page-template-template-csr .csr-approach .row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
  }
  body.page-template-template-csr .csr-approach .row > .col {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
  body.page-template-template-csr .approach-card-content {
    padding: 20px 14px 22px;
  }
  body.page-template-template-csr .ac-media {
    width: 96px;
    height: 96px;
    margin-bottom: 14px;
  }
  body.page-template-template-csr .ac-media svg {
    width: 44px;
    height: 44px;
  }
  body.page-template-template-csr .approach-card h3 {
    font-size: 15px;
    margin-bottom: 10px;
  }
  body.page-template-template-csr .ac-underline {
    margin-bottom: 12px;
  }
  body.page-template-template-csr .approach-card p {
    font-size: 14px;
    line-height: 1.55;
  }

  /* ----- our principles: centred heading + 3-up slider ----- */
  body.page-template-template-csr .csr-principles {
    padding: 32px 0 36px !important;
  }
  body.page-template-template-csr .principles-panel {
    padding: 0;
  }
  body.page-template-template-csr .principles-panel > .row {
    --bs-gutter-y: 22px;
  }
  body.page-template-template-csr .principles-panel > .row > .col-lg-3 {
    text-align: center;
  }
  body.page-template-template-csr .principles-panel > .row > .col-lg-3 .hero-rule {
    width: 132px;
    height: 3px;
    border-radius: 2px;
    background: none;
    background-image: linear-gradient(
      90deg,
      var(--kg-red) 0 30%,
      transparent 30% 35%,
      var(--kg-gold) 35% 65%,
      transparent 65% 70%,
      var(--kg-navy) 70% 100%
    );
    margin: 14px auto 16px;
  }
  body.page-template-template-csr .principles-panel > .row > .col-lg-3 p:last-child {
    font-size: 15px;
    line-height: 1.6;
    color: var(--kg-muted);
    max-width: 600px;
    margin: 0 auto;
  }
  body.page-template-template-csr .principles-copy {
    border-left: 0;
  }
  body.page-template-template-csr .q-mc-wrap {
    position: relative;
  }
  body.page-template-template-csr .q-mc-wrap [data-q-mc] {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.page-template-template-csr .q-mc-wrap [data-q-mc]::-webkit-scrollbar {
    display: none;
  }
  /* 3 per view */
  body.page-template-template-csr .q-mc-wrap [data-q-mc] > .col {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    max-width: none;
    padding: 0;
    scroll-snap-align: start;
    display: flex;
  }
  body.page-template-template-csr .principle-item {
    width: 100%;
    padding: 4px 12px;
    border-right: 1px solid #00000021 !important;
  }
  body.page-template-template-csr .principle-item svg,
  body.page-template-template-csr .principle-item .kg-svg-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 12px;
    display: block;
  }
  body.page-template-template-csr .principle-item .kg-svg-icon svg {
    margin: 0;
  }
  body.page-template-template-csr .principle-item h4 {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  body.page-template-template-csr .principle-item .pi-underline {
    margin-bottom: 10px;
  }
  body.page-template-template-csr .principle-item p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* ----- quote ----- */
  body.page-template-template-csr .csr-quote {
    padding: 0;
  }
  body.page-template-template-csr .csr-quote-panel {
    position: relative;
    border: 0;
    box-shadow: none;
  }
  body.page-template-template-csr .csr-quote-col-copy {
    position: relative;
    z-index: 1;
  }
  body.page-template-template-csr .csr-quote-col-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    z-index: 0;
    pointer-events: none;
  }
  body.page-template-template-csr .csr-quote-media {
    height: 100%;
    min-height: 0;
  }
  body.page-template-template-csr .csr-quote-media img {
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 0.5;
  }
  body.page-template-template-csr .csr-quote-media::after {
    background: linear-gradient(
      90deg,
      #fcfbf8 0%,
      rgba(252, 251, 248, 0.4) 40%,
      rgba(252, 251, 248, 0) 80%
    );
  }
  body.page-template-template-csr .csr-quote-copy {
    padding: 28px 24px 30px;
  }
  /* quote mark beside the heading, copy aligned under the heading */
  body.page-template-template-csr .csr-quote-copy-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    max-width: 72%;
    padding-left: 22px;
  }
  body.page-template-template-csr .csr-quote-mark {
    grid-column: 1;
    grid-row: 1;
    font-size: 48px;
    margin: 0;
  }
  body.page-template-template-csr .csr-quote-copy-inner > :not(.csr-quote-mark) {
    grid-column: 2;
  }
  body.page-template-template-csr .csr-quote h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.35;
  }
  body.page-template-template-csr .csr-quote .hero-rule {
    width: 120px;
    margin: 14px 0 12px;
  }
  body.page-template-template-csr .csr-quote-sub {
    font-size: 14px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body.page-template-template-csr .csr-hero > .kg-container > .row {
    min-height: 380px;
  }
  body.page-template-template-csr .csr-hero-copy {
    padding: 24px 0 28px;
  }
  body.page-template-template-csr .csr-hero-copy .eyebrow {
    font-size: 12px;
    letter-spacing: 2.5px;
  }
  body.page-template-template-csr .csr-hero-copy .tri-dash {
    margin: 8px 0 18px;
  }
  body.page-template-template-csr .csr-hero-copy .tri-dash span {
    width: 22px;
    height: 4px;
  }
  body.page-template-template-csr .csr-hero-copy h1.unique {
    font-size: 25px !important;
  }
  body.page-template-template-csr .csr-hero-copy .hero-rule {
    width: 40px;
    margin-top: 14px;
  }
  body.page-template-template-csr .csr-hero-lead {
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 14px;
  }

  body.page-template-template-csr .approach-heading-wrap .eyebrow,
  body.page-template-template-csr .principles-panel .eyebrow {
    font-size: 12px;
    letter-spacing: 2.5px;
  }
  body.page-template-template-csr .approach-heading-wrap .sec-title,
  body.page-template-template-csr .principles-panel .sec-title {
    font-size: 24px;
  }
  body.page-template-template-csr .approach-heading-wrap p:last-child,
  body.page-template-template-csr .principles-panel > .row > .col-lg-3 p:last-child {
    font-size: 13.5px;
  }

  body.page-template-template-csr .csr-approach {
    padding: 28px 0 !important;
  }
  body.page-template-template-csr .csr-approach .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
  }
  body.page-template-template-csr .approach-card-content {
    padding: 16px 8px 18px;
  }
  body.page-template-template-csr .ac-media {
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
  }
  body.page-template-template-csr .ac-media svg {
    width: 34px;
    height: 34px;
  }
  body.page-template-template-csr .approach-card h3 {
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  body.page-template-template-csr .ac-underline {
    margin-bottom: 10px;
  }
  body.page-template-template-csr .approach-card p {
    font-size: 12px;
  }

  body.page-template-template-csr .csr-principles {
    padding: 26px 0 30px !important;
  }
  body.page-template-template-csr .principles-panel > .row > .col-lg-3 .hero-rule {
    width: 110px;
  }
  body.page-template-template-csr .principle-item {
    padding: 2px 8px;
  }
  body.page-template-template-csr .principle-item svg,
  body.page-template-template-csr .principle-item .kg-svg-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 10px;
  }
  body.page-template-template-csr .principle-item h4 {
    font-size: 11px;
    letter-spacing: 0.4px;
  }
  body.page-template-template-csr .principle-item p {
    font-size: 11.5px;
  }

  body.page-template-template-csr .csr-quote-copy {
    padding: 22px 16px 24px;
  }
  body.page-template-template-csr .csr-quote-copy-inner {
    column-gap: 12px;
    max-width: 80%;
    padding-left: 18px;
  }
  body.page-template-template-csr .csr-quote-mark {
    font-size: 40px;
  }
  body.page-template-template-csr .csr-quote h2 {
    font-size: 17px;
  }
  body.page-template-template-csr .csr-quote .hero-rule {
    width: 100px;
    margin: 12px 0 10px;
  }
  body.page-template-template-csr .csr-quote-sub {
    font-size: 11.5px;
  }
}

/* =========================================================================
   SAND WASHING & DREDGING — MOBILE & TABLET (sand-washing-dredging.php,
   split hero, < 992px only; desktop untouched). Scoped to the .swd-hero
   / .swd-stats classes this template adds, so other company pages keep
   their own layout.
   - Hero: photo fills the hero; eyebrow / heading / rule / lead / button
     over it (soft white fade top-left); tags + photo badges hidden.
   - Stats bar: white rounded card overlapping the bottom of the photo —
     first 3 stats in a row (icon over number over label), the rest below
     a rule with the icon beside the text; dividers between.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .cs-hero.swd-hero {
    position: relative;
    overflow: hidden;
  }
  body .cs-hero.swd-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    position: relative;
  }
  body .cs-hero.swd-hero > div > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    /* the copy column's Bootstrap ps-5 is !important */
    padding: 0 !important;
  }
  body .cs-hero.swd-hero > div > .row > .col-12:last-child {
    position: absolute;
    inset: 0;
  }
  body .swd-hero .cs-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
  }
  body .swd-hero .cs-hero-media img,
  body .swd-hero .cs-hero-media video {
    object-position: 65% bottom;
  }
  /* white fade from the top: near-solid behind the whole copy (eyebrow →
     button, ~the top 60%), then quickly clear so the machine at the
     bottom stays visible */
  body .swd-hero .cs-hero-media::after {
    /* the shared company-page mobile rule hides this layer
       (.cs-hero-media::after { display: none }) — switch it back on */
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 48%,
      rgba(255, 255, 255, 0.7) 60%,
      rgba(255, 255, 255, 0.25) 72%,
      rgba(255, 255, 255, 0) 82%
    );
  }
  body .swd-hero .cs-hero-badges,
  body .swd-hero .cs-hero-tags {
    display: none !important;
  }
  body .swd-hero .cs-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 600px;
    /* bottom space = the photo below the button + the card overlap */
    padding: 56px 32px 280px !important;
  }
  body .swd-hero .cs-hero-copy .eyebrow {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin-bottom: 14px;
  }
  body .swd-hero .cs-hero-copy h1.unique {
    font-size: 64px !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
    margin: 0;
  }
  body .swd-hero .cs-hero-copy .hero-rule {
    width: 64px;
    height: 4px;
    background: var(--kg-gold);
    margin: 22px 0 0;
  }
  body .swd-hero .cs-hero-subheading {
    margin-top: 18px;
  }
  body .swd-hero .cs-hero-lead {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--kg-navy);
    margin-top: 20px;
  }
  body .swd-hero .cs-hero-actions {
    margin-top: 26px;
  }
  body .swd-hero .cs-hero-actions .btn-red {
    padding: 15px 44px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 8px;
  }

  /* ----- stats bar: card over the bottom of the photo ----- */
  body .cs-stats-bar-wrap.swd-stats {
    position: relative;
    z-index: 3;
    margin-top: -90px;
    margin-bottom: 0;
    transform: none;
  }
  body .swd-stats .cs-stats-bar {
    position: relative;
    inset: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 24px 16px;
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 20px 44px -26px rgba(20, 41, 77, 0.45);
    overflow: visible;
  }
  body .swd-stats .cs-stats-bar::before,
  body .swd-stats .cs-stats-bar::after,
  body .swd-stats .cs-stat::before,
  body .swd-stats .cs-stat::after {
    display: none;
  }
  /* first row: 3 across, icon over number over label */
  body .swd-stats .cs-stat {
    grid-column: span 2;
    min-width: 0;
    width: auto;
    flex: none;
    margin: 0;
    padding: 4px 10px;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
  }
  body .swd-stats .cs-stat > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    min-width: 0;
  }
  /* second row: 2 across, icon beside the text, rule above */
  body .swd-stats .cs-stat:nth-child(n + 4) {
    grid-column: span 3;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--kg-line);
  }
  body .swd-stats .cs-stat:nth-child(n + 4) > span:last-child {
    align-items: flex-start;
  }
  /* dividers between neighbours in each row */
  body .swd-stats .cs-stat:nth-child(1),
  body .swd-stats .cs-stat:nth-child(2),
  body .swd-stats .cs-stat:nth-child(4) {
    border-right: 1px solid var(--kg-line);
  }
  body .swd-stats .cs-stat:nth-child(4):last-child {
    border-right: 0;
  }
  body .swd-stats .cs-stat-icon {
    flex: 0 0 auto;
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  body .swd-stats .cs-stat-icon .kg-svg-icon,
  body .swd-stats .cs-stat-icon svg,
  body .swd-stats .cs-stat-icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    display: block;
  }
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon .kg-svg-icon,
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon svg,
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon img {
    width: 48px !important;
    height: 48px !important;
  }
  body .swd-stats .cs-stat-num {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kg-navy);
  }
  body .swd-stats .cs-stat-label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: #5b6478;
    margin-top: 4px;
  }
}

/* mobile */
@media (max-width: 767.98px) {
  body .swd-hero .cs-hero-copy {
    padding: 40px 20px 200px !important;
  }
  body .swd-hero .cs-hero-copy .eyebrow {
    font-size: 12px;
    letter-spacing: 1.6px;
    margin-bottom: 10px;
  }
  body .swd-hero .cs-hero-copy h1.unique {
    font-size: 40px !important;
  }
  body .swd-hero .cs-hero-copy .hero-rule {
    width: 48px;
    height: 3px;
    margin-top: 16px;
  }
  body .swd-hero .cs-hero-lead {
    max-width: 330px;
    font-size: 14.5px;
    margin-top: 16px;
  }
  body .swd-hero .cs-hero-actions {
    margin-top: 20px;
  }
  body .swd-hero .cs-hero-actions .btn-red {
    padding: 12px 34px;
    font-size: 13px;
  }

  body .cs-stats-bar-wrap.swd-stats {
    margin-top: -64px;
  }
  body .swd-stats .cs-stats-bar {
    padding: 18px 8px;
    border-radius: 18px;
  }
  body .swd-stats .cs-stat {
    padding: 2px 6px;
    gap: 6px;
  }
  body .swd-stats .cs-stat:nth-child(n + 4) {
    gap: 12px;
    margin-top: 14px;
    padding-top: 16px;
  }
  body .swd-stats .cs-stat-icon .kg-svg-icon,
  body .swd-stats .cs-stat-icon svg,
  body .swd-stats .cs-stat-icon img {
    width: 30px !important;
    height: 30px !important;
  }
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon .kg-svg-icon,
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon svg,
  body .swd-stats .cs-stat:nth-child(n + 4) .cs-stat-icon img {
    width: 34px !important;
    height: 34px !important;
  }
  body .swd-stats .cs-stat-num {
    font-size: 20px;
  }
  body .swd-stats .cs-stat-label {
    font-size: 11.5px;
  }
}

/* -------------------------------------------------------------------------
   SAND WASHING & DREDGING — Our Operations (< 992px only): stepper of
   round icons joined by dotted lines, then one card at a time (number,
   serif title, text, Learn More) as a swipe slider with dots. Stepper /
   dots / autoplay come from the template's script; no card image.
   ------------------------------------------------------------------------- */
.swd-ops-steps,
.swd-ops-dots {
  display: none;
}
@media (max-width: 991.98px) {
  body .swd-ops {
    padding: 40px 0;
  }
  body .swd-ops .cs-center-title {
    margin-bottom: 26px;
  }

  /* stepper */
  body .swd-ops .swd-ops-steps {
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    margin: 0 0 24px;
  }
  body .swd-ops .swd-ops-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--kg-navy);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  /* dotted connector to the previous step */
  body .swd-ops .swd-ops-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(-50% + 40px);
    right: calc(50% + 40px);
    border-top: 2px dotted #c3c8d2;
  }
  body .swd-ops .swd-ops-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    box-shadow: 0 8px 18px -12px rgba(20, 41, 77, 0.4);
    color: var(--kg-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  body .swd-ops .swd-ops-step.is-active .swd-ops-step-icon {
    background: var(--kg-red);
    border-color: var(--kg-red);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(216, 31, 38, 0.12);
  }
  body .swd-ops .swd-ops-step-icon .kg-svg-icon,
  body .swd-ops .swd-ops-step-icon svg,
  body .swd-ops .swd-ops-step-icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    display: block;
    color: inherit !important;
  }
  /* one colour per state (icons come in per-operation colours): recolour
     the visible shapes only, never mask / clipPath / defs */
  body .swd-ops .swd-ops-step-icon svg[stroke]:not([stroke="none"]),
  body .swd-ops .swd-ops-step-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
  }
  body .swd-ops .swd-ops-step-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: currentColor !important;
  }
  /* outline icons whose stroke came from a .cs-operation-icon CSS rule
     (not an attribute) would draw nothing once copied: give them one */
  body .swd-ops .swd-ops-step-icon svg[fill="none"]:not([stroke]) {
    stroke: currentColor;
    stroke-width: 1.7;
  }
  body .swd-ops .swd-ops-step-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .swd-ops .swd-ops-step.is-active .swd-ops-step-label {
    color: var(--kg-red);
  }

  /* cards: one at a time */
  body .swd-ops [data-swd-ops] {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    counter-reset: swd-op;
  }
  body .swd-ops [data-swd-ops]::-webkit-scrollbar {
    display: none;
  }
  body .swd-ops [data-swd-ops] > .col {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    padding: 2px 2px 18px;
    scroll-snap-align: start;
    display: flex;
    counter-increment: swd-op;
  }
  body .swd-ops .cs-operation-card {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--kg-line);
    border-radius: 16px;
    box-shadow: 0 16px 34px -26px rgba(20, 41, 77, 0.5);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body .swd-ops .cs-operation-card::after {
    display: none;
  }
  /* "01", "02", … */
  body .swd-ops .cs-operation-card::before {
    content: counter(swd-op, decimal-leading-zero);
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--kg-red);
    margin: 0 0 8px;
  }
  /* the icon is in the stepper; no image/icon in the card */
  body .swd-ops .cs-operation-icon {
    display: none !important;
  }
  body .swd-ops .cs-operation-title {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kg-navy);
    text-align: left;
    margin: 0 0 12px;
  }
  body .swd-ops .cs-operation-text {
    font-size: 15px;
    line-height: 1.65;
    color: #5b6478;
    text-align: left;
    margin: 0 0 18px;
  }
  body .swd-ops .cs-operation-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
  }
  body .swd-ops .cs-operation-link svg {
    width: 20px;
    height: 20px;
  }
  body .swd-ops .swd-ops-dots {
    display: flex;
    margin-top: 2px;
  }
}

@media (max-width: 767.98px) {
  body .swd-ops {
    padding: 30px 0;
  }
  body .swd-ops .cs-center-title {
    margin-bottom: 20px;
  }
  body .swd-ops .swd-ops-steps {
    margin-bottom: 18px;
  }
  body .swd-ops .swd-ops-step {
    gap: 8px;
    padding: 0 2px;
  }
  body .swd-ops .swd-ops-step:not(:first-child)::before {
    top: 25px;
    left: calc(-50% + 32px);
    right: calc(50% + 32px);
  }
  body .swd-ops .swd-ops-step-icon {
    width: 50px;
    height: 50px;
  }
  body .swd-ops .swd-ops-step-icon .kg-svg-icon,
  body .swd-ops .swd-ops-step-icon svg,
  body .swd-ops .swd-ops-step-icon img {
    width: 24px !important;
    height: 24px !important;
  }
  body .swd-ops .swd-ops-step-label {
    font-size: 10px;
    letter-spacing: 0.2px;
  }
  body .swd-ops .cs-operation-card {
    padding: 20px 18px;
    border-radius: 14px;
  }
  body .swd-ops .cs-operation-card::before {
    font-size: 13px;
    margin-bottom: 6px;
  }
  body .swd-ops .cs-operation-title {
    font-size: 21px;
    margin-bottom: 10px;
  }
  body .swd-ops .cs-operation-text {
    font-size: 13.5px;
    margin-bottom: 14px;
  }
  body .swd-ops .cs-operation-link {
    font-size: 13px;
  }
}

.swd-q-panel {
  display: none;
}
/* -------------------------------------------------------------------------
   SAND WASHING & DREDGING — Our Process + Quality Assurance (< 992px
   only; scoped to the .swd-process / .swd-quality classes the template
   adds, since cs-process3 / cs-quality3 are shared).
   - Process: soft sky band; serif eyebrow + title centred; the steps in
     one row — white round icon, serif uppercase label — with chevrons
     between (the step text is hidden).
   - Quality: eyebrow, then title + text beside the red-ruled highlight
     box; the tiles as a row of icon tabs + a detail panel with arrows
     (script in the template); the photo full width below, fading in from
     white at the top.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* ----- our process ----- */
  body .swd-process {
    padding: 40px 0 44px;
    background: linear-gradient(180deg, #e3eff9 0%, #eef5fb 45%, #fbfcfe 100%);
    border-bottom: 1px solid var(--kg-line);
  }
  body .swd-process .cs-process3-eyebrow {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--kg-red);
    text-align: center;
    margin: 0 auto 10px;
  }
  body .swd-process .sec-title {
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    margin: 0 auto 30px;
  }
  /* steps scroll sideways with a visible scrollbar */
  body .swd-process .cs-process3-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 6px 2px 18px; /* room for the circle shadows + the bar */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--kg-red) #dfe5ee;
  }
  body .swd-process .cs-process3-track::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  body .swd-process .cs-process3-track::-webkit-scrollbar-track {
    background: #dfe5ee;
    border-radius: 3px;
  }
  body .swd-process .cs-process3-track::-webkit-scrollbar-thumb {
    background: var(--kg-red);
    border-radius: 3px;
  }
  body .swd-process .cs-process3-track::before,
  body .swd-process .cs-process3-track::after {
    display: none;
  }
  body .swd-process .cs-process3-step {
    flex: 0 0 136px; /* fixed width: the row scrolls instead of squeezing */
    min-width: 0;
    width: 136px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  body .swd-process .cs-process3-step::before,
  body .swd-process .cs-process3-step::after {
    display: none;
  }
  body .swd-process .cs-process3-circle {
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 26px -14px rgba(20, 41, 77, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body .swd-process .cs-process3-circle::before,
  body .swd-process .cs-process3-circle::after {
    display: none;
  }
  body .swd-process .cs-process3-circle .kg-svg-icon,
  body .swd-process .cs-process3-circle svg,
  body .swd-process .cs-process3-circle img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    display: block;
  }
  body .swd-process .cs-process3-title {
    display: block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .swd-process .cs-process3-text {
    display: none;
  }
  /* the dot between steps becomes a grey "›" chevron, centred on the
     circles (84px circle: 42px centre - 8px half chevron) */
  body .swd-process .cs-process3-dot {
    display: block !important;
    flex: 0 0 16px;
    align-self: flex-start;
    width: 16px;
    height: 16px;
    margin: 34px 4px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body .swd-process .cs-process3-dot::before,
  body .swd-process .cs-process3-dot::after {
    display: none;
  }

  /* ----- quality assurance ----- */
  body .swd-quality {
    padding: 36px 0 0;
    background: #fff;
    overflow: hidden;
  }
  body .swd-quality > .kg-container > .row {
    --bs-gutter-y: 28px;
  }
  /* copy column: eyebrow, title, text (the highlight box is desktop-only,
     hidden via d-none d-lg-block in the template) */
  body .swd-quality > .kg-container > .row > .col-lg-3:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "text"
      "box";
    column-gap: 0;
    align-items: start;
  }
  body .swd-quality .eyebrow {
    grid-area: eyebrow;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin: 0 0 18px;
  }
  body .swd-quality .sec-title {
    grid-area: title;
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--kg-navy);
    margin: 0 0 14px;
  }
  body .swd-quality .cs-quality3-text {
    grid-area: text;
    font-size: 17px;
    line-height: 1.6;
    color: #5b6478;
    margin: 0;
  }
  body .swd-quality .cs-quality-highlight {
    grid-area: box;
    align-self: start;
    margin: 0;
    padding: 22px 20px;
    background: #f6f6f7;
    border: 0;
    border-left: 3px solid var(--kg-red);
    border-radius: 6px;
    box-shadow: none;
  }
  body .swd-quality .cs-quality-highlight::before,
  body .swd-quality .cs-quality-highlight::after {
    display: none;
  }
  body .swd-quality .cs-quality-highlight p {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.75;
    color: #3c465f;
    margin: 0;
  }
  body .swd-quality .cs-quality-highlight p + p {
    margin-top: 8px;
  }
  /* tiles become a row of icon tabs (sideways scroll if they don't fit);
     the selected one is tinted, its details show in the panel below */
  body .swd-quality .col-lg-6 > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body .swd-quality .col-lg-6 > .row::-webkit-scrollbar {
    display: none;
  }
  body .swd-quality .col-lg-6 > .row > .col {
    flex: 1 0 0;
    min-width: 110px;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    border: 0;
    display: flex;
  }
  body .swd-quality .cs-quality-tile {
    width: 100%;
    margin: 0;
    padding: 16px 8px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    box-shadow: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    -webkit-tap-highlight-color: transparent;
  }
  body .swd-quality .cs-quality-tile::before,
  body .swd-quality .cs-quality-tile::after {
    display: none;
  }
  body .swd-quality .cs-quality-tile.is-active {
    background: #fdecec;
    border-color: #f8d7d6;
  }
  body .swd-quality .cs-quality-tile > .kg-svg-icon,
  body .swd-quality .cs-quality-tile > svg,
  body .swd-quality .cs-quality-tile > img,
  body .swd-quality .cs-quality-tile > .kg-svg-icon svg {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
    display: block;
    margin: 0;
  }
  body .swd-quality .cs-quality-tile h4 {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0;
  }
  body .swd-quality .cs-quality-tile.is-active h4 {
    color: var(--kg-red);
  }
  body .swd-quality .cs-quality-tile p {
    display: none;
  }
  /* detail panel: icon in a white tile | title + text, arrows bottom-right */
  body .swd-quality .swd-q-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "nav  nav";
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
    padding: 22px 22px 18px;
    border: 1px solid #f8d7d6;
    border-radius: 14px;
    background: #fdf1f1;
  }
  body .swd-quality .swd-q-panel-icon {
    grid-area: icon;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px -12px rgba(216, 31, 38, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body .swd-quality .swd-q-panel-icon .kg-svg-icon,
  body .swd-quality .swd-q-panel-icon svg,
  body .swd-quality .swd-q-panel-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    display: block;
    margin: 0;
  }
  body .swd-quality .swd-q-panel-copy {
    grid-area: copy;
    min-width: 0;
  }
  body .swd-quality .swd-q-panel-copy h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin: 4px 0 6px;
  }
  body .swd-quality .swd-q-panel-copy p {
    font-size: 15px;
    line-height: 1.55;
    color: #5b6478;
    margin: 0;
  }
  body .swd-quality .swd-q-panel-nav {
    grid-area: nav;
    justify-self: end;
    display: flex;
    gap: 10px;
  }
  body .swd-quality .swd-q-panel-nav button {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 6px 14px -8px rgba(20, 41, 77, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* photo: full width at the bottom, fading in from white */
  body .swd-quality > .kg-container > .row > .col-lg-3:last-child:not(:first-child) {
    padding: 0;
  }
  body .swd-quality .cs-quality-media {
    position: relative;
    height: 320px !important;
    /* to the screen edges: container padding (1.5rem) minus the row's
       negative gutter margin the column already sits in */
    margin: 0 calc(-1.5rem + var(--bs-gutter-x, 1.5rem) * 0.5);
    border-radius: 0 !important;
    overflow: hidden;
  }
  body .swd-quality .cs-quality-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }
  body .swd-quality .cs-quality-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.6) 14%,
      rgba(255, 255, 255, 0) 36%
    );
  }
}

@media (max-width: 767.98px) {
  body .swd-process {
    padding: 40px 0 44px;
  }
  body .swd-process .cs-process3-eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 10px;
  }
  body .swd-process .sec-title {
    font-size: 30px;
    margin-bottom: 30px;
  }
  body .swd-process .cs-process3-step {
    flex-basis: 100px;
    width: 100px;
    gap: 12px;
  }
  body .swd-process .cs-process3-circle {
    width: 54px;
    height: 54px;
  }
  body .swd-process .cs-process3-circle .kg-svg-icon,
  body .swd-process .cs-process3-circle svg,
  body .swd-process .cs-process3-circle img {
    width: 28px !important;
    height: 28px !important;
  }
  body .swd-process .cs-process3-title {
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.1px;
  }
  /* 54px circle: 27px centre - 6px half chevron */
  body .swd-process .cs-process3-dot {
    flex-basis: 12px;
    width: 12px;
    height: 12px;
    margin: 21px 2px 0;
  }

  body .swd-quality {
    padding-top: 40px;
  }
  body .swd-quality > .kg-container > .row {
    --bs-gutter-y: 36px;
  }
  /* stacked: eyebrow, title, text, then the highlight box */
  body .swd-quality > .kg-container > .row > .col-lg-3:first-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "text"
      "box";
    grid-template-rows: auto;
    column-gap: 0;
  }
  body .swd-quality .eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 14px;
  }
  body .swd-quality .sec-title {
    font-size: 32px;
    margin-bottom: 14px;
  }
  body .swd-quality .cs-quality3-text {
    font-size: 15px;
    line-height: 1.65;
  }
  body .swd-quality .cs-quality-highlight {
    margin-top: 24px;
    padding: 18px 18px;
  }
  body .swd-quality .cs-quality-highlight p {
    font-size: 15px;
    line-height: 1.7;
  }
  body .swd-quality .col-lg-6 > .row {
    gap: 8px;
    margin-bottom: 14px;
  }
  /* ~3.5 tabs per view so long labels stay readable; swipe for the rest */
  body .swd-quality .col-lg-6 > .row > .col {
    flex: 0 0 calc((100% - 24px) / 3.5);
    min-width: 0;
  }
  body .swd-quality .cs-quality-tile {
    padding: 14px 6px 12px;
    gap: 8px;
  }
  body .swd-quality .cs-quality-tile > .kg-svg-icon,
  body .swd-quality .cs-quality-tile > svg,
  body .swd-quality .cs-quality-tile > img,
  body .swd-quality .cs-quality-tile > .kg-svg-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body .swd-quality .cs-quality-tile h4 {
    font-size: 10.5px;
    letter-spacing: 0.2px;
  }
  body .swd-quality .swd-q-panel {
    column-gap: 14px;
    padding: 18px 16px 14px;
  }
  body .swd-quality .swd-q-panel-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
  body .swd-quality .swd-q-panel-icon .kg-svg-icon,
  body .swd-quality .swd-q-panel-icon svg,
  body .swd-quality .swd-q-panel-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body .swd-quality .swd-q-panel-copy h4 {
    font-size: 14px;
  }
  body .swd-quality .swd-q-panel-copy p {
    font-size: 13.5px;
  }
  body .swd-quality .swd-q-panel-nav button {
    width: 34px;
    height: 34px;
  }
  body .swd-quality .cs-quality-media {
    height: 240px !important;
  }
}

/* -------------------------------------------------------------------------
   SAND WASHING & DREDGING — Why Choose Us (< 992px only; .swd-why):
   the Quality photo full width with the Why Choose Us items (icon +
   title) in a white card over its bottom edge (.swd-why-media, d-lg-none
   in the template); the item grid is hidden then (.swd-why-has-card), or
   shown as a row of 4 with dividers when there's no photo. The same
   photo at the bottom of Quality Assurance is hidden here so it doesn't
   show twice.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body .swd-quality {
    padding-bottom: 36px;
  }
  body .swd-quality > .kg-container > .row > .col-lg-3:last-child:not(:first-child) {
    display: none;
  }

  body .swd-why {
    padding: 36px 0 0;
    background: #fff;
    overflow: hidden;
  }
  body .swd-why .cs-center-title {
    margin-bottom: 26px;
  }
  /* the items grid is desktop-only (d-none d-lg-grid in the template);
     on mobile/tablet the items show in the card over the photo */
  body .cs-why.swd-why .cs-why-grid {
    display: none !important;
  }
  /* no heading on mobile/tablet either: just the photo + card */
  body .cs-why.swd-why .cs-center-title {
    display: none !important;
  }
  body .cs-why.swd-why {
    padding-top: 0;
  }
  /* the background photo runs the full screen width, edge to edge,
     whatever the container's width / padding (the section's
     overflow:hidden stops any sideways scroll) */
  body .cs-why.swd-why .swd-why-media {
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    border-radius: 0;
  }
  body .cs-why.swd-why .swd-why-media > img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body .swd-why .sec-title {
    font-family: var(--serif);
  }
  /* .cs-why.swd-why: out-ranks the desktop .postid-22/25 .cs-why
     .cs-why-grid 5-column rule */
  body .cs-why.swd-why .cs-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    row-gap: 28px;
  }
  body .swd-why .cs-why-grid .cs-why-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0 16px;
    background: none;
    border: 0;
    border-right: 1px solid var(--kg-line);
    text-align: left;
  }
  body .swd-why .cs-why-grid .cs-why-card:nth-child(4n + 1) {
    padding-left: 0;
  }
  body .swd-why .cs-why-grid .cs-why-card:nth-child(4n),
  body .swd-why .cs-why-grid .cs-why-card:last-child {
    padding-right: 0;
    border-right: 0;
  }
  body .swd-why .cs-why-card > span:first-child {
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    background: none !important;
    border-radius: 0;
  }
  body .swd-why .cs-why-card > span:first-child .kg-svg-icon,
  body .swd-why .cs-why-card > span:first-child svg,
  body .swd-why .cs-why-card > span:first-child img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    display: block;
  }
  body .swd-why .cs-why-card h3 {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kg-navy);
    margin: 0 0 8px !important;
  }
  body .swd-why .cs-why-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #5b6478;
    margin: 0;
  }

  /* photo + stats card over its bottom edge */
  body .swd-why .swd-why-media {
    position: relative;
    height: 380px;
    margin: 32px -1.5rem 0;
    overflow: hidden;
  }
  body .swd-why .swd-why-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }
  /* fade in from white at the top */
  body .swd-why .swd-why-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.6) 14%,
      rgba(255, 255, 255, 0) 36%
    );
  }
  body .swd-why .swd-why-stats {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 22px;
    z-index: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 18px 8px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px -22px rgba(20, 41, 77, 0.5);
  }
  body .swd-why .swd-why-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
  }
  body .swd-why .swd-why-stat:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  body .swd-why .swd-why-stat-icon {
    display: flex;
    margin-bottom: 4px;
  }
  body .swd-why .swd-why-stat-icon .kg-svg-icon,
  body .swd-why .swd-why-stat-icon svg,
  body .swd-why .swd-why-stat-icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    display: block;
  }
  body .swd-why .swd-why-stat-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kg-navy);
  }
}

@media (max-width: 767.98px) {
  body .swd-quality {
    padding-bottom: 28px;
  }
  body .swd-why {
    padding-top: 28px;
  }
  body .swd-why .cs-center-title {
    margin-bottom: 20px;
  }
  body .swd-why .cs-why-grid .cs-why-card {
    gap: 10px;
    padding: 0 8px;
  }
  body .swd-why .cs-why-card > span:first-child .kg-svg-icon,
  body .swd-why .cs-why-card > span:first-child svg,
  body .swd-why .cs-why-card > span:first-child img {
    width: 30px !important;
    height: 30px !important;
  }
  body .swd-why .cs-why-card h3 {
    font-size: 12.5px;
    margin-bottom: 6px !important;
  }
  body .swd-why .cs-why-card p {
    font-size: 10.5px;
    line-height: 1.5;
  }
  body .swd-why .swd-why-media {
    height: 270px;
    margin-top: 24px;
  }
  body .swd-why .swd-why-stats {
    left: 14px;
    right: 14px;
    bottom: 16px;
    padding: 14px 4px;
    border-radius: 14px;
  }
  body .swd-why .swd-why-stat {
    padding: 0 3px;
    gap: 2px;
  }
  body .swd-why .swd-why-stat-icon .kg-svg-icon,
  body .swd-why .swd-why-stat-icon svg,
  body .swd-why .swd-why-stat-icon img {
    width: 22px !important;
    height: 22px !important;
  }
  body .swd-why .swd-why-stat-label {
    font-size: 10.5px;
  }
}

@keyframes swdOpInNext {
  from { opacity: 0.35; transform: translateX(36px); }
  to { opacity: 1; transform: none; }
}
@keyframes swdOpInPrev {
  from { opacity: 0.35; transform: translateX(-36px); }
  to { opacity: 1; transform: none; }
}
@keyframes swdOpNudge {
  0%, 100% { transform: none; }
  30% { transform: translateX(-10px); }
  65% { transform: translateX(6px); }
}
/* "Swipe to explore" hint under the Next button — touch screens below
   992px only (where the swipe works). It lives on the footer, not in the
   steps grid: an extra grid item there splits the steps onto 2 rows. */
@media (max-width: 991.98px) and (hover: none) {
  body .swd-op-modal .cs-op-footer::after {
    content: "\2039\00a0\00a0Swipe to explore\00a0\00a0\203A";
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #8a93a6;
  }
}
/* !important: the animation rules come later in the file */
@media (prefers-reduced-motion: reduce) {
  body .swd-op-modal .cs-op-modal-body.swd-op-in-next,
  body .swd-op-modal .cs-op-modal-body.swd-op-in-prev,
  body .swd-op-modal .cs-op-modal-body.swd-op-nudge {
    animation: none !important;
  }
}
/* -------------------------------------------------------------------------
   SAND WASHING & DREDGING — Operation detail modal (< 992px only;
   .swd-op-modal): rounded video/photo on top with a round white close
   button over it; "01 / 04" (current number red), serif title, red
   spaced subtitle, text; Key Highlights as icon-in-pink-circle rows;
   numbered stepper joined by dashed lines; full-width red Next button.
   The highlight rows / active step come from operation-modal.js, so they
   are styled by structure (direct children) rather than class names.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body .swd-op-modal .modal-dialog {
    max-width: none;
    margin: 12px;
    min-height: calc(100% - 24px);
  }
  body .swd-op-modal .cs-op-modal-content {
    position: relative;
    padding: 14px;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px -24px rgba(20, 41, 77, 0.5);
    overflow: hidden;
  }
  body .swd-op-modal .cs-op-modal-body {
    padding: 0;
  }
  body .swd-op-modal .cs-op-modal-body > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
  }
  body .swd-op-modal .cs-op-modal-body > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    padding: 0;
    border: 0;
  }

  /* close: round white button over the photo */
  body .swd-op-modal .cs-op-modal-close {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    background-size: 14px;
    opacity: 1;
    box-shadow: 0 6px 16px -6px rgba(20, 41, 77, 0.5);
  }

  /* media */
  body .swd-op-modal .cs-op-media {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    background: #e9edf3;
  }
  body .swd-op-modal .cs-op-video-wrap,
  body .swd-op-modal .cs-op-video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  body .swd-op-modal .cs-op-video-wrap video,
  body .swd-op-modal .cs-op-video-embed iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    display: block;
  }
  body .swd-op-modal .cs-op-media-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }

  /* main copy */
  body .swd-op-modal .cs-op-main {
    padding: 20px 8px 0 !important;
  }
  body .swd-op-modal .cs-op-count {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #8a93a6;
    margin: 0 0 6px;
  }
  body .swd-op-modal .swd-op-count-cur {
    color: var(--kg-red);
    font-weight: 700;
  }
  body .swd-op-modal .cs-op-title {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--kg-navy);
    margin: 0 0 8px;
  }
  body .swd-op-modal .cs-op-subtitle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin: 0 0 14px;
  }
  body .swd-op-modal .cs-op-text {
    font-size: 16px;
    line-height: 1.65;
    color: #5b6478;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kg-line);
    max-height: none;
    overflow: visible;
  }
  body .swd-op-modal .cs-op-text p {
    margin: 0 0 10px;
  }
  body .swd-op-modal .cs-op-text p:last-child {
    margin-bottom: 0;
  }

  /* key highlights */
  body .swd-op-modal .cs-op-highlights {
    padding: 18px 8px 16px !important;
    border-bottom: 1px solid var(--kg-line) !important;
    background: none;
  }
  body .swd-op-modal .cs-op-highlights-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin: 0 0 12px;
  }
  body .swd-op-modal #kgOperationModalHighlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body .swd-op-modal #kgOperationModalHighlights > * {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--kg-navy);
  }
  /* the icon (first child of each row) in a pink circle */
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fdecec;
    color: var(--kg-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child svg,
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child img {
    width: 24px !important;
    height: 24px !important;
    display: block;
  }
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child .kg-svg-icon {
    width: auto !important;
    height: auto !important;
    background: none;
  }

  /* footer: numbered stepper + Next */
  body .swd-op-modal .cs-op-footer {
    display: block;
    margin: 0;
    padding: 20px 4px 2px;
    border: 0;
    background: none;
  }
  body .swd-op-modal .cs-op-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
  }
  body .swd-op-modal .cs-op-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  body .swd-op-modal .cs-op-step::after {
    display: none;
  }
  /* dashed connector to the previous step */
  body .swd-op-modal .cs-op-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 23px;
    left: calc(-50% + 34px);
    right: calc(50% + 34px);
    border-top: 2px dashed #cfd4dd;
    background: none;
    width: auto;
    height: 0;
  }
  body .swd-op-modal .cs-op-step-num {
    width: 48px;
    height: 48px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f5;
    color: var(--kg-navy);
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
  }
  body .swd-op-modal .cs-op-step-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  body .swd-op-modal .cs-op-step-copy strong {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .swd-op-modal .cs-op-step-copy span {
    font-size: 12.5px;
    line-height: 1.35;
    color: #7b8396;
  }
  /* active step (class set by operation-modal.js) */
  body .swd-op-modal .cs-op-step:is(.active, .is-active, [aria-current="step"], [aria-selected="true"]) .cs-op-step-num {
    background: var(--kg-red);
    color: #fff;
  }
  body .swd-op-modal .cs-op-step:is(.active, .is-active, [aria-current="step"], [aria-selected="true"]) .cs-op-step-copy strong {
    color: var(--kg-red);
  }
  /* swipe feedback (classes set by the template's swipe script) */
  body .swd-op-modal .cs-op-modal-body.swd-op-in-next {
    animation: swdOpInNext 0.32s ease-out;
  }
  body .swd-op-modal .cs-op-modal-body.swd-op-in-prev {
    animation: swdOpInPrev 0.32s ease-out;
  }
  body .swd-op-modal .cs-op-modal-body.swd-op-nudge {
    animation: swdOpNudge 0.3s ease-in-out;
  }
  body .swd-op-modal .cs-op-next {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 17px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--kg-red);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
}

@media (max-width: 767.98px) {
  body .swd-op-modal .modal-dialog {
    margin: 10px;
    min-height: calc(100% - 20px);
  }
  body .swd-op-modal .cs-op-modal-content {
    padding: 12px;
    border-radius: 20px;
  }
  body .swd-op-modal .cs-op-modal-close {
    top: 22px;
    right: 22px;
    width: 38px;
    height: 38px;
    background-size: 12px;
  }
  body .swd-op-modal .cs-op-main {
    padding: 16px 6px 0 !important;
  }
  body .swd-op-modal .cs-op-count {
    font-size: 13px;
  }
  body .swd-op-modal .cs-op-title {
    font-size: 27px;
  }
  body .swd-op-modal .cs-op-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
  }
  body .swd-op-modal .cs-op-text {
    font-size: 14px;
    padding-bottom: 16px;
  }
  body .swd-op-modal .cs-op-highlights {
    padding: 16px 6px 14px !important;
  }
  body .swd-op-modal .cs-op-highlights-label {
    font-size: 12.5px;
    margin-bottom: 10px;
  }
  body .swd-op-modal #kgOperationModalHighlights > * {
    gap: 14px;
    font-size: 13.5px;
  }
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child {
    width: 40px;
    height: 40px;
  }
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child svg,
  body .swd-op-modal #kgOperationModalHighlights > * > :first-child img {
    width: 20px !important;
    height: 20px !important;
  }
  body .swd-op-modal .cs-op-footer {
    padding-top: 16px;
  }
  body .swd-op-modal .cs-op-steps {
    margin-bottom: 16px;
  }
  body .swd-op-modal .cs-op-step {
    gap: 8px;
    padding: 0 2px;
  }
  body .swd-op-modal .cs-op-step:not(:first-child)::before {
    top: 18px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);
  }
  body .swd-op-modal .cs-op-step-num {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  body .swd-op-modal .cs-op-step-copy {
    gap: 4px;
  }
  body .swd-op-modal .cs-op-step-copy strong {
    font-size: 10.5px;
  }
  body .swd-op-modal .cs-op-step-copy span {
    font-size: 9.5px;
  }
  body .swd-op-modal .cs-op-next {
    padding: 14px 16px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* =========================================================================
   KINGDOM ASPHALT — MOBILE & TABLET (kingdomasphalt.php, < 992px only;
   desktop untouched). Scoped to the ka-* classes the template adds.
   Use Cases / Products / Quality / Technical Resources are hidden on
   mobile in the template (d-none d-lg-block) as they're not in the
   mobile design.
   - Hero: copy on the left, photo on the right fading in from the left
     (and out to white at the bottom); rule, tags and badges hidden.
   - Stats: one white card of 5 (icon / number / label) over the hero.
   - Projects: centred eyebrow + uppercase two-tone title, cards as a
     swipe strip with round side arrows and dots (template script).
   - Capabilities: serif title left with a gold rule; dark tiles with a
     red round icon and white label (6 across on tablet, 3 on phones).
   - Why Choose: same title style; the items in one row — coloured round
     icon over an uppercase label, dividers between (text hidden).
   - CTA: white card, heading / text / button left, photo right.
   ========================================================================= */
.ka-proj-arrow,
.ka-proj-dots {
  display: none;
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .cs-hero.ka-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
  }
  body .ka-hero > .kg-container > .row {
    position: relative;
    min-height: 440px;
    margin: 0;
  }
  body .ka-hero > .kg-container > .row > .col-lg-4 {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 56%;
    max-width: 56%;
    padding: 0;
  }
  body .ka-hero > .kg-container > .row > .col-lg-8 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1.5rem;
    width: 64%;
    max-width: none;
    padding: 0;
    z-index: 1;
  }
  body .ka-hero .cs-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
  }
  body .ka-hero .cs-hero-media img,
  body .ka-hero .cs-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* the shared company mobile rule hides this layer — switch it back on */
  body .ka-hero .cs-hero-media::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.85) 12%, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%);
  }
  body .ka-hero .cs-hero-badges,
  body .ka-hero .cs-hero-tags,
  body .ka-hero .hero-rule {
    display: none !important;
  }
  body .ka-hero .cs-hero-copy {
    padding: 36px 0 120px;
    max-width: none;
  }
  body .ka-hero .cs-hero-copy .eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--kg-red);
    margin: 0 0 14px;
  }
  body .ka-hero .cs-hero-copy h1.unique {
    font-size: 54px !important;
    line-height: 1.05 !important;
    margin: 0;
  }
  body .ka-hero .cs-hero-subheading {
    margin-top: 14px;
  }
  body .ka-hero .cs-hero-lead {
    max-width: none;
    font-size: 16px;
    line-height: 1.55;
    color: #3c465f;
    margin-top: 20px;
  }

  /* ----- stats: one white card over the hero ----- */
  body .cs-stats-bar-wrap.ka-stats {
    position: relative;
    z-index: 3;
    margin-top: -96px;
    margin-bottom: 0;
    transform: none;
  }
  body .ka-stats .cs-stats-bar {
    position: relative;
    inset: auto;
    transform: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 22px 8px;
    background: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 20px 44px -26px rgba(20, 41, 77, 0.45);
  }
  body .ka-stats .cs-stats-bar::before,
  body .ka-stats .cs-stats-bar::after,
  body .ka-stats .cs-stat::before,
  body .ka-stats .cs-stat::after {
    display: none;
  }
  body .ka-stats .cs-stat {
    min-width: 0;
    width: auto;
    flex: none;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  body .ka-stats .cs-stat:not(:last-child) {
    border-right: 1px solid var(--kg-line);
  }
  body .ka-stats .cs-stat > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  body .ka-stats .cs-stat-icon {
    display: flex;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    background: none;
    border: 0;
  }
  body .ka-stats .cs-stat-icon .kg-svg-icon,
  body .ka-stats .cs-stat-icon svg,
  body .ka-stats .cs-stat-icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    display: block;
  }
  body .ka-stats .cs-stat-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kg-navy);
  }
  body .ka-stats .cs-stat-label {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: #3c465f;
    margin-top: 4px;
  }

  /* ----- projects ----- */
  body .ka-projects {
    padding: 36px 0;
  }
  body .ka-projects .cs-projects2-head {
    display: block;
    text-align: center;
    margin: 0 0 22px;
  }
  body .ka-projects .cs-projects2-head .eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--kg-red);
    text-align: center;
    margin: 0 0 8px;
  }
  body .ka-projects .cs-projects2-title {
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
  }
  body .ka-projects .cs-projects2-title .l1,
  body .ka-projects .cs-projects2-title .l2 {
    display: inline;
  }
  body .ka-projects .cs-projects2-title .l1 {
    color: var(--kg-navy);
  }
  body .ka-projects .cs-projects2-title .l2 {
    color: var(--kg-red);
  }
  body .ka-projects .ka-proj-wrap {
    position: relative;
  }
  body .ka-projects .cs-projects2-grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 12px;
    grid-template-columns: none;
    margin: 0;
    padding: 4px 0 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .ka-projects .cs-projects2-grid::-webkit-scrollbar {
    display: none;
  }
  /* ~3.3 cards per view on tablet */
  body .ka-projects .cs-projects2-grid > * {
    flex: 0 0 calc((100% - 36px) / 3.3);
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
  }
  body .ka-projects .ka-proj-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 6px 16px -6px rgba(20, 41, 77, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    transition: opacity 0.25s;
  }
  body .ka-projects .ka-proj-arrow.prev {
    left: -8px;
  }
  body .ka-projects .ka-proj-arrow.prev svg {
    transform: rotate(180deg);
  }
  body .ka-projects .ka-proj-arrow.next {
    right: -8px;
  }
  body .ka-projects .ka-proj-arrow.is-disabled {
    opacity: 0.4;
  }
  body .ka-projects .ka-proj-wrap.is-static .ka-proj-arrow {
    display: none;
  }
  body .ka-projects .ka-proj-dots {
    display: flex;
    margin-top: 14px;
  }

  /* ----- shared title: serif, left, gold rule ----- */
  body .ka-capabilities .cs-capabilities-title,
  body .ka-why .cs-capabilities-title {
    position: relative;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kg-navy);
    text-align: left !important;
    padding-bottom: 16px;
    margin: 0 0 22px;
  }
  body .ka-capabilities .cs-capabilities-title::after,
  body .ka-why .cs-capabilities-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }

  /* ----- capabilities: dark tiles ----- */
  body .ka-capabilities {
    padding: 32px 0 36px;
    background: #fff;
  }
  body .ka-capabilities .cs-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
  body .ka-capabilities .cs-capability-item {
    min-width: 0;
    min-height: 150px;
    margin: 0;
    padding: 18px 8px 16px;
    border: 0 !important;
    border-radius: 12px;
    background: linear-gradient(180deg, #34476b 0%, #14294d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: center;
  }
  body .ka-capabilities .cs-capability-item::before,
  body .ka-capabilities .cs-capability-item::after {
    display: none !important;
  }
  body .ka-capabilities .cs-capability-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kg-red);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
  }
  body .ka-capabilities .cs-capability-icon .kg-svg-icon,
  body .ka-capabilities .cs-capability-icon svg,
  body .ka-capabilities .cs-capability-icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    display: block;
    color: #fff !important;
  }
  /* the icons are drawn navy: make the visible strokes / fills white */
  body .ka-capabilities .cs-capability-icon svg[stroke]:not([stroke="none"]),
  body .ka-capabilities .cs-capability-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }
  body .ka-capabilities .cs-capability-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: #fff !important;
  }
  body .ka-capabilities .cs-capability-label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
  }

  /* ----- why choose: one row ----- */
  body .ka-why {
    padding: 32px 0 36px;
    background: #fff;
  }
  body .ka-why > .kg-container > .eyebrow {
    display: none;
  }
  body .ka-why .cs-why-row {
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    margin: 0;
  }
  body .ka-why .cs-why-row > .cs-why-col {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body .ka-why .cs-why-row > .cs-why-col + .cs-why-col {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .ka-why .cs-why-row .cs-why-card {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    text-align: center !important;
    gap: 12px;
    padding: 0 !important;
    border: 0 !important;
  }
  body .ka-why .cs-why-row .cs-why-icon {
    width: 76px;
    height: 76px;
    margin: 0;
  }
  body .ka-why .cs-why-row .kg-svg-icon svg,
  body .ka-why .cs-why-row .cs-why-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  body .ka-why .cs-why-row .cs-why-card h3 {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0;
  }
  body .ka-why .cs-why-row .cs-why-card p {
    display: none;
  }

  /* ----- CTA: white card, copy left, photo right ----- */
  body .ka-cta {
    padding: 0 0 36px;
    background: #fff;
  }
  body .ka-cta .cs-cta2-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "left photo"
      "mid  photo";
    grid-template-rows: auto 1fr;
    column-gap: 22px;
    margin: 0;
    padding: 22px;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 44px -26px rgba(20, 41, 77, 0.45);
    overflow: hidden;
    min-height: 0;
  }
  body .ka-cta .cs-cta2-box::before,
  body .ka-cta .cs-cta2-box::after {
    display: none;
  }
  body .ka-cta .cs-cta2-left,
  body .ka-cta .cs-cta2-mid {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }
  body .ka-cta .cs-cta2-left {
    grid-area: left;
  }
  body .ka-cta .cs-cta2-mid {
    grid-area: mid;
  }
  body .ka-cta .cs-cta2-heading {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .ka-cta .cs-cta2-mid p {
    font-size: 15px;
    line-height: 1.5;
    color: #5b6478;
    margin: 12px 0 16px;
  }
  body .ka-cta .cs-cta2-mid .btn-red {
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 8px;
  }
  body .ka-cta .cs-cta2-photo {
    grid-area: photo;
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 200px;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    clip-path: none;
    transform: none;
  }
  body .ka-cta .cs-cta2-photo::before,
  body .ka-cta .cs-cta2-photo::after {
    display: none;
  }
  body .ka-cta .cs-cta2-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: none;
    border-radius: 0;
  }
}

@media (max-width: 767.98px) {
  body .ka-hero > .kg-container > .row {
    min-height: 340px;
  }
  body .ka-hero > .kg-container > .row > .col-lg-4 {
    width: 52%;
    max-width: 52%;
  }
  body .ka-hero .cs-hero-copy {
    padding: 24px 0 92px;
  }
  body .ka-hero .cs-hero-copy .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }
  body .ka-hero .cs-hero-copy h1.unique {
    font-size: 36px !important;
  }
  body .ka-hero .cs-hero-lead {
    font-size: 13px;
    margin-top: 14px;
  }

  body .cs-stats-bar-wrap.ka-stats {
    margin-top: -72px;
  }
  body .ka-stats .cs-stats-bar {
    padding: 14px 2px;
    border-radius: 14px;
  }
  body .ka-stats .cs-stat {
    padding: 0 3px;
    gap: 5px;
  }
  body .ka-stats .cs-stat-icon .kg-svg-icon,
  body .ka-stats .cs-stat-icon svg,
  body .ka-stats .cs-stat-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body .ka-stats .cs-stat-num {
    font-size: 14px;
  }
  body .ka-stats .cs-stat-label {
    font-size: 9.5px;
    margin-top: 2px;
  }

  body .ka-projects {
    padding: 28px 0;
  }
  body .ka-projects .cs-projects2-head {
    margin-bottom: 16px;
  }
  body .ka-projects .cs-projects2-head .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }
  body .ka-projects .cs-projects2-title {
    font-size: 21px;
  }
  /* ~2.3 cards per view on phones */
  body .ka-projects .cs-projects2-grid {
    gap: 8px;
  }
  body .ka-projects .cs-projects2-grid > * {
    flex-basis: calc((100% - 16px) / 2.3);
  }
  body .ka-projects .ka-proj-arrow {
    width: 32px;
    height: 32px;
  }
  body .ka-projects .ka-proj-arrow.prev {
    left: -6px;
  }
  body .ka-projects .ka-proj-arrow.next {
    right: -6px;
  }

  body .ka-capabilities .cs-capabilities-title,
  body .ka-why .cs-capabilities-title {
    font-size: 26px;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }
  body .ka-capabilities .cs-capabilities-title::after,
  body .ka-why .cs-capabilities-title::after {
    width: 40px;
    height: 3px;
  }
  body .ka-capabilities {
    padding: 26px 0 30px;
  }
  body .ka-capabilities .cs-capabilities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body .ka-capabilities .cs-capability-item {
    min-height: 118px;
    padding: 14px 6px 12px;
    gap: 8px;
    border-radius: 10px;
  }
  body .ka-capabilities .cs-capability-icon {
    width: 44px;
    height: 44px;
  }
  body .ka-capabilities .cs-capability-icon .kg-svg-icon,
  body .ka-capabilities .cs-capability-icon svg,
  body .ka-capabilities .cs-capability-icon img {
    width: 22px !important;
    height: 22px !important;
  }
  body .ka-capabilities .cs-capability-label {
    font-size: 11px;
  }

  body .ka-why {
    padding: 26px 0 30px;
  }
  body .ka-why .cs-why-row > .cs-why-col {
    padding: 0 4px !important;
  }
  body .ka-why .cs-why-row .cs-why-card {
    gap: 8px;
  }
  body .ka-why .cs-why-row .cs-why-icon {
    width: 48px;
    height: 48px;
  }
  body .ka-why .cs-why-row .kg-svg-icon svg,
  body .ka-why .cs-why-row .cs-why-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  body .ka-why .cs-why-row .cs-why-card h3 {
    font-size: 9px;
    letter-spacing: 0.1px;
  }

  body .ka-cta {
    padding-bottom: 28px;
  }
  body .ka-cta .cs-cta2-box {
    column-gap: 12px;
    padding: 14px;
    border-radius: 14px;
  }
  body .ka-cta .cs-cta2-heading {
    font-size: 17px;
  }
  body .ka-cta .cs-cta2-mid p {
    font-size: 11.5px;
    margin: 8px 0 12px;
  }
  body .ka-cta .cs-cta2-mid .btn-red {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 1px;
  }
  body .ka-cta .cs-cta2-photo {
    min-height: 140px;
    border-radius: 10px;
  }
}

/* ---- Kingdom Asphalt: more breathing room (spacing pass) ----
   Later in the file than the rules above, so these win at equal
   specificity. Tablet: roomier section padding / gaps. Phones: rows
   that were too tight wrap or stack instead of shrinking the text. */
@media (max-width: 991.98px) {
  body .ka-projects,
  body .ka-capabilities,
  body .ka-why {
    padding: 48px 0;
  }
  body .ka-projects .cs-projects2-head {
    margin-bottom: 28px;
  }
  body .ka-capabilities .cs-capabilities-title,
  body .ka-why .cs-capabilities-title {
    margin-bottom: 30px;
  }
  body .ka-capabilities .cs-capabilities-grid {
    gap: 14px;
  }
  body .ka-cta {
    padding-bottom: 48px;
  }
  body .ka-cta .cs-cta2-box {
    padding: 28px;
    column-gap: 28px;
  }
}

@media (max-width: 767.98px) {
  /* hero: a bit wider copy, more air around it */
  body .ka-hero > .kg-container > .row {
    min-height: 380px;
  }
  body .ka-hero > .kg-container > .row > .col-lg-4 {
    width: 60%;
    max-width: 60%;
  }
  body .ka-hero > .kg-container > .row > .col-lg-8 {
    width: 66%;
  }
  body .ka-hero .cs-hero-copy {
    padding: 34px 0 110px;
  }
  body .ka-hero .cs-hero-copy .eyebrow {
    font-size: 12px;
    margin-bottom: 12px;
  }
  body .ka-hero .cs-hero-copy h1.unique {
    font-size: 38px !important;
  }
  body .ka-hero .cs-hero-lead {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
  }

  /* stats: 3 on the first row, the rest below a rule (icon beside text) */
  body .ka-stats .cs-stats-bar {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 20px 12px;
    border-radius: 18px;
  }
  body .ka-stats .cs-stat {
    grid-column: span 2;
    padding: 0 6px;
    gap: 8px;
  }
  body .ka-stats .cs-stat:nth-child(3) {
    border-right: 0;
  }
  body .ka-stats .cs-stat:nth-child(n + 4) {
    grid-column: span 3;
    flex-direction: row;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kg-line);
    text-align: left;
  }
  body .ka-stats .cs-stat:nth-child(n + 4) > span:last-child {
    align-items: flex-start;
  }
  body .ka-stats .cs-stat:nth-child(4):last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }
  body .ka-stats .cs-stat-icon .kg-svg-icon,
  body .ka-stats .cs-stat-icon svg,
  body .ka-stats .cs-stat-icon img {
    width: 32px !important;
    height: 32px !important;
  }
  body .ka-stats .cs-stat-num {
    font-size: 19px;
  }
  body .ka-stats .cs-stat-label {
    font-size: 12px;
    margin-top: 3px;
  }

  /* section rhythm */
  body .ka-projects,
  body .ka-capabilities,
  body .ka-why {
    padding: 40px 0;
  }
  body .ka-projects .cs-projects2-head {
    margin-bottom: 22px;
  }
  body .ka-projects .cs-projects2-head .eyebrow {
    font-size: 12px;
    margin-bottom: 10px;
  }
  body .ka-projects .cs-projects2-title {
    font-size: 24px;
    line-height: 1.25;
  }
  /* projects: ~1.6 cards per view */
  body .ka-projects .cs-projects2-grid {
    gap: 14px;
  }
  body .ka-projects .cs-projects2-grid > * {
    flex-basis: calc((100% - 14px) / 1.6);
  }
  body .ka-projects .ka-proj-dots {
    margin-top: 18px;
  }

  body .ka-capabilities .cs-capabilities-title,
  body .ka-why .cs-capabilities-title {
    font-size: 28px;
    padding-bottom: 14px;
    margin-bottom: 24px;
  }
  /* capabilities: 2 per row, bigger tiles */
  body .ka-capabilities .cs-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body .ka-capabilities .cs-capability-item {
    min-height: 140px;
    padding: 20px 12px 18px;
    gap: 12px;
  }
  body .ka-capabilities .cs-capability-icon {
    width: 52px;
    height: 52px;
  }
  body .ka-capabilities .cs-capability-icon .kg-svg-icon,
  body .ka-capabilities .cs-capability-icon svg,
  body .ka-capabilities .cs-capability-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body .ka-capabilities .cs-capability-label {
    font-size: 13.5px;
  }

  /* why: 3 per row, the rest centred below, no squeezing */
  body .ka-why .cs-why-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 28px;
  }
  body .ka-why .cs-why-row > .cs-why-col {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    padding: 0 8px !important;
  }
  body .ka-why .cs-why-row > .cs-why-col + .cs-why-col {
    border-left: 0 !important;
  }
  body .ka-why .cs-why-row .cs-why-card {
    gap: 12px;
  }
  body .ka-why .cs-why-row .cs-why-icon {
    width: 64px;
    height: 64px;
  }
  body .ka-why .cs-why-row .kg-svg-icon svg,
  body .ka-why .cs-why-row .cs-why-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body .ka-why .cs-why-row .cs-why-card h3 {
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: 0.2px;
  }

  /* CTA: copy on top, photo below */
  body .ka-cta {
    padding-bottom: 40px;
  }
  body .ka-cta .cs-cta2-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "mid"
      "photo";
    grid-template-rows: auto;
    row-gap: 0;
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
  body .ka-cta .cs-cta2-heading {
    font-size: 24px;
  }
  body .ka-cta .cs-cta2-mid p {
    font-size: 14px;
    margin: 12px 0 18px;
  }
  body .ka-cta .cs-cta2-mid .btn-red {
    padding: 12px 22px;
    font-size: 13px;
  }
  body .ka-cta .cs-cta2-photo {
    min-height: 190px;
    margin-top: 22px;
    border-radius: 12px;
  }
}

/* ---- Kingdom Asphalt: Why Choose as a swipe slider (< 992px) ----
   4 per view on tablet, 3 on phones, dividers between, dots + autoplay
   from the template's script. Overrides the one-row / wrapping rules
   above (hence the matching !important). */
.ka-why-dots {
  display: none;
}
@media (max-width: 991.98px) {
  body .ka-why .cs-why-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    row-gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 0;
  }
  body .ka-why .cs-why-row::-webkit-scrollbar {
    display: none;
  }
  body .ka-why .cs-why-row > .cs-why-col {
    flex: 0 0 25% !important;
    width: 25% !important;
    padding: 0 10px !important;
    scroll-snap-align: start;
  }
  body .ka-why .cs-why-row > .cs-why-col + .cs-why-col {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .ka-why .ka-why-dots {
    display: flex;
    margin-top: 22px;
  }
}
@media (max-width: 767.98px) {
  body .ka-why .cs-why-row > .cs-why-col {
    flex-basis: 33.3333% !important;
    width: 33.3333% !important;
    padding: 0 8px !important;
  }
  body .ka-why .cs-why-row > .cs-why-col + .cs-why-col {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .ka-why .ka-why-dots {
    margin-top: 18px;
  }
}

/* ---- Kingdom Asphalt: Capabilities as a swipe slider (< 992px) ----
   Same behaviour as Why Choose above: 3 tiles per view on tablet, 2 on
   phones, dots + autoplay from the template's script. Desktop keeps
   the grid. */
.ka-cap-dots {
  display: none;
}
@media (max-width: 991.98px) {
  body .ka-capabilities .cs-capabilities-grid {
    --ka-cap-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ka-cap-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 0;
  }
  body .ka-capabilities .cs-capabilities-grid::-webkit-scrollbar {
    display: none;
  }
  body .ka-capabilities .cs-capability-item {
    flex: 0 0 calc((100% - 2 * var(--ka-cap-gap)) / 3);
    scroll-snap-align: start;
  }
  body .ka-capabilities .ka-cap-dots {
    display: flex;
    margin-top: 22px;
  }
}
@media (max-width: 767.98px) {
  body .ka-capabilities .cs-capabilities-grid {
    --ka-cap-gap: 12px;
  }
  body .ka-capabilities .cs-capability-item {
    flex-basis: calc((100% - var(--ka-cap-gap)) / 2);
  }
  body .ka-capabilities .ka-cap-dots {
    margin-top: 18px;
  }
}

/* =========================================================================
   RESOURCES — MOBILE & TABLET (template-resources.php, < 992px only;
   desktop untouched). Scoped to this template's body class because the
   cs-hero styles are shared with the company pages.
   - Hero: title, gold rule and lead on top of the photo (white fade from
     the top); the photo fills the whole hero.
   - Filters: white panel with rounded top corners overlapping the bottom
     of the photo; no label; chips stretch to fill the row (scroll
     sideways when there are more than fit).
   - Cards: horizontal rows — cover on the left, title / subtitle /
     download on the right. 1 per row on phones, 2 on tablets.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body.page-template-template-resources .res-hero {
    position: relative;
    overflow: hidden;
  }
  body.page-template-template-resources .res-hero > div {
    max-width: none;
    padding: 0 !important;
  }
  body.page-template-template-resources .res-hero > div > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 640px;
    position: relative;
  }
  body.page-template-template-resources .res-hero > div > .row > * {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    padding: 0;
  }
  body.page-template-template-resources .res-hero > div > .row > .col-12:last-child {
    position: absolute;
    inset: 0;
  }
  body.page-template-template-resources .res-hero .cs-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
  }
  body.page-template-template-resources .res-hero .cs-hero-media img {
    object-position: 75% center;
  }
  /* soft white glow behind the copy only (top-left), fading out so the
     photo shows through everywhere else */
  body.page-template-template-resources .res-hero .cs-hero-media::after {
    display: block;
    z-index: 0;
    background:
      radial-gradient(
        ellipse 78% 58% at 18% 28%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.82) 38%,
        rgba(255, 255, 255, 0.4) 62%,
        rgba(255, 255, 255, 0) 82%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0) 55%
      );
  }
  body.page-template-template-resources .res-hero .cs-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding: 56px calc(3% + 1.5rem) 0;
  }
  body.page-template-template-resources .res-hero .cs-hero-copy h1.unique {
    font-size: 56px !important;
    line-height: 1.05 !important;
    margin: 0;
  }
  body.page-template-template-resources .res-hero .hero-rule {
    width: 60px;
    height: 4px;
    background: var(--kg-gold);
    margin: 18px 0 0;
  }
  body.page-template-template-resources .res-hero .cs-hero-lead {
    max-width: none;
    font-size: 17px;
    line-height: 1.6;
    color: #3c465f;
    margin: 22px 0 0;
  }

  /* ----- filters: rounded white panel over the photo ----- */
  body.page-template-template-resources .res-filters {
    position: relative;
    z-index: 2;
    margin: -56px calc(50% - 50vw) 0;
    padding: 32px calc(50vw - 50%) 20px;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: none;
  }
  body.page-template-template-resources .res-filters-label {
    display: none;
  }
  body.page-template-template-resources .res-filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 20px;
    padding-bottom: 0;
  }
  body.page-template-template-resources .res-filter-group::-webkit-scrollbar {
    display: none;
  }
  body.page-template-template-resources .res-filter-chip {
    flex: 1 0 auto;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
  }
  body.page-template-template-resources .res-filter-chip svg {
    width: 22px;
    height: 22px;
  }

  /* ----- resource cards: horizontal rows ----- */
  body.page-template-template-resources .res-section {
    margin: 0 0 48px;
  }
  body.page-template-template-resources .res-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  body.page-template-template-resources .res-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 170px;
    border-radius: 10px;
    box-shadow: 0 10px 24px -22px rgba(20, 41, 77, 0.45);
  }
  body.page-template-template-resources .res-card:hover {
    transform: none;
  }
  body.page-template-template-resources .res-card-thumb {
    flex: 0 0 52%;
    height: auto;
    border-radius: 10px;
  }
  body.page-template-template-resources .res-card-thumb img {
    position: absolute;
    inset: 0;
  }
  body.page-template-template-resources .res-card-overlay,
  body.page-template-template-resources .res-card-badge,
  body.page-template-template-resources .res-card-filetype-icon {
    display: none;
  }
  body.page-template-template-resources .res-card-body {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 18px 16px 18px 24px;
  }
  body.page-template-template-resources .res-card-heading {
    margin-bottom: 8px;
  }
  body.page-template-template-resources .res-card-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
  body.page-template-template-resources .res-card-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--kg-muted-2);
    margin: 0 0 18px;
  }
  body.page-template-template-resources .res-card-download {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }
  body.page-template-template-resources .res-card-download svg {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
  }
}

/* phones */
@media (max-width: 767.98px) {
  body.page-template-template-resources .res-hero > div > .row {
    min-height: 600px;
  }
  body.page-template-template-resources .res-hero .cs-hero-copy {
    padding-top: 44px;
    max-width: 78%;
  }
  body.page-template-template-resources .res-hero .cs-hero-copy h1.unique {
    font-size: 48px !important;
  }
  body.page-template-template-resources .res-hero .cs-hero-lead {
    font-size: 16px;
    width: auto;
    color: #24304a;
  }
  /* the copy spans more of the width on phones: widen the glow */
  body.page-template-template-resources .res-hero .cs-hero-media::after {
    background:
      radial-gradient(
        ellipse 105% 52% at 22% 26%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.82) 40%,
        rgba(255, 255, 255, 0.4) 64%,
        rgba(255, 255, 255, 0) 84%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0) 55%
      );
  }
  body.page-template-template-resources .res-filter-group {
    gap: 12px;
  }
  body.page-template-template-resources .res-filter-chip {
    padding: 12px 16px;
    font-size: 15px;
  }
  body.page-template-template-resources .res-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.page-template-template-resources .res-card {
    min-height: 150px;
  }
  body.page-template-template-resources .res-card-body {
    padding: 14px 12px 14px 18px;
  }
  body.page-template-template-resources .res-card-title {
    font-size: 17px;
  }
  body.page-template-template-resources .res-card-subtitle {
    font-size: 14px;
    margin-bottom: 14px;
  }
  body.page-template-template-resources .res-card-download {
    font-size: 15px;
    gap: 10px;
  }
}

/* =========================================================================
   NEO CHEMICALS — MOBILE & TABLET (neo-chemicals.php, < 992px only;
   desktop untouched). Same design language as the Kingdom Asphalt mobile
   pass above, scoped to the cs-neo-* / neo-* classes in that template.
   - Hero: copy left, video right fading in from the left / out at the
     bottom; gold rule hidden.
   - Stats: one white card (the Manufacturing Excellence stats) over the
     bottom of the hero; the desktop stats bar is hidden below 992px.
   - Product Systems: centred eyebrow + uppercase two-tone title; photo
     cards with the title over a dark fade, as a swipe strip with round
     side arrows and dots (template script).
   - Stages / Quality / Why / Industries: serif title on the left with a
     red last word and a gold rule; stages as dark photo tiles with a
     round icon, Why as round coloured icons over uppercase labels
     (swipe strip + dots).
   - CTA: white card, heading / text / red button, photo right (below on
     phones).
   ========================================================================= */
.neo-slider-arrow,
.neo-slider-dots {
  display: none;
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .cs-neo-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
  }
  body .cs-neo-hero > div > .row {
    position: relative;
    min-height: 460px;
    margin: 0;
  }
  body .cs-neo-hero > div > .row > .col-lg-5 {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 58%;
    max-width: 58%;
    padding: 0 0 0 1.5rem !important;
  }
  body .cs-neo-hero > div > .row > .col-lg-7 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 62%;
    max-width: none;
    padding: 0;
    z-index: 1;
  }
  body .cs-neo-hero .cs-hero-media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
  }
  body .cs-neo-hero .cs-hero-media img,
  body .cs-neo-hero .cs-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  body .cs-neo-hero .cs-hero-media::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.85) 12%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%);
  }
  body .cs-neo-hero .hero-rule {
    display: none !important;
  }
  body .cs-neo-hero .cs-hero-copy {
    padding: 40px 0 130px !important;
    max-width: none;
  }
  body .cs-neo-hero .cs-hero-copy .eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--kg-red);
    margin: 0 0 14px;
  }
  body .cs-neo-hero .cs-hero-copy h1.unique {
    font-size: 54px !important;
    line-height: 1.05 !important;
    margin: 0;
  }
  body .cs-neo-hero .cs-hero-lead {
    max-width: none;
    font-size: 16px;
    line-height: 1.55;
    color: #3c465f;
    margin-top: 20px;
  }
  body .cs-neo-hero .cs-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
  }
  body .cs-neo-hero .cs-hero-actions a {
    padding: 12px 20px;
    font-size: 12.5px;
    letter-spacing: 1px;
  }

  /* ----- stats card over the hero ----- */
  body .neo-m-stats {
    position: relative;
    z-index: 3;
    margin-top: -96px;
    /* transparent over the hero, then the next section's tint */
    background: linear-gradient(180deg, transparent 0, transparent 96px, var(--kg-bg) 96px);
  }
  body .neo-m-stats-card {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--kg-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 44px -26px rgba(20, 41, 77, 0.45);
  }
  body .neo-m-stat {
    flex: 1 1 calc(100% / var(--neo-cols, 4) - 1px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 8px;
    background: #fff;
  }
  body .neo-m-stat-value {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
  }
  body .neo-m-stat-label {
    font-size: 14px;
    line-height: 1.3;
    color: #3c465f;
    margin-top: 6px;
  }

  /* ----- shared section rhythm ----- */
  body .cs-neo-systems,
  body .cs-neo-stages,
  body .cs-neo-quality,
  body .cs-neo-why,
  body .cs-neo-industries {
    padding: 48px 0;
  }
  body .cs-neo-systems,
  body .cs-neo-quality,
  body .cs-neo-industries {
    background: var(--kg-bg);
  }
  body .cs-neo-stages,
  body .cs-neo-why {
    background: #fff;
  }

  /* ----- serif titles: left, red last word, gold rule ----- */
  body .cs-neo-quality .eyebrow,
  body .cs-neo-why .eyebrow,
  body .cs-neo-industries .eyebrow {
    display: none;
  }
  body .cs-neo-industries .text-center {
    text-align: left !important;
  }
  body .neo-m-title {
    position: relative;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kg-navy);
    text-align: left !important;
    max-width: none;
    padding-bottom: 16px;
    margin: 0 0 30px !important;
  }
  body .neo-m-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: var(--kg-gold);
  }
  body .neo-m-title .l2 {
    color: var(--kg-red);
  }

  /* ----- product systems: projects-style photo strip ----- */
  body .cs-neo-systems .eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0 0 8px;
  }
  body .cs-neo-systems .sec-title {
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 auto 28px;
  }
  body .cs-neo-systems .sec-title .l2 {
    color: var(--kg-red);
  }
  body .neo-slider {
    position: relative;
  }
  body .cs-neo-systems .neo-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 4px 0 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .neo-slider-track::-webkit-scrollbar {
    display: none;
  }
  /* ~3.3 cards per view on tablet */
  body .cs-neo-systems .neo-slider-track > .col {
    flex: 0 0 calc((100% - 36px) / 3.3);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
  }
  body .cs-neo-systems .cs-usecase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    height: 100%;
    padding: 0 0 16px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--kg-navy);
    box-shadow: 0 10px 24px -14px rgba(20, 41, 77, 0.5);
  }
  body .cs-neo-systems .cs-usecase-card:hover {
    transform: none;
  }
  body .cs-neo-systems .cs-usecase-media {
    position: absolute !important;
    inset: 0;
    height: auto !important;
    border-radius: 0;
  }
  body .cs-neo-systems .cs-usecase-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 41, 77, 0) 35%, rgba(20, 41, 77, 0.92) 100%);
  }
  body .cs-neo-systems .cs-usecase-title,
  body .cs-neo-systems .cs-usecase-text {
    position: relative;
    z-index: 1;
    margin: 0 14px;
    color: #fff;
  }
  body .cs-neo-systems .cs-usecase-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }
  body .cs-neo-systems .cs-usecase-text {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body .cs-neo-systems .cs-usecase-arrow-link {
    display: none !important;
  }
  body .neo-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kg-line);
    background: #fff;
    color: var(--kg-navy);
    box-shadow: 0 6px 16px -6px rgba(20, 41, 77, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    transition: opacity 0.25s;
  }
  body .neo-slider-arrow.prev {
    left: -8px;
  }
  body .neo-slider-arrow.prev svg {
    transform: rotate(180deg);
  }
  body .neo-slider-arrow.next {
    right: -8px;
  }
  body .neo-slider-arrow.is-disabled {
    opacity: 0.4;
  }
  body .neo-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  body .neo-slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6d8de;
    transition: background 0.2s;
  }
  body .neo-slider-dots button.is-active {
    background: var(--kg-red);
  }
  body .neo-slider.is-static .neo-slider-arrow,
  body .neo-slider.is-static .neo-slider-dots {
    display: none;
  }

  /* ----- stages: centred eyebrow + serif title, then one row of 4 —
     coloured round icon, uppercase title, short text, dividers between ----- */
  body .cs-neo-stages .eyebrow {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--kg-red);
    text-align: center;
    margin: 0 auto 8px;
  }
  body .cs-neo-stages .sec-title {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--kg-navy);
    text-align: center;
    margin: 0 auto 32px;
  }
  body .cs-neo-stages .cs-stage-row {
    padding-top: 0;
  }
  body .cs-neo-stages .cs-stage-line,
  body .cs-neo-stages .cs-stage-dot {
    display: none;
  }
  body .cs-neo-stages .cs-stage-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    row-gap: 0;
  }
  body .cs-neo-stages .cs-stage-item {
    justify-content: flex-start;
    padding: 0 12px;
    text-align: center;
  }
  body .cs-neo-stages .cs-stage-item + .cs-stage-item {
    border-left: 1px solid var(--kg-line);
  }
  body .cs-neo-stages .cs-stage-icon {
    width: 76px;
    height: 76px;
    margin: 0 0 16px;
  }
  body .cs-neo-stages .cs-stage-icon svg,
  body .cs-neo-stages .cs-stage-icon img {
    width: 36px !important;
    height: 36px !important;
  }
  body .cs-neo-stages .cs-stage-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }
  body .cs-neo-stages .cs-stage-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: #fff !important;
  }
  /* plain text under the icon — no card or photo behind it */
  body .cs-neo-stages .cs-stage-card {
    background: none !important;
    padding: 0;
    border-radius: 0;
  }
  body .cs-neo-stages .cs-stage-card h3 {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 0 8px;
  }
  body .cs-neo-stages .cs-stage-card p {
    display: block;
    max-width: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kg-muted);
    margin: 0;
  }

  /* ----- quality ----- */
  body .cs-neo-quality .cs-quality-intro {
    max-width: none;
    font-size: 15px;
  }
  body .cs-neo-quality .cs-quality-media {
    border-radius: 14px;
    height: 300px;
  }

  /* ----- why choose: round coloured icons, uppercase labels, strip ----- */
  body .cs-neo-why .neo-slider-track {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    padding: 4px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card {
    flex: 0 0 25%;
    width: 25%;
    max-width: none;
    height: auto;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 10px !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    scroll-snap-align: start;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card + .cs-why-card {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .cs-neo-why .cs-why-card > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--kg-red);
  }
  body .cs-neo-why .cs-why-card:nth-child(3n + 2) > span:first-child {
    background: var(--kg-gold);
  }
  body .cs-neo-why .cs-why-card:nth-child(3n + 3) > span:first-child {
    background: var(--kg-navy);
  }
  body .cs-neo-why .cs-why-card > span:first-child svg,
  body .cs-neo-why .cs-why-card > span:first-child img {
    width: 36px !important;
    height: 36px !important;
    color: #fff !important;
  }
  body .cs-neo-why .cs-why-card > span:first-child svg[stroke]:not([stroke="none"]),
  body .cs-neo-why .cs-why-card > span:first-child svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }
  body .cs-neo-why .cs-why-card > span:first-child svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: #fff !important;
  }
  body .cs-neo-why .cs-why-card > div {
    align-items: center;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card h3 {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card p {
    display: none;
  }

  /* ----- industries: white tiles ----- */
  body .cs-neo-industries .cs-industries-grid {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
  body .cs-neo-industries .cs-icon-card {
    padding: 18px 8px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 24px -18px rgba(20, 41, 77, 0.45);
  }
  body .cs-neo-industries .cs-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kg-bg);
  }

  /* ----- CTA: white card, copy left, photo right ----- */
  body .cs-neo-cta {
    padding: 48px 0;
    background: #fff;
  }
  body .cs-neo-cta .cs-cta-diag {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 44px -26px rgba(20, 41, 77, 0.45);
    padding: 28px;
  }
  body .cs-neo-cta .cs-cta-diag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
  }
  body .cs-neo-cta .cs-cta-diag-copy {
    background: none;
    color: var(--kg-navy);
    padding: 0;
    align-self: center;
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--kg-navy);
    margin: 0;
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 span,
  body .cs-neo-cta .cs-cta-diag-copy h2 em,
  body .cs-neo-cta .cs-cta-diag-copy h2 strong {
    color: var(--kg-red);
  }
  body .cs-neo-cta .cs-cta-diag-copy p {
    font-size: 15px;
    line-height: 1.5;
    color: #5b6478;
    max-width: none;
    margin: 12px 0 18px;
  }
  body .cs-neo-cta .cs-cta-diag-copy .btn-gold {
    background: var(--kg-red);
    color: #fff;
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 8px;
  }
  body .cs-neo-cta .cs-cta-diag-media {
    position: relative;
    min-height: 220px;
    margin: 0;
    clip-path: none;
    border-radius: 14px;
    overflow: hidden;
    order: 0;
  }
  body .cs-neo-cta .cs-cta-diag-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 767.98px) {
  /* hero */
  body .cs-neo-hero > div > .row {
    min-height: 400px;
  }
  body .cs-neo-hero > div > .row > .col-lg-5 {
    width: 62%;
    max-width: 62%;
    padding-left: 16px !important;
  }
  body .cs-neo-hero > div > .row > .col-lg-7 {
    width: 64%;
  }
  body .cs-neo-hero .cs-hero-copy {
    padding: 32px 0 110px !important;
  }
  body .cs-neo-hero .cs-hero-copy .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  body .cs-neo-hero .cs-hero-copy h1.unique {
    font-size: 38px !important;
  }
  body .cs-neo-hero .cs-hero-lead {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 14px;
  }
  body .cs-neo-hero .cs-hero-actions a {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.6px;
    gap: 8px;
  }

  /* stats */
  body .neo-m-stats {
    margin-top: -80px;
    background: linear-gradient(180deg, transparent 0, transparent 80px, var(--kg-bg) 80px);
  }
  body .neo-m-stats .kg-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body .neo-m-stats-card {
    border-radius: 16px;
  }
  body .neo-m-stat {
    padding: 18px 4px;
  }
  body .neo-m-stat-value {
    font-size: 19px;
  }
  body .neo-m-stat-label {
    font-size: 11.5px;
    margin-top: 4px;
  }

  /* section rhythm + titles */
  body .cs-neo-systems,
  body .cs-neo-stages,
  body .cs-neo-quality,
  body .cs-neo-why,
  body .cs-neo-industries {
    padding: 40px 0;
  }
  body .neo-m-title {
    font-size: 28px;
    padding-bottom: 14px;
    margin-bottom: 24px !important;
  }
  body .neo-m-title::after {
    width: 44px;
    height: 3px;
  }
  body .cs-neo-systems .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  body .cs-neo-systems .sec-title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 22px;
  }

  /* product systems: ~1.6 cards per view */
  body .cs-neo-systems .neo-slider-track {
    gap: 14px;
  }
  body .cs-neo-systems .neo-slider-track > .col {
    flex-basis: calc((100% - 14px) / 1.6);
  }
  body .cs-neo-systems .cs-usecase-card {
    min-height: 250px;
  }
  body .neo-slider-arrow {
    width: 34px;
    height: 34px;
  }
  body .neo-slider-arrow.prev {
    left: -6px;
  }
  body .neo-slider-arrow.next {
    right: -6px;
  }

  /* stages: 2 per row */
  body .cs-neo-stages .cs-stage-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body .cs-neo-stages .cs-stage-item {
    min-height: 150px;
    padding: 18px 10px 16px;
  }
  body .cs-neo-stages .cs-stage-icon {
    width: 50px;
    height: 50px;
  }
  body .cs-neo-stages .cs-stage-icon svg,
  body .cs-neo-stages .cs-stage-icon img {
    width: 24px !important;
    height: 24px !important;
  }

  /* quality */
  body .cs-neo-quality .cs-quality-media {
    height: 220px;
  }

  /* why: 3 per view */
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card {
    flex-basis: 33.3333%;
    width: 33.3333%;
    padding: 0 6px !important;
    gap: 12px;
  }
  body .cs-neo-why .cs-why-card > span:first-child {
    width: 62px;
    height: 62px;
  }
  body .cs-neo-why .cs-why-card > span:first-child svg,
  body .cs-neo-why .cs-why-card > span:first-child img {
    width: 30px !important;
    height: 30px !important;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card h3 {
    font-size: 11px;
    letter-spacing: 0.2px;
  }

  /* industries: 3 per row */
  body .cs-neo-industries .cs-industries-grid > .col {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  body .cs-neo-industries .cs-icon-box {
    width: 46px;
    height: 46px;
  }
  body .cs-neo-industries .cs-industry-label {
    font-size: 11px;
    line-height: 1.3;
  }

  /* CTA: copy on top, photo below */
  body .cs-neo-cta {
    padding: 0 0 40px;
  }
  body .cs-neo-cta .cs-cta-diag {
    padding: 24px 20px 20px;
  }
  body .cs-neo-cta .cs-cta-diag-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 {
    font-size: 24px;
  }
  body .cs-neo-cta .cs-cta-diag-copy p {
    font-size: 14px;
  }
  body .cs-neo-cta .cs-cta-diag-copy .btn-gold {
    padding: 12px 22px;
    font-size: 13px;
  }
  body .cs-neo-cta .cs-cta-diag-media {
    min-height: 190px;
    flex-basis: auto;
  }
}

/* ---- Neo Chemicals: "Solutions Across Every Stage" like the reference
   (< 992px): centred navy serif title (no red word / gold rule), 4 in
   one row on phones too, scaled down. Overrides the rules above. ---- */
@media (max-width: 991.98px) {
  body .cs-neo-stages .text-center {
    text-align: center !important;
  }
  body .cs-neo-stages .neo-m-title {
    text-align: center !important;
    padding-bottom: 0;
    margin: 0 auto 32px !important;
    font-weight: 600;
  }
  body .cs-neo-stages .neo-m-title::after {
    display: none;
  }
  body .cs-neo-stages .neo-m-title .l2 {
    color: var(--kg-navy);
  }
}
@media (max-width: 767.98px) {
  body .cs-neo-stages .eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }
  body .cs-neo-stages .neo-m-title {
    font-size: 26px;
    margin-bottom: 24px !important;
  }
  body .cs-neo-stages .cs-stage-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  body .cs-neo-stages > .kg-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body .cs-neo-stages .cs-stage-item {
    min-height: 0;
    padding: 0 4px;
    border-radius: 0;
  }
  body .cs-neo-stages .cs-stage-item:nth-child(n) {
    border-left: 0;
  }
  body .cs-neo-stages .cs-stage-item + .cs-stage-item {
    border-left: 1px solid var(--kg-line);
  }
  body .cs-neo-stages .cs-stage-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }
  body .cs-neo-stages .cs-stage-icon svg,
  body .cs-neo-stages .cs-stage-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body .cs-neo-stages .cs-stage-card h3 {
    font-size: 9.5px;
    letter-spacing: 0;
    margin-bottom: 6px;
  }
  body .cs-neo-stages .cs-stage-card p {
    font-size: 10px;
    line-height: 1.45;
  }
}

/* ---- Neo Chemicals: "Solutions Across Every Stage" as a slider
   (< 992px): one stage per view, swipe + dots + autoplay from the
   template's .neo-slider script. Overrides the 4-in-a-row rules above. ---- */
@media (max-width: 991.98px) {
  body .cs-neo-stages .cs-stage-items {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 0;
  }
  body .cs-neo-stages .cs-stage-items::-webkit-scrollbar {
    display: none;
  }
  body .cs-neo-stages .cs-stage-items > .cs-stage-item {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    padding: 0 24px;
    border-left: 0 !important;
    scroll-snap-align: start;
  }
  body .cs-neo-stages .cs-stage-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
  }
  body .cs-neo-stages .cs-stage-icon svg,
  body .cs-neo-stages .cs-stage-icon img {
    width: 40px !important;
    height: 40px !important;
  }
  body .cs-neo-stages .cs-stage-card h3 {
    font-size: 16px;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
  }
  body .cs-neo-stages .cs-stage-card p {
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto;
  }
  body .cs-neo-stages .neo-slider-dots {
    margin-top: 22px;
  }
}

/* ---- Neo Chemicals: keep icons visible on their coloured backgrounds.
   Some saved icons are drawn in the same colour as their circle (or with
   no stroke/fill attribute, so the attribute selectors above miss them):
   flatten every icon inside a coloured circle to pure white, and pin the
   slider arrows to a navy chevron on a white button. ---- */
.cs-neo-stages .cs-stage-icon svg,
.cs-neo-stages .cs-stage-icon img,
.cs-neo-stages .cs-stage-icon .kg-svg-icon {
  filter: brightness(0) invert(1);
}
@media (max-width: 991.98px) {
  body .cs-neo-why .cs-why-card > span:first-child svg,
  body .cs-neo-why .cs-why-card > span:first-child img,
  body .cs-neo-why .cs-why-card > span:first-child .kg-svg-icon {
    filter: brightness(0) invert(1);
  }
  body .neo-slider .neo-slider-arrow {
    background: #fff !important;
    color: var(--kg-navy) !important;
  }
  body .neo-slider .neo-slider-arrow svg,
  body .neo-slider .neo-slider-arrow svg path {
    fill: none !important;
    stroke: var(--kg-navy) !important;
    filter: none;
  }
}

/* ---- Neo Chemicals: Manufacturing Excellence like the reference
   (< 992px): red eyebrow, navy two-line serif title (no red word / gold
   rule), intro, the features in one row (red line icon over a bold
   label), then the video edge to edge with the stats row under it.
   Overrides the earlier quality rules (incl. the template's d-none on the
   stats bar, which is only meant for the old hero stats card layout). ---- */
@media (max-width: 991.98px) {
  body .cs-neo-quality {
    background: #fff;
    padding: 44px 0 0;
    overflow: hidden;
  }
  body .cs-neo-quality .eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--kg-red);
    margin: 0 0 10px;
  }
  body .cs-neo-quality .neo-m-title {
    font-weight: 600;
    padding-bottom: 0;
    margin: 0 0 18px !important;
  }
  body .cs-neo-quality .neo-m-title::after {
    display: none;
  }
  body .cs-neo-quality .neo-m-title .l1,
  body .cs-neo-quality .neo-m-title .l2 {
    display: block;
    color: var(--kg-navy);
  }
  body .cs-neo-quality .cs-quality-intro {
    max-width: none;
    font-size: 15px;
    line-height: 1.7;
    color: var(--kg-muted);
    margin: 0 0 28px;
  }

  /* features: one row, icon over label, no text */
  body .cs-neo-quality .cs-quality-features {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
  }
  body .cs-neo-quality .cs-quality-feature {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    text-align: center;
  }
  body .cs-neo-quality .cs-quality-feature .cs-icon-box {
    width: 52px;
    height: 52px;
    background: none !important;
    border: 0 !important;
    border-radius: 0;
  }
  body .cs-neo-quality .cs-quality-feature .cs-icon-box svg,
  body .cs-neo-quality .cs-quality-feature .cs-icon-box img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
  }
  body .cs-neo-quality .cs-quality-feature h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kg-navy);
    margin: 0;
  }
  body .cs-neo-quality .cs-quality-feature p {
    display: none;
  }

  /* video edge to edge, stats row right under it */
  body .cs-neo-quality .row > .col-lg-6.mt-0 {
    margin-top: 32px !important;
  }
  body .cs-neo-quality .cs-quality-media,
  body .cs-neo-quality .cs-quality-stats-bar {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0 !important;
  }
  body .cs-neo-quality .cs-quality-media {
    height: 260px;
  }
  body .cs-neo-quality .cs-quality-stats-bar.d-none {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: hidden;
    background: var(--kg-bg);
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-stat:nth-child(n) {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 6px;
    background: var(--kg-bg);
    border: 0;
    border-radius: 0;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-stat:nth-child(n) + .cs-quality-stat {
    border-left: 1px solid #dedcd6;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-value {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-label {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin-top: 6px;
  }
}
@media (max-width: 767.98px) {
  body .cs-neo-quality {
    padding-top: 36px;
  }
  body .cs-neo-quality .eyebrow {
    font-size: 10.5px;
    letter-spacing: 2px;
  }
  body .cs-neo-quality .neo-m-title {
    font-size: 30px;
    line-height: 1.15;
  }
  body .cs-neo-quality .cs-quality-intro {
    font-size: 13.5px;
    margin-bottom: 24px;
  }
  body .cs-neo-quality .cs-quality-feature .cs-icon-box {
    width: 44px;
    height: 44px;
  }
  body .cs-neo-quality .cs-quality-feature .cs-icon-box svg,
  body .cs-neo-quality .cs-quality-feature .cs-icon-box img {
    width: 38px !important;
    height: 38px !important;
  }
  body .cs-neo-quality .cs-quality-feature h4 {
    font-size: 12px;
  }
  body .cs-neo-quality .cs-quality-media {
    height: 210px;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-stat:nth-child(n) {
    padding: 14px 4px;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-value {
    font-size: 17px;
  }
  body .cs-neo-quality .cs-quality-stats-bar .cs-quality-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
}

/* ---- Neo Chemicals: Why Choose as swipeable cards (< 992px) ----
   White rounded cards (round coloured icon, title, text) in a swipe
   strip with the next card peeking in; dots + autoplay come from the
   template's .neo-slider script. Overrides the icon-row rules above. ---- */
@media (max-width: 991.98px) {
  body .cs-neo-why {
    background: var(--kg-bg);
  }
  body .cs-neo-why .neo-slider-track {
    gap: 16px;
    padding: 6px 2px 18px;
    margin: 0 -2px;
  }
  /* ~2.3 cards per view on tablet */
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card {
    flex: 0 0 calc((100% - 32px) / 2.3);
    width: auto;
    align-items: flex-start !important;
    gap: 16px;
    padding: 24px 20px !important;
    background: #fff;
    border: 1px solid var(--kg-line) !important;
    border-radius: 16px;
    box-shadow: 0 14px 30px -20px rgba(20, 41, 77, 0.35);
    text-align: left;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card + .cs-why-card {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .cs-neo-why .cs-why-card > span:first-child {
    width: 60px;
    height: 60px;
  }
  body .cs-neo-why .cs-why-card > span:first-child svg,
  body .cs-neo-why .cs-why-card > span:first-child img {
    width: 28px !important;
    height: 28px !important;
  }
  body .cs-neo-why .cs-why-card > div {
    align-items: flex-start;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card h3 {
    font-size: 15px;
    letter-spacing: 0.3px;
    margin: 0 0 8px;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card p {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--kg-muted);
    margin: 0;
  }
  body .cs-neo-why .neo-slider-dots {
    margin-top: 8px;
  }
}
@media (max-width: 767.98px) {
  /* ~1.2 cards per view on phones */
  body .cs-neo-why .neo-slider-track {
    gap: 14px;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card.cs-icon-card {
    flex: 0 0 82%;
    width: auto;
    padding: 22px 18px !important;
  }
  body .cs-neo-why .cs-why-card > span:first-child {
    width: 56px;
    height: 56px;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card h3 {
    font-size: 14px;
  }
  body .cs-neo-why .cs-why-grid.is-boxed .cs-why-card p {
    font-size: 13.5px;
  }
}

/* Why Choose slider runs left to right (.neo-slider-reverse): mirror the
   dots so the active one starts on the left and moves right with it */
.neo-slider-reverse .neo-slider-dots {
  flex-direction: row-reverse;
}

/* ---- Neo Chemicals: Industries as a slider (< 992px) ----
   3 tiles per view, swipe + dots + autoplay from the template's
   .neo-slider script. Overrides the 3-per-row grid rules above. ---- */
@media (max-width: 991.98px) {
  body .cs-neo-industries .cs-industries-grid.neo-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 4px 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .cs-neo-industries .cs-industries-grid.neo-slider-track > .col {
    flex: 0 0 calc((100% - 24px) / 3);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
  }
  body .cs-neo-industries .neo-slider-dots {
    margin-top: 6px;
  }
}

/* ---- Neo Chemicals: bottom CTA as a red banner (< 992px) ----
   Photo on the left (diagonal right edge), white heading + text in the
   middle, gold button on the right; on phones the button drops under
   the text. The copy wrapper is display: contents so its heading, text
   and button sit straight in the grid. Overrides the white-card CTA
   rules above. ---- */
@media (max-width: 991.98px) {
  body .cs-neo-cta {
    padding: 40px 0 48px;
    background: #fff;
  }
  body .cs-neo-cta .cs-cta-diag {
    padding: 0;
    background: var(--kg-red);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(216, 31, 38, 0.6);
  }
  body .cs-neo-cta .cs-cta-diag-row {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr) auto;
    grid-template-areas:
      "media head btn"
      "media text btn";
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 0;
    align-items: center;
  }
  body .cs-neo-cta .cs-cta-diag-copy {
    display: contents;
  }
  body .cs-neo-cta .cs-cta-diag-media {
    grid-area: media;
    align-self: stretch;
    position: relative;
    min-height: 170px;
    height: auto;
    margin: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
    background: rgba(0, 0, 0, 0.15);
  }
  body .cs-neo-cta .cs-cta-diag-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 {
    grid-area: head;
    align-self: end;
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    margin: 22px 0 0;
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 span,
  body .cs-neo-cta .cs-cta-diag-copy h2 em,
  body .cs-neo-cta .cs-cta-diag-copy h2 strong {
    color: #fff;
  }
  body .cs-neo-cta .cs-cta-diag-copy p {
    grid-area: text;
    align-self: start;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: none;
    margin: 8px 0 22px;
  }
  body .cs-neo-cta .cs-cta-diag-copy .btn-gold {
    grid-area: btn;
    justify-self: end;
    margin-right: 24px;
    padding: 13px 22px;
    background: var(--kg-gold);
    color: var(--kg-navy);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    border-radius: 6px;
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  body .cs-neo-cta {
    padding: 32px 0 40px;
  }
  body .cs-neo-cta .cs-cta-diag {
    padding: 0;
  }
  /* phones: still one row (photo / copy / button), scaled down */
  body .cs-neo-cta > .kg-container {
    max-width: none;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body .cs-neo-cta .cs-cta-diag-copy .btn-gold span {
    display: none;
  }
  body .cs-neo-cta .cs-cta-diag-row {
    grid-template-columns: 22% minmax(0, 1fr) auto;
    grid-template-areas:
      "media head btn"
      "media text btn";
    column-gap: 10px;
    row-gap: 0;
  }
  body .cs-neo-cta .cs-cta-diag-media {
    min-height: 104px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }
  body .cs-neo-cta .cs-cta-diag-copy h2 {
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    margin: 14px 0 0;
  }
  body .cs-neo-cta .cs-cta-diag-copy p {
    font-size: 9.5px;
    line-height: 1.4;
    margin: 4px 0 14px;
  }
  body .cs-neo-cta .cs-cta-diag-copy .btn-gold {
    justify-self: end;
    margin: 0 12px 0 0;
    padding: 8px 10px;
    font-size: 9px;
    letter-spacing: 0.6px;
    gap: 5px;
    border-radius: 5px;
  }
}

/* =========================================================================
   KINGDOM READY MIX — MOBILE & TABLET (kingdom-ready-mix.php, < 992px only;
   desktop untouched). Same pattern as the Neo Chemicals pass above:
   - Hero: copy left, image right fading in from the left / out at the
     bottom; red rule hidden; stats as one white card over the hero bottom.
   - Process Timeline + Storage stats: swipe strips with dots + autoplay
     (.neo-slider script in the template).
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .cs-rmx-hero {
    min-height: 0;
    padding-top: 0;
  }
  body .cs-rmx-hero .cs-hero-main {
    position: relative;
    min-height: 460px;
    margin: 0;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-4 {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 58%;
    max-width: 58%;
    padding: 0 0 0 1.5rem !important;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-8 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 62%;
    max-width: none;
    padding: 0;
    z-index: 1;
  }
  body .cs-rmx-hero .cs-hero-image {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
  }
  body .cs-rmx-hero .cs-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }
  body .cs-rmx-hero .cs-hero-image::after {
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.85) 12%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%);
  }
  body .cs-rmx-hero .hero-rule {
    display: none !important;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy {
    padding: 40px 0 130px !important;
    max-width: none;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy .eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--kg-red);
    margin: 0 0 14px;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy h1.unique {
    font-size: 54px !important;
    line-height: 1.05 !important;
    margin: 0;
  }
  body .cs-rmx-hero .cs-hero-subheading {
    font-size: 17px;
    font-weight: 600;
    color: var(--kg-navy);
    margin: 18px 0 0;
  }
  body .cs-rmx-hero .cs-hero-lead {
    max-width: none;
    font-size: 16px;
    line-height: 1.55;
    color: #3c465f;
    margin: 14px 0 0;
  }
  body .cs-rmx-hero .bc-hero-actions,
  body .cs-rmx-hero .cs-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0 0 !important;
  }
  body .cs-rmx-hero .bc-hero-actions a,
  body .cs-rmx-hero .cs-hero-actions a {
    padding: 12px 20px;
    font-size: 12.5px;
    letter-spacing: 1px;
  }

  /* ----- stats card over the hero bottom ----- */
  body .cs-rmx-hero .icons-box {
    top: auto;
    z-index: 3;
    width: auto;
    max-width: none;
    margin: -96px 1.5rem 40px !important;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 44px -26px rgba(20, 41, 77, 0.45);
  }
  body .cs-rmx-hero .cs-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    row-gap: 0;
    padding: 14px 8px;
  }
  body .cs-rmx-hero .cs-hero-stat {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 12px 8px;
    border: 0;
    text-align: center;
  }
  body .cs-rmx-hero .cs-hero-stat::after {
    display: block !important;
  }
  body .cs-rmx-hero .cs-hero-stat:nth-child(3n)::after,
  body .cs-rmx-hero .cs-hero-stat:last-child::after {
    display: none !important;
  }
  body .cs-rmx-hero .cs-hero-stat-icon img {
    width: 52px;
    height: 52px;
  }
  body .cs-rmx-hero .cs-hero-stat-text {
    align-items: center;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong {
    justify-content: center;
    font-size: 20px;
    white-space: normal;
  }
  body .cs-rmx-hero .cs-hero-stat-text span {
    font-size: 11.5px;
    line-height: 1.3;
  }

  /* ----- shared slider strip ----- */
  body .cs-rmx-process .neo-slider-track,
  body .cs-rmx-storage .neo-slider-track {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 4px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  /* ----- process timeline: 3 steps per view ----- */
  body .cs-rmx-process .cs-process-track::before {
    display: none;
  }
  body .cs-rmx-process .cs-process-step {
    flex: 0 0 calc(100% / 3);
    width: auto;
    min-width: 0;
    padding: 0 10px;
    scroll-snap-align: start;
  }
  body .cs-rmx-process .cs-process-number {
    font-size: 13px;
  }
  body .cs-rmx-process .cs-process-circle {
    width: 84px;
    height: 84px;
  }
  body .cs-rmx-process .cs-process-circle svg,
  body .cs-rmx-process .cs-process-circle img {
    width: 40px;
    height: 40px;
  }
  body .cs-rmx-process .cs-process-title {
    max-width: none;
    font-size: 14px;
  }
  body .cs-rmx-process .cs-process-text {
    max-width: 220px;
    font-size: 13px;
    line-height: 1.55;
  }

  /* ----- storage stats: 3 per view ----- */
  body .cs-rmx-storage .cs-storage-stat {
    flex: 0 0 calc(100% / 3);
    min-width: 0;
    scroll-snap-align: start;
  }
  body .cs-rmx-storage .cs-storage-stat::after {
    display: block;
  }

  body .cs-rmx-process .neo-slider-dots,
  body .cs-rmx-storage .neo-slider-dots {
    margin-top: 22px;
  }
}

@media (max-width: 767.98px) {
  /* hero */
  body .cs-rmx-hero .cs-hero-main {
    min-height: 400px;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-4 {
    width: 62%;
    max-width: 62%;
    padding-left: 16px !important;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-8 {
    width: 64%;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy {
    padding: 32px 0 110px !important;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy h1.unique {
    font-size: 38px !important;
  }
  body .cs-rmx-hero .cs-hero-subheading {
    font-size: 14px;
    margin-top: 12px;
  }
  body .cs-rmx-hero .cs-hero-lead {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
  }
  body .cs-rmx-hero .bc-hero-actions a,
  body .cs-rmx-hero .cs-hero-actions a {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.6px;
    gap: 8px;
  }

  /* stats card */
  body .cs-rmx-hero .icons-box {
    margin: -80px 16px 32px !important;
    border-radius: 16px;
  }
  body .cs-rmx-hero .cs-hero-stats {
    padding: 10px 4px;
  }
  body .cs-rmx-hero .cs-hero-stat {
    padding: 10px 4px;
    gap: 4px;
  }
  body .cs-rmx-hero .cs-hero-stat-icon img {
    width: 40px;
    height: 40px;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong {
    font-size: 16px;
  }
  body .cs-rmx-hero .cs-hero-stat-text span {
    font-size: 10px;
  }

  /* process: 2 steps per view */
  body .cs-rmx-process .cs-process-step {
    flex-basis: 50%;
    padding: 0 8px;
  }
  body .cs-rmx-process .cs-process-circle {
    width: 68px;
    height: 68px;
  }
  body .cs-rmx-process .cs-process-circle svg,
  body .cs-rmx-process .cs-process-circle img {
    width: 32px;
    height: 32px;
  }
  body .cs-rmx-process .cs-process-title {
    font-size: 12.5px;
  }
  body .cs-rmx-process .cs-process-text {
    font-size: 12px;
  }

  /* storage: 2 per view */
  body .cs-rmx-storage .cs-storage-stat {
    flex-basis: 50%;
  }
}

/* ---- Kingdom Ready Mix: hero v2 (< 992px) ----
   Full-bleed photo with the copy over the sky (white fade on the left),
   no lead text; the stats become a white card over the bottom of the
   photo that swipes 3 at a time, with round arrows on its sides and dots
   under it (.neo-slider script in the template). Overrides the hero rules
   above. */
@media (max-width: 991.98px) {
  body .cs-rmx-hero {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding-bottom: 0;
  }
  body .cs-rmx-hero .cs-hero-main {
    align-items: flex-start !important;
    min-height: 680px;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px !important;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-8 {
    left: 0;
    width: 100% !important;
  }
  body .cs-rmx-hero .cs-hero-image img {
    object-position: 72% 100%;
  }
  body .cs-rmx-hero .cs-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 70%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 45%);
  }
  body .cs-rmx-hero .cs-hero-overlay-copy {
    max-width: 520px;
    padding: 56px 0 0 !important;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy h1.unique {
    font-size: 64px !important;
    line-height: 1.02 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .cs-rmx-hero .cs-hero-subheading {
    max-width: 380px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kg-navy);
    margin: 20px 0 0;
  }
  body .cs-rmx-hero .cs-hero-lead {
    display: none;
  }
  body .cs-rmx-hero .bc-hero-actions,
  body .cs-rmx-hero .cs-hero-actions {
    margin: 26px 0 0 !important;
  }
  body .cs-rmx-hero .bc-hero-actions a,
  body .cs-rmx-hero .cs-hero-actions a {
    gap: 12px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
    box-shadow: 0 10px 22px -12px rgba(216, 31, 38, 0.7);
  }

  /* stats card: swipes 3 at a time, arrows on its sides, dots below */
  body .cs-rmx-hero .icons-box {
    position: relative;
    top: -40px;
    z-index: 3;
    width: auto;
    max-width: none;
    margin: -150px 40px 64px !important;
    padding: 0;
    overflow: visible;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 20px 44px -22px rgba(20, 41, 77, 0.5);
  }
  body .cs-rmx-hero .icons-box::before,
  body .cs-rmx-hero .icons-box::after,
  body .cs-rmx-hero .icons-box .cs-hero-stats::after {
    display: none !important;
  }
  body .cs-rmx-hero .cs-hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    margin: 0 !important;
    min-height: 0;
    padding: 18px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 18px;
  }
  body .cs-rmx-hero .cs-hero-stats::-webkit-scrollbar {
    display: none;
  }
  body .cs-rmx-hero .cs-hero-stat {
    flex: 0 0 calc(100% / 3);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    min-width: 0 !important;
    padding: 4px 8px;
    border: 0 !important;
    text-align: center;
    scroll-snap-align: start;
  }
  body .cs-rmx-hero .cs-hero-stat::after,
  body .cs-rmx-hero .cs-hero-stat:nth-child(3n)::after {
    display: block !important;
    top: 10%;
    height: 80%;
  }
  body .cs-rmx-hero .cs-hero-stat:last-child::after {
    display: none !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text {
    display: contents;
  }
  body .cs-rmx-hero .cs-hero-stat-icon {
    grid-row: 1;
    grid-column: 1;
  }
  body .cs-rmx-hero .cs-hero-stat-icon img {
    width: 48px !important;
    height: 48px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-start;
    gap: 0 !important;
    font-size: 26px !important;
    font-weight: 800;
    color: var(--kg-navy);
    white-space: nowrap;
  }
  body .cs-rmx-hero .cs-hero-stat-number {
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
    margin: 0 !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text > span {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.3px;
    color: #4a5568;
  }
  body .cs-rmx-hero .neo-slider-arrow {
    display: flex;
    width: 44px;
    height: 44px;
  }
  body .cs-rmx-hero .neo-slider-arrow.prev {
    left: -22px;
  }
  body .cs-rmx-hero .neo-slider-arrow.next {
    right: -22px;
  }
  body .cs-rmx-hero .neo-slider-dots {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 18px;
  }
}
@media (max-width: 767.98px) {
  body .cs-rmx-hero .cs-hero-main {
    min-height: 560px;
  }
  body .cs-rmx-hero .cs-hero-main > .col-lg-4 {
    padding: 0 24px !important;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy {
    padding-top: 34px !important;
  }
  body .cs-rmx-hero .cs-hero-overlay-copy h1.unique {
    font-size: 44px !important;
  }
  body .cs-rmx-hero .cs-hero-subheading {
    max-width: 250px;
    font-size: 20px;
    margin-top: 14px;
  }
  body .cs-rmx-hero .bc-hero-actions,
  body .cs-rmx-hero .cs-hero-actions {
    margin-top: 20px !important;
  }
  body .cs-rmx-hero .bc-hero-actions a,
  body .cs-rmx-hero .cs-hero-actions a {
    padding: 13px 20px;
    font-size: 13.5px;
  }
  body .cs-rmx-hero .icons-box {
    margin: -110px 24px 52px !important;
    border-radius: 14px;
  }
  body .cs-rmx-hero .cs-hero-stats {
    padding: 14px 4px;
    border-radius: 14px;
  }
  body .cs-rmx-hero .cs-hero-stat {
    column-gap: 4px;
    row-gap: 4px;
    padding: 2px 4px;
  }
  body .cs-rmx-hero .cs-hero-stat-icon img {
    width: 34px !important;
    height: 34px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong {
    font-size: 14px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text > span {
    font-size: 9px !important;
    letter-spacing: 0.2px;
  }
  body .cs-rmx-hero .neo-slider-arrow {
    width: 36px;
    height: 36px;
  }
  body .cs-rmx-hero .neo-slider-arrow.prev {
    left: -16px;
  }
  body .cs-rmx-hero .neo-slider-arrow.next {
    right: -16px;
  }
  body .cs-rmx-hero .neo-slider-dots {
    margin-top: 14px;
  }
}

/* ---- Kingdom Ready Mix: Batching Plants (< 992px): intro on top, then
   the plant cards as a slider — one card per view, swipe + dots +
   autoplay from the template's .neo-slider script. ---- */
@media (max-width: 991.98px) {
  body .batching-plants-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  body .batching-plants-intro {
    padding: 0;
  }
  body .batching-plants-slider {
    min-width: 0;
  }
  body .batching-plants-grid.neo-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 4px 0 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .batching-plants-grid.neo-slider-track > .batching-plant-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    padding: 28px 20px 24px;
    scroll-snap-align: start;
  }
  body .batching-plant-card .plant-number {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  body .batching-plant-card .plant-icon {
    width: 96px;
    height: 100px;
  }
  body .batching-plant-card .plant-icon svg {
    width: 90px;
    height: 96px;
  }
  body .batching-plant-card h3 {
    font-size: 17px;
  }
  body .batching-plant-card .plant-detail strong {
    font-size: 16px;
  }
  body .batching-plants-slider .neo-slider-dots {
    margin-top: 16px;
  }
}

/* ---- Kingdom Ready Mix: Product Range (< 992px): the product cards as a
   slider — 2 per view on tablet, 1 per view on phones — swipe + dots +
   autoplay from the template's .neo-slider script. ---- */
@media (max-width: 991.98px) {
  body .product-range-grid.neo-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0;
    padding: 4px 0 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .product-range-grid.neo-slider-track > .product-card {
    flex: 0 0 calc((100% - 14px) / 2);
    min-width: 0;
    scroll-snap-align: start;
  }
  body .product-range-slider .product-card-image {
    height: 200px;
  }
  body .product-range-slider .product-card-content {
    min-height: 0;
    padding: 16px;
  }
  body .product-range-slider .product-card-icon {
    flex: 0 0 40px;
  }
  body .product-range-slider .product-card-info h3 {
    font-size: 16px;
  }
  body .product-range-slider .product-card-info p {
    font-size: 13.5px;
    line-height: 1.5;
  }
  body .product-range-slider .neo-slider-dots {
    margin: 16px 0 24px;
  }
}
@media (max-width: 767.98px) {
  body .product-range-grid.neo-slider-track {
    gap: 0;
  }
  body .product-range-grid.neo-slider-track > .product-card {
    flex-basis: 100%;
  }
  body .product-range-slider .product-card-image {
    height: 190px;
  }
}

/* ---- Kingdom Ready Mix: Product Range bottom features (< 992px): all
   five in one row — icon over the text, centred, yellow dividers between.
   Overrides the 2-per-row rules above. ---- */
@media (max-width: 991.98px) {
  body .product-range-section .product-features {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 8px;
  }
  body .product-range-section .product-feature {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
  }
  body .product-range-section .product-feature::after {
    display: block !important;
    top: 50%;
    height: 40px;
    transform: translateY(-50%);
  }
  body .product-range-section .product-feature:last-child::after {
    display: none !important;
  }
  body .product-range-section .product-feature-icon {
    margin: 0;
  }
  body .product-range-section .product-feature-icon svg {
    width: 34px;
    height: 34px;
  }
  body .product-range-section .product-feature-text {
    align-items: center;
  }
  body .product-range-section .product-feature-text strong {
    font-size: 13px;
    line-height: 1.25;
  }
  body .product-range-section .product-feature-text span {
    font-size: 11.5px;
    line-height: 1.3;
  }
}
@media (max-width: 767.98px) {
  body .product-range-section .product-feature {
    gap: 6px;
    padding: 4px 3px;
  }
  body .product-range-section .product-feature::after {
    height: 32px;
  }
  body .product-range-section .product-feature-icon svg {
    width: 26px;
    height: 26px;
  }
  body .product-range-section .product-feature-text strong {
    font-size: 10px;
  }
  body .product-range-section .product-feature-text span {
    font-size: 9px;
  }
}

/* ---- Kingdom Ready Mix: hero stats — built-in SVG icons + word values ----
   Stats without an uploaded image fall back to a theme SVG icon, which
   is drawn edge to edge (the PNG icons have empty space round them), so
   at the same box size it looked bigger and bolder. Give it the same
   box as the images with a smaller drawing inside. Word values
   ("Consistent", "Wide") are set smaller than the numbers so they don't
   run into the next stat. */
.cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}
.cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon svg {
  width: 48px !important;
  height: 48px !important;
}
.cs-rmx-hero .cs-hero-stat-text strong.is-word {
  font-size: 16px;
}
@media (max-width: 991.98px) {
  body .cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon {
    width: 48px !important;
    height: 48px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong.is-word {
    font-size: 17px !important;
  }
}
@media (max-width: 767.98px) {
  body .cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon {
    width: 34px !important;
    height: 34px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-icon .kg-svg-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  body .cs-rmx-hero .cs-hero-stat-text strong.is-word {
    font-size: 12.5px !important;
  }
}

/* ---- Kingdom Ready Mix: process timeline v2 (< 992px) ----
   4 steps per view (swipe + dots + autoplay from the .neo-slider
   script), smaller navy circles with a red chevron between them, red
   number above, uppercase title and short grey text below. Overrides the
   process rules above. */
@media (max-width: 991.98px) {
  body .cs-rmx-process .cs-process-step,
  body .cs-rmx-process .cs-process-step:nth-child(n) {
    position: relative;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: none !important;
    padding: 0 6px !important;
  }
  /* red chevron between the circles (centred on the circle) */
  body .cs-rmx-process .cs-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 59px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: solid var(--kg-red);
    border-width: 2.5px 2.5px 0 0;
    transform: translateY(-50%) rotate(45deg);
    z-index: 4;
  }
  body .cs-rmx-process .cs-process-number {
    height: 20px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
  }
  body .cs-rmx-process .cs-process-circle {
    width: 72px !important;
    height: 72px !important;
    margin: 0 0 14px;
  }
  body .cs-rmx-process .cs-process-circle svg,
  body .cs-rmx-process .cs-process-circle img,
  body .cs-rmx-process .cs-process-circle .kg-svg-icon {
    width: 34px !important;
    height: 34px !important;
  }
  body .cs-rmx-process .cs-process-title {
    max-width: none;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .cs-rmx-process .cs-process-text {
    max-width: none !important;
    margin-top: 8px;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #5a6478;
  }
}
@media (max-width: 767.98px) {
  body .cs-rmx-process .cs-process-step,
  body .cs-rmx-process .cs-process-step:nth-child(n) {
    flex-basis: 25% !important;
    width: 25% !important;
    padding: 0 3px !important;
  }
  body .cs-rmx-process .cs-process-step:not(:last-child)::after {
    top: 50px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-width: 2px 2px 0 0;
  }
  body .cs-rmx-process .cs-process-number {
    height: 18px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 18px;
  }
  body .cs-rmx-process .cs-process-circle {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 10px;
  }
  body .cs-rmx-process .cs-process-circle svg,
  body .cs-rmx-process .cs-process-circle img,
  body .cs-rmx-process .cs-process-circle .kg-svg-icon {
    width: 28px !important;
    height: 28px !important;
  }
  body .cs-rmx-process .cs-process-title {
    font-size: 11px !important;
  }
  body .cs-rmx-process .cs-process-text {
    margin-top: 6px;
    font-size: 10.5px !important;
  }
}

/* =========================================================================
   CHEMICAL CATEGORY — MOBILE & TABLET (taxonomy-chemical_category.php,
   < 992px only; desktop untouched).
   - The shared hero is hidden (d-none d-lg-block in the template) and
     replaced by .chem-m-hero: red icon circle + serif category name +
     description over the hero photo, faded to white on the left.
   - Category tabs: plain pills, current one solid red, no white box and
     no custom scrollbar (the strip still swipes sideways).
   - Head: only the product count (the name / description are in the hero).
   - Products: 2 cards per row on phones, 3 on tablets; image on top, then
     title, one short line of copy and "View Details →".
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- category hero ----- */
  .chem-m-hero {
    position: relative;
    padding: 30px 0 28px;
    background-color: #fff;
    background-image:
      linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0.2) 100%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 35%),
      var(--chem-m-hero-bg, none);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
  }
  .chem-m-hero-inner {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .chem-m-hero-icon {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--kg-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -12px rgba(216, 31, 38, 0.6);
  }
  .chem-m-hero-icon .kg-svg-icon,
  .chem-m-hero-icon svg,
  .chem-m-hero-icon img {
    width: 44px !important;
    height: 44px !important;
    display: block;
    color: #fff !important;
    object-fit: contain;
  }
  .chem-m-hero-icon svg[stroke]:not([stroke="none"]),
  .chem-m-hero-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }
  .chem-m-hero-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: #fff !important;
  }
  .chem-m-hero-copy {
    min-width: 0;
  }
  .chem-m-hero-title {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--kg-navy);
    margin: 0 0 8px;
  }
  .chem-m-hero-desc,
  .chem-m-hero-desc p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--kg-muted);
    margin: 0;
  }

  /* ----- tabs: pills ----- */
  .chem-catalog {
    padding: 8px 0 48px;
  }
  .chem-tabs-wrap {
    margin: 0 0 22px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .chem-tabs-wrap .chem-tabs,
  .chem-tabs-wrap.is-scrollable .chem-tabs {
    gap: 12px;
    padding: 2px 0 6px;
  }
  .chem-tabs-scrollbar,
  .chem-tabs-wrap.is-scrollable .chem-tabs-scrollbar {
    display: none;
  }
  .chem-tab {
    flex: 0 0 auto;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kg-navy);
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
  }
  .chem-tab:not(:last-child)::after {
    display: none;
  }
  .chem-tab:hover {
    background: #fff;
    color: var(--kg-navy);
  }
  .chem-tab.is-active,
  .chem-tab.is-active:hover {
    background: var(--kg-red);
    border-color: var(--kg-red);
    color: #fff;
  }

  /* ----- head: product count only ----- */
  .chem-category-head {
    margin-bottom: 16px;
  }
  .chem-category-head > div {
    display: none;
  }
  .chem-category-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--kg-muted);
  }

  /* ----- product grid: 3 per row (tablet) ----- */
  .chem-catalog .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
  }
  .chem-catalog .row > .col {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  /* ----- product card: image top, copy below ----- */
  .chem-product-card {
    flex-direction: column;
    flex-wrap: nowrap;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    box-shadow: 0 6px 18px -12px rgba(20, 41, 77, 0.22);
  }
  .chem-product-media {
    order: 1;
    flex: 0 0 auto;
    height: 150px;
    min-height: 0;
    padding: 10px 10px 0;
    background: #fff;
  }
  .chem-product-media img,
  .term-75 .chem-product-media img,
  .chem-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
  }
  .chem-product-body {
    order: 2;
    flex: 1 1 auto;
    padding: 12px 16px 16px;
  }
  .chem-product-eyebrow,
  .chem-product-body .career-underline-bar {
    display: none;
  }
  .chem-product-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 4px;
  }
  .chem-product-title-accent {
    color: inherit;
  }
  .chem-product-tagline,
  .chem-product-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--kg-muted);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* one short line of copy: the tagline, or the excerpt if there's none */
  .chem-product-tagline + .chem-product-desc {
    display: none;
  }
  .chem-product-cta {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    gap: 8px;
  }
}

@media (max-width: 767.98px) {
  .chem-m-hero {
    padding: 22px 0 22px;
  }
  .chem-m-hero-inner {
    gap: 16px;
  }
  .chem-m-hero-icon {
    width: 76px;
    height: 76px;
  }
  .chem-m-hero-icon .kg-svg-icon,
  .chem-m-hero-icon svg,
  .chem-m-hero-icon img {
    width: 36px !important;
    height: 36px !important;
  }
  .chem-m-hero-title {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .chem-m-hero-desc,
  .chem-m-hero-desc p {
    font-size: 13px;
  }

  .chem-tabs-wrap .chem-tabs,
  .chem-tabs-wrap.is-scrollable .chem-tabs {
    gap: 10px;
  }
  .chem-tab {
    padding: 10px 16px;
    font-size: 13.5px;
  }
  .chem-category-count {
    font-size: 14px;
  }

  /* 2 per row on phones */
  .chem-catalog .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
  .chem-catalog .row > .col {
    width: 50%;
  }
  .chem-product-media {
    height: 120px;
    padding: 8px 8px 0;
  }
  .chem-product-body {
    padding: 10px 12px 14px;
  }
  .chem-product-title {
    font-size: 15px;
  }
  .chem-product-tagline,
  .chem-product-desc {
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  .chem-product-cta {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .chem-m-hero-icon {
    width: 64px;
    height: 64px;
  }
  .chem-m-hero-title {
    font-size: 24px;
  }
}

/* =========================================================================
   KINGDOM CEMENT — MOBILE & TABLET (kingdom-cement.php, < 992px only;
   desktop untouched). Scoped to the kc-* classes in that template.
   - Hero: eyebrow / serif title / lead over the photo (faded to white on
     the left and at the bottom); the badges become one white card over
     the bottom of the photo, then "Available In" pills and a full-width
     red Contact Sales button. The row is a CSS grid and the copy / media
     wrappers are display: contents, so their children can be re-ordered.
   - Use Cases: uppercase serif title on the left with a gold rule; tall
     photo cards (round white icon, title over a dark fade)
     as a swipe strip with dots.
   - Products: same title + round prev/next arrows; navy / red cards with
     name, gold grade, bag photo and a round arrow (2 per view) + dots.
   - Why Choose: centred title, 2-column list with filled round icons.
   - Quality: navy band, the quality photo on top fading into it, the
     stats in one row with dividers; title and icons hidden.
   ========================================================================= */
.kc-slider-nav,
.kc-product-arrow,
.kc-slider-dots {
  display: none;
}
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .kc-hero {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background: #fff;
  }
  body .kc-hero > div > .row {
    position: relative;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    /* eyebrow, title, rule, subheading, lead, photo gap, badges, tags, button */
    grid-template-rows: auto auto auto auto auto 190px auto auto auto;
    margin: 0;
  }
  body .kc-hero > div > .row > [class*="col-"],
  body .kc-hero .cs-hero-copy,
  body .kc-hero .cs-hero-media {
    display: contents !important;
  }
  body .kc-hero .cs-hero-media > img {
    grid-column: 1 / -1;
    grid-row: 1 / 8;
    position: relative;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: 70% 100%;
    border-radius: 0 !important;
  }
  /* white fade behind the copy (left, fading out below the lead) ... */
  body .kc-hero > div > .row::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / 7;
    position: relative;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 82%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
  }
  /* ... and into the page at the bottom */
  body .kc-hero > div > .row::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / 8;
    position: relative;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 74%, #fff 97%);
  }
  body .kc-hero .cs-hero-copy > * {
    grid-column: 2;
    position: relative;
    z-index: 2;
  }
  body .kc-hero .cs-hero-copy > .eyebrow {
    grid-row: 1;
    margin: 26px 0 10px !important;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--kg-red);
  }
  body .kc-hero .cs-hero-copy > h1 {
    grid-row: 2;
    font-family: var(--serif);
    font-size: 42px !important;
    line-height: 1.08 !important;
    font-weight: 600;
    color: var(--kg-navy);
    margin: 0 0 14px !important;
    max-width: 75%;
  }
  body .kc-hero .cs-hero-copy > .hero-rule {
    grid-row: 3;
    width: 46px;
    height: 3px;
    margin: 0 0 14px !important;
    background: var(--kg-gold);
  }
  body .kc-hero .cs-hero-copy > .cs-hero-subheading {
    grid-row: 4;
    max-width: 72%;
  }
  body .kc-hero .cs-hero-copy > .cs-hero-lead {
    grid-row: 5;
    max-width: 60%;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: #3b4a66;
  }

  /* badges: one white card over the bottom of the photo */
  body .kc-hero .cs-hero-badges {
    grid-column: 2;
    grid-row: 7;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 2;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 16px 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 16px 34px -18px rgba(20, 41, 77, 0.45);
  }
  body .kc-hero .cs-hero-badges .cs-hero-badge {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 2px 8px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
  }
  body .kc-hero .cs-hero-badges .cs-hero-badge + .cs-hero-badge {
    border-left: 1px solid var(--kg-line) !important;
  }
  body .kc-hero .cs-hero-badges .cs-hero-badge::before,
  body .kc-hero .cs-hero-badges .cs-hero-badge::after {
    display: none !important;
  }
  body .kc-hero .cs-hero-badge > span:first-child {
    display: inline-flex;
    background: none !important;
    width: auto;
    height: auto;
  }
  body .kc-hero .cs-hero-badge .kg-svg-icon,
  body .kc-hero .cs-hero-badge > span:first-child svg,
  body .kc-hero .cs-hero-badge > span:first-child img {
    width: 36px !important;
    height: 36px !important;
  }
  body .kc-hero .cs-hero-badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  body .kc-hero .cs-hero-badge-text strong {
    font-family: var(--serif);
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kg-navy);
  }
  body .kc-hero .cs-hero-badge-text span {
    font-size: 12.5px !important;
    line-height: 1.3;
    color: #4a5670;
  }

  /* "Available In" + pills */
  body .kc-hero .cs-hero-copy > .cs-hero-tags {
    grid-row: 8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0 !important;
  }
  body .kc-hero .cs-hero-tag {
    margin: 0 !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #3b4a66;
    background: #fff !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 999px !important;
  }
  body .kc-hero .cs-hero-tag:first-child {
    padding: 8px 6px !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--kg-navy);
    background: none !important;
    border: 0 !important;
  }
  body .kc-hero .cs-hero-tag::before,
  body .kc-hero .cs-hero-tag::after {
    display: none !important;
  }

  /* full-width red Contact Sales button */
  body .kc-hero .cs-hero-copy > .cs-hero-actions {
    grid-row: 9;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 30px !important;
  }
  body .kc-hero .cs-hero-actions .btn-red,
  body .kc-hero .cs-hero-actions .cs-btn-outline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--kg-red) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px -12px rgba(216, 31, 38, 0.7);
  }
  body .kc-hero .cs-hero-actions .btn-red::after,
  body .kc-hero .cs-hero-actions .cs-btn-outline::after {
    content: "";
    position: static !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border: solid currentColor !important;
    border-width: 2px 2px 0 0 !important;
    background: none !important;
    transform: rotate(45deg) !important;
  }

  /* ----- shared section titles: uppercase serif, gold rule ----- */
  body .kc-usecases .sec-title,
  body .kc-products .sec-title,
  body .kc-why .sec-title {
    position: relative;
    font-family: var(--serif);
    font-size: 30px !important;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--kg-navy);
    text-align: left !important;
    max-width: none;
    margin: 0 0 22px !important;
    padding: 0 0 14px !important;
  }
  body .kc-usecases .sec-title::after,
  body .kc-products .sec-title::after,
  body .kc-why .sec-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 46px !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 2px;
    background: var(--kg-gold) !important;
  }
  body .kc-usecases .sec-title::before,
  body .kc-products .sec-title::before,
  body .kc-why .sec-title::before {
    display: none !important;
  }

  /* ----- shared swipe rows + dots ----- */
  body .kc-slider-row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-top: 0 !important;
  }
  body .kc-slider-row::-webkit-scrollbar {
    display: none;
  }
  body .kc-slider-row > * {
    scroll-snap-align: start;
    margin-top: 0 !important;
  }
  body .kc-slider-dots {
    display: flex;
    margin-top: 18px;
  }

  /* ----- use cases ----- */
  body .kc-usecases {
    padding: 40px 0 34px !important;
    background: #fff;
  }
  body .kc-usecases .kc-slider-row > .col {
    flex: 0 0 30% !important;
    width: 30% !important;
    max-width: none !important;
  }
  body .kc-usecases .cs-usecase-card {
    position: relative;
    height: 340px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px;
    overflow: hidden;
    background: var(--kg-navy);
    box-shadow: none;
  }
  body .kc-usecases .cs-usecase-media {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body .kc-usecases .cs-usecase-media img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
  }
  body .kc-usecases .cs-usecase-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 22, 44, 0) 45%, rgba(10, 22, 44, 0.88) 100%);
  }
  body .kc-usecases .cs-usecase-icon {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  }
  body .kc-usecases .cs-usecase-icon .kg-svg-icon,
  body .kc-usecases .cs-usecase-icon svg,
  body .kc-usecases .cs-usecase-icon img {
    width: 28px !important;
    height: 28px !important;
  }
  body .kc-usecases .cs-usecase-title {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 16px;
    margin: 0 !important;
    font-family: var(--sans);
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    color: #fff !important;
  }
  body .kc-usecases .cs-usecase-text {
    display: none !important;
  }
  /* ----- products ----- */
  body .kc-products {
    padding: 40px 0 34px !important;
    background: #f7f6f2;
  }
  body .kc-products .kc-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }
  body .kc-products .kc-sec-head .sec-title {
    margin: 0 !important;
  }
  body .kc-products .kc-slider-nav {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
  }
  body .kc-slider-arrow {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px -8px rgba(20, 41, 77, 0.45);
    cursor: pointer;
  }
  body .kc-slider-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: solid var(--kg-navy);
    border-width: 2px 2px 0 0;
    transform: translate(-65%, -50%) rotate(45deg);
  }
  body .kc-slider-arrow.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
  }
  body .kc-slider-arrow:disabled {
    opacity: 0.45;
    cursor: default;
  }
  body .kc-products .kc-slider-row > .col {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: none !important;
  }
  /* every product card is red on phones/tablets */
  body .kc-products .cs-product-card,
  body .kc-products .cs-product-card[class*="tint-"] {
    background: linear-gradient(135deg, #e3333a 0%, #c41a21 70%);
    color: #fff;
  }
  body .kc-products .cs-product-card {
    position: relative;
    height: 220px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  body .kc-products .cs-product-card > .row {
    display: block;
    height: 100%;
    margin: 0;
  }
  body .kc-products .cs-product-card > .row > .col-6 {
    width: auto;
    padding: 0;
  }
  body .kc-products .cs-product-copy {
    position: static;
    display: block !important;
    height: auto !important;
    max-width: 54%;
    padding: 18px 16px !important;
  }
  body .kc-products .cs-product-copy h3 {
    position: relative;
    z-index: 2;
    font-family: var(--sans);
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    margin: 0 !important;
  }
  body .kc-products .cs-product-grade {
    display: block;
    margin-top: 8px;
    font-size: 19px !important;
    font-weight: 800;
    color: var(--kg-gold) !important;
  }
  body .kc-products .cs-product-subtitle,
  body .kc-products .cs-product-label,
  body .kc-products .cs-product-list,
  body .kc-products .cs-product-tags {
    display: none !important;
  }
  body .kc-products .cs-product-btn,
  body .kc-products .kc-product-arrow {
    display: block;
    position: absolute !important;
    z-index: 2;
    left: 16px;
    bottom: 18px;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background: none !important;
    border: 1.5px solid #fff !important;
    border-radius: 50% !important;
  }
  body .kc-products .cs-product-btn::before,
  body .kc-products .kc-product-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border: solid #fff;
    border-width: 1.5px 1.5px 0 0;
    transform: translate(-65%, -50%) rotate(45deg);
  }
  body .kc-products .cs-product-btn::after {
    display: none !important;
  }
  /* the round arrow opens the details popup; the desktop link is hidden */
  body .kc-products .cs-product-btn {
    display: none !important;
  }
  body .kc-products .kc-product-arrow {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  /* bag photo: large on the right of the card, running off the bottom
     edge, straight on the card colour (needs a transparent PNG; a JPG
     shows its own background) */
  body .kc-products .cs-product-media {
    position: absolute !important;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 50%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible;
  }
  body .kc-products .cs-product-media img {
    position: absolute;
    inset: auto;
    top: 9%;
    right: -4%;
    width: auto !important;
    max-width: none;
    height: 100% !important;
    object-fit: contain;
    background: none !important;
    transform: rotate(-4deg);
    filter: drop-shadow(-6px 10px 12px rgba(0, 0, 0, 0.3));
  }
  /* the mobile cut-out PNGs (3:2, bag in the middle with lots of empty
     space round it): centre the bag in the right half, a bit taller
     than the card so it fills it */
  body .kc-products .cs-product-media img.kc-bag-cutout {
    top: -8%;
    right: auto;
    left: 50%;
    height: 118% !important;
    transform: translateX(-50%);
    filter: drop-shadow(-4px 8px 10px rgba(0, 0, 0, 0.28));
  }

  /* ----- why choose ----- */
  body .kc-why {
    padding: 40px 0 38px !important;
    background: linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%) !important;
  }
  body .kc-why > .kg-container > .eyebrow {
    display: none;
  }
  body .kc-why .sec-title {
    text-align: center !important;
    max-width: 520px;
    margin: 0 auto 28px !important;
  }
  body .kc-why .sec-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* one swipe row (autoplay + dots from the template script):
     3 per view on tablet, 2 on phones */
  body .kc-why .cs-why-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -6px;
  }
  body .kc-why .cs-why-grid::-webkit-scrollbar {
    display: none;
  }
  body .kc-why .cs-why-grid > .cs-why-card {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: none !important;
    padding: 0 6px !important;
    scroll-snap-align: start;
  }
  body .kc-why .cs-why-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .kc-why .cs-why-card::before,
  body .kc-why .cs-why-card::after {
    display: none !important;
  }
  body .kc-why .cs-why-icon {
    flex: 0 0 auto;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    box-shadow: none !important;
  }
  body .kc-why .cs-why-icon.icon-red { background: var(--kg-red) !important; }
  body .kc-why .cs-why-icon.icon-gold { background: var(--kg-gold) !important; }
  body .kc-why .cs-why-icon.icon-navy { background: var(--kg-navy) !important; }
  body .kc-why .cs-why-icon.icon-green { background: var(--kg-green) !important; }
  body .kc-why .cs-why-icon .kg-svg-icon,
  body .kc-why .cs-why-icon svg,
  body .kc-why .cs-why-icon img {
    width: 30px !important;
    height: 30px !important;
    color: #fff !important;
  }
  body .kc-why .cs-why-icon svg[stroke]:not([stroke="none"]),
  body .kc-why .cs-why-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }
  body .kc-why .cs-why-icon svg :not(mask, clipPath, defs, mask *, clipPath *, defs *)[fill]:not([fill="none"]) {
    fill: #fff !important;
  }
  body .kc-why .cs-why-content h3 {
    font-family: var(--sans);
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 4px 0 6px !important;
  }
  body .kc-why .cs-why-content p {
    font-size: 13px !important;
    line-height: 1.5;
    color: #3f4a5e;
  }

  /* ----- quality: navy band, photo on top ----- */
  body .kc-quality {
    padding: 36px 0 !important;
    background: var(--kg-navy) !important;
  }
  body .kc-quality.kc-quality--photo {
    padding: 230px 0 34px !important;
    background:
      linear-gradient(180deg, rgba(20, 41, 77, 0) 0%, rgba(20, 41, 77, 0.15) 30%, var(--kg-navy) 62%),
      var(--kc-quality-bg, none) center top / 100% auto no-repeat,
      var(--kg-navy) !important;
  }
  body .kc-quality .sec-title,
  body .kc-quality .row > .col-lg-5 {
    display: none !important;
  }
  body .kc-quality .row > [class*="col-"] {
    width: 100%;
  }
  body .kc-quality .Qyct {
    flex-wrap: nowrap;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  body .kc-quality .Qyct > .col {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    padding: 0 8px !important;
    border: 0 !important;
  }
  body .kc-quality .Qyct > .col + .col {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
  body .kc-quality .Qyct > .col > div > :not(.cs-quality-value):not(.cs-quality-label) {
    display: none !important;
  }
  body .kc-quality .cs-quality-value {
    font-family: var(--serif);
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.15;
    color: #fff !important;
    margin: 0 0 8px !important;
  }
  body .kc-quality .cs-quality-label {
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82) !important;
  }
}

/* tablet: a bit more per view */
@media (min-width: 768px) and (max-width: 991.98px) {
  body .kc-hero > div > .row {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: auto auto auto auto auto 260px auto auto auto;
  }
  body .kc-hero .cs-hero-copy > h1 {
    font-size: 56px !important;
  }
  body .kc-hero .cs-hero-copy > .cs-hero-actions {
    align-items: center;
  }
  body .kc-hero .cs-hero-actions .btn-red,
  body .kc-hero .cs-hero-actions .cs-btn-outline {
    max-width: 460px;
  }
  body .kc-usecases .kc-slider-row > .col {
    flex-basis: 23% !important;
    width: 23% !important;
  }
  body .kc-quality.kc-quality--photo {
    padding-top: 340px !important;
  }
}

/* phones */
@media (max-width: 575.98px) {
  body .kc-usecases .kc-slider-row > .col {
    flex-basis: 40% !important;
    width: 40% !important;
  }
  body .kc-usecases .cs-usecase-card {
    height: 280px;
  }
  body .kc-usecases .cs-usecase-icon {
    width: 48px !important;
    height: 48px !important;
  }
  body .kc-usecases .cs-usecase-icon .kg-svg-icon,
  body .kc-usecases .cs-usecase-icon svg,
  body .kc-usecases .cs-usecase-icon img {
    width: 24px !important;
    height: 24px !important;
  }
  body .kc-usecases .cs-usecase-title {
    font-size: 13px !important;
  }
  body .kc-usecases .sec-title,
  body .kc-products .sec-title,
  body .kc-why .sec-title {
    font-size: 26px !important;
  }
  body .kc-products .kc-slider-row > .col {
    flex-basis: 84% !important;
    width: 84% !important;
  }
  body .kc-products .cs-product-card {
    height: 170px !important;
  }
  body .kc-products .cs-product-copy {
    padding: 14px 12px !important;
  }
  body .kc-products .cs-product-copy h3 {
    font-size: 12.5px !important;
  }
  body .kc-products .cs-product-grade {
    font-size: 15px !important;
    margin-top: 6px;
  }
  body .kc-products .cs-product-btn,
  body .kc-products .kc-product-arrow {
    left: 12px;
    bottom: 14px;
    width: 30px !important;
    height: 30px !important;
  }
  body .kc-slider-arrow {
    width: 40px;
    height: 40px;
  }
  body .kc-why > .kg-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body .kc-why .sec-title {
    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.2;
    max-width: 320px;
    margin-bottom: 24px !important;
  }
  body .kc-why .cs-why-grid > .cs-why-card {
    flex-basis: 50% !important;
    width: 50% !important;
    padding: 0 4px !important;
  }
  body .kc-why .cs-why-grid {
    margin: 0 -4px;
  }
  body .kc-why .cs-why-card {
    gap: 8px;
  }
  body .kc-why .cs-why-icon {
    width: 50px !important;
    height: 50px !important;
  }
  body .kc-why .cs-why-icon .kg-svg-icon,
  body .kc-why .cs-why-icon svg,
  body .kc-why .cs-why-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body .kc-why .cs-why-content h3 {
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    margin: 2px 0 5px !important;
  }
  body .kc-why .cs-why-content p {
    font-size: 12px !important;
    line-height: 1;
  }
  body .kc-quality.kc-quality--photo {
    padding-top: 190px !important;
  }
  body .kc-quality .Qyct > .col {
    padding: 0 5px !important;
  }
  body .kc-quality .cs-quality-value {
    font-size: 18px !important;
  }
  body .kc-quality .cs-quality-label {
    font-size: 8.5px !important;
  }
}

/* ---- Kingdom Cement: product details popup (#kcProductModal) ----
   Opened from the round arrow on the mobile product cards, so it's only
   ever seen below 992px. Red header with the bag + name / grade, then the
   description, applications, availability and the product's button. */
.kc-product-modal .modal-dialog {
  max-width: 440px;
  margin: 16px auto;
  padding: 0 16px;
}
.kc-product-modal .modal-content {
  position: relative;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(20, 41, 77, 0.55);
}
.kc-product-modal .modal-body {
  padding: 0;
}
.kc-product-modal .kc-pm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  opacity: 0.9;
}
.kc-pm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 48px 22px 18px;
  background: linear-gradient(135deg, #e3333a 0%, #c41a21 70%);
  color: #fff;
}
.kc-pm-img {
  flex: 0 0 auto;
  width: 120px;
  height: 140px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(-4px 8px 10px rgba(0, 0, 0, 0.28));
}
.kc-pm-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 6px;
}
.kc-pm-grade {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kg-gold);
  margin: 0;
}
.kc-pm-body {
  padding: 20px 20px 24px;
}
.kc-pm-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: #3f4a5e;
  margin: 0 0 16px;
}
.kc-pm-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--kg-red);
  margin: 0 0 8px;
}
.kc-pm-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.kc-pm-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--kg-navy);
}
.kc-pm-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--kg-red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kc-pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.kc-pm-tags span {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kg-navy);
  background: #fff;
  border: 1px solid #d5d9e0;
  border-radius: 999px;
}
.kc-pm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--kg-red);
  border-radius: 999px;
}
.kc-pm-btn:hover {
  color: #fff;
  background: #b3141a;
}
.kc-pm-body > :last-child {
  margin-bottom: 0;
}

/* ---- Kingdom Ready Mix: batching plant features in 2 columns (< 992px) ---- */
@media (max-width: 991.98px) {
  .batching-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
  .batching-features li {
    align-items: flex-start;
    margin-bottom: 0;
  }
  .batching-features .feature-check {
    flex: 0 0 auto;
    margin-top: -2px;
  }
}

/* ---- Kingdom Ready Mix: Delivery System (< 992px) ----
   Eyebrow / heading on top (description hidden), the photo full width below (faded in
   from the top), then the 5 features as small white cards in one row
   overlapping the bottom of the photo, all in one white card with thin
   dividers between them: red icon + title, descriptions hidden. */
@media (max-width: 991.98px) {
  body .cs-delivery-section {
    padding: 36px 0 40px;
  }
  body .cs-delivery-hero-row > .col-lg-5 {
    padding: 0 24px !important;
  }
  body .cs-delivery-copy {
    padding: 0 0 18px;
  }
  body .cs-delivery-copy .eyebrow {
    margin: 0 0 8px;
  }
  body .cs-delivery-heading {
    font-size: 34px;
    line-height: 1.15;
    margin: 0;
  }
  body .cs-delivery-text {
    display: none;
  }
  body .cs-delivery-image::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
  }
  body .cs-delivery-image img {
    height: 360px;
    border-radius: 0;
    object-position: center bottom;
  }
  body .cs-delivery-box {
    top: -64px;
    margin-bottom: -64px;
    padding: 0 24px !important;
  }
  body .cs-delivery-features {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0;
    padding: 16px 4px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 28px -14px rgba(20, 41, 77, 0.45);
  }
  body .cs-delivery-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-width: 0;
    padding: 0 6px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
  }
  /* divider between the features */
  body .cs-delivery-feature:not(:last-child)::after {
    content: "";
    display: block !important;
    position: absolute;
    top: 6%;
    right: 0;
    width: 1px;
    height: 88%;
    background: var(--kg-line);
  }
  body .cs-delivery-feature:last-child::after {
    display: none !important;
  }
  body .cs-delivery-feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 8px;
  }
  body .cs-delivery-feature h4 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
  }
  body .cs-delivery-feature p {
    display: none;
  }
}
@media (max-width: 767.98px) {
  body .cs-delivery-section {
    padding: 30px 0 32px;
  }
  body .cs-delivery-hero-row > .col-lg-5 {
    padding: 0 16px !important;
  }
  body .cs-delivery-heading {
    font-size: 25px;
  }
  body .cs-delivery-image img {
    height: 240px;
  }
  body .cs-delivery-box {
    top: -44px;
    margin-bottom: -44px;
    padding: 0 12px !important;
  }
  body .cs-delivery-features {
    padding: 12px 2px;
    border-radius: 12px;
  }
  body .cs-delivery-feature {
    padding: 0 3px;
  }
  body .cs-delivery-feature-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
  }
  body .cs-delivery-feature h4 {
    font-size: 10px;
  }
}

/* ---- Kingdom Ready Mix: Digital Delivery System (< 992px) ----
   One rounded panel: heading / red tagline / text on the left, the
   tablet photo on the right (running off the panel edge), then the 4
   features in one row (round icon + uppercase title, descriptions
   hidden), then the side note full width under a divider. The row becomes a grid and the copy
   wrappers are display: contents so the features can span both columns. */
@media (max-width: 991.98px) {
  body .cs-digital-section {
    padding: 8px 0 40px;
  }
  body .cs-digital-row {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40%;
    column-gap: 14px;
    margin: 0 !important;
    padding: 28px 24px 24px;
    border-radius: 18px;
    overflow: hidden;
  }
  body .cs-digital-row > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .cs-digital-row > .col-lg-7,
  body .cs-digital-copy {
    display: contents;
  }
  body .cs-digital-row > .col-lg-3 {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    margin-right: -40px !important;
  }
  /* side note: full width under the features, icon beside the text */
  body .cs-digital-row > .col-lg-2 {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  body .cs-digital-note {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid #dcdcd6;
  }
  body .cs-digital-note-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
  }
  body .cs-digital-note-icon svg {
    width: 46px;
    height: 46px;
  }
  body .cs-digital-note p {
    font-size: 13.5px;
    line-height: 1.55;
  }
  body .cs-digital-image img {
    width: 100%;
    height: auto;
  }
  body .cs-digital-heading {
    grid-column: 1;
    grid-row: 1;
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 6px;
  }
  body .cs-digital-tagline {
    grid-column: 1;
    grid-row: 2;
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 12px;
  }
  body .cs-digital-text {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
  }
  body .cs-digital-features {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 24px;
  }
  body .cs-digital-feature {
    min-width: 0;
    padding: 0 6px;
    text-align: center;
    border-bottom: 0 !important;
  }
  body .cs-digital-feature:not(:last-child) {
    border-right: 1px solid #dcdcd6 !important;
  }
  body .cs-digital-feature-icon {
    width: 60px;
    height: 60px;
  }
  body .cs-digital-feature-icon svg {
    width: 32px;
    height: 32px;
  }
  body .cs-digital-feature h5 {
    font-size: 12.5px;
    line-height: 1.25;
    margin: 10px 0 0;
  }
  body .cs-digital-feature p {
    display: none;
  }
}
@media (max-width: 767.98px) {
  body .cs-digital-section {
    padding: 4px 0 32px;
  }
  body .cs-digital-section > .kg-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body .cs-digital-row {
    grid-template-columns: minmax(0, 1fr) 38%;
    column-gap: 8px;
    padding: 18px 14px 16px;
    border-radius: 14px;
  }
  body .cs-digital-row > .col-lg-3 {
    margin-right: -26px !important;
  }
  body .cs-digital-heading {
    font-size: 19px;
    margin-bottom: 4px;
  }
  body .cs-digital-tagline {
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  body .cs-digital-text {
    font-size: 11px;
    line-height: 1.5;
  }
  body .cs-digital-features {
    margin-top: 16px;
  }
  body .cs-digital-feature {
    padding: 0 3px;
  }
  body .cs-digital-feature-icon {
    width: 46px;
    height: 46px;
  }
  body .cs-digital-feature-icon svg {
    width: 24px;
    height: 24px;
  }
  body .cs-digital-note {
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
  }
  body .cs-digital-note-icon {
    width: 50px;
    height: 50px;
  }
  body .cs-digital-note-icon svg {
    width: 36px;
    height: 36px;
  }
  body .cs-digital-note p {
    font-size: 11.5px;
    line-height: 1.5;
  }
  body .cs-digital-feature h5 {
    font-size: 9px;
    letter-spacing: 0;
    margin-top: 8px;
  }
}

/* =========================================================================
   KERBSTONES — MOBILE & TABLET (kerbstones.php, < 992px only; desktop
   untouched). Scoped to the kb-* classes in that template, because the
   bc-* / ws-* classes are shared with the other block-category pages.
   - Hero: photo full width behind the copy (white fade on the left), red
     Contact Us button, the 3 features in one frosted card with dividers.
   - Kerbstone Types: left title with a red rule before the eyebrow; the
     product cards swipe 2 at a time with round side arrows + dots.
   - Production video banner (mobile only) with a play button.
   - Process: 3 steps per view (white circles joined by a line, red icon),
     side arrows, a red progress bar + dots.
   - Why Choose: 2-column list of light cards with outlined red icons.
   - The template's .kb-order wrapper shows video → process → why.
   ========================================================================= */
.kb-hero-btn,
.kb-video,
.kb-slider-arrow,
.kb-slider-dots {
  display: none;
}
@media (max-width: 991.98px) {
  body .kb-order {
    display: flex;
    flex-direction: column;
  }
  body .kb-order > .kb-video { order: 1; }
  body .kb-order > .kb-process { order: 2; }
  body .kb-order > .kb-why { order: 3; }

  /* ----- shared: eyebrow with a red rule, uppercase left titles ----- */
  body .kb-hero .ws-eyebrow,
  body .kb-range .ws-eyebrow,
  body .kb-process .ws-eyebrow,
  body .kb-why .ws-eyebrow {
    position: relative;
    display: inline-block !important;
    padding-left: 34px !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
    text-align: left;
  }
  body .kb-hero .ws-eyebrow::before,
  body .kb-range .ws-eyebrow::before,
  body .kb-process .ws-eyebrow::before,
  body .kb-why .ws-eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: var(--kg-red) !important;
    transform: translateY(-50%) !important;
    display: block !important;
  }
  body .kb-hero .ws-eyebrow::after,
  body .kb-range .ws-eyebrow::after,
  body .kb-process .ws-eyebrow::after,
  body .kb-why .ws-eyebrow::after {
    display: none !important;
  }
  body .kb-range .sec-title,
  body .kb-process .sec-title,
  body .kb-why .sec-title {
    font-family: var(--sans) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  body .kb-range .sec-title::before,
  body .kb-range .sec-title::after,
  body .kb-process .sec-title::before,
  body .kb-process .sec-title::after,
  body .kb-why .sec-title::before,
  body .kb-why .sec-title::after {
    display: none !important;
  }
  body .kb-range .text-center,
  body .kb-process .text-center {
    text-align: left !important;
  }

  /* ----- hero ----- */
  body .kb-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
    background: #fff;
  }
  body .kb-hero > div > .row {
    position: relative;
    margin: 0;
  }
  body .kb-hero > div > .row > .col-lg-5 {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px !important;
  }
  body .kb-hero > div > .row > .col-lg-7 {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
  }
  body .kb-hero .bc-hero-media {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body .kb-hero .bc-hero-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 65% center;
    border-radius: 0 !important;
  }
  body .kb-hero .bc-hero-media::before,
  body .kb-hero .bc-hero-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.15) 85%) !important;
  }
  body .kb-hero .bc-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #fff 100%) !important;
  }
  body .kb-hero .bc-hero-copy {
    max-width: 560px;
    padding: 48px 0 36px !important;
    margin: 0 !important;
    text-align: left;
  }
  body .kb-hero .bc-hero-copy h1 {
    font-family: var(--sans) !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  body .kb-hero .bc-hero-copy h1::before,
  body .kb-hero .bc-hero-copy h1::after {
    display: none !important;
  }
  body .kb-hero .bc-hero-text {
    max-width: 440px;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: #33415c !important;
    margin: 0 !important;
  }
  body .kb-hero .kb-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
  }
  body .kb-hero .bc-hero-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    max-width: 560px;
    margin: 34px 0 0 !important;
    padding: 18px 6px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.45);
  }
  body .kb-hero .bc-hero-feature {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  body .kb-hero .bc-hero-feature + .bc-hero-feature {
    border-left: 1px solid #d9dce3 !important;
  }
  body .kb-hero .bc-hero-feature::before,
  body .kb-hero .bc-hero-feature::after {
    display: none !important;
  }
  body .kb-hero .bc-hero-feature-icon {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .kb-hero .bc-hero-feature-icon .kg-svg-icon,
  body .kb-hero .bc-hero-feature-icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  body .kb-hero .bc-hero-feature-copy {
    align-items: center;
  }
  body .kb-hero .bc-hero-feature-label {
    display: block;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
  body .kb-hero .bc-hero-feature-desc {
    display: none !important;
  }

  /* ----- shared swipe strips: arrows + dots ----- */
  body .kb-slider {
    position: relative;
  }
  body .kb-slider-track {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 0;
    flex-wrap: nowrap !important;
    margin-top: 0 !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-top: 6px;
    padding-bottom: 10px;
  }
  body .kb-slider-track::-webkit-scrollbar {
    display: none;
  }
  body .kb-slider-track > .col {
    margin-top: 0 !important;
    scroll-snap-align: start;
  }
  body .kb-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px -6px rgba(20, 41, 77, 0.45);
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s;
  }
  body .kb-slider-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: solid var(--kg-navy);
    border-width: 2.5px 2.5px 0 0;
    transform: translate(-65%, -50%) rotate(45deg);
  }
  body .kb-slider-arrow.prev {
    left: -14px;
  }
  body .kb-slider-arrow.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
  }
  body .kb-slider-arrow.next {
    right: -14px;
  }
  body .kb-slider-arrow.is-disabled {
    opacity: 0.5;
  }
  body .kb-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  body .kb-slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6d8de;
  }
  body .kb-slider-dots button.active {
    background: var(--kg-red);
    border-radius: 50px !important;
  }
  body .kb-slider.is-static .kb-slider-arrow,
  body .kb-slider.is-static .kb-slider-dots {
    display: none;
  }

  /* ----- kerbstone types ----- */
  body .kb-range {
    padding: 40px 0 36px !important;
    background: #fff;
  }
  body .kb-range .text-center {
    margin-bottom: 22px !important;
  }
  body .kb-range .bc-range-desc {
    max-width: none !important;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: #4a5568;
    text-align: left;
  }
  body .kb-range .kb-slider-track > .col {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: none !important;
  }
  body .kb-range .bc-mini-card {
    display: block;
    height: 100%;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #eef0f4 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px -16px rgba(20, 41, 77, 0.4) !important;
    overflow: hidden;
  }
  body .kb-range .bc-mini-card-media,
  body .kb-range .bc-mini-card-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 8px;
    object-fit: contain;
  }
  body .kb-range .kb-slider-arrow {
    top: calc(50% - 16px);
  }

  /* ----- production video banner ----- */
  body .kb-video {
    position: relative;
    display: block;
    height: 300px;
    overflow: hidden;
    background: var(--kg-navy);
  }
  body .kb-video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body .kb-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    background: rgba(10, 18, 34, 0.45);
    text-align: center;
  }
  body .kb-video.is-playing .kb-video-overlay {
    display: none;
  }
  body .kb-video-play {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.35);
    cursor: pointer;
  }
  body .kb-video-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-50%, -50%);
  }
  body .kb-video-caption {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
  }
  body .kb-video-bar {
    position: relative;
    width: 80px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
  }
  body .kb-video-bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 70%;
    border-radius: 2px;
    background: var(--kg-red);
  }

  /* ----- process ----- */
  body .kb-process {
    padding: 40px 0 36px !important;
    background: #fff;
  }
  body .kb-process .text-center {
    margin-bottom: 24px !important;
  }
  body .kb-process .kb-slider-track > .col {
    position: relative;
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: none !important;
  }
  /* line joining the circles */
  body .kb-process .kb-slider-track > .col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 72px;
    left: 50%;
    right: -50%;
    height: 1px;
    background: #d9dce3;
    z-index: 0;
  }
  body .kb-process .bc-process-step {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
  }
  body .kb-process .bc-process-step::before,
  body .kb-process .bc-process-step::after {
    display: none !important;
  }
  body .kb-process .bc-process-step-number {
    position: static !important;
    display: block;
    height: 20px;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 20px;
    color: var(--kg-navy) !important;
    background: none !important;
    transform: none !important;
  }
  body .kb-process .bc-process-step > span.mb-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 0 14px !important;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px -12px rgba(20, 41, 77, 0.35);
  }
  body .kb-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .kb-process .bc-process-step > span.mb-3 svg {
    width: 42px !important;
    height: 42px !important;
  }
  body .kb-process .bc-process-step h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    margin: 0 0 6px !important;
  }
  body .kb-process .bc-process-step p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #5a6478 !important;
    margin: 0 !important;
  }
  body .kb-process .kb-slider-arrow {
    top: 82px;
  }
  /* red progress bar under the steps */
  body .kb-process .kb-slider-dots {
    position: relative;
    margin-top: 44px;
  }
  body .kb-process .kb-slider-dots::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 3px;
    border-radius: 2px;
    background: #e3e5ea;
  }
  body .kb-process .kb-slider-dots::after {
    content: "";
    position: absolute;
    top: -24px;
    left: calc(var(--kb-progress, 0) * 75%);
    width: 25%;
    height: 3px;
    border-radius: 2px;
    background: var(--kg-red);
    transition: left 0.4s;
  }

  /* ----- why choose ----- */
  body .kb-why {
    padding: 40px 0 44px !important;
    background: #fff;
  }
  body .kb-why .row {
    margin: 0;
  }
  body .kb-why .row > [class*="col-"] {
    padding: 0;
  }
  body .kb-why .ws-reliability-heading {
    margin-bottom: 22px !important;
  }
  body .kb-why .ws-reliability-text {
    display: none;
  }
  body .kb-why .ws-reliability-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  body .kb-why .ws-reliability-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    background: #f7f7f9 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  body .kb-why .ws-reliability-icon {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border: 2px solid var(--kg-red) !important;
    border-radius: 50% !important;
    background: #fff !important;
  }
  body .kb-why .ws-reliability-icon .kg-svg-icon,
  body .kb-why .ws-reliability-icon svg {
    width: 26px !important;
    height: 26px !important;
  }
  body .kb-why .ws-reliability-item h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--kg-navy) !important;
    margin: 2px 0 6px !important;
    text-transform: none;
  }
  body .kb-why .ws-reliability-item p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #5a6478 !important;
    margin: 0 !important;
  }
}
@media (max-width: 767.98px) {
  body .kb-hero > div > .row > .col-lg-5 {
    padding: 0 20px !important;
  }
  body .kb-hero .bc-hero-copy {
    padding: 30px 0 26px !important;
  }
  body .kb-hero .bc-hero-copy h1 {
    font-size: 42px !important;
  }
  body .kb-hero .bc-hero-text {
    max-width: 290px;
    font-size: 14.5px !important;
  }
  body .kb-hero .kb-hero-btn {
    margin-top: 18px;
    padding: 12px 20px;
    font-size: 13.5px;
  }
  body .kb-hero .bc-hero-features {
    margin-top: 26px !important;
    padding: 14px 2px !important;
  }
  body .kb-hero .bc-hero-feature {
    padding: 0 4px !important;
  }
  body .kb-hero .bc-hero-feature-icon .kg-svg-icon,
  body .kb-hero .bc-hero-feature-icon svg {
    width: 32px !important;
    height: 32px !important;
  }
  body .kb-hero .bc-hero-feature-label {
    font-size: 10.5px !important;
  }
  body .kb-hero .ws-eyebrow,
  body .kb-range .ws-eyebrow,
  body .kb-process .ws-eyebrow,
  body .kb-why .ws-eyebrow {
    font-size: 11.5px !important;
    padding-left: 28px !important;
  }
  body .kb-hero .ws-eyebrow::before,
  body .kb-range .ws-eyebrow::before,
  body .kb-process .ws-eyebrow::before,
  body .kb-why .ws-eyebrow::before {
    width: 20px !important;
  }
  body .kb-range .sec-title,
  body .kb-process .sec-title,
  body .kb-why .sec-title {
    font-size: 26px !important;
  }
  body .kb-range .bc-range-desc {
    font-size: 13.5px;
  }
  body .kb-slider-track {
    --bs-gutter-x: 12px;
  }
  body .kb-range .kb-slider-track > .col {
    flex-basis: 50% !important;
    width: 50% !important;
  }
  body .kb-slider-arrow {
    width: 38px;
    height: 38px;
  }
  body .kb-slider-arrow.prev {
    left: -10px;
  }
  body .kb-slider-arrow.next {
    right: -10px;
  }
  body .kb-video {
    height: 210px;
  }
  body .kb-video-play {
    width: 58px;
    height: 58px;
  }
  body .kb-video-play::before {
    border-width: 10px 0 10px 16px;
  }
  body .kb-video-caption {
    font-size: 16px;
  }
  body .kb-process .kb-slider-track > .col {
    flex-basis: 33.3333% !important;
    width: 33.3333% !important;
  }
  body .kb-process .kb-slider-track > .col:not(:last-child)::after {
    top: 60px;
  }
  body .kb-process .bc-process-step-number {
    font-size: 12px !important;
  }
  body .kb-process .bc-process-step > span.mb-3 {
    width: 72px;
    height: 72px;
    margin-bottom: 10px !important;
  }
  body .kb-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .kb-process .bc-process-step > span.mb-3 svg {
    width: 34px !important;
    height: 34px !important;
  }
  body .kb-process .bc-process-step h4 {
    font-size: 11.5px !important;
  }
  body .kb-process .bc-process-step p {
    font-size: 11px !important;
  }
  body .kb-process .kb-slider-arrow {
    top: 70px;
  }
  body .kb-process .kb-slider-dots::after {
    left: calc(var(--kb-progress, 0) * 66.6667%);
    width: 33.3333%;
  }
  body .kb-why .ws-reliability-grid {
    gap: 8px !important;
  }
  body .kb-why .ws-reliability-item {
    gap: 8px !important;
    padding: 12px 8px !important;
  }
  body .kb-why .ws-reliability-icon {
    width: 40px !important;
    height: 40px !important;
  }
  body .kb-why .ws-reliability-icon .kg-svg-icon,
  body .kb-why .ws-reliability-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  body .kb-why .ws-reliability-item h4 {
    font-size: 12.5px !important;
  }
  body .kb-why .ws-reliability-item p {
    font-size: 11px !important;
  }
}

/* ---- Kerbstones (< 992px): fixes + the CTA banner ---- */
@media (max-width: 991.98px) {
  /* product images already include their own card */
  body .kb-range .bc-mini-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px -14px rgba(20, 41, 77, 0.45) !important;
  }
  body .kb-range .bc-mini-card-media,
  body .kb-range .bc-mini-card-img {
    border-radius: 12px;
  }
  /* full step text (the shared rule clamps it) */
  body .kb-process .bc-process-step p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-width: none !important;
  }
  body .kb-why .ws-reliability-item > span:last-child,
  body .kb-why .ws-reliability-item h4,
  body .kb-why .ws-reliability-item p {
    text-align: left !important;
  }

  /* ----- CTA: navy panel, copy left, photo right behind a diagonal ----- */
  body .kb-cta {
    padding: 0 !important;
    background: #fff;
  }
  body .kb-cta .bc-cta2-row {
    position: relative;
    display: block !important;
    min-height: 220px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--kg-navy) !important;
    border-radius: 0 !important;
  }
  body .kb-cta .bc-cta2-copy {
    position: relative;
    z-index: 2;
    max-width: 62%;
    padding: 26px 0 26px 32px !important;
    margin: 0 !important;
    background: none !important;
  }
  body .kb-cta .bc-cta2-copy h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
  }
  body .kb-cta .bc-cta2-copy p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 14px !important;
  }
  body .kb-cta .bc-cta2-copy .btn-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
  }
  body .kb-cta .bc-cta2-photo {
    position: absolute !important;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%) !important;
  }
  body .kb-cta .bc-cta2-photo img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    clip-path: none !important;
  }
}
@media (max-width: 767.98px) {
  body .kb-cta .bc-cta2-row {
    min-height: 170px;
  }
  body .kb-cta .bc-cta2-copy {
    max-width: 66%;
    padding: 18px 0 18px 18px !important;
  }
  body .kb-cta .bc-cta2-copy h2 {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }
  body .kb-cta .bc-cta2-copy p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    width: 80%;
  }
  body .kb-cta .bc-cta2-copy .btn-red {
    padding: 8px 14px;
    font-size: 11px;
  }
  body .kb-cta .bc-cta2-photo {
    width: 50% !important;
  }
}

/* =========================================================================
   PAVING — MOBILE & TABLET (paving.php, < 992px only; desktop untouched).
   Reuses the Kerbstones kb-* mobile system (sliders, process, video, why,
   CTA) with pv-* tweaks for the paving reference design:
   - Hero: photo behind the copy (white fade on the left), stacked red
     Download Brochure + navy Enquire Now buttons, then the 4 features in
     one frosted card with dividers (swipes if there are more than 4).
   - Product range: left serif title with a round "next" arrow beside it,
     3 cards per view (image + name), dots.
   - Process: all 6 steps in one row (white circles joined by a line),
     red progress bar.
   - Tablets + desktop (hidden on phones): video banner, "Why Choose"
     list with dividers, navy CTA banner (desktop layout further down).
   - Trust strip hidden.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- shared: eyebrow with a red rule, serif titles ----- */
  body .pv-range .pv-eyebrow {
    position: relative;
    display: inline-block !important;
    padding-left: 34px !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
    transform: none;
  }
  body .pv-range .pv-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 2px;
    background: var(--kg-red);
    transform: translateY(-50%);
  }
  body .pv-range .sec-title,
  body .pv-process .sec-title,
  body .pv-why .sec-title {
    font-family: var(--serif) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
  }
  body .pv-range .sec-title {
    text-transform: none;
    margin: 0 !important;
  }
  body .pv-range .sec-title::before,
  body .pv-range .sec-title::after,
  body .pv-hero .bc-hero-copy h1::before,
  body .pv-hero .bc-hero-copy h1::after {
    display: none !important;
  }

  /* ----- hero ----- */
  body .pv-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
    background: #fff;
  }
  body .pv-hero > .bg-light {
    background: #fff !important;
  }
  body .pv-hero > div > .row {
    position: relative;
    margin: 0;
  }
  body .pv-hero > div > .row > .col-lg-6:first-child {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px !important;
  }
  body .pv-hero > div > .row > .col-lg-6:last-child {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
  }
  body .pv-hero .bc-hero-media {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body .pv-hero .bc-hero-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 70% center;
    border-radius: 0 !important;
  }
  body .pv-hero .bc-hero-media::before,
  body .pv-hero .bc-hero-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.1) 85%) !important;
  }
  body .pv-hero .bc-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%) !important;
  }
  body .pv-hero .bc-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 600px;
    padding: 48px 0 28px !important;
    margin: 0 !important;
    text-align: left;
  }
  body .pv-hero .eyebrow {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    letter-spacing: 3px;
    transform: none;
  }
  body .pv-hero .bc-hero-copy h1 {
    max-width: 520px;
    font-family: var(--serif) !important;
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  body .pv-hero .bc-hero-copy h1 span,
  body .pv-hero .bc-hero-copy h1 em,
  body .pv-hero .bc-hero-copy h1 strong {
    color: var(--kg-red) !important;
    font-style: normal;
  }
  body .pv-hero .bc-hero-text {
    max-width: 420px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #33415c !important;
    margin: 0 !important;
  }
  body .pv-hero .bc-hero-actions {
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px !important;
    margin-top: 22px;
  }
  body .pv-hero .bc-hero-actions .btn-red,
  body .pv-hero .bc-hero-actions .btn-navy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 22px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 8px 18px -10px rgba(20, 41, 77, 0.5);
  }
  body .pv-hero .bc-hero-actions .btn-navy::after {
    content: "\2192";
  }
  body .pv-hero .pv-features-row {
    order: 4;
    align-self: stretch;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important; /* block-category-paving.css caps it */
    margin: 30px 0 0 !important;
    padding: 18px 4px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.45);
  }
  body .pv-hero .pv-features-row::-webkit-scrollbar {
    display: none;
  }
  body .pv-hero .pv-feature-box {
    flex: 0 0 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    scroll-snap-align: start;
  }
  body .pv-hero .pv-feature-box + .pv-feature-box {
    border-left: 1px solid #d9dce3 !important;
  }
  body .pv-hero .pv-feature-box-icon {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .pv-hero .pv-feature-box-icon .kg-svg-icon,
  body .pv-hero .pv-feature-box-icon svg {
    width: 38px !important;
    height: 38px !important;
  }
  body .pv-hero .pv-feature-box-label {
    display: block;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }

  /* ----- product range ----- */
  body .pv-range {
    padding: 36px 0 32px !important;
    background: #fff;
  }
  body .pv-range .kg-container > .row {
    --bs-gutter-y: 18px;
  }
  body .pv-range .pv-range-intro {
    position: relative;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 60px 0 0 !important;
  }
  body .pv-range .pv-range-intro > p:not(.pv-eyebrow),
  body .pv-range .pv-range-intro > .btn-red {
    display: none !important;
  }
  /* round › link to the Paving Details page (not a slider control, so it
     stays visible even when the cards don't scroll) */
  body .pv-range .pv-range-intro .pv-range-link,
  body .pv-range .kb-slider.is-static .pv-range-link {
    display: block;
    top: auto;
    bottom: 4px;
    right: 0;
    transform: none;
  }
  body .pv-range .kb-slider-track > .col {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: none !important;
  }
  body .pv-range .bc-product-card {
    height: 100%;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px -12px rgba(20, 41, 77, 0.4) !important;
    transform: none !important;
  }
  body .pv-range .bc-product-media {
    height: auto !important;
    aspect-ratio: 1 / 0.86;
    overflow: hidden;
  }
  body .pv-range .bc-product-media img,
  body .pv-range .bc-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body .pv-range .bc-product-body {
    padding: 10px 10px 12px !important;
  }
  body .pv-range .bc-product-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
  body .pv-range .bc-product-tagline,
  body .pv-range .bc-product-specs,
  body .pv-range .bc-product-cta {
    display: none !important;
  }
  body .pv-range .kb-slider-dots {
    gap: 0;
    margin-top: 6px;
  }
  /* 10px dots, but a 24px tap target around each */
  body .pv-range .kb-slider-dots button {
    box-sizing: content-box;
    padding: 7px;
    background-clip: content-box;
    cursor: pointer;
  }
  body .pv-range .kb-slider-dots button,
  body .pv-process .kb-slider-dots button {
    transition: width 0.25s;
  }
  body .pv-range .kb-slider-dots button.active {
    width: 22px;
    border-radius: 5px;
  }

  /* ----- process: all steps in one row ----- */
  body .pv-process {
    padding: 36px 0 34px !important;
  }
  body .pv-process .kb-slider-track {
    --bs-gutter-x: 6px;
  }
  body .pv-process .kb-slider-track > .col {
    flex: 0 0 16.6667% !important;
    width: 16.6667% !important;
  }
  body .pv-process .kb-slider-track > .col:not(:last-child)::after {
    top: 60px;
  }
  body .pv-process .bc-process-step > span.mb-3 {
    width: 64px;
    height: 64px;
    margin-bottom: 10px !important;
    box-shadow: 0 4px 10px -4px rgba(20, 41, 77, 0.3);
  }
  body .pv-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .pv-process .bc-process-step > span.mb-3 svg {
    width: 30px !important;
    height: 30px !important;
  }
  body .pv-process .bc-process-step h4 {
    font-size: 11.5px !important;
    letter-spacing: 0;
  }
  body .pv-process .bc-process-step p,
  body .pv-process .kb-slider-arrow {
    display: none !important;
  }
  /* progress bar stays visible even when every step fits */
  body .pv-process .kb-slider.is-static .kb-slider-dots {
    display: flex;
  }
  body .pv-process .kb-slider-dots {
    margin-top: 36px;
  }
  body .pv-process .kb-slider-dots button {
    display: none;
  }
  body .pv-process .kb-slider-dots::after {
    left: calc(var(--kb-progress, 0) * 83.3333%);
    width: 16.6667%;
  }
  /* all steps fit: the bar follows the active step (paving.php script) */
  body .pv-process .kb-slider.is-static .kb-slider-dots::after {
    left: calc(var(--pv-step, 0) * 16.6667%);
  }
  body .pv-process .kb-slider-track > .col {
    cursor: pointer;
  }
  body .pv-process .bc-process-step > span.mb-3 {
    border: 2px solid transparent;
    transition: border-color 0.3s, transform 0.3s;
  }
  body .pv-process .is-active .bc-process-step > span.mb-3 {
    border-color: var(--kg-red);
    transform: scale(1.08);
  }
  body .pv-process .is-active .bc-process-step h4 {
    color: var(--kg-red) !important;
  }

  /* ----- video / why / CTA: tablets here, desktop in the block below
     (sections are d-none below 768px) ----- */
  /* production video */
  body .pv-video-wrap {
    background: #fff;
  }
  body .pv-video {
    height: 280px;
    border-radius: 16px;
  }
  body .pv-video .kb-video-caption {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
  }

  /* why choose: 2 columns with a divider */
  body .pv-why {
    padding: 40px 0 36px !important;
  }
  body .pv-why .ws-reliability-grid {
    gap: 0 !important;
  }
  body .pv-why .ws-reliability-item {
    gap: 12px !important;
    padding: 14px 14px 14px 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  body .pv-why .ws-reliability-item:nth-child(even) {
    padding: 14px 0 14px 14px !important;
    border-left: 1px solid #e3e5ea !important;
  }
  body .pv-why .ws-reliability-icon {
    width: 52px !important;
    height: 52px !important;
    border-width: 1.5px !important;
  }
  body .pv-why .ws-reliability-item h4 {
    font-family: var(--serif);
    font-size: 15.5px !important;
    font-weight: 600 !important;
  }

  /* CTA */
  body .pv-cta .bc-cta2-copy h2 {
    font-family: var(--serif) !important;
    font-weight: 600 !important;
  }
  body .pv-cta .bc-cta2-copy h2::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--kg-gold);
  }

  body .pv-trust {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  body .pv-hero > div > .row > .col-lg-6:first-child {
    padding: 0 22px !important;
  }
  body .pv-hero .bc-hero-copy {
    padding: 30px 0 22px !important;
  }
  body .pv-hero .eyebrow {
    font-size: 11.5px !important;
  }
  body .pv-hero .bc-hero-copy h1 {
    max-width: 300px;
    font-size: 36px !important;
  }
  body .pv-hero .bc-hero-text {
    max-width: 280px;
    font-size: 14.5px !important;
  }
  body .pv-hero .bc-hero-actions {
    margin-top: 18px;
    gap: 10px !important;
  }
  body .pv-hero .bc-hero-actions .btn-red,
  body .pv-hero .bc-hero-actions .btn-navy {
    padding: 11px 18px;
    font-size: 12px;
  }
  body .pv-hero .pv-features-row {
    margin: 24px 0 0 !important;
    padding: 14px 2px !important;
  }
  body .pv-hero .pv-feature-box {
    padding: 0 4px !important;
  }
  body .pv-hero .pv-feature-box-icon .kg-svg-icon,
  body .pv-hero .pv-feature-box-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  body .pv-hero .pv-feature-box-label {
    font-size: 9.5px !important;
  }
  body .pv-range .pv-eyebrow {
    font-size: 11.5px !important;
    padding-left: 28px !important;
  }
  body .pv-range .pv-eyebrow::before {
    width: 20px;
  }
  body .pv-range .sec-title,
  body .pv-process .sec-title {
    font-size: 26px !important;
  }
  body .pv-range .sec-title {
    font-size: 24px !important;
  }
  body .pv-range .pv-range-intro {
    padding-right: 52px !important;
  }
  body .pv-range .kb-slider-track > .col {
    flex-basis: 33.3333% !important;
    width: 33.3333% !important;
  }
  body .pv-range .bc-product-title {
    font-size: 12px !important;
  }
  body .pv-range .bc-product-body {
    padding: 8px 8px 10px !important;
  }
  body .pv-process .kb-slider-track {
    --bs-gutter-x: 4px;
  }
  body .pv-process .kb-slider-track > .col:not(:last-child)::after {
    top: 54px;
  }
  body .pv-process .bc-process-step-number {
    margin-bottom: 8px !important;
  }
  body .pv-process .bc-process-step > span.mb-3 {
    width: 52px;
    height: 52px;
  }
  body .pv-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .pv-process .bc-process-step > span.mb-3 svg {
    width: 24px !important;
    height: 24px !important;
  }
  body .pv-process .bc-process-step h4 {
    font-size: 8.5px !important;
  }
}

/* ---- Paving desktop (>= 992px): video banner, Why Choose and the CTA
   (the kb-* styles these reuse only exist below 992px) ---- */
@media (min-width: 992px) {
  /* production video */
  body .pv-video-wrap {
    padding: 8px 0 0;
    background: #fff;
  }
  body .pv-video {
    position: relative;
    display: block;
    height: 460px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--kg-navy);
  }
  body .pv-video .kb-video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body .pv-video .kb-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px;
    background: rgba(10, 18, 34, 0.45);
    text-align: center;
  }
  body .pv-video.is-playing .kb-video-overlay {
    display: none;
  }
  body .pv-video .kb-video-play {
    position: relative;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: var(--kg-red);
    cursor: pointer;
    transition: transform 0.2s;
  }
  body .pv-video .kb-video-play:hover {
    transform: scale(1.06);
  }
  body .pv-video .kb-video-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-50%, -50%);
  }
  body .pv-video .kb-video-caption {
    margin: 0;
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
  }

  /* why choose: title, then 6 items in 3 columns with dividers */
  body .pv-why {
    padding: 72px 0 64px;
  }
  body .pv-why .ws-eyebrow {
    display: inline-block;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: 2px;
  }
  body .pv-why .ws-eyebrow::before {
    width: 24px;
  }
  body .pv-why .sec-title {
    max-width: 760px;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 0 36px;
  }
  body .pv-why .sec-title::before,
  body .pv-why .sec-title::after {
    display: none;
  }
  body .pv-why .ws-reliability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 0;
    margin: 0;
  }
  body .pv-why .ws-reliability-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 0 28px;
    border-right: 0;
    border-left: 1px solid #e3e5ea;
    text-align: left;
  }
  body .pv-why .ws-reliability-item:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  body .pv-why .ws-reliability-icon {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border: 1.5px solid var(--kg-red);
    border-radius: 50%;
    background: #fff;
  }
  body .pv-why .ws-reliability-icon .kg-svg-icon,
  body .pv-why .ws-reliability-icon svg {
    width: 28px;
    height: 28px;
  }
  body .pv-why .ws-reliability-item h4 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin: 4px 0 6px;
  }
  body .pv-why .ws-reliability-item p {
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
  }

  /* CTA: navy panel, copy left, photo right behind a diagonal */
  body .pv-cta {
    background: var(--kg-navy);
  }
  body .pv-cta .bc-cta2-row {
    min-height: 320px;
  }
  body .pv-cta .bc-cta2-copy {
    flex: 1 1 45%;
    padding: 56px 48px 56px max(6%, 2rem);
  }
  body .pv-cta .bc-cta2-copy h2 {
    max-width: 460px;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
  }
  body .pv-cta .bc-cta2-copy h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 18px;
    background: var(--kg-gold);
  }
  body .pv-cta .bc-cta2-copy p {
    max-width: 440px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
  }
  body .pv-cta .bc-cta2-copy .btn-red {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
  }
  body .pv-cta .bc-cta2-photo {
    position: relative;
    flex: 1 1 55%;
  }
  body .pv-cta .bc-cta2-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }
}
/* =========================================================================
   PAVING DETAILS PAGE (template-paving-details.php) — phones/tablets only;
   desktop untouched.
   - Hero: same treatment as paving.php's hero (.pv-hero): photo full-bleed
     behind the copy with a white fade on the left, red eyebrow, big
     uppercase serif heading, features in one frosted card with dividers.
     Matched via :has(.pd-hero-copy) so it works off the hero's own markup.
   - All Paving Products: 3 columns on phones with compact cards.
   - Available Colors: one swipeable row on phones + dots (the template's
     script autoplays it).
   ========================================================================= */
.pd-colors-dots {
  display: none;
}
@media (max-width: 991.98px) {
  body .bc-hero:has(.pd-hero-copy) {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
    background: #fff;
  }
  body .bc-hero:has(.pd-hero-copy) > div > .row {
    position: relative;
    margin: 0;
  }
  body .bc-hero:has(.pd-hero-copy) > div > .row > .col-lg-5 {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px !important;
  }
  body .bc-hero:has(.pd-hero-copy) > div > .row > .col-lg-7 {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-media {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    margin: 0 !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 70% center;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-media::before,
  body .bc-hero:has(.pd-hero-copy) .pd-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.1) 85%);
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%);
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 600px;
    padding: 48px 0 28px !important;
    margin: 0 !important;
    text-align: left;
  }
  body .bc-hero:has(.pd-hero-copy) .eyebrow {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    letter-spacing: 3px;
    transform: none;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1 {
    max-width: 520px;
    font-family: var(--serif) !important;
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1::before,
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1::after {
    display: none !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1 span,
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1 em,
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1 strong {
    color: var(--kg-red) !important;
    font-style: normal;
  }
  body .bc-hero:has(.pd-hero-copy) .bc-hero-text {
    max-width: 420px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #33415c !important;
    margin: 0 !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-features-row {
    align-self: stretch;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important; /* block-category-paving.css caps it */
    margin: 30px 0 0 !important;
    padding: 18px 4px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.45);
  }
  body .bc-hero:has(.pd-hero-copy) .pv-features-row::-webkit-scrollbar {
    display: none;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box {
    flex: 0 0 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    scroll-snap-align: start;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box + .pv-feature-box {
    border-left: 1px solid #d9dce3 !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box .kg-svg-icon,
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box svg {
    width: 38px !important;
    height: 38px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box-label {
    display: block;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
}
@media (max-width: 767.98px) {
  body .bc-hero:has(.pd-hero-copy) > div > .row > .col-lg-5 {
    padding: 0 22px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy {
    padding: 30px 0 22px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .eyebrow {
    font-size: 11.5px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pd-hero-copy h1 {
    max-width: 300px;
    font-size: 36px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .bc-hero-text {
    max-width: 280px;
    font-size: 14.5px !important;
  }
  /* phones: the features share the card's full width evenly (3 → thirds,
     4 → quarters; more than 4 still swipe), bigger icons and labels */
  body .bc-hero:has(.pd-hero-copy) .pv-features-row {
    margin-top: 24px !important;
    padding: 16px 0 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-radius: 12px;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box {
    flex: 1 0 25% !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 2px 8px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box .kg-svg-icon,
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box svg {
    width: 36px !important;
    height: 36px !important;
  }
  body .bc-hero:has(.pd-hero-copy) .pv-feature-box-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px;
  }

  /* ---- All Paving Products: 3 columns, compact cards ---- */
  body .pd-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  body .pd-card {
    border-radius: 10px;
  }
  body .pd-card:hover {
    transform: none;
  }
  body .pd-card-body {
    padding: 8px 8px 10px;
  }
  body .pd-card-title {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.3;
  }
  body .pd-card-specs {
    padding: 6px 0 0;
    border-bottom: 0;
  }
  /* label above value so sizes like "272x190 mm" fit */
  body .pd-card-spec {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    margin: 0;
  }
  body .pd-card-divider {
    margin: 5px 0;
    background: #edf0ee;
  }
  body .pd-spec-label {
    font-size: 8.5px;
    letter-spacing: 0.6px;
  }
  body .pd-spec-value {
    max-width: 100%;
    font-size: 10.5px;
  }

  /* ---- Available Colors: one swipeable row, 4 per view + dots ---- */
  body .pd-colors-swatches {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body .pd-colors-swatches::-webkit-scrollbar {
    display: none;
  }
  body .pd-swatch {
    flex: 0 0 calc((100% - 36px) / 4);
    scroll-snap-align: start;
  }
  body .pd-swatch-box {
    width: 100%;
  }
  body .pd-colors-dots {
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
    margin-top: -14px; /* the row's 24px gap is too much here */
  }
  /* 10px dots, but a 24px tap target around each */
  body .pd-colors-dots button {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: #d6d8de;
    background-clip: content-box;
    cursor: pointer;
    transition: width 0.25s;
  }
  body .pd-colors-dots button.active {
    width: 22px;
    border-radius: 12px;
    background-color: var(--kg-red);
  }
}

/* ---- Paving Details: bottom CTA ("Have a Project in Mind?") on
   phones/tablets — same treatment as the hero above: photo full-bleed
   behind the copy with a white fade on the left, red eyebrow, big
   uppercase serif heading, rounded red button. Desktop untouched. ---- */
@media (max-width: 991.98px) {
  body .pd-cta {
    position: relative;
    overflow: hidden;
    background: #fff;
  }
  body .pd-cta .pd-cta-row {
    position: relative;
    display: block;
    min-height: 340px;
    padding: 0 40px !important;
  }
  body .pd-cta .pd-cta-copy {
    position: relative;
    z-index: 2;
    max-width: 520px;
    padding: 48px 0 !important;
  }
  body .pd-cta .pd-cta-eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--kg-red) !important;
  }
  body .pd-cta .pd-cta-copy h2 {
    max-width: 460px;
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--kg-navy);
    margin: 0 0 14px;
  }
  body .pd-cta .pd-cta-copy p {
    max-width: 400px;
    font-size: 16px;
    line-height: 1.5;
    color: #33415c;
    margin: 0 0 22px;
  }
  body .pd-cta .pd-btn-red {
    padding: 13px 22px;
    font-size: 13.5px;
    border-radius: 6px;
    box-shadow: 0 8px 18px -10px rgba(20, 41, 77, 0.5);
  }
  body .pd-cta .pd-cta-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
  }
  body .pd-cta .pd-cta-media::before {
    display: none;
  }
  body .pd-cta .pd-cta-media::after {
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.1) 85%);
  }
  body .pd-cta .pd-cta-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
  }
  /* no photo set: plain panel, no placeholder text */
  body .pd-cta .pd-cta-media--empty {
    display: none;
  }
}
@media (max-width: 767.98px) {
  body .pd-cta .pd-cta-row {
    min-height: 280px;
    padding: 0 22px !important;
  }
  body .pd-cta .pd-cta-copy {
    padding: 32px 0 !important;
  }
  body .pd-cta .pd-cta-eyebrow {
    font-size: 11.5px;
  }
  body .pd-cta .pd-cta-copy h2 {
    max-width: 300px;
    font-size: 32px;
  }
  body .pd-cta .pd-cta-copy p {
    max-width: 280px;
    font-size: 14.5px;
  }
  body .pd-cta .pd-btn-red {
    padding: 11px 18px;
    font-size: 12px;
  }
}

/* =========================================================================
   WHEEL STOPPERS — MOBILE & TABLET (wheel-stoppers.php, < 992px only;
   desktop untouched). Scoped to the wsm-* hooks in that template.
   - Hero: photo behind the copy (white fade on the left), stacked red
     Download Brochure + navy Enquire Now, features in one frosted card.
   - Range: left title with a round › beside it, description, 3 cards per
     view (image + size/thickness) with side arrows + dots.
   - Ideal Applications: icon strip, 4 per view, side arrows + dots.
   - Process: all steps in one row with › between, red step indicator bar.
   - CTA: light panel, copy left, photo right behind a diagonal.
   - The reliability strip, applications gallery and trust strip are
     hidden below 992px in the template (d-none d-lg-*).
   The sliders/indicator are driven by the template's script and reuse
   the shared kb-slider arrow/dot styles (Kerbstones block above).
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- shared: eyebrow with a red rule, uppercase left titles ----- */
  body .wsm-hero .ws-eyebrow,
  body .wsm-range .ws-eyebrow,
  body .wsm-apps .ws-eyebrow,
  body .wsm-process .ws-eyebrow {
    position: relative;
    display: inline-block !important;
    padding-left: 34px !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
    text-align: left;
    transform: none;
  }
  body .wsm-hero .ws-eyebrow::before,
  body .wsm-range .ws-eyebrow::before,
  body .wsm-apps .ws-eyebrow::before,
  body .wsm-process .ws-eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: var(--kg-red) !important;
    transform: translateY(-50%) !important;
    display: block !important;
  }
  body .wsm-hero .ws-eyebrow::after,
  body .wsm-range .ws-eyebrow::after,
  body .wsm-apps .ws-eyebrow::after,
  body .wsm-process .ws-eyebrow::after {
    display: none !important;
  }
  body .wsm-range .sec-title,
  body .wsm-apps .sec-title,
  body .wsm-process .sec-title {
    font-family: var(--sans) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  body .wsm-range .sec-title::before,
  body .wsm-range .sec-title::after,
  body .wsm-apps .sec-title::before,
  body .wsm-apps .sec-title::after,
  body .wsm-process .sec-title::before,
  body .wsm-process .sec-title::after {
    display: none !important;
  }
  body .wsm-range .text-center,
  body .wsm-apps .text-center,
  body .wsm-process .text-center {
    text-align: left !important;
  }

  /* ----- hero ----- */
  body .wsm-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
    background: #fff;
  }
  body .wsm-hero > div > .row {
    position: relative;
    margin: 0;
  }
  body .wsm-hero > div > .row > .col-lg-6:first-child {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px !important;
  }
  body .wsm-hero > div > .row > .col-lg-6:last-child {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
  }
  body .wsm-hero .bc-hero-media {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body .wsm-hero .bc-hero-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 70% center;
    border-radius: 0 !important;
  }
  body .wsm-hero .bc-hero-media::before,
  body .wsm-hero .bc-hero-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0.1) 85%) !important;
  }
  body .wsm-hero .bc-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%) !important;
  }
  body .wsm-hero .bc-hero-copy {
    max-width: 600px;
    padding: 48px 0 28px !important;
    margin: 0 !important;
    text-align: left;
  }
  body .wsm-hero .bc-hero-copy h1 {
    max-width: 480px;
    font-family: var(--sans) !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  body .wsm-hero .bc-hero-copy h1::before,
  body .wsm-hero .bc-hero-copy h1::after {
    display: none !important;
  }
  body .wsm-hero .bc-hero-text {
    max-width: 440px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #33415c !important;
    margin: 0 !important;
  }
  body .wsm-hero .wsm-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
  }
  body .wsm-hero .wsm-hero-actions .btn-red,
  body .wsm-hero .wsm-hero-actions .btn-navy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 22px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 8px 18px -10px rgba(20, 41, 77, 0.5);
  }
  body .wsm-hero .wsm-features {
    margin-top: 30px;
  }
  body .wsm-hero .bc-hero-features {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 18px 4px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(20, 41, 77, 0.45);
  }
  body .wsm-hero .bc-hero-features::-webkit-scrollbar {
    display: none;
  }
  body .wsm-hero .bc-hero-feature {
    flex: 1 0 33.3333% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    scroll-snap-align: start;
  }
  body .wsm-hero .bc-hero-feature + .bc-hero-feature {
    border-left: 1px solid #d9dce3 !important;
  }
  body .wsm-hero .bc-hero-feature::before,
  body .wsm-hero .bc-hero-feature::after {
    display: none !important;
  }
  body .wsm-hero .bc-hero-feature-icon {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .wsm-hero .bc-hero-feature-icon .kg-svg-icon,
  body .wsm-hero .bc-hero-feature-icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  body .wsm-hero .bc-hero-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body .wsm-hero .bc-hero-feature-label {
    display: block;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
  body .wsm-hero .bc-hero-feature-desc {
    display: none !important;
  }
  body .wsm-hero .kb-slider-dots {
    margin-top: 12px;
  }

  /* ----- shared slider bits: pill dots with a 24px tap target ----- */
  body .wsm-hero .kb-slider-dots,
  body .wsm-range .kb-slider-dots,
  body .wsm-apps .kb-slider-dots {
    gap: 0;
  }
  body .wsm-hero .kb-slider-dots button,
  body .wsm-range .kb-slider-dots button,
  body .wsm-apps .kb-slider-dots button {
    box-sizing: content-box;
    padding: 7px;
    background-clip: content-box;
    cursor: pointer;
    transition: width 0.25s;
  }
  body .wsm-hero .kb-slider-dots button.active,
  body .wsm-range .kb-slider-dots button.active,
  body .wsm-apps .kb-slider-dots button.active {
    width: 22px;
    border-radius: 12px;
  }

  /* ----- range ----- */
  body .wsm-range {
    padding: 40px 0 34px !important;
    background: #fff;
  }
  body .wsm-range .wsm-head {
    position: relative;
    margin-bottom: 20px !important;
    padding-right: 60px;
  }
  body .wsm-range .wsm-range-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4a5568;
  }
  body .wsm-range .wsm-head .kb-slider-arrow {
    top: 54px;
    right: 0;
    transform: none;
  }
  body .wsm-range .wsm-range-track {
    position: relative;
  }
  body .wsm-range .kb-slider-track > .col {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: none !important;
  }
  body .wsm-range .wsm-range-track > .kb-slider-arrow {
    top: calc(50% - 14px);
  }
  body .wsm-range .bc-product-card {
    height: 100%;
    background: #fff !important;
    border: 1px solid #eef0f4;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px -16px rgba(20, 41, 77, 0.4) !important;
    transform: none !important;
  }
  body .wsm-range .bc-product-media {
    height: auto !important;
    aspect-ratio: 4 / 3;
    padding: 10px;
    overflow: hidden;
  }
  body .wsm-range .bc-product-media img,
  body .wsm-range .bc-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  body .wsm-range .bc-product-body {
    padding: 0 12px 12px !important;
  }
  body .wsm-range .bc-product-title,
  body .wsm-range .bc-product-tagline,
  body .wsm-range .bc-product-cta {
    display: none !important;
  }
  body .wsm-range .bc-product-specs {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: #5a6478 !important;
  }
  body .wsm-range .bc-product-specs li span {
    font-weight: 400;
    color: inherit;
  }
  body .wsm-range .kb-slider-dots {
    margin-top: 14px;
  }

  /* ----- ideal applications ----- */
  body .wsm-apps {
    padding: 40px 0 30px !important;
    background: #f7f7f9;
  }
  body .wsm-apps .col-12 {
    text-align: left !important;
  }
  body .wsm-apps .sec-title {
    margin-bottom: 20px !important;
  }
  body .wsm-apps .ws-app-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 6px 0 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .wsm-apps .ws-app-grid::-webkit-scrollbar {
    display: none;
  }
  body .wsm-apps .ws-app-card {
    flex: 0 0 25%;
    min-width: 0;
    padding: 6px 8px !important;
    scroll-snap-align: start;
  }
  body .wsm-apps .ws-app-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fdecec;
  }
  body .wsm-apps .ws-app-icon .kg-svg-icon,
  body .wsm-apps .ws-app-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  body .wsm-apps .ws-app-label {
    font-size: 13px;
    line-height: 1.3;
  }
  body .wsm-apps .kb-slider-arrow {
    top: 42px;
    transform: none;
  }

  /* ----- process: 4 per row with › between ----- */
  body .wsm-process {
    padding: 40px 0 36px !important;
    background: #fff;
  }
  body .wsm-process .text-center {
    margin-bottom: 22px !important;
  }
  /* all steps in one row */
  body .wsm-process .bc-process-steps {
    --bs-gutter-x: 4px;
    --bs-gutter-y: 0;
    flex-wrap: nowrap !important;
  }
  body .wsm-process .bc-process-steps > .col {
    position: relative;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    cursor: pointer;
  }
  body .wsm-process .bc-process-step {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
  }
  body .wsm-process .bc-process-step::before {
    display: none !important;
  }
  /* › between steps, none after the last */
  body .wsm-process .bc-process-steps > .col .bc-process-step::after {
    content: "\203A" !important;
    position: absolute !important;
    top: 38px !important;
    right: -10px !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--kg-navy) !important;
    background: none !important;
    transform: translateX(50%) !important;
  }
  body .wsm-process .bc-process-steps > .col:last-child .bc-process-step::after {
    display: none !important;
  }
  body .wsm-process .bc-process-step-number {
    position: static !important;
    display: block;
    font-family: var(--sans) !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 20px;
    color: var(--kg-navy) !important;
    background: none !important;
    transform: none !important;
  }
  body .wsm-process .bc-process-step > span.mb-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 0 0 8px !important;
    transition: transform 0.3s;
  }
  body .wsm-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .wsm-process .bc-process-step > span.mb-3 svg {
    width: 44px !important;
    height: 44px !important;
  }
  body .wsm-process .bc-process-step h4 {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    margin: 0 !important;
    transition: color 0.3s;
  }
  body .wsm-process .bc-process-step p {
    display: none !important;
  }
  body .wsm-process .is-active .bc-process-step > span.mb-3 {
    transform: scale(1.12);
  }
  body .wsm-process .is-active .bc-process-step h4 {
    color: var(--kg-red) !important;
  }
  /* step indicator: one grey segment per step, the red one follows the
     active step (template script sets --wsm-n / --wsm-step) */
  body .wsm-process .wsm-process-bar {
    position: relative;
    height: 4px;
    margin-top: 26px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #dfe2e8 0 calc(100% / var(--wsm-n, 6) - 6px), transparent calc(100% / var(--wsm-n, 6) - 6px) calc(100% / var(--wsm-n, 6)));
  }
  body .wsm-process .wsm-process-bar i {
    position: absolute;
    top: 0;
    left: calc(var(--wsm-step, 0) * 100% / var(--wsm-n, 6));
    width: calc(100% / var(--wsm-n, 6) - 6px);
    height: 100%;
    border-radius: 2px;
    background: var(--kg-red);
    transition: left 0.4s;
  }

  /* ----- CTA: light panel, copy left, photo right behind a diagonal ----- */
  body .wsm-cta {
    padding: 0 !important;
    background: #f3f3f5 !important;
  }
  body .wsm-cta .bc-cta2-row {
    position: relative;
    display: block !important;
    min-height: 300px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
  body .wsm-cta .bc-cta2-copy {
    position: relative;
    z-index: 2;
    max-width: 58%;
    padding: 44px 0 44px 40px !important;
    margin: 0 !important;
  }
  body .wsm-cta .bc-cta2-copy h2 {
    font-family: var(--sans) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--kg-navy) !important;
    margin: 0 0 12px !important;
  }
  body .wsm-cta .bc-cta2-copy p {
    max-width: 340px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #4a5568 !important;
    margin: 0 0 22px !important;
  }
  body .wsm-cta .bc-cta2-copy .btn-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
  }
  body .wsm-cta .bc-cta2-photo {
    position: absolute !important;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50% !important;
    min-height: 0 !important;
    margin: 0 !important;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  }
  body .wsm-cta .bc-cta2-photo img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    clip-path: none !important;
  }
}
@media (max-width: 767.98px) {
  body .wsm-hero > div > .row > .col-lg-6:first-child {
    padding: 0 22px !important;
  }
  body .wsm-hero .bc-hero-copy {
    padding: 30px 0 22px !important;
  }
  body .wsm-hero .bc-hero-copy h1 {
    max-width: 300px;
    font-size: 40px !important;
  }
  body .wsm-hero .bc-hero-text {
    max-width: 280px;
    font-size: 14.5px !important;
  }
  body .wsm-hero .wsm-hero-actions {
    gap: 10px;
    margin-top: 18px;
  }
  body .wsm-hero .wsm-hero-actions .btn-red,
  body .wsm-hero .wsm-hero-actions .btn-navy {
    padding: 11px 18px;
    font-size: 12px;
  }
  body .wsm-hero .wsm-features {
    margin-top: 24px;
  }
  body .wsm-hero .bc-hero-features {
    padding: 14px 2px !important;
  }
  body .wsm-hero .bc-hero-feature {
    padding: 0 4px !important;
  }
  body .wsm-hero .bc-hero-feature-icon .kg-svg-icon,
  body .wsm-hero .bc-hero-feature-icon svg {
    width: 34px !important;
    height: 34px !important;
  }
  body .wsm-hero .bc-hero-feature-label {
    font-size: 11px !important;
  }
  body .wsm-hero .ws-eyebrow,
  body .wsm-range .ws-eyebrow,
  body .wsm-apps .ws-eyebrow,
  body .wsm-process .ws-eyebrow {
    font-size: 11.5px !important;
    padding-left: 28px !important;
  }
  body .wsm-hero .ws-eyebrow::before,
  body .wsm-range .ws-eyebrow::before,
  body .wsm-apps .ws-eyebrow::before,
  body .wsm-process .ws-eyebrow::before {
    width: 20px !important;
  }
  body .wsm-range .sec-title,
  body .wsm-apps .sec-title,
  body .wsm-process .sec-title {
    font-size: 24px !important;
  }
  body .wsm-range .wsm-head {
    padding-right: 52px;
  }
  body .wsm-range .wsm-head .kb-slider-arrow {
    top: 40px;
  }
  body .wsm-range .wsm-range-text {
    font-size: 13.5px;
  }
  body .wsm-range .kb-slider-track {
    --bs-gutter-x: 10px;
  }
  body .wsm-range .bc-product-media {
    padding: 6px;
  }
  body .wsm-range .bc-product-body {
    padding: 0 8px 10px !important;
  }
  body .wsm-range .bc-product-specs {
    font-size: 10.5px !important;
  }
  body .wsm-apps .ws-app-card {
    padding: 4px 4px !important;
  }
  body .wsm-apps .ws-app-icon {
    width: 46px;
    height: 46px;
  }
  body .wsm-apps .ws-app-icon .kg-svg-icon,
  body .wsm-apps .ws-app-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  body .wsm-apps .ws-app-label {
    font-size: 10.5px;
  }
  body .wsm-apps .kb-slider-arrow {
    top: 34px;
  }
  body .wsm-process .bc-process-steps {
    --bs-gutter-x: 2px;
  }
  body .wsm-process .bc-process-step-number {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }
  body .wsm-process .bc-process-step > span.mb-3 {
    height: 32px;
    margin-bottom: 6px !important;
  }
  body .wsm-process .bc-process-step > span.mb-3 .kg-svg-icon,
  body .wsm-process .bc-process-step > span.mb-3 svg {
    width: 28px !important;
    height: 28px !important;
  }
  body .wsm-process .bc-process-steps > .col .bc-process-step::after {
    top: 28px !important;
    right: -1px !important;
    font-size: 18px !important;
  }
  body .wsm-process .bc-process-step h4 {
    font-size: 8px !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }
  /* thin banner on phones */
  body .wsm-cta .bc-cta2-row {
    min-height: 170px;
  }
  body .wsm-cta .bc-cta2-photo {
    width: 42% !important;
  }
  body .wsm-cta .bc-cta2-copy {
    max-width: 62%;
    padding: 18px 0 18px 22px !important;
  }
  body .wsm-cta .bc-cta2-copy h2 {
    font-size: 19px !important;
    margin-bottom: 6px !important;
  }
  body .wsm-cta .bc-cta2-copy p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  body .wsm-cta .bc-cta2-copy .btn-red {
    padding: 8px 14px;
    font-size: 11px;
  }
}

/* =========================================================================
   CONCRETE BLOCKS — MOBILE & TABLET (concrete-blocks.php, < 992px only;
   desktop untouched). Scoped to the cbm-* hooks in that template.
   - Hero: photo top-right behind the copy (white fade), uppercase title,
     the 3 features in a row with dividers (icon, label, description).
   - Block range: title with a red View All beside it, description, cards
     swipe ~2 per view (image, title, tagline, View Details) with dots.
   - Process: numbers + icons in one row joined by lines, the active step
     red with a soft circle; a panel below shows its title + text with
     ‹ › arrows and dots (template script).
   - Get a Quotation: blocks photo behind the card (white fade from the
     top), red diagonal accent, the 3 features in a row with dividers.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* ----- hero ----- */
  body .cbm-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
    background: #fff !important;
  }
  body .cbm-hero > div > .row {
    position: relative;
    margin: 0;
  }
  body .cbm-hero > div > .row > .col-lg-5 {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px !important;
  }
  body .cbm-hero > div > .row > .col-lg-7 {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
  }
  body .cbm-hero .bc-hero-media {
    position: absolute !important;
    inset: 0 0 auto 0;
    height: 72% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body .cbm-hero .bc-hero-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 75% center;
    border-radius: 0 !important;
  }
  body .cbm-hero .bc-hero-media::before,
  body .cbm-hero .bc-hero-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.85) 42%, rgba(255, 255, 255, 0.05) 85%) !important;
  }
  /* fade the photo out into white under the features */
  body .cbm-hero .bc-hero-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%) !important;
  }
  body .cbm-hero .bc-hero-copy {
    max-width: 640px;
    padding: 48px 0 30px !important;
    margin: 0 !important;
    text-align: left;
  }
  body .cbm-hero .eyebrow {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    letter-spacing: 3px;
    color: var(--kg-red) !important;
    transform: none;
  }
  body .cbm-hero .bc-hero-copy h1 {
    max-width: 520px;
    font-family: var(--sans) !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  body .cbm-hero .bc-hero-copy h1::before,
  body .cbm-hero .bc-hero-copy h1::after {
    display: none !important;
  }
  body .cbm-hero .bc-hero-text {
    max-width: 420px;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #33415c !important;
    margin: 0 !important;
  }
  body .cbm-hero .bc-hero-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    margin: 40px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .cbm-hero .bc-hero-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 4px 10px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  body .cbm-hero .bc-hero-feature + .bc-hero-feature {
    border-left: 1px solid #d9dce3 !important;
  }
  body .cbm-hero .bc-hero-feature::before,
  body .cbm-hero .bc-hero-feature::after {
    display: none !important;
  }
  body .cbm-hero .bc-hero-feature-icon {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .cbm-hero .bc-hero-feature-icon .kg-svg-icon,
  body .cbm-hero .bc-hero-feature-icon svg {
    width: 50px !important;
    height: 50px !important;
  }
  body .cbm-hero .bc-hero-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  body .cbm-hero .bc-hero-feature-label {
    display: block;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
  body .cbm-hero .bc-hero-feature-desc {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #6b7383 !important;
  }

  /* ----- block range ----- */
  body .cbm-range {
    padding: 40px 0 34px !important;
    background: #fff;
    border-top: 1px solid #eceef2;
  }
  body .cbm-range .bc-range-layout {
    --bs-gutter-y: 20px;
  }
  body .cbm-range .bc-range-intro {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
  }
  body .cbm-range .bc-range-intro > * {
    grid-column: 1 / -1;
  }
  body .cbm-range .bc-range-intro .eyebrow {
    margin: 0 0 8px !important;
    font-size: 13px !important;
    letter-spacing: 3px;
    color: var(--kg-red) !important;
    transform: none;
  }
  body .cbm-range .bc-range-intro .sec-title {
    grid-column: 1;
    font-family: var(--sans) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .cbm-range .bc-range-intro .sec-title::before,
  body .cbm-range .bc-range-intro .sec-title::after {
    display: none !important;
  }
  body .cbm-range .bc-range-intro .btn-red {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 6px;
  }
  body .cbm-range .bc-range-desc {
    max-width: none !important;
    margin: 12px 0 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: #4a5568;
  }
  body .cbm-range .kb-slider-track > .col {
    flex: 0 0 30% !important;
    width: 30% !important;
    max-width: none !important;
  }
  body .cbm-range .bc-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff !important;
    border: 1px solid #eef0f4;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px -16px rgba(20, 41, 77, 0.4) !important;
    transform: none !important;
  }
  body .cbm-range .bc-product-media {
    height: auto !important;
    aspect-ratio: 4 / 3;
    padding: 14px 14px 0;
  }
  body .cbm-range .bc-product-media img,
  body .cbm-range .bc-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  body .cbm-range .bc-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 12px 16px 16px !important;
  }
  body .cbm-range .bc-product-title {
    font-family: var(--sans) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--kg-navy) !important;
    margin: 0 0 6px !important;
  }
  body .cbm-range .bc-product-tagline {
    display: block !important;
    flex: 1;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #6b7383 !important;
    margin: 0 0 12px !important;
  }
  body .cbm-range .bc-product-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
  }
  body .cbm-range .kb-slider-dots {
    gap: 0;
    margin-top: 16px;
  }
  body .cbm-range .kb-slider-dots button,
  body .cbm-process .cbm-step-dots button {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: #d6d8de;
    background-clip: content-box;
    cursor: pointer;
  }
  body .cbm-range .kb-slider-dots button.active,
  body .cbm-process .cbm-step-dots button.active {
    background-color: var(--kg-red);
  }

  /* ----- process ----- */
  body .cbm-process {
    padding: 40px 0 34px !important;
    background: #fff;
  }
  body .cbm-process .sec-title {
    font-family: var(--sans) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
  body .cbm-process .bc-process-steps {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap;
    margin-top: 26px !important;
  }
  body .cbm-process .bc-process-steps > .col {
    position: relative;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    cursor: pointer;
  }
  /* line joining the icons */
  body .cbm-process .bc-process-steps > .col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 66px;
    left: calc(50% + 30px);
    right: calc(-50% + 30px);
    height: 1.5px;
    background: #cfd3da;
  }
  body .cbm-process .bc-process-step {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body .cbm-process .bc-process-step::before,
  body .cbm-process .bc-process-step::after {
    display: none !important;
  }
  body .cbm-process .bc-process-step-top {
    flex-direction: column;
    gap: 10px;
    margin: 0;
  }
  body .cbm-process .bc-process-step-top .bc-process-step-number {
    position: static !important;
    margin: 0 !important;
    font-family: var(--sans) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    color: #b9bec8 !important;
    background: none !important;
    transform: none !important;
    transition: color 0.3s;
  }
  body .cbm-process .bc-process-step-top > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transition: background 0.3s;
  }
  body .cbm-process .bc-process-step-top > span:last-child .kg-svg-icon,
  body .cbm-process .bc-process-step-top > span:last-child svg {
    width: 40px !important;
    height: 40px !important;
  }
  body .cbm-process .bc-process-step h4,
  body .cbm-process .bc-process-step p {
    display: none !important;
  }
  body .cbm-process .is-active .bc-process-step-number {
    color: var(--kg-red) !important;
  }
  body .cbm-process .is-active .bc-process-step-top > span:last-child {
    background: #fde5e5;
  }
  body .cbm-process .cbm-step-detail {
    position: relative;
    margin-top: 28px;
    padding: 0 56px;
    text-align: center;
  }
  body .cbm-process .cbm-step-copy {
    min-height: 64px;
  }
  body .cbm-process .cbm-step-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--kg-navy);
  }
  body .cbm-process .cbm-step-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: #5a6478;
  }
  body .cbm-process .cbm-step-detail .kb-slider-arrow {
    top: 32px;
    background: #f1f2f5;
    box-shadow: none;
  }
  body .cbm-process .cbm-step-detail .kb-slider-arrow.prev {
    left: 0;
  }
  body .cbm-process .cbm-step-detail .kb-slider-arrow.next {
    right: 0;
  }
  body .cbm-process .cbm-step-dots {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }

  /* ----- get a quotation ----- */
  body .cbm-quote {
    padding: 0 !important;
  }
  body .cbm-quote .kg-container {
    max-width: none;
    padding: 0;
  }
  body .cbm-quote .qb-card {
    position: relative;
    display: block !important;
    min-height: 0;
    padding: 32px 40px 150px !important; /* thin: less photo below */
    overflow: hidden;
    text-align: left !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .cbm-quote .qb-head,
  body .cbm-quote .qb-features,
  body .cbm-quote .qb-btn {
    position: relative;
    z-index: 2;
  }
  body .cbm-quote .qb-head {
    padding: 0 !important;
  }
  body .cbm-quote .qb-eyebrow {
    margin-bottom: 26px;
    font-size: 15px;
    letter-spacing: 4px;
  }
  body .cbm-quote .qb-eyebrow::after {
    left: 0;
    bottom: -12px;
    width: 44px;
    height: 2px;
    transform: none;
  }
  body .cbm-quote .qb-head .sec-title {
    margin: 0 !important;
    font-family: var(--sans) !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
  }
  body .cbm-quote .qb-head .sec-title::before,
  body .cbm-quote .qb-head .sec-title::after {
    display: none !important;
  }
  body .cbm-quote .qb-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    max-width: 560px;
    margin: 20px 0 0 !important;
    padding: 0 !important;
  }
  body .cbm-quote .qb-feature {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px !important;
    border-left: 1px solid #cfd3da !important;
    text-align: center;
  }
  body .cbm-quote .qb-feature:first-child {
    border-left: 0 !important;
  }
  body .cbm-quote .qb-feature-icon,
  body .cbm-quote .qb-feature:last-child .qb-feature-icon {
    width: 50px;
    height: 50px;
  }
  body .cbm-quote .qb-feature-text {
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.3px;
    white-space: normal;
    text-align: center;
  }
  body .cbm-quote .qb-feature-text br {
    display: inline;
  }
  body .cbm-quote .qb-btn {
    display: inline-flex;
    width: auto;
    max-width: none;
    margin-top: 20px;
    padding: 0 22px 0 26px;
    height: 50px;
    font-size: 16px;
    border-radius: 6px;
  }
  /* photo behind the whole card, faded to white at the top */
  body .cbm-quote .qb-art {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important; /* auto + inset doesn't stretch it here */
    margin: 0 !important;
  }
  body .cbm-quote .qb-art-img,
  body .cbm-quote .qb-art-photo {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: 70% bottom;
    mix-blend-mode: normal;
    transform: none !important;
  }
  /* the desktop artwork gives way to the hero photo when there is one */
  body .cbm-quote .qb-art-photo ~ .qb-art-photo,
  body .cbm-quote .qb-art:has(.qb-art-photo) .qb-art-img {
    display: none !important;
  }
  body .cbm-quote .qb-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.5) 68%, rgba(255, 255, 255, 0) 88%);
  }
  /* red diagonal accent on the right */
  body .cbm-quote .qb-art-red {
    inset: 22% 0 auto auto !important;
    z-index: 1;
    width: 38% !important;
    height: 46% !important;
    background: var(--kg-red) !important;
    opacity: 0.9;
    clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  body .cbm-quote .qb-art-blue,
  body .cbm-quote .qb-art-dots {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  body .cbm-hero > div > .row > .col-lg-5 {
    padding: 0 20px !important;
  }
  body .cbm-hero .bc-hero-copy {
    padding: 30px 0 24px !important;
  }
  body .cbm-hero .eyebrow {
    font-size: 11.5px !important;
  }
  body .cbm-hero .bc-hero-copy h1 {
    max-width: 320px;
    font-size: 30px !important;
  }
  body .cbm-hero .bc-hero-text {
    max-width: 290px;
    font-size: 14px !important;
  }
  body .cbm-hero .bc-hero-features {
    margin-top: 30px !important;
  }
  body .cbm-hero .bc-hero-feature {
    gap: 8px !important;
    padding: 2px 6px !important;
  }
  body .cbm-hero .bc-hero-feature-icon .kg-svg-icon,
  body .cbm-hero .bc-hero-feature-icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  body .cbm-hero .bc-hero-feature-label {
    font-size: 11.5px !important;
  }
  body .cbm-hero .bc-hero-feature-desc {
    font-size: 10.5px !important;
  }
  body .cbm-range .bc-range-intro .eyebrow {
    font-size: 11.5px !important;
  }
  body .cbm-range .bc-range-intro {
    column-gap: 10px;
  }
  body .cbm-range .bc-range-intro .sec-title {
    font-size: 22px !important;
  }
  body .cbm-range .bc-range-intro .btn-red {
    gap: 6px;
    padding: 9px 12px;
    font-size: 11px;
  }
  body .cbm-range .bc-range-intro .btn-red svg {
    width: 16px;
    height: 16px;
  }
  body .cbm-range .bc-range-desc {
    font-size: 13.5px;
  }
  body .cbm-range .kb-slider-track {
    --bs-gutter-x: 12px;
  }
  body .cbm-range .kb-slider-track > .col {
    flex-basis: 44% !important;
    width: 44% !important;
  }
  body .cbm-range .bc-product-media {
    padding: 10px 10px 0;
  }
  body .cbm-range .bc-product-body {
    padding: 10px 12px 12px !important;
  }
  body .cbm-range .bc-product-title {
    font-size: 15px !important;
  }
  body .cbm-range .bc-product-tagline {
    font-size: 12px !important;
  }
  body .cbm-range .bc-product-cta {
    font-size: 11.5px !important;
  }
  body .cbm-process .sec-title {
    font-size: 22px !important;
  }
  body .cbm-process .bc-process-step-top .bc-process-step-number {
    font-size: 15px !important;
  }
  body .cbm-process .bc-process-step-top > span:last-child {
    width: 46px;
    height: 46px;
  }
  body .cbm-process .bc-process-step-top > span:last-child .kg-svg-icon,
  body .cbm-process .bc-process-step-top > span:last-child svg {
    width: 28px !important;
    height: 28px !important;
  }
  body .cbm-process .bc-process-steps > .col:not(:last-child)::after {
    top: 51px;
    left: calc(50% + 23px);
    right: calc(-50% + 23px);
  }
  body .cbm-process .cbm-step-detail {
    margin-top: 22px;
    padding: 0 46px;
  }
  body .cbm-process .cbm-step-title {
    font-size: 16px;
  }
  body .cbm-process .cbm-step-text {
    font-size: 13.5px;
  }
  body .cbm-process .cbm-step-detail .kb-slider-arrow {
    top: 22px;
  }
  /* phones: no empty photo strip under the button — the photo sits
     behind the content, under a stronger white fade */
  body .cbm-quote .qb-card {
    padding: 24px 20px 26px !important;
  }
  body .cbm-quote .qb-art::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.94) 40%, rgba(255, 255, 255, 0.78) 75%, rgba(255, 255, 255, 0.55) 100%);
  }
  body .cbm-quote .qb-art-red {
    inset: 30% 0 auto auto !important;
    width: 34% !important;
    height: 70% !important;
    opacity: 0.75;
  }
  body .cbm-quote .qb-eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
  }
  body .cbm-quote .qb-eyebrow {
    margin-bottom: 20px;
  }
  body .cbm-quote .qb-head .sec-title {
    font-size: 28px !important;
  }
  body .cbm-quote .qb-features {
    margin-top: 16px !important;
  }
  body .cbm-quote .qb-feature {
    padding: 0 6px !important;
  }
  body .cbm-quote .qb-feature {
    gap: 6px;
  }
  body .cbm-quote .qb-feature-icon,
  body .cbm-quote .qb-feature:last-child .qb-feature-icon {
    width: 32px;
    height: 32px;
  }
  body .cbm-quote .qb-feature-text {
    font-size: 10.5px;
  }
  body .cbm-quote .qb-btn {
    height: 44px;
    margin-top: 16px;
    padding: 0 18px 0 20px;
    font-size: 12.5px;
  }
}

/* ---- Wheel Stoppers: "Strong, durable and dependable" (.wsm-why) ----
   Desktop: the slider wrapper takes the features row's old flex slot so
   the copy | features | photo layout is unchanged. Phones/tablets: no
   photo (hidden in the template), the features in ONE swipe row (3 per
   view) autoplayed by the template script, with dots. */
@media (min-width: 992px) {
  body .wsm-why .wsm-why-slider {
    flex: 1 1 320px;
    min-width: 0;
  }
  body .wsm-why .wsm-why-slider .ws-reliability-row--flush {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  body .wsm-why {
    padding: 40px 0 34px !important;
    background: #fff;
  }
  body .wsm-why .ws-reliability-flex {
    display: block;
  }
  body .wsm-why .ws-reliability-copy {
    max-width: none;
    margin-bottom: 22px;
  }
  body .wsm-why .ws-eyebrow {
    position: relative;
    display: inline-block !important;
    padding-left: 34px !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kg-red) !important;
    transform: none;
  }
  body .wsm-why .ws-eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: var(--kg-red) !important;
    transform: translateY(-50%) !important;
    display: block !important;
  }
  body .wsm-why .ws-eyebrow::after {
    display: none !important;
  }
  body .wsm-why .sec-title {
    font-family: var(--sans) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
    color: var(--kg-navy) !important;
    text-align: left !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  body .wsm-why .sec-title::before,
  body .wsm-why .sec-title::after {
    display: none !important;
  }
  body .wsm-why .ws-reliability-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4a5568;
  }
  /* one row that swipes */
  body .wsm-why .ws-reliability-row--flush {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 4px 0 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body .wsm-why .ws-reliability-row--flush::-webkit-scrollbar {
    display: none;
  }
  body .wsm-why .ws-reliability-item {
    flex: 0 0 33.3333% !important;
    min-width: 0;
    gap: 10px !important;
    padding: 4px 12px !important;
    border-right: 0 !important;
    border-left: 1px solid #e3e5ea !important;
    text-align: center;
    scroll-snap-align: start;
  }
  body .wsm-why .ws-reliability-item:first-child {
    border-left: 0 !important;
  }
  body .wsm-why .ws-reliability-icon .kg-svg-icon,
  body .wsm-why .ws-reliability-icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  body .wsm-why .ws-reliability-item h4 {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  body .wsm-why .ws-reliability-item p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  body .wsm-why .kb-slider-dots {
    gap: 0;
    margin-top: 10px;
  }
  body .wsm-why .kb-slider-dots button {
    box-sizing: content-box;
    padding: 7px;
    background-clip: content-box;
    cursor: pointer;
    transition: width 0.25s;
  }
  body .wsm-why .kb-slider-dots button.active {
    width: 22px;
    border-radius: 12px;
  }
}
@media (max-width: 767.98px) {
  body .wsm-why .ws-eyebrow {
    font-size: 11.5px !important;
    padding-left: 28px !important;
  }
  body .wsm-why .ws-eyebrow::before {
    width: 20px !important;
  }
  body .wsm-why .sec-title {
    font-size: 24px !important;
  }
  body .wsm-why .ws-reliability-text {
    font-size: 13.5px;
  }
  body .wsm-why .ws-reliability-item {
    padding: 2px 6px !important;
  }
  body .wsm-why .ws-reliability-icon .kg-svg-icon,
  body .wsm-why .ws-reliability-icon svg {
    width: 34px !important;
    height: 34px !important;
  }
  body .wsm-why .ws-reliability-item h4 {
    font-size: 11px !important;
  }
  body .wsm-why .ws-reliability-item p {
    font-size: 10.5px !important;
  }
}

/* =========================================================================
   CONCRETE BLOCKS — FULL CATALOGUE, MOBILE & TABLET
   (concrete-blocks-catalogue.php, < 992px only; desktop untouched).
   Each group's cards and the Key Features list become ONE swipe row
   (3 cards / 2 features per view on phones, 4 / 3 on tablets). Targets
   the catalogue's own markup, so the row works even with the old
   template; the dots + autoplay come from the template's script.
   ========================================================================= */
@media (max-width: 991.98px) {
  body .bc-catalogue .bc-catalogue-group {
    margin-bottom: 30px;
  }
  body .bc-catalogue .bc-catalogue-group .row,
  body .bc-catalogue .bc-kf-grid {
    display: flex;
    flex-wrap: nowrap !important;
    margin-top: 0 !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  body .bc-catalogue .bc-catalogue-group .row::-webkit-scrollbar,
  body .bc-catalogue .bc-kf-grid::-webkit-scrollbar {
    display: none;
  }
  body .bc-catalogue .bc-catalogue-group .row {
    --bs-gutter-y: 0;
  }
  body .bc-catalogue .bc-catalogue-group .row > .col {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: none !important;
    margin-top: 0 !important;
    scroll-snap-align: start;
  }
  /* square cards: the image area was a fixed 210px tall, which made
     the narrow phone cards twice as tall as wide */
  body .bc-catalogue .bc-catalogue-card {
    height: auto;
    border-radius: 10px;
  }
  body .bc-catalogue .bc-catalogue-card .bc-mini-card-media {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  body .bc-catalogue .bc-catalogue-card .bc-mini-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body .bc-catalogue .kb-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 6px;
  }
  /* 10px dots, but a 24px tap target around each */
  body .bc-catalogue .kb-slider-dots button {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: #d6d8de;
    background-clip: content-box;
    cursor: pointer;
    transition: width 0.25s;
  }
  body .bc-catalogue .kb-slider-dots button.active {
    width: 22px;
    border-radius: 12px;
    background-color: var(--kg-red);
  }

  /* key features: icon on top, one swipe row */
  body .bc-catalogue .bc-kf-grid {
    display: flex !important;
    gap: 0 !important;
    row-gap: 0 !important;
    margin: 0 !important;
  }
  body .bc-catalogue .bc-kf-item,
  body .bc-catalogue .bc-kf-item:nth-child(odd),
  body .bc-catalogue .bc-kf-item:nth-child(even) {
    flex: 0 0 33.3333%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 16px !important;
    border-top: 0 !important;
    border-left: 1px solid #e2e2e2 !important;
    text-align: center;
    scroll-snap-align: start;
  }
  body .bc-catalogue .bc-kf-item:first-child {
    border-left: 0 !important;
  }
  body .bc-catalogue .bc-kf-icon {
    flex: 0 0 auto;
  }
  body .bc-catalogue .bc-kf-card .kb-slider {
    margin-bottom: 26px;
  }
}
@media (max-width: 767.98px) {
  body .bc-catalogue .bc-catalogue-group .row > .col {
    flex-basis: 33.3333% !important;
    width: 33.3333% !important;
  }
  body .bc-catalogue .bc-kf-item,
  body .bc-catalogue .bc-kf-item:nth-child(odd),
  body .bc-catalogue .bc-kf-item:nth-child(even) {
    flex-basis: 50%;
    gap: 10px;
    padding: 0 10px !important;
  }
  body .bc-catalogue .bc-kf-icon {
    width: 40px;
    height: 40px;
  }
  body .bc-catalogue .bc-kf-item h3 {
    font-size: 13px;
  }
  body .bc-catalogue .bc-kf-item p {
    font-size: 12.5px;
    line-height: 1.45;
  }
}