/* =============================================================================
   Unified interior page hero — SITE-WIDE. One treatment for every interior page
   (Services, Case Studies, FAQ, About, Contact, Start). Each page supplies its
   own <img> (src + srcset) and headline; the gradient tint + sizing are shared,
   so the pages read as one system. Home keeps its own video hero (.hero).
   Link this stylesheet on every interior page.
   ============================================================================= */
.page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:72vh;
  padding:calc(var(--nav-h) + 72px) 0 112px; /* ≥72px header→breadcrumb on every page (2026-09-26) */
  background:var(--ink-900);
}
/* The per-page image, cover-cropped behind the tint. */
.page-hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Navy→transparent tint so the headline (center-left) always holds AA contrast,
   while the image stays legible on the right. */
.page-hero__tint{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(10,24,54,.94) 0%, rgba(10,24,54,.70) 50%, rgba(10,24,54,.44) 100%);
}
/* A faint brand wash so even a flat image gains the navy→green depth. */
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 140% at 88% 12%, rgba(46,224,154,.16), transparent 55%);
}
.page-hero__in{position:relative; max-width:640px}

/* Breadcrumb lives in the hero (2026-09-22) — it replaces the eyebrow that used
   to sit above the title, so "where am I" is said once, not twice. The current
   page takes the accent so it still reads as the eyebrow. */
.page-hero__crumb .crumb [aria-current="page"]{color:var(--accent); letter-spacing:.08em; text-transform:uppercase}
.page-hero__crumb .crumb a{color:#B9C6DC}
.page-hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,5.4vw,58px); line-height:1.04; letter-spacing:-.02em;
  color:var(--text-on-ink); margin:12px 0 16px; text-wrap:balance;
}
/* Solid brand accent on the emphasized word (not gradient text — cleaner + AA on navy). */
.page-hero__title .accent{color:var(--accent)}
.page-hero__sub{
  font-family:var(--font-body); font-size:18px; line-height:1.56;
  color:#B9C6DC; max-width:52ch; margin:0;
}
/* Links in the hero intro sit over the image — keep them bright + underlined so
   they never get lost against a light patch of the photo. */
.page-hero__sub a{
  color:var(--accent); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.page-hero__sub a:hover{color:var(--mint)}
.page-hero__note{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--mint);
}
.page-hero__note .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.page-hero__express{margin-top:16px}
.page-hero__express a{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--accent); text-decoration:none;
}
.page-hero__express-sep{color:var(--text-on-ink-muted); margin:0 .5em}
.page-hero__express a:hover{color:var(--mint); text-decoration:underline; text-underline-offset:3px}
@media (max-width:820px){
  /* Phones/tablets (2026-09-26): content-sized heroes with one fixed top offset,
     so the header→breadcrumb gap is identical on every page (it used to depend on
     vertical centring in a 56vh box: ~35px on Contact, ~80–110px elsewhere). */
  .page-hero{min-height:0; align-items:flex-start; padding:calc(var(--nav-h) + 72px) 0 64px}
  .page-hero__sub{font-size:16px}
}
/* Pictorial hero art (product mockups, the About portrait) would sit behind the
   headline once the hero stacks, so on narrow screens crop to the art's quiet
   left side. Line-only motifs stay as they are: thin lines under the tint read
   as texture, not as a competing image. (2026-09-25) */
@media (max-width:820px){
  .page-hero__img--pictorial{object-position:8% 50%}
}