/* ============================================================
   JAMES H. CLARK & SON — brand tokens
   !! PLACEHOLDER until the new JHC logo / brand kit arrives. !!
   Direction per owner (2026-11-06): grey/white, understated.
   Charcoal ink on white/grey. Display type = Roboto, body = Inter;
   HPT uses the same type pairing (2026-11-06); the palette is the
   differentiator between the two brands.
   When the logo lands: swap --brand/--accent and the
   wordmark in Header.astro (and the favicon).
   ============================================================ */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #1a1d23;
  --muted: #5c6570;
  --line: #e2e5ea;
  --brand: #1a1d23; /* charcoal — placeholder until real logo colors land */
  --accent: #1a1d23;
  --hero-bg: #eef0f3;
  --hero-ink: #1a1d23;
  --font-display: "Roboto", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius: 8px;
  --tracking-label: 0.14em;
}

/* JHC hero: light, quiet — thin rule along the bottom */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

/* JHC hero: fleet photo behind the 97-years block at 30% opacity.
   ::before = image (z0), content (z1), bottom rule ::after paints over. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/jhc-hero.jpg") center / cover no-repeat;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}
.hero > * {
  position: relative;
  z-index: 1;
}

/* JHC employment page: full-bleed salt-flat photo at 20% opacity behind
   the header. Fixed 460px height anchored at the top — the section itself
   flows with the text (so "Open positions" sits at its original spot),
   while the photo extends below it and fades out into the page grey.
   No stretch, no tiling. */
.emp-hero {
  position: relative;
}
.emp-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
  z-index: 0;
  pointer-events: none;
}
.emp-hero .container {
  position: relative;
  z-index: 1;
}
/* Intro copy sits on the photo — darken it so it stays readable */
.emp-hero .lead {
  color: var(--ink);
}