/*
 * Kurami Shoji — silver palette
 *
 * Palette-only overrides. The existing layout, typography, spacing and motion
 * remain untouched; this layer replaces the former blue-led visual system with
 * graphite, brushed-silver highlights and the established orange accent.
 */

:root {
  --ink: #25292c;
  --graphite: #3c4246;
  --steel: #60666a;
  --muted: #656b6f;
  --line: #c9ccce;
  --line-dark: rgba(69, 75, 79, 0.22);
  --paper: #f5f6f6;
  --mist: #e2e4e5;
  --white: #ffffff;
  --green: #6e7579;
  --green-dark: #454b4f;
  --clean-blue: #565d61;
  --clean-blue-hover: #3b4145;
  --teal: #aeb2b4;
  --oxide: #ea580c;
  --gold: #ea580c;
  --shadow: 0 24px 64px rgba(48, 53, 56, 0.12);
  --silver-highlight: #f1f2f2;
  --silver-pale: #e7e9ea;
  --silver-light: #d5d8d9;
  --silver-mid: #aeb2b4;
  --silver-steel: #71787c;
  --silver-dark: #454b4f;
  --silver-deep: #303538;
  --silver-surface: #e7e9ea;
  --silver-surface-soft: #eef0f0;
  --silver-surface-strong: #d5d8d9;
  --silver-surface-hover: #dde0e1;
  --silver-surface-warm: #f1e2d3;
  --silver-border-strong: #b9bec1;
  --photo-border: #91989c;
  --silver-text-secondary: #52595d;
  --orange-readable: #b34700;
  --orange-button: #c84e00;
  --metal-sheen: linear-gradient(
    135deg,
    #737a7e 0%,
    #4a5054 32%,
    #686f73 56%,
    #3b4145 100%
  );
  --logo-silver-surface: linear-gradient(
    145deg,
    #fbfbfa 0%,
    #e3e5e6 38%,
    #c1c5c7 68%,
    #eef0f0 100%
  );
  --logo-silver-dark-surface: linear-gradient(
    135deg,
    #303538 0%,
    #686f73 48%,
    #41474b 100%
  );
}

html,
body {
  background-color: #f2f3f3;
}

body::before {
  background-image:
    linear-gradient(rgba(74, 80, 84, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 80, 84, 0.08) 1px, transparent 1px);
}

body::after {
  background-color: var(--silver-deep);
}

::selection {
  color: #ffffff;
  background: var(--orange-readable);
}

.site-header.is-scrolled {
  box-shadow: 0 12px 36px rgba(48, 53, 56, 0.1);
}

.nav-toggle {
  border-color: rgba(57, 63, 68, 0.18);
}

@media (max-width: 1080px) {
  .site-nav {
    border-color: rgba(57, 63, 68, 0.16);
    box-shadow: 0 24px 60px rgba(37, 42, 46, 0.2);
  }
}

.site-header::after {
  background: linear-gradient(
    90deg,
    var(--silver-dark) 0%,
    var(--silver-mid) 32%,
    var(--silver-highlight) 57%,
    var(--oxide) 100%
  );
}

.section-kicker,
.eyebrow,
.small-label {
  color: var(--orange-readable);
}

.button-primary,
.site-nav .nav-cta,
.contact-page .contact-form .button-primary {
  border-color: #454b4f;
  background: var(--metal-sheen);
}

.button-primary:hover,
.button-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible,
.contact-page .contact-form .button-primary:hover,
.contact-page .contact-form .button-primary:focus-visible {
  border-color: #303538;
  background: linear-gradient(135deg, #62696d 0%, #3b4145 52%, #555c60 100%);
}

.hero,
.delivery-assurance,
.contact-section,
.detail-contact-cta,
.site-footer {
  background-color: var(--silver-dark);
  background-image: var(--logo-silver-dark-surface);
}

.business-crosslink {
  background-color: var(--silver-dark);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(39, 43, 46, 0.9) 0%, rgba(82, 87, 91, 0.72) 45%, rgba(174, 178, 180, 0.18) 82%),
    linear-gradient(0deg, rgba(42, 46, 49, 0.64), transparent 58%);
}

.page-hero::after,
.contact-page .page-hero-contact::after {
  background:
    linear-gradient(90deg, rgba(42, 46, 49, 0.94) 0%, rgba(91, 97, 101, 0.76) 48%, rgba(183, 187, 189, 0.16) 86%),
    linear-gradient(0deg, rgba(45, 49, 52, 0.56), transparent 58%);
}

.contact-page .page-hero-contact::before {
  background-position: 62% center;
}

@media (max-width: 720px) {
  .contact-page .page-hero-contact::before {
    background-position: 88% center;
  }
}

.business-crosslink::before {
  background: linear-gradient(90deg, rgba(42, 46, 49, 0.94) 0%, rgba(91, 97, 101, 0.76) 50%, rgba(190, 194, 196, 0.2) 100%);
}

.business-crosslink-manufacturing::before {
  background: linear-gradient(90deg, rgba(45, 49, 52, 0.95) 0%, rgba(103, 109, 113, 0.76) 50%, rgba(199, 202, 204, 0.18) 100%);
}

.business-crosslink-link h2::before,
.business-crosslink-manufacturing .business-crosslink-link h2::before {
  background: #ff9a3d;
}

.hero-status {
  box-shadow: 0 22px 70px rgba(37, 42, 46, 0.14);
}

.hero-status::before {
  background: linear-gradient(90deg, rgba(95, 102, 108, 0.1), transparent 26%, transparent 78%, rgba(234, 88, 12, 0.08));
}

.hero-status-head {
  border-right-color: rgba(57, 63, 68, 0.14);
}

.hero-strength {
  border-left-color: rgba(57, 63, 68, 0.12);
}

.strength-index,
.category-number,
.product-card-number {
  color: rgba(75, 81, 86, 0.25);
}

.strength-card-index {
  color: rgba(75, 81, 86, 0.18);
}

.delivery-assurance .section-kicker,
.contact-section .section-kicker,
.detail-contact-cta .section-kicker,
.site-footer .section-kicker,
.hero-inner .eyebrow,
.page-hero .eyebrow {
  color: #ffad52;
}

.assurance-list li:hover {
  border-color: #555c61;
  background: var(--metal-sheen);
}

.section.delivery-assurance::before {
  background: rgba(57, 63, 68, 0.18);
}

.product-detail-catalog .equipment-list-section .equipment-tables th {
  background: linear-gradient(135deg, #555c61 0%, #393f44 100%);
}

.product-directory-card .product-detail-button {
  color: var(--silver-dark);
  border-color: rgba(63, 69, 74, 0.36);
}

.product-directory-card .product-detail-button:hover,
.product-directory-card .product-detail-button:focus-visible {
  color: #ffffff;
  border-color: var(--silver-dark);
  background: var(--metal-sheen);
}

.item-heading-icon.tone-sky,
.process-detail-icon.tone-sky,
.process-item-icon.tone-sky {
  color: #444a4f;
}

.process-detail-icon.tone-sky,
.process-item-icon.tone-sky {
  background: #e5e7e8;
}

.item-heading-icon.tone-coral,
.process-item-icon.tone-coral {
  color: var(--orange-readable);
}

.process-item-icon.tone-coral {
  background: #fff0e2;
}

.item-heading-icon.tone-mint,
.process-item-icon.tone-mint {
  color: #62696e;
}

.process-item-icon.tone-mint {
  background: #e8eaeb;
}

.item-heading-icon.tone-gold,
.process-item-icon.tone-gold {
  color: var(--orange-readable);
}

.process-item-icon.tone-gold {
  background: #f7e4d0;
}

.item-heading-icon.tone-rose {
  color: #73797e;
}

.business-jump-nav a:first-child {
  border-top-color: #596066;
  background: #eef0f1;
}

.business-jump-nav a:first-child span {
  color: #4d5459;
}

.business-jump-nav a:first-child:hover,
.business-jump-nav a:first-child:focus-visible,
.business-jump-nav a:first-child.is-current {
  color: #ffffff;
  background: var(--metal-sheen);
}

.business-jump-nav a:last-child {
  border-top-color: var(--oxide);
  background: #fff4e8;
}

.business-jump-nav a:last-child span {
  color: var(--orange-readable);
}

.business-jump-nav a:last-child:hover,
.business-jump-nav a:last-child:focus-visible,
.business-jump-nav a:last-child.is-current {
  color: #ffffff;
  background: var(--orange-button);
}

.product-page-nav a.is-current {
  color: #ffffff;
  background: var(--metal-sheen);
}

.product-directory-media > span {
  background: rgba(57, 63, 68, 0.84);
}

/* Let contained product photos inherit the continuous page surface in their side gutters. */
.product-directory-media,
.product-directory-media img {
  background-color: transparent;
}

.import-category-head > span {
  color: rgba(75, 81, 86, 0.28);
}

.company-page .company-strip dl > div {
  border-color: #c3c7ca !important;
  box-shadow: 0 14px 32px rgba(37, 42, 46, 0.1);
}

@media (min-width: 1081px) {
  .company-page .company-strip dl > div:nth-child(odd):not(.company-location):not(.company-business) {
    border-right-color: #c3c7ca !important;
  }
}

.company-page .company-strip dl > div:last-child,
.company-page .company-strip dl > div.company-business {
  border-bottom-color: #c3c7ca !important;
}

.company-page .company-strip dl > div::before {
  background: var(--silver-mid);
}

.company-page .company-strip dl > div:nth-child(3n)::before {
  background: var(--silver-light);
}

.company-page .company-strip dl > div.company-location {
  background: #f3f4f4 !important;
}

.company-page .company-strip dt,
.company-page .company-strip .company-postal {
  color: #4f565b;
}

.flow-page .flow-decision li,
.company-page .company-strip dl > div {
  box-shadow: 0 12px 28px rgba(37, 42, 46, 0.08);
}

.flow-page .page-hero-flow::after {
  background:
    linear-gradient(90deg, rgba(29, 32, 35, 0.94) 0%, rgba(68, 73, 77, 0.74) 52%, rgba(143, 148, 152, 0.16) 82%),
    linear-gradient(0deg, rgba(31, 34, 37, 0.54), transparent 62%);
}

.flow-page .flow-decision .decision-card-number,
.flow-page .flow-decision .decision-term {
  color: var(--orange-readable);
}

.flow-page .flow-decision .decision-toggle:hover,
.flow-page .flow-decision .decision-toggle:focus-visible,
.site-footer .page-top-link.is-floating {
  background: var(--metal-sheen);
}

.site-footer .page-top-link.is-floating:hover,
.site-footer .page-top-link.is-floating:focus-visible {
  background: linear-gradient(135deg, #555c61 0%, #353a3f 100%);
}

.product-detail-catalog .equipment-list-section .equipment-tables table {
  border-color: #c3c7ca !important;
}

.product-detail-catalog .equipment-list-section .equipment-tables th,
.product-detail-catalog .equipment-list-section .equipment-tables td {
  border-right-color: #c3c7ca !important;
  border-bottom-color: #c3c7ca !important;
}

:focus-visible {
  outline-color: rgba(234, 88, 12, 0.78);
}

/* Adopted horizontal logo mark. */
.brand {
  grid-template-columns: 64px auto;
  gap: 12px;
}

.brand-mark {
  width: 64px;
  height: 40px;
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Intensify only the circular orange portion of the approved raster logo. */
.brand-mark svg image:last-child {
  filter: saturate(1.42) hue-rotate(-6deg) brightness(1.08);
}

.footer-brand {
  grid-template-columns: 64px auto;
  align-items: center;
}

.footer-brand .brand-mark {
  align-self: center;
}

.site-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 720px) {
  .brand {
    grid-template-columns: 50px auto;
    gap: 9px;
  }

  .brand-mark {
    width: 50px;
    height: 32px;
  }

  .footer-brand {
    grid-template-columns: 50px auto;
  }
}

/* Contact page — calm, single-column inquiry form. */
.contact-page .contact-page-section {
  width: min(1000px, calc(100% - 48px));
}

.contact-page .contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid #d7d9db;
  border-top: 3px solid var(--oxide);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 248, 248, 0.98));
  box-shadow: 0 18px 48px rgba(37, 42, 46, 0.08);
}

.contact-page .contact-form-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 10px;
  padding-bottom: 28px;
  border-bottom: 1px solid #d7d9db;
}

.contact-page .contact-form-eyebrow {
  margin: 0 0 8px;
  color: var(--orange-readable);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-page .contact-form-head h2 {
  margin: 0;
  color: #22272b;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.35;
}

.contact-page .required-fields-note {
  flex: 0 0 auto;
  margin: 0 0 4px;
  color: #596066;
  font-size: 0.82rem;
  font-weight: 500;
}

.contact-page .contact-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  color: #303539;
  font-size: 0.96rem;
  font-weight: 700;
}

.contact-page .field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  width: fit-content;
}

.contact-page .required-mark {
  color: #c62828;
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1;
  vertical-align: super;
}

.contact-page .required-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
  width: 100%;
  border: 1px solid #cfd2d4;
  border-radius: 4px;
  color: #22272b;
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.contact-page .contact-form input,
.contact-page .contact-form select {
  min-height: 54px;
  padding: 11px 15px;
}

.contact-page .contact-form textarea {
  min-height: 190px;
  padding: 14px 15px;
  line-height: 1.7;
}

.contact-page .contact-form input:focus-visible,
.contact-page .contact-form select:focus-visible,
.contact-page .contact-form textarea:focus-visible {
  border-color: #596066;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(89, 96, 102, 0.18);
}

.contact-page .contact-form .button-primary {
  justify-self: center;
  width: min(100%, 360px);
  min-height: 56px;
  margin-top: 10px;
}

.contact-page .contact-form .form-note {
  justify-self: center;
  width: min(100%, 640px);
  text-align: center;
}

/* Carry the logo's pale-to-mid silver across the page as one continuous surface. */
main {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(231, 233, 234, 0.82) 52%,
    rgba(247, 248, 248, 0.96) 100%
  );
}

main > section:not(.hero):not(.page-hero):not(.delivery-assurance):not(.business-crosslink):not(.detail-contact-cta) {
  background-color: transparent;
  background-image: none;
}

/* Linked cards use silver; non-interactive information surfaces use white. */
.category-ledger,
.business-ledger,
.component-spec-summary,
.import-index,
.product-page-nav,
.business-jump-nav {
  background-color: transparent;
  background-image: none;
}

.strength-jump-card,
.category-ledger a,
.business-ledger a,
.component-spec-summary > .component-spec-card,
.import-index a {
  border-color: var(--silver-border-strong) !important;
  background-color: var(--silver-surface) !important;
  background-image: none !important;
}

.info-card-grid article,
.lubricant-grid article,
.advantage-list article,
.classification-grid article,
.general-material-grid article,
.company-page .company-strip dl > div,
.company-page .company-strip dl > div.company-location,
.company-page .company-strip dl > div.company-business {
  border-color: var(--silver-border-strong) !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.strength-jump-card:hover,
.strength-jump-card:focus-visible,
.category-ledger a:hover,
.category-ledger a:focus-visible,
.business-ledger a:hover,
.business-ledger a:focus-visible,
.component-spec-summary > .component-spec-card:hover,
.component-spec-summary > .component-spec-card:focus-visible,
.import-index a:hover,
.import-index a:focus-visible {
  background-color: var(--silver-surface-hover) !important;
}

.philosophy-body {
  background-color: transparent !important;
  background-image: none !important;
}

.philosophy-source,
.philosophy-body > p:not(.philosophy-source),
.component-spec-card p,
.component-spec-card li {
  color: var(--silver-text-secondary);
}

.product-page-nav > a {
  background-color: rgba(231, 233, 234, 0.9);
}

.product-page-nav > a:not(.is-current):hover,
.product-page-nav > a:not(.is-current):focus-visible {
  background-color: var(--silver-surface-strong);
}

.product-directory-card .product-detail-button {
  background-color: rgba(241, 242, 242, 0.84);
}

.product-detail-catalog .product-photo-grid figure,
.product-detail-catalog .equipment-photo-grid figure,
.product-detail-catalog .general-photo-grid figure,
.product-detail-catalog .oilless-application-grid figure,
.product-detail-catalog .water-structure-photo-grid figure,
.import-page .import-media-grid figure {
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background-color: transparent !important;
  background-image: none !important;
}

.product-directory-media img,
.strength-card-media img,
.about-visual-image img,
.product-detail-catalog .product-photo-grid img,
.product-detail-catalog .equipment-photo-grid img,
.product-detail-catalog .general-photo-grid img,
.product-detail-catalog .oilless-application-grid img,
.product-detail-catalog .water-structure-photo-grid img,
.import-page .import-media-grid img {
  box-sizing: border-box;
  display: block;
  border: 1px solid var(--photo-border) !important;
  border-radius: 6px;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px rgba(69, 75, 79, 0.06);
}

/* Equipment grids keep their original card rhythm in an unframed media slot.
   The visible border is applied to the intrinsically proportioned photo only,
   so letterbox space can no longer be mistaken for a missing photo edge. */
.product-detail-catalog .equipment-photo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.product-detail-catalog .equipment-photo-grid-five figure:first-child .equipment-photo-frame {
  aspect-ratio: 3 / 2;
}

.product-detail-catalog .equipment-photo-grid .equipment-media-wide .equipment-photo-frame {
  aspect-ratio: 4 / 3;
}

#product-white-metal .equipment-photo-grid-five figure:nth-child(2) .equipment-photo-frame,
#product-white-metal .equipment-photo-grid-five figure:nth-child(3) .equipment-photo-frame {
  aspect-ratio: 4 / 3;
}

.product-detail-catalog .equipment-photo-grid:not(.equipment-photo-grid-five) .equipment-media-wide .equipment-photo-frame {
  aspect-ratio: 16 / 9;
}

.product-detail-catalog .equipment-photo-frame > img,
.product-detail-catalog .equipment-photo-frame > img.media-contain {
  position: absolute;
  inset: 0;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  aspect-ratio: auto !important;
  padding: 0;
  object-fit: contain !important;
}

@media (max-width: 720px) {
  .product-detail-catalog .equipment-photo-frame,
  .product-detail-catalog .equipment-photo-grid-five figure:first-child .equipment-photo-frame,
  .product-detail-catalog .equipment-photo-grid .equipment-media-wide .equipment-photo-frame {
    aspect-ratio: 4 / 3;
  }
}

/* The tall left application image shares the same visual bottom as the two
   stacked images on the right, with its caption remaining outside the frame. */
@media (min-width: 721px) {
  .product-detail-catalog .oilless-application-grid figure:first-child {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
  }

  .product-detail-catalog .oilless-application-grid figure:first-child img {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

.product-detail-catalog .product-photo-grid figcaption,
.product-detail-catalog .equipment-photo-grid figcaption,
.product-detail-catalog .general-photo-grid figcaption,
.product-detail-catalog .oilless-application-grid figcaption,
.import-page .import-media-grid figcaption {
  color: var(--silver-text-secondary);
  border-top: 0;
  background-color: transparent;
  text-align: center;
}

.product-detail-catalog .general-photo-grid figcaption {
  justify-content: center;
}

.product-detail-catalog .general-photo-grid figcaption > div {
  text-align: center;
}

.product-detail-catalog .equipment-tables,
.product-detail-catalog .equipment-tables table,
.import-page .technical-table-wrap,
.import-page .technical-table {
  background-color: transparent !important;
  background-image: none !important;
}

.product-detail-catalog .equipment-tables td,
.import-page .technical-table td {
  color: var(--ink);
  background-color: #ffffff !important;
}

.product-detail-catalog .equipment-tables tbody tr:nth-child(even) td,
.import-page .technical-table tbody tr:nth-child(even) td {
  background-color: #ffffff !important;
}

.import-page .technical-table tbody th {
  color: var(--silver-dark);
  background-color: #ffffff !important;
}

.import-page .import-product {
  background-color: transparent !important;
  background-image: none !important;
}

.contact-page .contact-form {
  background: linear-gradient(
    180deg,
    rgba(241, 242, 242, 0.98) 0%,
    rgba(226, 228, 229, 0.98) 100%
  );
}

/* Remove the inter-column sliver so each hover surface reaches the next divider. */
.strength-card .strength-card-points {
  gap: 0;
  width: 100%;
}

.strength-card-points li {
  box-sizing: border-box;
}

.product-page-nav,
.business-jump-nav,
.product-directory-card,
.company-page .company-strip dl > div,
.contact-page .contact-form {
  border-color: var(--line);
}

@media (max-width: 720px) {
  .contact-page .contact-page-section {
    width: calc(100% - 32px);
  }

  .contact-page .contact-form {
    gap: 22px;
    padding: 30px 20px;
  }

  .contact-page .contact-form-head {
    display: grid;
    gap: 14px;
    align-items: start;
    padding-bottom: 22px;
  }

  .contact-page .required-fields-note {
    margin: 0;
  }

  .contact-page .contact-form input,
  .contact-page .contact-form select {
    min-height: 52px;
  }

  .contact-page .contact-form textarea {
    min-height: 176px;
  }
}

/* Client revision 2026-10-26. Blue values from kurami; retain base layout. */
:root {
 --green: #176f9f; --green-dark: #1f5d7f;
 --clean-blue: #1f5d7f; --clean-blue-hover: #174967; --teal: #3b8eab;
 --silver-dark: #1f5d7f; --silver-deep: #174967;
 --metal-sheen: linear-gradient(#1f5d7f, #1f5d7f);
 --logo-silver-dark-surface: linear-gradient(#1f5d7f, #1f5d7f);
}
body::after, .hero, .delivery-assurance, .contact-section,
.business-crosslink, .detail-contact-cta, .site-footer { background: var(--clean-blue); }
.button-primary, .site-nav .nav-cta, .contact-page .contact-form .button-primary {
 border-color: var(--clean-blue); background: var(--clean-blue);
}
.button-primary:hover, .button-primary:focus-visible,
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible,
.contact-page .contact-form .button-primary:hover,
.contact-page .contact-form .button-primary:focus-visible,
.site-footer .page-top-link.is-floating:hover,
.site-footer .page-top-link.is-floating:focus-visible {
 border-color: var(--clean-blue-hover); background: var(--clean-blue-hover);
}
.hero-shade { background:
 linear-gradient(90deg, rgba(13,47,67,.86) 0%, rgba(22,73,100,.68) 45%, rgba(27,84,112,.18) 82%),
 linear-gradient(0deg, rgba(13,47,67,.58), transparent 58%); }
.page-hero::after, .contact-page .page-hero-contact::after { background:
 linear-gradient(90deg, rgba(13,47,67,.9) 0%, rgba(22,73,100,.72) 48%, rgba(27,84,112,.14) 86%),
 linear-gradient(0deg, rgba(13,47,67,.48), transparent 58%); }
.business-crosslink::before, .business-crosslink-manufacturing::before {
 background: linear-gradient(90deg, rgba(13,47,67,.94), rgba(22,73,100,.76) 50%, rgba(27,84,112,.2));
}
.product-detail-catalog .equipment-list-section .equipment-tables th { background: var(--clean-blue); }
.business-jump-nav a:first-child { border-top-color: var(--clean-blue); }
.business-jump-nav a:first-child span, .item-heading-icon.tone-sky { color: var(--clean-blue); }
.business-jump-nav a:first-child:hover span, .business-jump-nav a:first-child.is-current span { color: #fff; }
/* Use supplied transparent logo; white silhouette on the blue footer. */
.brand, .footer-brand { grid-template-columns: 110px auto; }
.brand-mark { width: 110px; height: 46px; }
.brand-mark > img { width: 100%; height: 100%; object-fit: contain; }
.footer-brand .brand-mark > img { filter: brightness(0) invert(1); }
@media (max-width: 720px) {
 .brand, .footer-brand { grid-template-columns: 84px auto; }
 .brand-mark { width: 84px; height: 35px; }
}
/* Justify both columns without changing the wording. */
#product-white-metal .process-layout dd, #product-white-metal .process-layout p,
#product-bimetal .process-layout dd, #product-bimetal .process-layout p {
 text-align: justify; text-justify: inter-ideograph;
}
/* Align full-width rows and show equipment without cropping. */
#product-white-metal .equipment-photo-grid-five { grid-template-columns: repeat(6, minmax(0,1fr)); }
#product-white-metal .equipment-photo-grid-five figure { grid-column: span 2; }
#product-white-metal .equipment-photo-grid-five figure.equipment-media-wide { grid-column: span 3; }
#product-oiless .equipment-photo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
#product-oiless .equipment-photo-grid .equipment-media-wide { grid-column: 1 / -1; }
#product-white-metal .equipment-photo-grid .equipment-photo-frame,
#product-oiless .equipment-photo-grid .equipment-photo-frame {
 height: clamp(220px,26vw,340px); aspect-ratio: auto;
}
#product-white-metal .equipment-photo-grid .equipment-photo-frame > img,
#product-oiless .equipment-photo-grid .equipment-photo-frame > img {
 width: 100% !important; height: 100% !important;
 object-fit: contain !important; background-color: transparent !important;
}
@media (max-width: 720px) {
 #product-white-metal .equipment-photo-grid-five,
 #product-oiless .equipment-photo-grid { grid-template-columns: 1fr; }
 #product-white-metal .equipment-photo-grid-five figure,
 #product-white-metal .equipment-photo-grid-five figure.equipment-media-wide,
 #product-oiless .equipment-photo-grid .equipment-media-wide { grid-column: auto; }
 #product-white-metal .equipment-photo-grid .equipment-photo-frame,
 #product-oiless .equipment-photo-grid .equipment-photo-frame { height: 300px; }
}

/* PTFE: match the other product frames (4:3), keeping the Word crop centered. */
#product-oiless .ptfe-word-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--photo-border);
  border-radius: 6px;
}
#product-oiless .ptfe-word-crop {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 2578308 / 2342476;
  margin-inline: auto;
  overflow: hidden;
}
#product-oiless .product-photo-grid .ptfe-word-crop > img {
  position: absolute;
  left: 0;
  top: -30.888772%;
  width: 101.292492%;
  max-width: none;
  height: 198.208198%;
  aspect-ratio: auto;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  object-fit: fill !important;
}

/* Match the three portrait equipment images to the measuring machine. */
#product-oiless .equipment-photo-grid figure:nth-child(-n+3) .equipment-photo-frame > img {
  width: min(100%, calc(clamp(220px, 26vw, 340px) * 1349 / 1800)) !important;
}
#product-oiless .equipment-photo-grid figure:nth-child(2) .equipment-photo-frame > img,
#product-oiless .equipment-photo-grid figure:nth-child(3) .equipment-photo-frame > img {
  object-fit: cover !important;
  object-position: center;
}
@media (max-width: 720px) {
  #product-oiless .equipment-photo-grid figure:nth-child(-n+3) .equipment-photo-frame > img {
    width: min(100%, calc(300px * 1349 / 1800)) !important;
  }
}
/* Share row tracks so corresponding left/right headings and rules align.
   The unmatched last process stays in its own row without adding content. */
@media (min-width: 1081px) {
  #product-white-metal .process-layout,
  #product-bimetal .process-layout {
    grid-template-rows: auto repeat(4, auto);
    row-gap: 0;
    align-items: stretch;
  }
  #product-bimetal .process-layout { grid-template-rows: auto repeat(3, auto); }
  #product-white-metal .process-layout > div,
  #product-bimetal .process-layout > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    row-gap: 0;
  }
  #product-white-metal .process-layout > div:first-child,
  #product-bimetal .process-layout > div:first-child { grid-column: 1; }
  #product-white-metal .process-layout > div:last-child,
  #product-bimetal .process-layout > div:last-child { grid-column: 2; }
  #product-white-metal .process-layout .item-heading,
  #product-bimetal .process-layout .item-heading {
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  #product-white-metal .process-layout .detail-list,
  #product-white-metal .process-layout .process-steps,
  #product-bimetal .process-layout .detail-list,
  #product-bimetal .process-layout .process-steps {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / -1;
    row-gap: 0;
    margin: 0;
    border-top: 0;
  }
  #product-white-metal .detail-list > div,
  #product-white-metal .process-steps > li,
  #product-bimetal .detail-list > div,
  #product-bimetal .process-steps > li { padding: 20px 0; }
  #product-white-metal .process-layout dt,
  #product-white-metal .process-layout strong,
  #product-bimetal .process-layout dt,
  #product-bimetal .process-layout strong { min-height: 30px; }
  #product-white-metal .process-steps p,
  #product-bimetal .process-steps p { margin-top: 6px; }
}

/* Product directory: unframed photography. */
.product-directory .product-directory-media,
.product-directory .product-directory-media::after,
.product-directory .product-directory-media img {
  border: 0 !important;
  box-shadow: none !important;
}
/* Let the page surface show through image letterboxing on every page. */
.product-directory-media,
.strength-card-media,
.about-visual-image,
.product-photo-grid figure,
.product-photo-grid .photo-pair > div,
.equipment-photo-grid figure,
.equipment-photo-frame,
.general-photo-grid figure,
.oilless-application-grid figure,
.water-structure-photo-grid figure,
.import-media-grid figure,
.ptfe-word-photo,
.ptfe-word-crop,
.product-directory-media img,
.strength-card-media img,
.about-visual-image img,
.product-photo-grid img,
.equipment-photo-grid img,
.general-photo-grid img,
.oilless-application-grid img,
.water-structure-photo-grid img,
.import-media-grid img {
  background-color: transparent !important;
  background-image: none !important;
}