/* ============================================================
   MDS LOGISTICS — ART DIRECTION v2
   ------------------------------------------------------------
   Loaded AFTER tokens.css and mds.css. Additive only: it does
   not modify any house constant. What it adds is the visual
   register approved in the UI concept round —

     · a full-bleed photographic hero with a directional scrim
     · a heavy grotesque display voice (Archivo 800, uppercase)
       used ONLY for hero and band statements. The house Bodoni
       remains the display face for every section heading, so
       the page still reads as MIDIOS.
     · a capability band of ruled columns beneath the hero
     · photographic split and closing bands
     · the shared MIDIOS vertical keyword stack

   Every image on this page is a PLACEHOLDER pending real
   photography. No image is captioned, labelled or positioned
   to imply that it depicts an MDS-owned site, project, client
   or asset.
   ============================================================ */

:root {
  /* The heavy voice. An expression of the house UI face, not a new family. */
  --display-heavy: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --scrim-strong: color-mix(in srgb, var(--ground) 92%, transparent);
  --scrim-mid:    color-mix(in srgb, var(--ground) 62%, transparent);
  --scrim-none:   color-mix(in srgb, var(--ground) 0%, transparent);
}

/* ============================================================
   1. SHARED MIDIOS SIGNATURE — the vertical keyword stack and the
   "A MIDIOS Company" endorsement now live in tokens.css (house
   signatures). MDS sets only the face they speak in.
   ============================================================ */

:root { --sig-face: var(--data, var(--ui)); }

/* ============================================================
   2. THE HERO
   ============================================================ */

/* Interior pages carry the same hero grammar as the homepage but at a
   lower height — the statement here is a section title, not the
   division's opening line, and it should not push the page's real
   content below the fold. */
.hero-v2--interior {
  min-height: min(56svh, 34rem) !important;
}

.hero-v2 {
  position: relative;
  min-height: min(90svh, 52rem);
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.hero-v2 .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-v2 .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* Two scrims: one vertical for legibility at the foot, one
   directional from the left so the statement always has ground. */
.hero-v2::before,
.hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-v2::before {
  background: linear-gradient(
    to top,
    var(--scrim-strong) 0%,
    var(--scrim-mid) 42%,
    var(--scrim-none) 78%
  );
}
.hero-v2::after {
  background: linear-gradient(
    to right,
    var(--scrim-strong) 0%,
    var(--scrim-mid) 38%,
    var(--scrim-none) 72%
  );
}

.hero-v2 .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}

.hero-eyebrow {
  font-family: var(--data, var(--ui));
  font-size: var(--step--1);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

/* Standalone utility: the heavy voice, usable outside a photographic
   hero (e.g. the request-audit page, which stays photo-free by design
   but should still speak in the same register as the rest of MDS). */
.heavy {
  font-family: var(--display-heavy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.hero-v2 .heavy {
  font-size: var(--step-4);
  line-height: .92;
  margin: 0;
  max-width: 18ch;
  color: var(--type);
}

.hero-v2 .lede {
  max-width: 54ch;
  margin: 1.75rem 0 0;
  color: var(--type);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero-v2 .lede + .lede {
  margin-top: .9rem;
  font-size: var(--step-0);
  color: var(--type-2);
}

/* The verb rule — the operating cycle, compressed to one line. */
.verbrule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.verbrule li {
  font-family: var(--data, var(--ui));
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--type-2);
}
.verbrule li + li::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent-dim);
  vertical-align: middle;
  margin-right: .9rem;
}
/* Once the rule wraps, a leading connector on a new line reads as a
   dangling dash. Drop the connectors and space the verbs instead. */
@media (max-width: 640px) {
  .verbrule { gap: .45rem 1.4rem; }
  .verbrule li + li::before { display: none; }
}

.hero-actions { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================
   3. CAPABILITY BAND — ruled columns beneath the hero
   ============================================================ */

.capband {
  background: var(--ground-raised);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--gutter);
}
.capband ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.capband li { border-top: 1px solid var(--line); padding-top: 1rem; }
.capband .capno {
  display: block;
  font-family: var(--data, var(--ui));
  font-size: var(--step--1);
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: .75rem;
}
.capband h3 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.3;
  margin: 0 0 .5rem;
  color: var(--type);
}
.capband p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--type-2);
}
.capband a { color: inherit; text-decoration: none; display: block; }
.capband a:hover h3 { color: var(--accent); }
.capband a:hover { border-color: var(--accent); }
.capband li:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: .5rem; }

/* ============================================================
   4. PHOTOGRAPHIC SPLIT BAND
   ============================================================ */

.splitband {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.splitband .split-media { position: relative; min-height: 22rem; }
.splitband .split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.splitband .split-body {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ground);
}
.splitband .split-body h2 {
  font-family: var(--display-heavy);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
}
@media (max-width: 860px) {
  .splitband { grid-template-columns: 1fr; }
  .splitband .split-media { min-height: 16rem; }
}

/* ============================================================
   5. CLOSING BAND — full-bleed photographic conversion
   ============================================================ */

.closer {
  position: relative;
  min-height: min(70svh, 38rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.closer .closer-media { position: absolute; inset: 0; z-index: 0; }
.closer .closer-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--scrim-strong) 0%,
    var(--scrim-mid) 52%,
    var(--scrim-none) 88%
  );
  pointer-events: none;
}
.closer .closer-inner {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  /* Wide enough that the two calls to action sit on one line, as they
     do in the hero. Narrower and they stack, which reads as a different
     component rather than the same one. */
  max-width: 44rem;
}
.closer .lede { max-width: 42ch; }
.closer h2 {
  font-family: var(--display-heavy);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-3);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

/* ============================================================
   7. MOTION — restrained, and off entirely on request
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .hero-inner > * { animation: mds-rise .7s cubic-bezier(.2,.7,.3,1) both; }
  .hero-v2 .hero-eyebrow  { animation-delay: .05s; }
  .hero-v2 .heavy         { animation-delay: .12s; }
  .hero-v2 .lede          { animation-delay: .2s; }
  .hero-v2 .verbrule      { animation-delay: .28s; }
  .hero-v2 .hero-actions  { animation-delay: .34s; }
}
@keyframes mds-rise {
  from { opacity: 0; transform: translateY(.9rem); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   8. PRINT
   ============================================================ */

@media print {
  .hero-v2, .closer { min-height: auto; }
  .hero-v2 .hero-media, .closer .closer-media, .splitband .split-media { display: none; }
  .hero-v2::before, .hero-v2::after, .closer::before { display: none; }
}