/* ============================================================
   Hydraulic Equipment Inc. — palette matched to the live
   online store (hydraulicokc.com): navy + gold, Archivo +
   IBM Plex. Token names are historical (--red now holds the
   gold accent, --steel-* hold the navys); values are the
   store's own custom properties.
   ============================================================ */

:root {
  --steel-900: #0a1628;
  --steel-800: #122238;
  --steel-700: #1c3454;
  --steel-600: #2c4a6e;
  --smoke: #f0f4f8;
  --smoke-dim: #dce8f0;
  --ink: #0a1628;
  --ink-soft: #2c4a6e;
  --red: #d4a017;
  --red-bright: #e8b52d;
  --caution: #d4a017;
  --line: rgba(10, 22, 40, 0.14);
  --line-light: rgba(240, 244, 248, 0.16);
  --shadow-lg: 0 24px 60px -24px rgba(10, 22, 40, 0.45);
  --font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --header-h: 74px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--smoke);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-bright); }

/* ---------- utility ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--red);
}
.on-dark .eyebrow { color: var(--caution); }
.on-dark .eyebrow::before { background: var(--caution); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.section { padding: 96px 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(38px, 5.5vw, 60px); margin: 14px 0 18px; }
.section-head p { color: var(--ink-soft); font-size: 18px; }

/* caution stripe — the signature divider */
.stripe {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--caution) 0 18px,
    var(--steel-900) 18px 36px
  );
}

/* machined texture for dark sections */
.dark {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(212, 160, 23, 0.14), transparent 60%),
    linear-gradient(180deg, var(--steel-800), var(--steel-900));
  color: var(--smoke);
}
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232, 240, 248,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 240, 248,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.dark > * { position: relative; z-index: 1; }
.dark h2, .dark h3 { color: var(--smoke); }
.dark p { color: rgba(232, 240, 248, 0.72); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(4px); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover {
  background: var(--red-bright);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(212, 160, 23, 0.55);
}
.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--smoke); transform: translateY(-2px); }
.on-dark .btn-ghost, .dark .btn-ghost { color: var(--smoke); }
.on-dark .btn-ghost:hover, .dark .btn-ghost:hover { background: var(--smoke); color: var(--ink); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 10px 30px -14px rgba(0,0,0,0.6); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.brand:hover { color: #fff; }
.brand .mark {
  width: 34px; height: 34px;
  background: var(--red);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
  flex: none;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--caution);
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 240, 248, 0.82);
  padding: 10px 14px;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--red-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: #fff; }
.nav .nav-cta {
  background: var(--red);
  color: #fff;
  margin-left: 12px;
  padding: 11px 18px;
}
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { background: var(--red-bright); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
  z-index: 102;
}
.menu-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--smoke);
  margin: 6px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--steel-900);
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .menu-open .nav { opacity: 1; pointer-events: auto; }
  .nav a { font-size: 26px; }
  .nav .nav-cta { margin-left: 0; margin-top: 14px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--smoke);
  padding: calc(var(--header-h) + 60px) 0 80px;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  animation: heroZoom 14s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 22, 40,0.94) 30%, rgba(10, 22, 40,0.55) 65%, rgba(10, 22, 40,0.35)),
    linear-gradient(0deg, rgba(10, 22, 40,0.9), transparent 40%);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-light);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--caution);
  margin-bottom: 26px;
}
.hero-badge .dot { width: 8px; height: 8px; background: var(--caution); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.hero h1 {
  font-size: clamp(52px, 8.5vw, 108px);
  max-width: 900px;
  margin-bottom: 26px;
}
.hero h1 .accent { color: var(--red-bright); display: block; }
.hero p.lead {
  font-size: clamp(18px, 2.2vw, 22px);
  max-width: 560px;
  color: rgba(232, 240, 248, 0.8);
  margin-bottom: 38px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* staggered hero load */
.hero .rise { opacity: 0; transform: translateY(28px); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero .rise.d1 { animation-delay: 0.1s; }
.hero .rise.d2 { animation-delay: 0.25s; }
.hero .rise.d3 { animation-delay: 0.4s; }
.hero .rise.d4 { animation-delay: 0.55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* hero stat rail */
.hero-rail {
  position: absolute;
  right: 0; bottom: 0;
  display: flex;
  background: var(--red);
  color: #fff;
}
.hero-rail div {
  padding: 22px 34px;
  border-left: 1px solid rgba(255,255,255,0.22);
}
.hero-rail div:first-child { border-left: 0; }
.hero-rail strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}
.hero-rail span { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 720px) { .hero-rail { position: static; margin-top: 48px; display: inline-flex; } .hero { min-height: 0; } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .rise { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-bg { animation: none; }
}

/* ---------- service cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--steel-900);
  padding: 34px 30px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--red);
}
.card .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.card h3 { font-size: 26px; margin: 12px 0 12px; }
.card p { color: var(--ink-soft); font-size: 16px; }
.card .icon {
  width: 54px; height: 54px;
  margin-bottom: 18px;
  color: var(--steel-800);
  transition: color 0.3s ease, transform 0.3s ease;
}
.card:hover .icon { color: var(--red); transform: scale(1.08); }

/* image cards (services/rental catalogs) */
.cat-card {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat-card figure { overflow: hidden; aspect-ratio: 4 / 3; background: var(--steel-900); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.cat-card:hover img { transform: scale(1.06); }
.cat-card .cat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-card .cat-label::after { content: "→"; color: var(--red); transition: transform 0.25s ease; }
.cat-card:hover .cat-label::after { transform: translateX(5px); }

/* ---------- stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { border-left: 3px solid var(--red); padding-left: 22px; }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--smoke);
}
.stat span { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232, 240, 248,0.65); }

/* ---------- brand marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 26px 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  animation: scroll 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.3s, opacity 0.3s, transform 0.3s; }
.marquee-track img:hover { filter: none; opacity: 1; transform: scale(1.08); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- split section ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split .photo { position: relative; }
.split .photo img { width: 100%; box-shadow: var(--shadow-lg); }
.split .photo::after {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid var(--red);
  z-index: -1;
}
.checklist { list-style: none; margin-top: 26px; }
.checklist li {
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-soft);
}
.dark .checklist li { border-color: var(--line-light); color: rgba(232, 240, 248,0.75); }
.checklist li strong { color: inherit; font-weight: 600; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 20px;
  width: 22px; height: 22px;
  background: var(--red);
  clip-path: polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 2%, 39% 70%);
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(40px, 6vw, 70px); margin-bottom: 18px; }
.cta-band p { max-width: 560px; margin: 0 auto 36px; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  padding: calc(var(--header-h) + 90px) 0 70px;
  position: relative;
}
.page-hero h1 { font-size: clamp(46px, 7vw, 84px); margin: 14px 0 18px; }
.page-hero p { max-width: 640px; font-size: 19px; }

/* ---------- forms ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  padding: 44px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 640px) { .form-card { padding: 28px 22px; } }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  background: var(--smoke);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14);
}
.field textarea { min-height: 150px; resize: vertical; }

/* ---------- contact info blocks ---------- */
.info-tile {
  border: 1px solid var(--line);
  background: #fff;
  padding: 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.info-tile h3 { font-size: 20px; margin-bottom: 8px; }
.info-tile p, .info-tile a.big {
  color: var(--ink-soft);
  font-size: 16px;
}
.info-tile a.big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--red);
  letter-spacing: 0.04em;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--steel-900);
  color: rgba(232, 240, 248, 0.7);
  padding: 72px 0 0;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3,
.site-footer h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(232, 240, 248,0.7); }
.site-footer a:hover { color: var(--caution); }
.footer-bottom {
  border-top: 1px solid var(--line-light);
  padding: 22px 0;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-brand-line {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 26px;
  color: var(--smoke);
  margin-bottom: 14px;
}
.footer-brand-line em { color: var(--red-bright); font-style: normal; }

/* calendly wrapper */
.embed-frame { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 8px; }


/* ============================================================
   Schematic tiles — hand-drawn technical art in place of
   photography. No stock, no AI. Swap for real shop photos
   as they come in: replace <figure class="tile"> contents
   with <img> and the layout holds.
   ============================================================ */
/* selector list: `figure.tile` (0,1,1) is needed to beat `.cat-card figure`,
   which would otherwise flatten the gradient back to solid steel-900 */
.tile,
figure.tile {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(152deg, var(--steel-800) 0%, var(--steel-900) 100%);
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 240, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 240, 248, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.tile svg {
  position: relative;
  width: 60%;
  max-width: 230px;
  height: auto;
  fill: none;
  stroke: var(--smoke-dim);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  transition: transform 0.45s ease, opacity 0.35s ease;
}
.tile svg .accent { stroke: var(--red-bright); }
.cat-card:hover .tile svg { transform: scale(1.06); opacity: 1; }

.split .photo .tile {
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}
.split .photo .tile svg { width: 54%; max-width: 300px; }
.schematic-plate {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 16px;
  background: var(--steel-900);
  border-top: 2px solid var(--red);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(232, 240, 248, 0.72);
}

/* page heroes: machined steel plate instead of a photograph */
.page-hero.hero-plate {
  background:
    linear-gradient(100deg, rgba(10, 22, 40, 0.97) 30%, rgba(18, 34, 56, 0.92)),
    repeating-linear-gradient(-45deg, rgba(232, 240, 248, 0.05) 0 2px, transparent 2px 15px),
    var(--steel-900);
}
.page-hero.hero-plate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0 20%, rgba(232, 240, 248, 0.12) 20%);
}
@media (prefers-reduced-motion: reduce) {
  .tile svg { transition: none; }
}


/* ============================================================
   Store-matched components
   ============================================================ */

/* Primary button: navy on light ground, gold on navy ground.
   Gold + white is only ~2.2:1 contrast, so it is never used
   as a button fill on light backgrounds. */
.btn-red { background: var(--ink); color: #fff; }
.btn-red:hover {
  background: var(--steel-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(10, 22, 40, 0.5);
}
.on-dark .btn-red, .dark .btn-red { background: var(--red); color: var(--ink); }
.on-dark .btn-red:hover, .dark .btn-red:hover {
  background: var(--red-bright);
  color: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(212, 160, 23, 0.5);
}

/* Eyebrows pick up the store's mono label treatment */
.eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; }

/* Category cards are links now, not decorative divs.
   They already had a hover lift and a sliding arrow, which
   promised a click that never happened. */
a.cat-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.cat-card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-red:hover, a.cat-card:hover { transform: none; }
}

/* Gold fills always take navy text, never white.
   #d4a017 + #fff is ~2.2:1 and fails WCAG; #d4a017 + #0a1628
   is ~7:1. Applies to the logo mark, header CTA and hero rail. */
.brand .mark { background: var(--red); color: var(--ink); }
.nav .nav-cta { background: var(--red); color: var(--ink); }
.nav .nav-cta:hover { background: var(--red-bright); color: var(--ink); }
.hero-rail { background: var(--red); color: var(--ink); }
.hero-rail strong { color: var(--ink); }
.hero-rail span { color: rgba(10, 22, 40, 0.72); }
.hero-rail div { border-left-color: rgba(10, 22, 40, 0.22); }

/* Archivo is far wider than the condensed Big Shoulders it replaced,
   so the header ran out of room. Tighten the nav and stop the phone
   CTA from wrapping out of the 74px bar. */
.nav a { font-size: 14px; letter-spacing: 0.11em; padding: 10px 11px; }
.nav .nav-cta {
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 10px 15px;
  margin-left: 10px;
}
.brand { font-size: 20px; letter-spacing: 0.03em; }
.brand small { letter-spacing: 0.2em; font-size: 9.5px; }
@media (max-width: 1080px) and (min-width: 921px) {
  .nav a { font-size: 13px; letter-spacing: 0.06em; padding: 10px 8px; }
}
@media (max-width: 920px) {
  .nav a, .nav .nav-cta { font-size: 17px; letter-spacing: 0.14em; }
}


/* ---------- brands we service ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.brand-card {
  background: #fff;
  padding: 28px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  text-align: center;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.brand-card:hover { background: var(--smoke); transform: translateY(-3px); }
.brand-card:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.brand-card img {
  height: 42px;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.brand-card:hover img { filter: none; opacity: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.brand-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) { .brand-card:hover { transform: none; } }


/* The header mark was a gold square with "HEI" typed into it.
   It is the actual logo now. Rule sits last so it beats the
   earlier .brand .mark background/colour declarations. */
.brand .mark {
  width: 48px;
  height: 48px;
  background: none;
  display: block;
  flex: none;
  object-fit: contain;
}                                 /* real logo mark */
@media (max-width: 520px) { .brand .mark { width: 40px; height: 40px; } }

/* ---------- mobile menu fix ----------
   `backdrop-filter` on .site-header made the header a containing block
   for position:fixed descendants, so the mobile nav's `inset: 0`
   resolved to the 74px header bar instead of the viewport. The links
   were laid out above the visible area: tap the hamburger, nothing
   appears. Moving the blur onto a pseudo-element keeps the frosted
   look without the header becoming a containing block. */
.site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 22, 40, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
}
@media (max-width: 920px) {
  /* the open menu sits above the page and stops it scrolling underneath */
  .nav { z-index: 101; overflow-y: auto; padding: 96px 24px 40px; }
  body.menu-open { overflow: hidden; }
}


/* ---------- ported content pages ---------- */
.prose { max-width: 68ch; }
.prose p { color: var(--ink-soft); font-size: 17.5px; margin-bottom: 20px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 38px 0 16px; }
.prose h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--red);
  margin: 28px 0 10px;
  padding-left: 14px;
  border-left: 3px solid var(--red);
}
.brand-card .brand-name { margin-top: 4px; }

/* An <h3> in the old pages was a supporting statement (warranty terms,
   guarantees), not a section heading. Render it as a callout so it keeps
   its emphasis without competing with real headings. */
.prose .callout-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  background: rgba(212, 160, 23, 0.10);
  border-left: 4px solid var(--red);
  padding: 16px 20px;
  margin: 28px 0;
  text-transform: none;
  letter-spacing: 0;
}


/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: var(--red);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--red); }
.faq summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.faq .answer { padding: 0 44px 22px 0; color: var(--ink-soft); font-size: 16.5px; max-width: 68ch; }


/* ---------- quote form ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  border-left: 3px solid var(--red);
  background: rgba(212, 160, 23, 0.10);
  color: var(--ink);
}
.form-note.is-ok { border-left-color: #1B6E52; background: rgba(27, 110, 82, 0.10); }
.form-note.is-err { border-left-color: #b1372e; background: rgba(177, 55, 46, 0.10); }

/* ---------- site banner ----------
   A ticker above the fixed header. --banner-h is 0 until banner.js adds
   .has-banner to <body>; the header and both hero paddings read it, so the
   whole page shifts down by exactly the bar's height and nothing overlaps.

   Background is motion graphics drawn in CSS, not an image: dark brushed
   steel (fine horizontal grain), a diagonal light sweep passing across it,
   and two soft gold/steel glows drifting slowly behind. Everything animates
   on transform/opacity only, so it costs almost nothing to run, and it all
   switches off under prefers-reduced-motion. */
:root { --banner-h: 0px; }
body.has-banner { --banner-h: 54px; }

.site-header { top: var(--banner-h); }
.hero        { padding-top: calc(var(--header-h) + var(--banner-h) + 60px); }
.page-hero   { padding-top: calc(var(--header-h) + var(--banner-h) + 90px); }

.site-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--banner-h);
  z-index: 101;
  display: flex;
  align-items: center;
  color: var(--smoke);
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  /* brushed steel: a dark navy-steel base with a very fine horizontal grain */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg, #16263f 0%, #0d1a2e 55%, #0a1628 100%);
  border-bottom: 2px solid var(--red);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform .28s ease, opacity .28s ease;
}
.site-banner.is-leaving { transform: translateY(-100%); opacity: 0; }

/* --- the moving background --- */
.site-banner-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.site-banner-bg i { position: absolute; display: block; will-change: transform; }
/* diagonal light sweep across the steel */
.site-banner-bg i:nth-child(1) {
  top: -40%; bottom: -40%; width: 38%; left: -45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 60%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: banner-sweep 7.5s cubic-bezier(.4,0,.2,1) infinite;
}
/* two soft glows drifting — gold, then cool steel */
.site-banner-bg i:nth-child(2) {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: 8%; top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.32) 0%, rgba(212,160,23,.08) 38%, rgba(212,160,23,0) 66%);
  filter: blur(6px);
  animation: banner-drift-a 16s ease-in-out infinite alternate;
}
.site-banner-bg i:nth-child(3) {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  right: 6%; top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,170,220,.24) 0%, rgba(120,170,220,.06) 40%, rgba(120,170,220,0) 66%);
  filter: blur(6px);
  animation: banner-drift-b 19s ease-in-out infinite alternate;
}

/* --- optional media background (video or still), behind everything --- */
.site-banner-video, .site-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* a still image still moves: a slow drift-and-zoom so it never looks frozen */
.site-banner-img { animation: banner-kenburns 28s ease-in-out infinite alternate; transform-origin: 50% 50%; }
/* darken and blue-tint the footage so white text stays readable over anything */
.site-banner.has-media .site-banner-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,22,40,.78) 0%, rgba(10,22,40,.45) 30%, rgba(10,22,40,.45) 70%, rgba(10,22,40,.85) 100%),
    linear-gradient(180deg, rgba(10,22,40,.25) 0%, rgba(10,22,40,.55) 100%);
}
/* with real footage behind, keep the light sweep (it reads as a lens flare) and drop the glow blobs */
.site-banner.has-media .site-banner-bg i:nth-child(2),
.site-banner.has-media .site-banner-bg i:nth-child(3) { display: none; }
.site-banner.has-media .site-banner-bg i:nth-child(1) { opacity: .7; }
@keyframes banner-kenburns { from { transform: scale(1.06) translateX(-2%); } to { transform: scale(1.14) translateX(2%); } }
@media (prefers-reduced-motion: reduce) { .site-banner-img { animation: none; } }

/* --- the crawl --- */
.site-banner-viewport {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  overflow: hidden;
  /* fade the text in and out at the edges instead of hard-clipping it */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.site-banner-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: banner-crawl 40s linear infinite;   /* duration overwritten by banner.js */
}
.site-banner.is-hover  .site-banner-track,
.site-banner.is-paused .site-banner-track { animation-play-state: paused; }

.site-banner-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 6px;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
.site-banner-item:hover, .site-banner-item:focus-visible { color: var(--red-bright); outline: none; }
.site-banner-item:hover .site-banner-txt { text-decoration: underline; text-underline-offset: 3px; }
.site-banner-item.is-promo .site-banner-txt b { color: var(--red-bright); }
.site-banner-txt b { font-weight: 700; color: #fff; }
.site-banner-ico { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; color: var(--red); }
.site-banner-ico svg { width: 16px; height: 16px; }
.site-banner-sep {
  display: inline-block; width: 6px; height: 6px; margin: 0 26px;
  background: var(--red); transform: rotate(45deg); opacity: .9;
}

/* --- controls --- */
.site-banner-ctl {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 2px;
  padding: 0 6px 0 10px; height: 100%;
  background: linear-gradient(90deg, rgba(10,22,40,0) 0%, rgba(10,22,40,.85) 30%, rgba(10,22,40,.95) 100%);
}
.site-banner-pause, .site-banner-x {
  width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--smoke);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.site-banner-pause svg { width: 14px; height: 14px; }
.site-banner-pause[aria-pressed="true"] { color: var(--red-bright); }
.site-banner-x { font-size: 22px; line-height: 1; }
.site-banner-pause:hover, .site-banner-pause:focus-visible,
.site-banner-x:hover, .site-banner-x:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.site-banner-x:hover { transform: rotate(90deg); }

@keyframes banner-crawl   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes banner-sweep   { 0% { left: -45%; } 55%, 100% { left: 115%; } }
@keyframes banner-drift-a { from { transform: translate(-30%, -50%) scale(1); } to { transform: translate(40%, -50%) scale(1.25); } }
@keyframes banner-drift-b { from { transform: translate(20%, -50%) scale(1.15); } to { transform: translate(-45%, -50%) scale(.9); } }

@media (max-width: 640px) {
  body.has-banner { --banner-h: 46px; }
  .site-banner { font-size: 13.5px; }
  .site-banner-sep { margin: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-banner-bg i, .site-banner-track { animation: none !important; }
  .site-banner { transition: none; }
}
.site-banner.is-static .site-banner-bg i,
.site-banner.is-static .site-banner-track { animation: none !important; }

/* ---------- brand logo wall (under hero) ---------- */
.brandwall { background: var(--ink); padding: 34px 0 40px; border-top: 3px solid var(--red); }
.brandwall-label { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--caution); margin: 0 0 20px; }
.brandwall-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.brand-tile { flex: 0 0 calc((100% - 56px) / 5); background: #fff; border-radius: 4px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 18px; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.brand-tile img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.brand-tile span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #5a6676; opacity: 0; height: 0; transition: opacity 0.25s; }
.brand-tile:hover, .brand-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.35); outline: 2px solid var(--red); }
.brand-tile:hover span, .brand-tile:focus-visible span { opacity: 1; height: auto; }
@media (max-width: 900px) { .brand-tile { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 520px) { .brandwall-grid { gap: 10px; } .brand-tile { flex-basis: calc((100% - 10px) / 2); height: 84px; } }
@media (min-width: 721px) { .hero { min-height: 0; padding-top: calc(var(--header-h) + var(--banner-h, 40px) + 28px); padding-bottom: 96px; } .hero h1 { font-size: clamp(48px, 6vw, 84px); margin-bottom: 18px; } .hero p.lead { margin-bottom: 26px; } .hero-badge { margin-bottom: 18px; } .brandwall { padding: 22px 0 26px; } .brand-tile { height: 80px; } }

.brand-tile.lead { flex-basis: calc((100% - 56px) * 2 / 5 + 14px); }
.brand-tile.lead img { max-height: 58px; }
@media (max-width: 900px) { .brand-tile.lead { flex-basis: calc((100% - 28px) * 2 / 3 + 14px); } }
@media (max-width: 520px) { .brand-tile.lead { flex-basis: 100%; } }

.brand-tile.pt b { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.brand-tile.pt { gap: 6px; }
.brand-tile.pt img { width: 86%; max-height: none; height: auto; }
.brand-tile.pt b { font-size: 20px; }
.brand-tile.pt img { width: 88%; max-height: 40px; }

/* brand wall: top 3 big, rest small */
.brandwall-grid .brand-tile { flex: 0 0 calc((100% - 70px) / 6); height: 64px; padding: 8px 12px; }
.brandwall-grid .brand-tile img { max-height: 30px; }
.brandwall-grid .brand-tile span { display: none; }
.brandwall-grid .brand-tile:nth-child(-n+3) { flex: 0 0 calc((100% - 28px) / 3); height: 124px; padding: 16px 28px; }
.brandwall-grid .brand-tile:nth-child(-n+3) img { max-height: 66px; }
.brandwall-grid .brand-tile.pt img { width: 82%; max-height: 52px; }
.brandwall-grid .brand-tile:nth-child(-n+3) span { display: block; }
@media (max-width: 900px) {
  .brandwall-grid .brand-tile { flex-basis: calc((100% - 28px) / 3); }
  .brandwall-grid .brand-tile:nth-child(-n+3) { height: 104px; padding: 12px 16px; }
  .brandwall-grid .brand-tile:nth-child(-n+3) img { max-height: 50px; }
}
@media (max-width: 520px) {
  .brandwall-grid { gap: 10px; }
  .brandwall-grid .brand-tile { flex-basis: calc((100% - 20px) / 3); height: 56px; padding: 6px 8px; }
  .brandwall-grid .brand-tile img { max-height: 24px; }
  .brandwall-grid .brand-tile:nth-child(-n+3) { flex-basis: 100%; height: 92px; }
  .brandwall-grid .brand-tile:nth-child(-n+3) img { max-height: 44px; }
}

/* ghost button that carries .on-dark itself (hero "Browse Rentals") */
.btn-ghost.on-dark { color: var(--smoke); border-color: rgba(240, 244, 248, 0.7); }
.btn-ghost.on-dark:hover { background: var(--smoke); color: var(--ink); }

/* real product photos replacing the old schematic tiles */
.split .photo img.real-photo { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: var(--shadow-lg); background: #fff; }

/* real product photos on category cards (white studio backgrounds, so show the whole tool) */
.cat-card figure.cat-photo { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.cat-card figure.cat-photo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

.split .photo img.real-photo.cover { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; background: var(--steel-900); }

/* ---------- product catalog (brand pages) ---------- */
.catalog .cat-tools { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.catalog .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog .chip { font: 600 13px var(--font-display); letter-spacing: 0.02em; padding: 8px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; border-radius: 2px; }
.catalog .chip span { font-family: var(--font-mono); font-weight: 500; opacity: 0.6; margin-left: 4px; }
.catalog .chip[aria-pressed="true"] { background: var(--ink); color: var(--smoke); border-color: var(--ink); }
.catalog .chip:focus-visible, .catalog .cat-search:focus-visible, .catalog .pc-quote:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.catalog .cat-search { font: 500 15px var(--font-body); padding: 10px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); min-width: 0; width: min(100%, 320px); border-radius: 2px; }
.catalog .cat-count { font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px; min-height: 1.4em; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pcard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.pcard[hidden] { display: none; }
.pc-photo { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); padding: 10px; background: #fff; }
.pc-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pc-body h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; margin: 0; }
.pc-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pc-quote { margin-top: auto; padding-top: 6px; font: 700 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); width: max-content; }
.pc-quote:hover { color: var(--steel-600); }
.catalog .cat-more { display: flex; justify-content: center; margin-top: 26px; }
.catalog .cat-empty { padding: 30px 0; color: var(--ink-soft); }
@media (max-width: 520px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .pc-body { padding: 10px; } }

/* real product photo at the top of the homepage service cards */
.card .card-photo { margin: -34px -30px 24px; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.card .card-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }


/* ===== audit fixes ===== */
:root { --gold-text: #8a6508; }                       /* gold that reads on light surfaces (about 5:1) */
.eyebrow { color: var(--gold-text); }
.dark .eyebrow, .on-dark .eyebrow, .cta-band .eyebrow, .hero .eyebrow { color: var(--caution); }
main a:not([class]) { color: var(--gold-text); }
main a:not([class]):hover { color: var(--ink); }
.card .num { color: var(--gold-text); }
.card h3 { color: var(--ink); }
.card:hover h3 { color: var(--gold-text); }
.dark .card h3, .on-dark .card h3 { color: var(--smoke); }
.pc-quote { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; margin-top: auto; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--red); }
.hero-note { margin: 18px 0 0; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; color: var(--caution); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 700; border-radius: 3px; transition: top 0.15s; }
.skip-link:focus { top: 12px; }
.brand small { font-size: 11px; }
.brand-note { font-size: 12px; }
.site-banner-item { min-height: 44px; display: inline-flex; align-items: center; }
.head-call, .callbar { display: none; }
@media (hover: none) { .brandwall-grid .brand-tile:nth-child(-n+3) span { opacity: 1; height: auto; } }
@media (max-width: 720px) {
  .hero-rail { display: none; }                         /* the same stats appear again further down */
  .hero { padding-bottom: 56px; }
  .head-call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; color: var(--smoke); }
  .menu-toggle { margin-left: 0; width: 44px; height: 44px; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--ink); border-top: 3px solid var(--red); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .callbar a { display: flex; align-items: center; justify-content: center; min-height: 52px; font: 800 14px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke); }
  .callbar .cb-call { background: var(--red); color: var(--ink); }
  body { padding-bottom: 56px; }
}
@media (max-width: 720px) { .page-hero { padding-top: calc(var(--header-h) + var(--banner-h) + 28px); padding-bottom: 40px; } .page-hero p { font-size: 17px; } }
@media (min-width: 721px) { .page-hero { padding-top: calc(var(--header-h) + var(--banner-h) + 56px); padding-bottom: 56px; } }

/* ===== top banner: the crawl stays; the brands message shows large logos ===== */
body.has-banner { --banner-h: 68px; }
.site-banner-item.is-brands { gap: 14px; }
.sb-label { font: 700 12px var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--caution); white-space: nowrap; }
.sb-logo { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 3px; overflow: hidden; flex: none; transition: transform 0.2s, box-shadow 0.2s; }
.sb-logo img { height: 100%; width: auto; display: block; }
.sb-pt { background: #fff; padding: 0 16px; }
.sb-pt img { height: auto; width: 200px; }
.sb-logo:hover, .sb-logo:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 720px) {
  body.has-banner { --banner-h: 54px; }
  .site-banner-item.is-brands { gap: 10px; }
  .sb-label { display: none; }
  .sb-logo { height: 34px; }
  .sb-pt { padding: 0 10px; }
  .sb-pt img { width: 124px; }
}
.hero-fine { margin: 14px 0 0; font-size: 14px; opacity: 0.8; }
.feature .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.feature .tags li { font: 700 13px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.feature .real-photo { background: #fff; }

/* heavy machinery band */
.heavy .split { align-items: center; }
.heavy p { color: rgba(232, 240, 248, 0.85); max-width: 52ch; }
.ind-links { list-style: none; display: grid; gap: 10px; }
.ind-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 20px; border: 1px solid rgba(240, 244, 248, 0.22); color: var(--smoke); font: 700 17px var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.ind-links a i { font-style: normal; color: var(--caution); font-size: 22px; }
.ind-links a:hover, .ind-links a:focus-visible { background: rgba(212, 160, 23, 0.14); border-color: var(--caution); color: var(--smoke); transform: translateX(4px); }
/* links inside dark sections stay light (the darker gold is only for light backgrounds) */
.dark a:not([class]), .on-dark a:not([class]), .cta-band a:not([class]), .site-footer a:not([class]) { color: var(--caution); }
main .ind-links a { color: var(--smoke); }
main .ind-links a:hover, main .ind-links a:focus-visible { color: var(--smoke); }

/* sub-types listed under a product line */
.pc-body .subtypes { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 6px; padding: 0; }
.pc-body .subtypes li { margin: 0; }
.pc-body .subtypes a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 9px; font-size: 12.5px; line-height: 1.2; color: var(--ink-soft); background: var(--smoke); border: 1px solid var(--line); border-radius: 999px; }
.pc-body .subtypes a:hover, .pc-body .subtypes a:focus-visible { background: var(--ink); color: var(--smoke); border-color: var(--ink); outline: none; }

/* quote page: the product the visitor clicked */
.quote-subject { display: flex; align-items: center; gap: 18px; padding: 14px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); }
.quote-subject[hidden] { display: none; }
.quote-subject img { width: 140px; height: 140px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex: none; }
.quote-subject .qs-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quote-subject .qs-text span { font: 700 12px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
.quote-subject .qs-text strong { font: 700 22px var(--font-display); line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 520px) { .quote-subject img { width: 96px; height: 96px; } .quote-subject .qs-text strong { font-size: 18px; } }

/* ===== brand hierarchy: HEI is the biggest mark on every page; partner logos support it ===== */
:root { --header-h: 100px; }
.site-header .brand { gap: 16px; font-size: 27px; line-height: 1.05; letter-spacing: 0.02em; }
.site-header .brand .mark { width: 84px; height: 84px; background: none; object-fit: contain; padding: 0; border-radius: 50%; }
.site-header .brand small { font-size: 12px; letter-spacing: 0.22em; margin-top: 6px; }
body.has-banner { --banner-h: 52px; }
.sb-logo { height: 32px; }
.sb-pt img { width: 150px; }
.sb-pt { padding: 0 12px; }
.sb-label { font-size: 11px; }
@media (max-width: 720px) {
  :root { --header-h: 78px; }
  .site-header .brand { gap: 10px; font-size: 18px; }
  .site-header .brand .mark { width: 58px; height: 58px; }
  .site-header .brand small { font-size: 10px; letter-spacing: 0.14em; margin-top: 3px; }
  body.has-banner { --banner-h: 44px; }
  .sb-logo { height: 26px; }
  .sb-pt { padding: 0 8px; }
  .sb-pt img { width: 100px; }
}
.site-header .brand .mark { box-shadow: 0 0 0 2px var(--caution), 0 4px 14px rgba(0, 0, 0, 0.45); }

/* composite product photos (one product from each of the three brands) fill the card photo area */
.card .card-photo img.composite, .cat-card figure.cat-photo img.composite { padding: 0; object-fit: cover; }
/* square photo areas so the three-brand lineups show larger */
.card .card-photo { aspect-ratio: 1 / 1; }
.cat-card figure.cat-photo { aspect-ratio: 1 / 1; }
/* bigger photo tiles: on wide screens the card grid reaches past the text column,
   up to 120px each side, while headings stay lined up with the rest of the page.
   At 1200px it is 0 and it grows with the window, so the side gutter never shrinks below 24px. */
@media (min-width: 1200px) {
  .grid-3.tiles-xl { margin-inline: calc(-1 * min(120px, (100vw - 1200px) / 2)); }
}