/*
 * VaultPac Exec.
 *
 * Loaded after services.css and nothing else. It overrides token values, not
 * rules — every `--green` in the shared stylesheets resolves to gold here, and
 * the ink deepens to charcoal. That is deliberate: the brief asked for the exec
 * brand to be applied to the existing template rather than for the template to
 * be rebuilt, and a theme that only redefines variables cannot drift away from
 * the layout the other site uses.
 *
 * The token names still say "green". Renaming them across two stylesheets and
 * ninety generated pages would be a large diff that changes nothing a visitor
 * can see, and would break the luggage site if any one reference were missed.
 * They are accent tokens; on this site the accent is gold.
 */
:root {
  /* Accent — gold, at three weights matching the green it replaces. */
  --green: #c8a951;
  --green-bright: #e0c377;
  /* 4.12:1 on the CORE NOW badge's own gold tint, which is under AA at the
     9.5px that badge is set at. A step darker clears it, and it is the same
     hue — this token is the accent *as text*, and it only ever appears on a
     light ground. */
  --green-text: #7c6120;
  --ink-on-green: #17140c;

  /* Ground — charcoal rather than the luggage site's warm near-black. */
  --ink: #15161a;
  --bg: #ffffff;
  --surface: #f6f5f2;
  --surface-2: #ebe9e3;
  /* 4.46:1 on this theme's own --surface-2, which is where the services
     index puts it. One step darker, same hue. */
  --muted: #64635f;
  --line: rgba(21, 22, 26, 0.12);
}

/* The hero scrims are written as literal rgba of the luggage ink, because a
   gradient cannot interpolate a custom property in every browser we care
   about. Charcoal versions, same alphas. */
.site-exec .svc-hero.has-media::after {
  background: linear-gradient(100deg, rgba(21,22,26,0.88) 0%, rgba(21,22,26,0.62) 38%, rgba(21,22,26,0.22) 72%, rgba(21,22,26,0.06) 100%);
}
.site-exec .svc-hero.has-media.tone-dark::after {
  background: linear-gradient(100deg, rgba(21,22,26,0.9) 0%, rgba(21,22,26,0.8) 45%, rgba(21,22,26,0.46) 72%, rgba(21,22,26,0.12) 100%);
}
.site-exec .svc-hero.has-media.tone-light::after {
  background: linear-gradient(100deg, rgba(21,22,26,0.94) 0%, rgba(21,22,26,0.82) 38%, rgba(21,22,26,0.45) 72%, rgba(21,22,26,0.2) 100%);
}
.site-exec .mv-band::after {
  background: linear-gradient(100deg, rgba(21,22,26,0.92) 0%, rgba(21,22,26,0.7) 55%, rgba(21,22,26,0.42) 100%);
}
@media (max-width: 900px) {
  .site-exec .svc-hero.has-media::after {
    background: linear-gradient(180deg, rgba(21,22,26,0.86) 0%, rgba(21,22,26,0.8) 50%, rgba(21,22,26,0.82) 100%);
  }
  .site-exec .svc-hero.has-media.tone-dark::after {
    background: linear-gradient(180deg, rgba(21,22,26,0.8) 0%, rgba(21,22,26,0.74) 50%, rgba(21,22,26,0.78) 100%);
  }
  .site-exec .mv-band::after {
    background: linear-gradient(180deg, rgba(21,22,26,0.9) 0%, rgba(21,22,26,0.86) 100%);
  }
}

/* Gold on charcoal wants a touch more weight than green on ink to read at the
   same size. */
.site-exec .eyebrow { letter-spacing: 0.26em; }
.site-exec .btn-solid { color: var(--ink-on-green); font-weight: 700; }
.site-exec .veh-img { mix-blend-mode: normal; }

/* ---- Exec brand ----
   Header structure, logo height, divider height, descriptor size and tracking
   are inherited from the shared rules, so the two brands read as siblings.
   The header is the mark alone on both; the descriptor lives in the footer. */
.site-exec .footer-logo { max-height: 60px; max-width: min(360px, 64vw); }
@media (max-width: 560px) { .site-exec .footer-logo { max-height: 48px; } }

/* The mark carries black as well as gold, so it still needs a light plate on
   the near-black footer — transparency alone does not save it there. */