/* =====================================================================
   VARIANT: Muncie — "Utility Blue"
   ---------------------------------------------------------------------
   Direction: industrial-practical. Cool slate blue, tight radii, hard
   rules, condensed sans display. Reads like a working restoration crew
   rather than a marketing brochure. Densest of the three layouts.

   Load AFTER tokens.css, BEFORE base.css:
     <link rel="stylesheet" href="../_shared/css/tokens.css">
     <link rel="stylesheet" href="../_shared/css/variants/muncie.css">
     <link rel="stylesheet" href="../_shared/css/base.css">
     <link rel="stylesheet" href="../_shared/css/components.css">

   Only tokens and documented hooks are overridden here — no component
   rewrites, so shared updates keep flowing through.
   ===================================================================== */

:root {
  /* Brand: cool slate blue */
  --brand-050: #eef3f7;
  --brand-100: #d3e0ea;
  --brand-300: #86a5bd;
  --brand-500: #2e5b7a;
  --brand-700: #1b3b52;
  --brand-900: #0f2432;

  /* Urgent: signal red-orange, high contrast against the slate */
  --urgent-100: #fce0d5;
  --urgent-500: #c33f16;
  --urgent-600: #a53310;
  --urgent-700: #7d260b;

  /* Slightly cool neutrals to sit with the slate */
  --ink-900: #14181c;
  --ink-700: #313840;
  --ink-500: #59626c;
  --ink-300: #97a1ab;
  --ink-150: #d5dbe1;
  --ink-075: #ebeef1;
  --paper: #ffffff;
  --paper-alt: #f4f6f8;

  /* Type: condensed grotesque display, neutral sans body */
  --font-display: "Archivo Narrow", "Arial Narrow", "Helvetica Neue Condensed", Impact, system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);
  --fw-display: 700;
  --tracking-display: 0.005em;

  /* Form: tight, engineered */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --btn-radius: 3px;
  --btn-transform: uppercase;
  --btn-tracking: 0.06em;
  --brand-mark-radius: 3px;
  --card-radius: 4px;
  --card-border: 1px solid var(--ink-150);
  --card-shadow: none;

  /* Denser rhythm than the other two cities */
  --section-y: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --wrap: 1120px;

  /* Hero: hard vertical gradient, no softness */
  --hero-overlay: linear-gradient(180deg, rgba(15,36,50,0.62) 0%, rgba(15,36,50,0.86) 100%);
  --callpanel-bg: var(--brand-050);

  /* Faint diagonal hatch, kept under 4% so text contrast is untouched */
  --surface-texture:
    repeating-linear-gradient(135deg, rgba(46,91,122,0.030) 0 2px, transparent 2px 9px);
}

/* Muncie hook: section headings sit above a short accent rule. */
.section > .wrap > h2:first-child,
.section > .wrap > .u-center > h2 {
  padding-top: var(--s-3);
  border-top: 4px solid var(--c-action);
  display: inline-block;
}

/* Muncie hook: steps use a solid left bar instead of the shared top rule. */
.steps li {
  border-top: 0;
  border-left: 4px solid var(--brand-500);
  padding: 0 0 0 var(--s-4);
}

/* Muncie hook: squared placeholder frames to match the tight radii. */
.ph { border-radius: 4px; }

/* Muncie-only compact logo mark, cropped visually from the preserved source PNG. */
.brand__mark--logo {
  background: var(--paper);
  overflow: hidden;
  padding: 3px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-rule);
}

.brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* Muncie-only source imagery: originals remain intact in assets/originals. */
.muncie-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   2026 MUNCIE VISUAL REBUILD
   The existing WDM mark, imagery, content and conversion paths stay in
   place. This layer changes the composition from a dense generic grid to
   a deliberate response-site system: command header, editorial hero,
   spacious service cards and an unmissable phone hierarchy.
   ===================================================================== */
:root {
  --wrap: 1200px;
  --section-y: clamp(3.5rem, 2.4rem + 4.8vw, 6.25rem);
  --hero-overlay: linear-gradient(90deg, rgba(7, 25, 39, 0.94) 0%, rgba(13, 43, 62, 0.86) 42%, rgba(13, 43, 62, 0.38) 76%, rgba(13, 43, 62, 0.25) 100%);
  --card-radius: 10px;
  --card-shadow: 0 16px 32px rgba(15, 36, 50, 0.08);
  --btn-radius: 6px;
}

/* A clear response-bar header lets the real WDM mark read at a useful size. */
.site-header {
  border-top: 5px solid var(--c-action);
  border-bottom-color: rgba(27, 59, 82, 0.16);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 18px rgba(15, 36, 50, 0.08);
}
.site-header__inner { min-height: 78px; gap: clamp(.5rem, 1.5vw, 1.25rem); }
.brand--logo-only {
  width: 144px;
  height: 56px;
  flex: 0 0 144px;
  padding: 2px 0;
}
.brand--logo-only img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.nav__list { gap: clamp(.7rem, 1.25vw, 1.35rem); }
.nav__link { font-size: .78rem; letter-spacing: .025em; text-transform: uppercase; }
.site-header .btn--call {
  min-height: 46px;
  padding-inline: .85rem;
  font-size: .79rem;
  box-shadow: 0 4px 0 var(--urgent-700);
}

/* The homepage becomes a full response-stage rather than a dark text block. */
.hero.hero--image {
  min-height: 650px;
  display: grid;
  align-items: center;
  padding-block: clamp(5rem, 6vw, 8.75rem);
}
.hero.hero--image::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 10px;
  background: linear-gradient(90deg, var(--c-action) 0 12%, var(--brand-300) 12% 40%, rgba(255,255,255,.62) 40% 100%);
}
.hero__media { background-position: 66% center; }
.hero__inner {
  max-width: 42rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  margin-left: calc(var(--gutter) * -1);
  background: linear-gradient(135deg, rgba(7, 25, 39, .52), rgba(7, 25, 39, .10));
  border-left: 5px solid var(--c-action);
}
.hero h1 { font-size: clamp(2.7rem, 4.3vw, 4.8rem); letter-spacing: -.025em; max-width: 11ch; }
.hero .lead { font-size: clamp(1.08rem, 1.2vw, 1.25rem); line-height: 1.62; max-width: 39rem; }
.hero__actions .btn--lg {
  min-height: 60px;
  padding-inline: 1.45rem;
  box-shadow: 0 5px 0 var(--urgent-700);
}
.hero__points { gap: .75rem 1.4rem; padding-top: .3rem; }
.hero__points li { font-weight: 600; }

/* Give service and nearby-community choices a roomier, more confident scan path. */
.grid--4 { --min: 255px; gap: clamp(1rem, 2.2vw, 1.75rem); }
.card {
  padding: clamp(1.45rem, 2vw, 2rem);
  border-color: rgba(27, 59, 82, 0.14);
  border-top: 4px solid var(--brand-500);
}
.card:nth-child(4n + 2) { border-top-color: var(--c-action); }
.card:nth-child(4n + 3) { border-top-color: var(--brand-300); }
.card__icon { width: 48px; height: 48px; border-radius: 50%; }
.card--link:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(15, 36, 50, .16); }
.section--alt { background: linear-gradient(180deg, var(--c-bg-alt), rgba(238,243,247,.78)); }
.callpanel {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-left-width: 8px;
  box-shadow: 0 18px 40px rgba(15, 36, 50, .10);
}
.callpanel .btn--lg { box-shadow: 0 4px 0 var(--urgent-700); }
.muncie-visual { border-radius: 10px; box-shadow: 18px 18px 0 var(--brand-100), 0 16px 34px rgba(15,36,50,.12); }
.site-footer { margin-top: 0; padding-block: clamp(4rem, 5vw, 6rem) 2.5rem; }

@media (max-width: 1120px) {
  .brand--logo-only { width: 122px; flex-basis: 122px; }
  .nav__list { gap: .65rem; }
  .nav__link { font-size: .72rem; }
  .site-header .btn--call { padding-inline: .65rem; }
}
@media (max-width: 899px) {
  .site-header__inner { min-height: 72px; }
  .brand--logo-only { width: 126px; height: 52px; flex-basis: 126px; }
  .hero.hero--image { min-height: 0; padding-block: clamp(3.7rem, 13vw, 5rem); }
  .hero__inner { margin-left: 0; padding: 1.35rem 0 1.35rem 1rem; background: linear-gradient(90deg, rgba(7,25,39,.48), transparent); }
  .hero h1 { font-size: clamp(2.35rem, 10vw, 3.3rem); }
}
@media (max-width: 619px) {
  .site-header { border-top-width: 4px; }
  .site-header__inner { min-height: 66px; }
  .brand--logo-only { width: 110px; height: 46px; flex-basis: 110px; }
  .nav-toggle { border-color: var(--brand-300); }
  .hero__points { display: grid; gap: .65rem; }
  .hero__points li { align-items: flex-start; }
  .hero__actions .btn--lg, .callpanel .btn--lg { width: 100%; font-size: 1rem; }
  .card { padding: 1.35rem; }
  .callpanel { gap: 1.25rem; }
  .muncie-visual { box-shadow: 10px 10px 0 var(--brand-100), 0 12px 24px rgba(15,36,50,.12); }
  .callbar { background: rgba(255,255,255,.98); }
  .callbar .btn { box-shadow: 0 3px 0 var(--urgent-700); }
}