/* Approved option 01: white, charcoal and SPS yellow. Presentation only. */
:root {
  --sps-brand-yellow: #ffd000;
  --sps-brand-yellow-hover: #edc200;
  --sps-brand-soft: #fff6cc;
  --background: #fff;
  --foreground: #202124;
  --card: #fff;
  --card-foreground: #202124;
  --popover: #fff;
  --popover-foreground: #202124;
  --muted: #f4f4f3;
  --muted-foreground: #55575b;
  --border: #dcdcdc;
  --input: #dcdcdc;
  --primary: #202124;
  --primary-foreground: #fff;
  --secondary: #f4f4f3;
  --secondary-foreground: #202124;
  --accent: #ffd000;
  --accent-foreground: #202124;
  --ring: #202124;
  --sps-primary: #202124;
  --sps-primary-dark: #111;
  --sps-secondary: #393b3e;
  --sps-accent: #ffd000;
  --sps-neutral-50: #f7f7f6;
  --sps-neutral-100: #f1f1f0;
  --sps-neutral-400: #77797d;
  --sps-neutral-500: #55575b;
  --sps-neutral-600: #55575b;
  --sps-neutral-700: #393b3e;
  --sps-neutral-900: #202124;
}
body { color: #202124; background-color: #fff; }
.gradient-bg {
  background: #f4f4f3 !important;
  color: #202124;
  border-bottom: 3px solid var(--sps-brand-yellow);
}
.gradient-bg :is(h1, h2, h3, [class~="text-white"], [class~="text-white/80"], [class~="text-white/60"], [class~="text-blue-100"]) { color: #202124 !important; }
.gradient-bg p { color: #55575b !important; }
.gradient-bg h1::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  margin: 0 0 1.25rem;
  background: var(--sps-brand-yellow);
}
.gradient-bg .text-center h1::before,
.gradient-bg h1.text-center::before { margin-left: auto; margin-right: auto; }
[class~="text-[hsl(var(--sps-primary))]"],
[class~="text-[hsl(var(--sps-accent))]"] { color: #202124; }
[class~="border-[hsl(var(--sps-primary))]"] { border-color: #202124; }
[class~="bg-[hsl(var(--sps-primary)/0.1)]"],
[class~="bg-[hsl(var(--sps-primary))]/10"] { background: #f4f4f3; }
[class~="bg-[hsl(var(--sps-accent))]"] { background: var(--sps-brand-yellow); color: #202124; }
[class~="bg-[hsl(var(--sps-primary))]"] { background: #202124; color: #fff; }
[class~="hover:text-[hsl(var(--sps-primary))]"]:hover,
[class~="hover:text-[hsl(var(--sps-primary-dark))]"]:hover,
.group:hover [class~="group-hover:text-[hsl(var(--sps-primary))]"] { color: #202124; }
[class~="hover:border-[hsl(var(--sps-primary))]"]:hover { border-color: #9d8100; }
[class~="hover:bg-[hsl(var(--sps-primary))]"]:hover { background: var(--sps-brand-soft); color: #202124; }
[class~="focus:border-[hsl(var(--sps-primary))]"]:focus { border-color: #202124; }

/* Header: original logo, black labels, a yellow current-section marker. */
.buyer-nav { box-shadow: 0 2px 8px rgb(32 33 36 / .08); }
.buyer-nav [aria-current="page"],
.buyer-nav__group[data-active-section="true"] > .buyer-nav__group-heading > a,
.buyer-nav__group[data-active-section="true"] .buyer-nav__about-label {
  color: #202124;
  text-decoration: underline;
  text-decoration-color: var(--sps-brand-yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: .65rem;
}
.buyer-nav__panel a:hover { background: var(--sps-brand-soft); color: #202124; }
.buyer-nav__panel [aria-current="page"] { background: var(--sps-brand-soft); text-underline-offset: .2rem; }
.buyer-nav__links > a:hover,
.buyer-nav__group-heading > a:hover,
.buyer-nav__about-toggle:hover .buyer-nav__about-label { color: #202124; text-decoration: underline; text-decoration-color: var(--sps-brand-yellow); text-decoration-thickness: 3px; text-underline-offset: .65rem; }

/* Yellow is reserved for actions, always paired with dark lettering. */
.buyer-email-link, .grapple-button, .vibro-dialog-close,
.gradient-bg .cta-button,
a[class~="bg-[hsl(221,83%,53%)]"],
a[class~="bg-[hsl(var(--sps-primary))]"],
button[class~="bg-[hsl(var(--sps-primary))]"],
a[style*="background: linear-gradient(to right, hsl(221"] {
  background: var(--sps-brand-yellow) !important;
  color: #202124 !important;
  border-color: var(--sps-brand-yellow) !important;
  box-shadow: 0 3px 8px rgb(32 33 36 / .08);
}
.buyer-email-link:hover, .grapple-button:hover, .vibro-dialog-close:hover,
.gradient-bg .cta-button:hover,
a[class~="bg-[hsl(221,83%,53%)]"]:hover,
a[class~="bg-[hsl(var(--sps-primary))]"]:hover,
button[class~="bg-[hsl(var(--sps-primary))]"]:hover,
a[style*="background: linear-gradient(to right, hsl(221"]:hover { background: var(--sps-brand-yellow-hover) !important; color: #202124 !important; }
.gradient-bg .cta-button :is(span, svg) { color: inherit !important; }
:is(a, button)[style*="border-color: hsl(22"] { border-color: #202124 !important; color: #202124 !important; }
#productLineupBtn, a[href="/portfolio/construction/chisel-brand"][style] { background: #fff !important; color: #202124 !important; border-color: #202124 !important; }
#productLineupBtn.active, #productLineupBtn:hover,
a[href="/portfolio/construction/chisel-brand"][style]:hover { background: var(--sps-brand-soft) !important; color: #202124 !important; }
.buyer-contact-link { color: #202124; border-color: #c8c8c8; }
.buyer-contact-link:hover { background: #f1f1f0; }
.buyer-search-result:hover { background: var(--sps-brand-soft); }
.buyer-search-kind { color: #55575b; }
.buyer-inquiry { background: #f4f4f3; }
a[data-contact-icon] { align-items: center; gap: .625rem; }
a[data-contact-icon] svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
a[data-contact-icon] span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  a[data-contact-icon] { padding-left: .5rem; padding-right: .5rem; gap: .5rem; }
}
.nav-active { background-color: var(--sps-brand-yellow) !important; color: #202124 !important; border-color: var(--sps-brand-yellow) !important; }
.nav-inactive:hover { background-color: var(--sps-brand-soft); color: #202124 !important; border-color: #9d8100 !important; }

/* Product category hover must also override the old white child text. */
a[class~="hover:bg-blue-600"] { background: #fff; border-color: #dcdcdc; color: #202124; }
a[class~="hover:bg-blue-600"]:hover,
a[class~="hover:bg-blue-600"]:focus-visible { background: var(--sps-brand-soft) !important; border-color: #d8b400; color: #202124 !important; }
a[class~="hover:bg-blue-600"]:is(:hover, :focus-visible) [class~="group-hover:!text-white"] { color: #202124 !important; }

/* Neutral product type cards retain their labels and contents. */
[class~="from-blue-50"], [class~="from-purple-50"], [class~="from-green-50"] { background: #f7f7f6 !important; border-color: #dcdcdc !important; }
a:is([href="#standard-type"], [href="#tilting-type"], [href="#side-grip-type"]):hover { background: var(--sps-brand-soft) !important; border-color: #d8b400 !important; }
:is(#standard-type, #tilting-type, #side-grip-type) { border-color: var(--sps-brand-yellow) !important; }
:is(#standard-type, #tilting-type, #side-grip-type) :is([class~="bg-blue-100"], [class~="bg-purple-100"], [class~="bg-green-100"]) { background: var(--sps-brand-soft); color: #202124; }
.grapple-spec-table thead th, .grapple-model-card h3 { background: #202124; color: #fff; }
.grapple-eyebrow { color: #55575b; }
.grapple-hero h1 { border-left: 4px solid var(--sps-brand-yellow); padding-left: 1rem; }
.vibro-watch-link, .vibro-photo-label, .vibro-detail-links a { color: #202124; }
.vibro-detail-photo-gallery { border-top-color: #dcdcdc; }

/* Keep photographic content, video controls and error colors unchanged. */
button.fixed[class~="from-blue-600"] {
  background: var(--sps-brand-yellow) !important;
  color: #202124 !important;
  border-color: #fff !important;
  box-shadow: 0 3px 10px rgb(32 33 36 / .2) !important;
}
footer.bg-gray-900 { background: #202124; }
footer a:hover { color: var(--sps-brand-yellow) !important; }
:is(a, button, input, select, textarea):focus-visible { outline: 2px solid #202124; outline-offset: 3px; }
footer :is(a, button):focus-visible { outline-color: var(--sps-brand-yellow); }

/* Show the complete, square source photographs in the three home sector cards. */
#services img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Real text replaces the organization-chart bitmap; the hierarchy is unchanged. */
.sps-org-chart { margin: 0 0 3rem; padding: 2rem 0; color: #202124; user-select: text; }
.sps-org-chart .sps-org-tree,
.sps-org-chart .sps-org-branches { list-style: none; margin: 0; padding: 0; }
.sps-org-chart .sps-org-tree > li { margin: 0; padding: 0; }
.sps-org-ceo { position: relative; width: 12rem; margin: 0 auto 3rem; padding: 1.25rem; border-top: 4px solid #ffd000; border-radius: .75rem; background: #202124; color: #fff; text-align: center; font-size: 1.5rem; font-weight: 700; }
.sps-org-ceo::after { content: ""; position: absolute; top: 100%; left: 50%; height: 3rem; border-left: 2px solid #b8b9bc; }
.sps-org-chart .sps-org-branches { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.sps-org-branches::before { content: ""; position: absolute; top: 0; left: calc(10% - .4rem); right: calc(10% - .4rem); border-top: 2px solid #b8b9bc; }
.sps-org-chart .sps-org-branch { position: relative; margin: 0; padding: 2rem 0 0; }
.sps-org-branch::before { content: ""; position: absolute; top: 0; left: 50%; height: 2rem; border-left: 2px solid #b8b9bc; }
.sps-org-department { height: 100%; border: 1px solid #dcdcdc; border-radius: .75rem; overflow: hidden; background: #fff; }
.sps-org-chart .sps-org-department h3 { display: flex; align-items: center; justify-content: center; min-height: 6.75rem; margin: 0; padding: 1rem .75rem; border-top: 3px solid #ffd000; background: #fff6cc; color: #202124; text-align: center; font-size: 1.125rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sps-org-chart .sps-org-responsibilities { list-style: disc; margin: 0; padding: 1.25rem 1rem 1.25rem 2rem; color: #393b3e; font-size: 1rem; line-height: 1.6; }
.sps-org-chart .sps-org-responsibilities li { margin: 0 0 .5rem; padding: 0; }
.sps-org-chart .sps-org-responsibilities li:last-child { margin-bottom: 0; }
.sps-org-chart ::selection,
.sps-facility figcaption ::selection { background: #ffd000; color: #202124; }
@media (max-width: 1023px) {
  .sps-org-chart { padding: 1rem 0; }
  .sps-org-ceo { margin-left: 0; margin-bottom: 2rem; }
  .sps-org-ceo::after { left: 1rem; height: 2rem; }
  .sps-org-chart .sps-org-branches { display: block; margin-left: 1rem; padding-left: 1.5rem; }
  .sps-org-branches::before { display: none; }
  .sps-org-chart .sps-org-branch { padding: 0 0 1rem; }
  .sps-org-chart .sps-org-branch:last-child { padding-bottom: 0; }
  .sps-org-branch::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5rem; border-left: 2px solid #b8b9bc; }
  .sps-org-branch:last-child::after { bottom: auto; height: 2.75rem; }
  .sps-org-branch::before { left: -1.5rem; top: 2.75rem; width: 1.5rem; height: 0; border-left: 0; border-top: 2px solid #b8b9bc; }
  .sps-org-chart .sps-org-department h3 { justify-content: flex-start; min-height: 5.5rem; padding: 1rem; text-align: left; }
}

/* Photo viewports retain the original composite; captions are selectable text. */
.sps-facility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sps-facility { margin: 0; min-width: 0; border: 1px solid #dcdcdc; border-radius: .75rem; overflow: hidden; background: #fff; }
.sps-facility-photo { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #f4f4f3; }
.sps-facility-photo img { display: block; position: absolute; max-width: none; height: auto; }
.sps-facility figcaption { padding: 1.25rem; user-select: text; line-height: 1.5; }
.sps-facility figcaption strong { display: block; color: #202124; font-size: 1.125rem; font-weight: 700; }
.sps-facility figcaption span { display: block; margin-top: .35rem; color: #55575b; font-size: 1rem; }
@media (max-width: 899px) { .sps-facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 599px) { .sps-facility-grid { grid-template-columns: minmax(0, 1fr); } }

/* Core values: semantic bullets keep every wrapped line aligned with the text. */
.sps-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.sps-value-card { min-width: 0; overflow: hidden; border: 1px solid #dcdcdc; border-radius: 1rem; background: #fff; box-shadow: 0 3px 10px rgb(32 33 36 / .06); }
.sps-value-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: .75rem; background: #f4f4f3; }
.sps-value-photo > img,
.sps-value-photo-crop { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; overflow: hidden; }
.sps-value-content { padding: 1.5rem; }
.sps-value-icon { display: block; width: 3rem; height: 3rem; margin-bottom: 1.25rem; color: #202124; }
.sps-value-content h3 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #202124; }
.sps-value-content ul { list-style: disc outside; margin: 0; padding-left: 1.15rem; color: #393b3e; font-size: .9375rem; line-height: 1.65; }
.sps-value-content li { margin: 0 0 .75rem; padding-left: .15rem; }
.sps-value-content li::marker { color: #202124; }
.sps-value-content li:last-child { margin-bottom: 0; }
@media (max-width: 1199px) { .sps-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sps-value-grid { grid-template-columns: minmax(0, 1fr); } }

/* Sangdo/SPS use the same catalog composition and modal spacing as other brands. */
.sps-chisel-dialog { width: min(896px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 96px); margin: auto; padding: 0; border: 0; background: transparent; color: #202124; overflow: visible; }
.sps-chisel-dialog::backdrop { background: rgb(0 0 0 / .75); }
.sps-chisel-sheet { max-height: calc(100dvh - 96px); padding: 48px; border-radius: 16px; background: #fff; overflow: auto; overscroll-behavior: contain; }
#spsChiselTitle { margin: 0 0 32px; font-family: inherit; font-size: 30px; line-height: 36px; font-weight: 700; color: #202124; text-align: center; }
#spsChiselClose { position: absolute; top: -48px; right: 0; display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
#spsChiselClose:hover { color: #d1d5db; }
#spsChiselClose:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#spsChiselContent { position: relative; }
.sps-chisel-catalog { display: block; width: 100%; height: auto; max-height: 70vh; overflow: hidden; }
.sps-chisel-catalog text { user-select: text; cursor: text; letter-spacing: normal; font-style: normal; }
.sps-chisel-wordmark { font-family: Arial, sans-serif; font-size: 64px; font-weight: 700; fill: #ed1c24; }
.sps-chisel-model { font-family: Arial, sans-serif; font-size: 28px; font-weight: 700; fill: #0070c0; }
.sps-chisel-part { font-family: 'Arial Narrow', Arial, sans-serif; font-size: 26px; font-weight: 400; fill: #111; }
.sps-chisel-accessible { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }

/* Shared selection contrast, including SVG catalogs and dialogs. */
html ::selection, html *::selection {
  background: #315cc5 !important;
  color: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
/* Independent scale preserves existing translate transforms and carousel positions. */
:is(button, [role="button"], input[type="button"], input[type="submit"], summary, .cursor-pointer:not([class*="hover:scale"]),
    a[class*="rounded"], a[class*="btn"], a[class*="button"],
    .buyer-email-link, .buyer-contact-link, .buyer-nav a, .sps-height-link,
    a:has(> img), a:has(> svg.sps-selectable-catalog),
    svg.sps-selectable-catalog:has(a[href]),
    a img, button img, [role="button"] img, img.cursor-pointer, svg.cursor-pointer) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale, translate;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(button, [role="button"], input[type="button"], input[type="submit"], summary, .cursor-pointer:not([class*="hover:scale"]),
      a[class*="rounded"], a[class*="btn"], a[class*="button"],
      .buyer-email-link, .buyer-contact-link, .buyer-nav a, .sps-height-link):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    scale: 1.025;
  }
  :is(a, button, [role="button"]):is(:hover, :focus-visible) > img,
  a:is(:hover, :focus-visible) img,
  a:is(:hover, :focus-visible) > svg.sps-selectable-catalog,
  svg.sps-selectable-catalog:has(a[href]):hover,
  :is(img.cursor-pointer, svg.cursor-pointer):hover {
    scale: 1.035;
  }
  :is(button, [role="button"]):not(:disabled):not([aria-disabled="true"]):active { scale: .985; }
}
@media (prefers-reduced-motion: reduce) {
  :is(button, [role="button"], input[type="button"], input[type="submit"], summary, .cursor-pointer:not([class*="hover:scale"]), a,
      a img, button img, [role="button"] img, img.cursor-pointer, svg.sps-selectable-catalog) {
    transition-duration: 0s !important;
    animation: none !important;
    scale: none !important;
  }
  a:hover img, button:hover img, .group:hover img,
  .group:hover svg.sps-selectable-catalog { transform: none !important; }
}