/* Direction Logistics, hand-built 2026-09-29. Medical courier across
   Chicagoland. Palette: a deep clinical ink, a paper white with a cool green
   cast, and one pine teal for every action (white text on it, 6.1:1). A
   brighter teal carries the accent word on dark grounds. Type is the pair the
   engine's own brand.json chose for this client, Chivo and IBM Plex Sans. */
:root{
  --ink:#0E1A1F;--ink-2:#14242A;--ink-3:#1E3238;
  --on-ink:#FFFFFF;--on-ink-2:#C4D0D3;
  --paper:#F3F6F5;--card:#FFFFFF;--line:#D3DCDB;
  --text:#0E1A1F;--text-2:#44545A;
  --teal:#0B6E63;--teal-deep:#08564D;--teal-hi:#5FD9C4;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:'Chivo',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.125rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.02em}
p{margin:0 0 1rem}
.shell{width:min(1200px,100% - 3rem);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--teal);color:#fff;padding:.75rem 1rem;border-radius:6px;font-weight:600}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--teal-hi);outline-offset:3px}

.kicker{font-family:var(--body);font-weight:600;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-2);margin:0 0 1.25rem}
.kicker--dark{color:var(--teal)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8rem 1.6rem;border-radius:8px;font:600 1.0625rem/1.2 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-deep)}
.btn--ghost{background:rgba(14,26,31,.5);color:#fff;border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{border-color:#fff;background:rgba(14,26,31,.72)}
.btn--lg{min-height:58px;padding:.95rem 1.9rem;font-size:1.125rem}

/* ---- mark + wordmark: brand.json's Bearing Mark, drawn inline ---- */
.mark{display:block;width:40px;height:40px;color:var(--teal);flex:none}
.mark__needle{fill:#fff}
.wordmark{display:inline-flex;align-items:center;gap:.75rem;min-height:48px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.375rem;letter-spacing:-.01em;line-height:1}
.wordmark__a{color:#fff}
.wordmark__b{color:var(--teal-hi)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header__bar{width:min(1200px,100% - 3rem);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.site-nav{display:flex;align-items:center}
.site-nav__list{list-style:none;display:flex;align-items:center;gap:2rem;margin:0;padding:0}
.site-nav__list a{text-decoration:none;font-weight:500;font-size:1rem;color:var(--on-ink-2);transition:color .2s}
.site-nav__list a:hover{color:#fff}
.site-nav__list .btn{color:#fff;min-height:46px;padding:.6rem 1.25rem}
.nav-toggle,.nav-toggle-label,.nav-close{display:none}
@media (max-width:859px){
  .site-header__bar{min-height:66px;width:calc(100% - 2.5rem)}
  .wordmark--head{font-size:1.1875rem;gap:.6rem}
  .wordmark--head .mark{width:34px;height:34px}
  .nav-toggle-label{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;margin-right:-10px;cursor:pointer}
  .nav-toggle-label span{display:block;width:24px;height:2px;background:var(--on-ink)}
  .site-nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
  .site-nav__list{flex-direction:column;gap:1.75rem}
  .site-nav__list a{font-size:1.5rem;color:var(--on-ink)}
  .site-nav__list .btn{font-size:1.125rem;min-height:56px;padding:.8rem 1.6rem}
  .nav-toggle:checked ~ .site-nav{opacity:1;visibility:visible}
  .nav-close{display:block;position:absolute;top:1rem;right:1rem;color:var(--on-ink);font-weight:600;font-size:1.0625rem;padding:.875rem;cursor:pointer}
}

/* ---- hero: the Chicago street full bleed, the type over the calm road ----
   The calm area is the empty asphalt at the bottom center, running up the
   lane to the vanishing point. The steel overhead and the parked cars at
   both curbs are left clear. ONE darkening mechanism: the ::after gradient
   scrim, rising from the bottom. No brightness filter. */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;height:max(540px,min(calc(100svh - 76px),62vw))}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,26,31,.92) 0%,rgba(14,26,31,.82) 30%,rgba(14,26,31,.5) 50%,rgba(14,26,31,0) 70%)}
.hero__copy{position:relative;z-index:1;height:100%;width:min(1000px,100% - 3rem);margin-inline:auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding-bottom:clamp(2rem,4.5vw,4rem)}
.hero .kicker{color:#fff;margin-bottom:1rem;background:rgba(14,26,31,.72);padding:.4rem .85rem;border-radius:999px}
.hero h1{font-weight:900;font-size:clamp(2.75rem,1rem + 3.9vw,4.75rem);line-height:1;max-width:20ch;margin-bottom:1.25rem}
.hero h1 em{font-style:normal;color:var(--teal-hi)}
.lede{font-size:clamp(1.125rem,1rem + .35vw,1.3125rem);color:#fff;max-width:54rem;margin-bottom:2rem}
.hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}

/* ---- services ---- */
.services{background:var(--paper);padding:clamp(4.5rem,9vw,8rem) 0}
.services__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.services__list ul{list-style:none;margin:0;padding:0}
.svc{padding:1.6rem 0 1.7rem;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-weight:800;font-size:clamp(1.875rem,1rem + 2.6vw,3.25rem);margin-bottom:.5rem}
.svc p{margin:0;font-size:1.125rem;color:var(--text-2)}
.services__photo{margin:0}
.services__frame{display:block;overflow:hidden;border-radius:10px}
.services__photo img{width:100%;transform-origin:50% 50%}
@media (min-width:860px){.services__frame{aspect-ratio:4/5}.services__photo img{height:100%;object-fit:cover;object-position:62% 50%}}

/* ---- statement ---- */
.statement{background:var(--ink);color:#fff;padding:clamp(5rem,11vw,9.5rem) 0;text-align:center}
.statement__inner{display:flex;flex-direction:column;align-items:center}
.statement__mark{width:56px;height:56px;margin-bottom:2rem}
.statement h2{font-weight:900;font-size:clamp(2.25rem,1rem + 4.4vw,5rem);max-width:16ch;margin-bottom:2.5rem}
.statement h2 em{font-style:normal;color:var(--teal-hi)}

/* ---- request (the primary action) ---- */
.request{background:var(--paper);padding:clamp(4.5rem,9vw,8rem) 0}
.request__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.request h2{font-weight:900;font-size:clamp(2.5rem,1rem + 3.8vw,4.5rem);margin-bottom:1.25rem}
.request__intro>p{color:var(--text-2);max-width:28rem}
.request__call{margin-top:2rem}
.request__phone{display:inline-block;margin-top:.35rem;font-family:var(--display);font-weight:800;font-size:clamp(1.875rem,1rem + 2vw,2.75rem);color:var(--text);text-decoration:none;border-bottom:4px solid var(--teal);padding-bottom:.2rem}
.request__phone:hover{color:var(--teal)}
.request__meta{line-height:1.8}
.request__meta a{color:var(--text);text-underline-offset:3px}
.request__card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(1.5rem,3vw,2.5rem);box-shadow:0 18px 40px -24px rgba(14,26,31,.35)}
.request-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem}
.fld{grid-column:1 / -1;display:flex;flex-direction:column;gap:.4rem}
.fld--half{grid-column:span 1}
.fld label{font-weight:600;font-size:1rem;color:var(--text)}
.opt{font-weight:400;color:var(--text-2);font-size:.9375rem}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1.0625rem;color:var(--text);background:#fff;border:1.5px solid #AEBBBC;border-radius:6px;padding:.75rem .85rem;min-height:52px;width:100%}
.fld input::placeholder,.fld textarea::placeholder{color:#6B7A7F}
.fld textarea{resize:vertical;min-height:104px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,110,99,.2)}
.request-form .btn{grid-column:1 / -1;margin-top:.5rem;width:100%}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:var(--on-ink-2);padding:4rem 0 7rem}
.site-footer__top,.site-footer__bottom{width:min(1200px,100% - 3rem);margin-inline:auto}
.site-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem 3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer__top ul li{margin-bottom:.5rem;font-size:1.0625rem}
.site-footer a{color:var(--on-ink);text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-top:1.75rem;font-size:.9375rem}
.site-footer__bottom p{margin:0}
.site-footer__bottom ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.site-footer__bottom a{color:var(--on-ink-2)}

.callbar{display:none}

@media (max-width:859px){
  .shell{width:calc(100% - 2.5rem)}
  .services__grid,.request__grid{grid-template-columns:1fr}
  .request-form{grid-template-columns:1fr}
  .fld--half{grid-column:1 / -1}
  .site-footer{padding-bottom:6.5rem}
  .callbar{display:grid;grid-template-columns:1.6fr 1fr;gap:.625rem;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.625rem 1rem calc(.625rem + env(safe-area-inset-bottom));background:rgba(14,26,31,.96);border-top:1px solid rgba(255,255,255,.1)}
  .callbar .btn{min-height:50px;padding:.6rem .75rem}
}
@media (min-width:700px) and (max-width:1024px){
  .hero{height:max(540px,min(calc(100svh - 76px),86vw))}
}
@media (max-width:699px){
  .hero{height:max(540px,min(calc(100svh - 90px),760px))}
  .hero__media img{object-position:50% 50%}
  .hero__copy{width:calc(100% - 2.5rem);padding-bottom:2rem}
  .hero h1{font-size:clamp(2.125rem,9.4vw,3.25rem)}
  .lede{margin-bottom:1.5rem}
  .hero__ctas{flex-direction:column;width:100%;gap:.75rem}
  .hero__ctas .btn{width:100%}
  .hero__call{display:none}
  .hero__media::after{background:linear-gradient(0deg,rgba(14,26,31,.94) 0%,rgba(14,26,31,.86) 34%,rgba(14,26,31,.55) 54%,rgba(14,26,31,0) 74%)}
  .statement h2{max-width:none}
}

/* ---- motion: hidden states live ONLY under html.motion ---- */
.motion .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion .rise.in{opacity:1;transform:none}
.motion .hero .rise:nth-child(2){transition-delay:.08s}
.motion .hero .rise:nth-child(3){transition-delay:.16s}
.motion .hero .rise:nth-child(4){transition-delay:.24s}