/* Modern pass: clean type, straight edges, photo-led hero, restrained motion. Loaded last on every page. */
:root {
  --ground: #0E1316; --panel: #151C20; --panel-2: #1B242A; --line: rgba(190, 235, 230, .10);
  --gold: #2EC4B6; --teal: #2EC4B6; --blue: #3B8FE0; --leaf: #5CC97A; --ink: #F6EFE6; --muted: #B8AA98; --paper: #F6EFE6; --paper-ink: #1A1410; --green: #3E9A42;
  --hand: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: radial-gradient(70% 40% at 85% -5%, rgba(59,143,224,.18), transparent 70%), radial-gradient(60% 35% at 0% 0%, rgba(92,201,122,.12), transparent 70%), var(--ground) !important; background-attachment: scroll !important;
  font-family: var(--body); font-size: 16px; line-height: 1.6; letter-spacing: -.005em; -webkit-font-smoothing: antialiased }
h1, .wall-title, .alerts-title, .step, .lt-title, .city, .cal-big, .story-sign, .pol span, .slide .cap, dialog figcaption, .empty {
  font-family: var(--body) !important; letter-spacing: -.025em }
h1 { font-weight: 800 !important; font-size: clamp(36px, 7vw, 64px) !important; line-height: 1.02 !important }
.wall-title, .alerts-title, .step { font-weight: 800 !important; font-size: clamp(26px, 4.6vw, 38px) !important; color: var(--ink) !important; line-height: 1.1 !important }
.company, .lt-kicker, .updated { font-size: 12px !important; letter-spacing: .14em !important; color: var(--gold) !important; font-weight: 600 !important }
.lede, .note, .cal > p, .story p, .meet p { color: var(--muted) }
.tagline { font-weight: 600 }
.wrap { gap: 48px !important }

/* header */
.sitenav { padding: 4px 0 14px; border-bottom: 1px solid var(--line) }
.sitenav .brand .mark { background: #fff !important; box-shadow: none !important; border-radius: 8px !important; width: 52px }
.sitenav .brand .b1 { color: var(--ink) !important; letter-spacing: .12em !important; font-weight: 700 !important }
.sitenav .brand .b2 { font-size: 13px !important; font-weight: 500 !important; color: var(--muted) !important; letter-spacing: 0 }
.menu summary, .sitenav a.nl { border-radius: 8px !important; border-color: var(--line) !important; background: var(--panel) }
.sitenav a.nl[aria-current="page"] { background: var(--gold) !important; color: #06201D !important }

/* photo hero (home) */
.hero-photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 460px; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; isolation: isolate; border: 1px solid var(--line) }
.hero-photo .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; animation: kenburns 18s ease-in-out infinite alternate }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,13,.15) 0%, rgba(20,16,13,.55) 45%, rgba(20,16,13,.96) 100%) }
.hero-photo .in { padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; max-width: 720px }
.hero-photo .logo-chip { align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 14px; width: 200px; animation: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.35) }
.hero-photo .logo-chip img { display: block; width: 100%; height: auto }
.hero-photo .lede { color: #E8DDCF; font-size: 17px; margin: 0 }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px }
.cta a { font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 10px; padding: 12px 18px; transition: transform .2s ease, background .2s ease }
.cta a.primary { background: linear-gradient(90deg, #2EC4B6, #3B8FE0); color: #fff }
.cta a.ghost { color: var(--ink); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px) }
.cta a:hover { transform: translateY(-2px) }
.cta a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0) } to { transform: scale(1.14) translate(-2%, -2%) } }

/* trust strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.stats div { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px }
.stats b { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em }
.stats span { font-size: 13px; color: var(--muted) }

/* cards and buttons: straight, crisp */
.cal-item, .load, .card, .alerts, .sharebar, .approve, .car, .logo-card, .help .loadtab { border-radius: 14px !important }
.cal-item, .load, .card, .alerts, .sharebar { background: var(--panel) !important; border: 1px solid var(--line) !important }
.cal-big { font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important }
.cal-item { border-top: 3px solid var(--gold) !important }
.loadtab { padding: 18px 22px !important; box-shadow: none !important }
.loadtab-2 { border: 1px solid var(--line) !important; background: var(--panel) !important }
.lt-title { font-size: clamp(19px, 3.4vw, 24px) !important; font-weight: 700 !important; line-height: 1.2 !important }
.lt-go { font-size: 22px !important }
.loadtab::after { display: none }
.chip { border-radius: 6px !important; letter-spacing: .08em !important }
.city { font-size: 24px !important; font-weight: 800 !important }
.call a, .alert-btn, .book a, .sharebtn, .btn, .car-btn, .cat-tab, .slide .cap small { border-radius: 10px !important }
.cat-tab { background: var(--panel) !important; border-color: var(--line) !important }
.cat-tab[aria-selected="true"] { background: var(--gold) !important; color: #06201D !important }
.car { background: var(--panel) !important; border: 1px solid var(--line); box-shadow: none !important }
.slide img { filter: none !important; border-radius: 10px !important }
.slide .cap { color: var(--ink) !important; font-size: 18px !important; font-weight: 700 !important }
.slide .cap small { color: var(--muted) !important }
.car-btn { background: var(--panel-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important }
.car-count { color: var(--muted) !important }
input { border-radius: 10px !important; border-color: var(--line) !important; background: var(--ground) !important }

/* polaroids become clean photo cards */
.pol { transform: none !important; background: var(--panel) !important; border: 1px solid var(--line); padding: 10px 10px 0 !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(0,0,0,.4) !important }
.pol img { filter: none !important; border-radius: 8px !important }
.pol span { color: var(--ink) !important; font-size: 15px !important; font-weight: 600 !important; padding: 10px 4px 12px !important }
.story-sign { font-size: 20px !important; font-weight: 700 !important; color: var(--gold) !important }
.logo-card { transform: none !important; animation: none !important; background: #fff !important; box-shadow: none !important }
footer { border-top-color: var(--line) !important; font-size: 13px }
.closer img { border-radius: 14px !important; filter: none }

/* retire the cartoon scenery */
.highway, .roadstrip { display: none !important }

/* subtle motion */
.reveal { transform: translateY(18px) }
@media (prefers-reduced-motion: reduce) { .hero-photo .bg { animation: none } }
@media (max-width: 600px) { .hero-photo .logo-chip { width: 140px; padding: 8px 10px } .hero-photo { min-height: 0 } }

/* Lively hero: warm aurora + highway light trails (no photo) */
.hero-photo { background: #120d0a }
.hero-photo::before { background: linear-gradient(180deg, rgba(18,13,10,0) 0%, rgba(18,13,10,.35) 55%, rgba(18,13,10,.92) 100%) !important }
.fx { position: absolute; inset: 0; z-index: -2; overflow: hidden }
.fx .glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; mix-blend-mode: screen }
.fx .g1 { width: 70%; height: 80%; left: -10%; top: -25%; background: #ff8a1f; animation: drift1 14s ease-in-out infinite alternate }
.fx .g2 { width: 60%; height: 70%; right: -15%; top: -10%; background: #e0412b; animation: drift2 17s ease-in-out infinite alternate }
.fx .g3 { width: 55%; height: 55%; left: 30%; top: 10%; background: #3e9a42; opacity: .45; animation: drift3 20s ease-in-out infinite alternate }
@keyframes drift1 { to { transform: translate(18%, 12%) scale(1.15) } }
@keyframes drift2 { to { transform: translate(-20%, 18%) scale(1.1) } }
@keyframes drift3 { to { transform: translate(-25%, -10%) scale(1.2) } }
.fx .road3d { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; transform: perspective(500px) rotateX(62deg); transform-origin: bottom;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255,214,140,.9) 49.6% 50.4%, transparent 50.4%) 0 0 / 100% 120px,
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 80px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.6));
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 45%); mask: linear-gradient(180deg, transparent 0%, #000 45%);
  animation: roadrun 1.1s linear infinite }
.fx .road3d { background-repeat: repeat-y, repeat, no-repeat }
@keyframes roadrun { from { background-position: 0 0, 0 0, 0 0 } to { background-position: 0 120px, 0 0, 0 0 } }
.fx .trail { position: absolute; height: 3px; width: 38%; left: -40%; border-radius: 3px; filter: blur(.6px);
  background: linear-gradient(90deg, transparent, #ffd27a 60%, #fff6e0); box-shadow: 0 0 14px 3px rgba(255,180,80,.7); animation: streak 2.6s cubic-bezier(.4,0,.2,1) infinite }
.fx .trail.red { background: linear-gradient(90deg, transparent, #ff4b3a 60%, #ffd0c8); box-shadow: 0 0 14px 3px rgba(255,70,50,.7) }
.fx .t1 { top: 9% } .fx .t2 { top: 15%; animation-delay: .7s; width: 50% } .fx .t3 { top: 22%; animation-delay: 1.3s }
.fx .t4 { top: 12%; animation-delay: 1.9s; width: 28% } .fx .t5 { top: 27%; animation-delay: .35s; width: 45% }
.fx .t6 { top: 19%; animation-delay: 2.2s } .fx .t7 { top: 5%; animation-delay: 1.6s; width: 30% }
.fx .t2, .fx .t5, .fx .t7 { background: linear-gradient(90deg, transparent, #ff4b3a 60%, #ffd0c8); box-shadow: 0 0 14px 3px rgba(255,70,50,.7); animation-name: streakback }
@keyframes streak { from { transform: translateX(0) } to { transform: translateX(380%) } }
@keyframes streakback { from { transform: translateX(380%) scaleX(-1) } to { transform: translateX(0) scaleX(-1) } }
.hero-photo h1 { background: linear-gradient(90deg, #ffffff 0%, #b8f2e6 40%, #4fd1c5 70%, #5aa9f0 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important }
@media (prefers-reduced-motion: reduce) { .fx .glow, .fx .road3d, .fx .trail { animation: none } .fx .trail { display: none } }

/* Night highway hero */
.fx-night { position: absolute; inset: 0; z-index: -2; background: #03060a }
.fx-night canvas { display: block }
.hero-photo { min-height: 520px; border-color: rgba(46,196,182,.28) !important; box-shadow: 0 0 80px rgba(59,143,224,.15) }
.hero-photo::before { background: linear-gradient(90deg, rgba(3,6,9,.85) 0%, rgba(3,6,9,.55) 45%, rgba(3,6,9,0) 75%), linear-gradient(180deg, rgba(3,6,9,0) 60%, rgba(3,6,9,.7) 100%) !important }
@media (max-width: 600px) { .hero-photo::before { background: linear-gradient(180deg, rgba(3,6,9,.1) 0%, rgba(3,6,9,.55) 40%, rgba(3,6,9,.92) 100%) !important } .hero-photo { min-height: 600px } }
.hero-photo .cta a.primary { box-shadow: 0 0 24px rgba(46,196,182,.55) }

/* Modern Callahan lockup */
.lockup { display: flex; align-items: center; gap: 16px; align-self: flex-start }
.lockup img { width: clamp(96px, 16vw, 150px); height: auto; filter: drop-shadow(0 0 18px rgba(46,196,182,.35)) }
.lk-text { display: flex; flex-direction: column; line-height: 1; padding-left: 16px; border-left: 2px solid; border-image: linear-gradient(180deg, #5CC97A, #2EC4B6, #3B8FE0) 1 }
.lk-1 { font-weight: 800; font-size: clamp(26px, 4.6vw, 40px); letter-spacing: .14em; color: #F6EFE6 }
.lk-2 { margin-top: 6px; font-weight: 600; font-size: clamp(10px, 1.6vw, 13px); letter-spacing: .32em; background: linear-gradient(90deg, #5CC97A, #2EC4B6 55%, #5aa9f0); -webkit-background-clip: text; background-clip: text; color: transparent }
.sitenav .brand .mark { background: transparent !important; padding: 0 !important; width: 50px !important; filter: drop-shadow(0 0 10px rgba(46,196,182,.3)) }
@media (max-width: 480px) { .lk-2 { letter-spacing: .16em; white-space: nowrap } .lk-1 { letter-spacing: .1em } .lockup { gap: 12px } .lk-text { padding-left: 12px } }

/* Callahan badge: real logo colors (green + black on white), animated ring */
:root { --callahan-green: #3E9A42 }
.lk-2 { background: none !important; -webkit-background-clip: border-box !important; color: var(--callahan-green) !important; filter: brightness(1.35) }
.lk-text { border-image: linear-gradient(180deg, var(--callahan-green), #2EC4B6) 1 !important }
.badge { position: relative; width: clamp(104px, 17vw, 150px); aspect-ratio: 1; flex: none }
.badge .ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--callahan-green), #2EC4B6, #3B8FE0, #0b0f12 62%, var(--callahan-green));
  animation: spin 6s linear infinite; filter: drop-shadow(0 0 16px rgba(62,154,66,.55)) }
.badge .ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0b0f12 }
.badge .disc { position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff, #eef3ee); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.12), 0 0 0 2px rgba(255,255,255,.08) }
.badge .disc img { width: 80%; height: auto; transform: translateY(4%); animation: truckbob 2.4s ease-in-out infinite }
.badge .disc::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 35%; left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: sheen 5s ease-in-out infinite }
.badge .lane { position: absolute; left: 50%; bottom: -14px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--callahan-green) 0 4px, transparent 4px 8px); animation: lanerun .6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes truckbob { 0%,100% { transform: translateY(4%) } 50% { transform: translateY(1%) } }
@keyframes sheen { 0%,70% { left: -60% } 100% { left: 130% } }
@keyframes lanerun { to { background-position: 0 8px } }
.sitenav .brand .mark { background: #fff !important; border-radius: 50% !important; padding: 6px !important; width: 46px !important; height: 46px; object-fit: contain;
  box-shadow: 0 0 0 2px var(--callahan-green), 0 0 14px rgba(62,154,66,.5) !important; filter: none !important }
@media (prefers-reduced-motion: reduce) { .badge .ring, .badge .disc img, .badge .disc::after, .badge .lane { animation: none } }