/* Michigan Last Mile: shared brand styles (header, footer, buttons, tokens).
   Palette and type are inspired by Amazon Hub Delivery's look (squid ink, bright blue,
   soft blue backgrounds, bold geometric type) without using Amazon logos or marks. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#232F3E;        /* squid ink: headings, dark sections */
  --ink-2:#0F141A;      /* deepest dark */
  --text:#3d4654;       /* body copy */
  --muted:#6b7380;
  --blue:#0578FF;       /* primary action */
  --blue-d:#006CEB;
  --blue-soft:#EAF2FF;  /* hero and tinted sections */
  --blue-tint:rgba(5,120,255,.08);
  --peach:#FFB86E;      /* warm accent */
  --lime:#98C91E;       /* success / delivered */
  --line:#E3E7EE;
  --bg:#FFFFFF;
  --radius:20px;
  --shadow:0 1px 2px rgba(15,20,26,.06),0 12px 32px -8px rgba(15,20,26,.14);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.08}
a{color:var(--blue-d)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* Buttons: pill-shaped like Hub Delivery */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1 var(--font);text-decoration:none;
  padding:16px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn svg{width:18px;height:18px;transition:transform .2s ease}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px -6px rgba(5,120,255,.55)}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(5,120,255,.6)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(0,0,0,.35)}

/* Header: two styles, picked in site-config.js (html[data-header="route"|"night"]) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(15,20,26,.4)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);flex:none}
.site-header .brand-mark{width:60px;height:60px;flex:none;overflow:visible;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.nav{display:flex;align-items:center;gap:30px}
.nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .btn{padding:14px 22px;font-size:.98rem}

/* mark pieces */
.bm-pin{fill:var(--peach)}
.bm-ring{fill:var(--peach);opacity:0;transform-box:fill-box;transform-origin:center;animation:mlm-ping 2.6s 2.2s ease-out infinite}
.brand-line{position:relative;display:none;font-size:2.05rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1;padding-bottom:16px;white-space:nowrap}
.brand-route{position:absolute;left:0;bottom:-6px;width:calc(100% + 14px);height:22px;overflow:visible}
.br-path{fill:none;stroke:var(--peach);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;vector-effect:non-scaling-stroke}
.br-pin{fill:var(--peach)}.br-pkg{fill:var(--ink)}
.brand-stack{display:none;flex-direction:column;line-height:1}
.brand-stack small{font-size:.8rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.brand-stack b{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.brand-status{display:none;align-items:center;gap:8px;margin-left:8px;padding:8px 14px;border-radius:999px;background:rgba(152,201,30,.12);
  color:#cfe79a;font-weight:600;font-size:.85rem;border:1px solid rgba(152,201,30,.28);white-space:nowrap}
.brand-status i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:mlm-pulse 1.8s infinite}
@keyframes mlm-pulse{0%{box-shadow:0 0 0 0 rgba(152,201,30,.7)}70%{box-shadow:0 0 0 9px rgba(152,201,30,0)}100%{box-shadow:0 0 0 0 rgba(152,201,30,0)}}
@keyframes mlm-glow{50%{filter:drop-shadow(0 0 14px rgba(5,120,255,.85))}}

/* Route Underline (default) */
html:not([data-header="night"]) .bm-tile{display:none}
html:not([data-header="night"]) .bm-mitten{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-dasharray:100;animation:mlm-draw 1.6s cubic-bezier(.65,0,.35,1) backwards}
html:not([data-header="night"]) .brand-line{display:block}

/* Route Underline: big mitten, trimmed of its viewBox padding; the name sits low so its route line rests on the state's bottom edge */
html:not([data-header="night"]) .site-header .brand-mark{--m:98px;width:var(--m);height:var(--m);
  margin:calc(var(--m)*-.17) calc(var(--m)*-.2) calc(var(--m)*-.17) calc(var(--m)*-.22)}
html:not([data-header="night"]) .site-header .bm-mitten{stroke-width:1.7}
html:not([data-header="night"]) .site-header .brand{gap:14px}
html:not([data-header="night"]) .site-header .brand-line{top:15px}

/* Night Shift */
html[data-header="night"] .site-header{background:rgba(15,20,26,.94);border-bottom-color:#1d2632}
html[data-header="night"] .site-header.scrolled{border-bottom-color:#2a3542}
html[data-header="night"] .bm-tile{fill:var(--blue)}
html[data-header="night"] .site-header .brand-mark{animation:mlm-glow 3s ease-in-out infinite}
html[data-header="night"] .bm-mitten{fill:#fff;stroke:#fff;stroke-width:1.2;stroke-linejoin:round}
html[data-header="night"] .brand-stack{display:flex}
html[data-header="night"] .brand-stack b{color:#fff}
html[data-header="night"] .brand-stack small{color:#7FB6FF}
html[data-header="night"] .brand-status{display:inline-flex}
html[data-header="night"] .nav a:not(.btn){color:#dfe6ef}

@media(max-width:1180px){.nav a:not(.btn){display:none}}
@media(max-width:1180px) and (min-width:821px){.nav a[href*="delivering"],.nav a[href*="earn"]{display:inline}}
@media(max-width:820px){
  .site-header .wrap{height:72px}
  .site-header .brand-mark{width:40px;height:40px}
  .brand{gap:10px}
  .brand-line{font-size:1.25rem;padding-bottom:10px}.brand-route{height:14px;bottom:-4px}
  .brand-stack b{font-size:1.32rem}.brand-stack small{font-size:.64rem}
  html:not([data-header="night"]) .site-header .brand-mark{--m:58px}
  html:not([data-header="night"]) .site-header .brand{gap:10px}
  html:not([data-header="night"]) .site-header .brand-line{top:10px}
  .brand-status{display:none!important}
  .nav .btn{padding:10px 16px;font-size:.88rem}
}
@media(max-width:400px){.brand-line{font-size:1.05rem}.nav .btn svg{display:none}}

.brand-mark{width:40px;height:40px;flex:none;overflow:visible}
/* Animated logo: the mitten traces itself, the route marches from Grand Rapids to Howell, the pin drops and pulses */
.mlm-tile{fill:var(--blue)}
.mlm-mitten{fill:#fff;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:100;
  animation:mlm-draw 1.3s .1s cubic-bezier(.65,0,.35,1) backwards,mlm-fill .5s 1s ease backwards}
.mlm-route{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.1 24;
  animation:mlm-show .4s 1.4s ease backwards,mlm-march 1.4s 1.4s linear infinite}
.brand:hover .mlm-route{animation-duration:.4s,.5s}
.mlm-pin{fill:var(--peach);transform-box:fill-box;transform-origin:50% 100%;animation:mlm-drop .7s 1.6s cubic-bezier(.3,1.7,.5,1) backwards}
.mlm-pin-dot{fill:var(--ink)}
.mlm-ring{fill:var(--peach);opacity:0;transform-box:fill-box;transform-origin:center;animation:mlm-ping 2.6s 2.2s ease-out infinite}
@keyframes mlm-draw{from{stroke-dashoffset:100}}
@keyframes mlm-fill{from{fill-opacity:0}}
@keyframes mlm-show{from{opacity:0}}
@keyframes mlm-march{to{stroke-dashoffset:-24.1}}
@keyframes mlm-drop{from{opacity:0;transform:translateY(-7px) scale(.3)}}
@keyframes mlm-ping{0%{opacity:.75;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.8)}}

/* Wordmark */
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word small{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:3px}
.brand-word b{font-size:1.32rem;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.site-footer .brand-word b{color:#fff}
.site-footer .brand-word small{color:#7FB6FF}

/* Footer */
.site-footer{background:var(--ink-2);color:#aab3c0;padding:56px 0 40px;font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.site-footer .brand{color:#fff}
.site-footer a{color:#dfe6ef;text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .legal{flex-basis:100%;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:.82rem;color:#8a94a3}

/* Scroll reveal (shared) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}