/* Precision Catalog interiors. Load after styles.css, on interior pages only. */
@font-face {
  font-family: Barlow;
  src: url("assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #fff;
  --color-surface: #fff;
  --color-surface-muted: #f0f2f2;
  --color-text: #20262a;
  --color-text-soft: #526068;
  --color-border: #d7dcde;
  --color-border-strong: #a6b0b5;
  --color-accent: #b51f27;
  --color-accent-dark: #941820;
  --color-ink: #20262a;
  --color-shadow: transparent;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --site-width: 1280px;
  --interior-dark: #171e22;
  --interior-heading: Barlow, "Arial Narrow", sans-serif;
}

html { scroll-padding-top: 110px; }
body { background: #fff; font: 16px/1.6 "Segoe UI", sans-serif; }
::selection { background: var(--color-accent); color: #fff; }
a { text-underline-offset: 5px; }
a:hover { color: var(--color-accent); }
a:focus-visible, button:focus-visible { outline: 3px solid #287ba6; outline-offset: 5px; }
.site-shell, .section-inner, .footer-inner { width: min(1280px, calc(100% - 80px)); }

/* White masthead and the existing script.js menu contract. */
.site-header { background: #fff; backdrop-filter: none; border-color: var(--color-border); }
.site-shell { min-height: 88px; gap: 30px; padding-block: 12px; }
.site-logo { flex-shrink: 0; }
.site-logo img { height: 52px; width: auto; max-height: none; max-width: none; }
.site-nav { gap: 28px; }
.site-nav a { color: var(--color-ink); font-size: 14px; font-weight: 600; padding-block: 12px; }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--color-accent); }
.site-nav a:hover { color: var(--color-accent); }
.site-nav .nav-cta {
  background: #fff;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 10px 15px;
  box-shadow: none;
  white-space: nowrap;
}
.site-nav .nav-cta:hover { border-color: var(--color-ink); }
.menu-toggle { border-radius: 0; min-height: 44px; padding: 8px 16px; font: 600 14px "Segoe UI", sans-serif; }
.skip-link { border-radius: 0; }

h1, h2, h3, .product-card-body h4 {
  font-family: var(--interior-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(44px, 4.3vw, 64px); letter-spacing: -0.02em; }
h2 { font-size: 42px; }
h3, .capability-panel h3 { font-size: 29px; }
.page-hero h1 { max-width: none; }
p, .lede, .product-card-body p { font-size: 16px; }
p { max-width: 70ch; }
.eyebrow {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.actions { gap: 20px; margin-top: 24px; }
.button, .button-secondary {
  min-height: 48px;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease;
}
/* Beat the legacy .contact-links a foreground rule without changing mail links. */
.button, .contact-links a.button { background: var(--color-accent); color: #fff; }
.button:hover, .contact-links a.button:hover { background: var(--color-accent-dark); color: #fff; transform: none; }
.button-secondary, .contact-links a.button-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.button-secondary:hover, .contact-links a.button-secondary:hover { background: var(--color-surface-muted); border-color: var(--color-ink); color: var(--color-ink); transform: none; }

/* Keep the existing hero copy and imagery in their two-column composition. */
.page-hero { padding: 38px 0 34px; background: var(--interior-dark); color: #fff; }
.page-hero .panel { padding: 0; background: none; border: 0; }
.hero-product-panel, .about-photo-hero, .distribution-photo-hero, .contact-photo-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #cbd2d6; line-height: 1.7; }
.page-hero .eyebrow { color: #b8c3c9; }
.page-hero .button-secondary { color: #fff; border-color: #7f8b92; background: transparent; }
.page-hero .button-secondary:hover { color: #fff; background: #303b42; border-color: #fff; }
.about-hero-image, .distribution-hero-image, .contact-hero-image {
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.about-hero-image::after, .distribution-hero-image::after, .contact-hero-image::after { content: none; }
.about-hero-image img, .distribution-hero-image img, .contact-hero-image img {
  height: 350px;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
.about-hero-image figcaption, .distribution-hero-image figcaption, .contact-hero-image figcaption {
  position: static;
  margin-top: 10px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #b8c3c9;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
}
/* Products retains its product image; the existing machining photo sets the hero. */
.page-hero:has(.hero-product-panel) {
  background: linear-gradient(90deg, rgba(23, 30, 34, 0.98), rgba(23, 30, 34, 0.88)),
    url("assets/images/index/inspection-tooling-hero.png") center / cover;
}
.hero-tool-showcase { min-height: 350px; padding: 24px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.tool-showcase-grid, .tool-showcase-accent { display: none; }
.hero-tool-showcase img { filter: none; width: 88%; max-height: 430px; object-fit: contain; }
.tool-showcase-tags { justify-content: flex-start; border-top: 1px solid var(--color-border); padding-top: 16px; gap: 8px 20px; }
.tool-showcase-tags span, .about-fact-strip span, .region-list span {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  min-height: 0;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
}

/* Technical grids use rules and whitespace, not floating cards. */
.section { padding-block: 48px; }
.section-tight { padding-block: 32px; }
.section-alt { background: var(--color-surface-muted); border: 0; }
.section-header { margin-bottom: 28px; }
.content-grid, .two-column, .contact-grid, .split-visual { gap: 36px; }
.panel, .card, .contact-card, .product-card, .visual-frame, .catalog-cover, .cta-band { border-radius: 0; box-shadow: none; }
.panel, .card, .contact-card { background: transparent; border: 0; border-top: 1px solid var(--color-border); padding: 24px 0 0; min-width: 0; }
.capability-panel { border-left: 0; }
.product-family-block h3 { text-align: left; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.product-family-grid { gap: 24px; }
.product-card { border: 1px solid var(--color-border); }
.product-card-body { border-top: 1px solid var(--color-border); padding: 20px; }
.product-card-body h4 { font-size: 25px; margin-bottom: 12px; }
.spec-list { gap: 0; }
.spec-list div { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: none; padding: 18px 0; }
.spec-list div:last-child { padding-bottom: 0; }
.about-fact-strip, .region-list { gap: 12px 24px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.visual-frame { margin: 0; border: 0; }
.note { border: 0; border-top: 1px solid var(--color-border-strong); border-radius: 0; background: var(--color-surface-muted); }
.resource-links { gap: 0; }
.resource-links a { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: none; padding: 14px 0; }
.resource-links a:hover { transform: none; color: var(--color-accent); }
.contact-address-box { border: 0; border-block: 1px solid var(--color-border); border-radius: 0; background: none; padding: 18px 0; }
.contact-address-box a { overflow-wrap: anywhere; }
.contact-links { gap: 12px; }
.cta-band { background: transparent; color: var(--color-ink); padding-block: 0; }
.cta-band h2 { color: var(--color-ink); }
.cta-band p, .cta-band .eyebrow { color: var(--color-text-soft); }
.cta-grid > *, .footer-inner > * { min-width: 0; }

.site-footer { margin-top: 0; background: #fff; color: var(--color-text-soft); border-top: 1px solid var(--color-border); }
.footer-inner { grid-template-columns: 1.6fr 0.6fr 1fr; gap: 75px; padding-block: 45px; }
.footer-brand img { height: 52px; width: auto; max-height: none; max-width: 100%; background: none; padding: 0; border-radius: 0; margin-bottom: 20px; }
.site-footer p, .footer-note { color: var(--color-text-soft); font-size: 14px; }
.footer-title { color: var(--color-ink); font-size: 15px; font-weight: 600; }
.footer-links a { color: var(--color-ink); font-size: 14px; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--color-accent); }
.footer-bottom { border-color: var(--color-border); padding-block: 20px; }

@media (max-width: 1100px) {
  .site-shell, .section-inner, .footer-inner { width: calc(100% - 48px); }
  .site-shell { gap: 20px; }
  .site-nav { gap: 16px; }
  .hero-product-panel, .about-photo-hero, .distribution-photo-hero, .contact-photo-hero { gap: 28px; }
  .footer-inner { gap: 30px; }
}

@media (max-width: 1050px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px; min-height: 44px; }
  .site-nav .nav-cta { margin-top: 8px; }
}

@media (max-width: 960px) {
  .hero-product-panel, .about-photo-hero, .distribution-photo-hero, .contact-photo-hero { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 48px; }
  .hero-tool-showcase { min-height: 0; }
  .hero-tool-showcase img { width: min(78%, 360px); }
  .footer-inner { grid-template-columns: 1.6fr 0.6fr 1fr; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 90px; }
  .site-shell, .section-inner, .footer-inner { width: calc(100% - 36px); }
  .site-shell { min-height: 74px; padding-block: 10px; gap: 16px; }
  .site-logo img { height: 42px; max-width: none; max-height: none; }
  .site-nav { left: 18px; right: 18px; max-height: calc(100dvh - 76px); }
  .page-hero { padding-block: 32px; }
  .page-hero h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .about-hero-image img, .distribution-hero-image img, .contact-hero-image img { height: 260px; min-height: 0; }
  .section { padding-block: 38px; }
  .section-tight { padding-block: 28px; }
  .actions { gap: 16px; }
  .panel, .card, .contact-card { padding: 24px 0 0; }
  .page-hero .panel { padding: 0; }
  .cta-band { padding: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; padding-block: 32px; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .button-secondary, .site-nav a, .resource-links a { transition: none; }
}