/* ==========================================================================
   137 LOGISTICS — stylesheet entry (import order matters)
   ========================================================================== */
@import "./tokens.css";
@import "./base.css";
@import "./components.css";
@import "./sections.css";
@import "./media.css";
@import "./motion.css";

/* Page router transition */
#app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.route-view { animation: route-in var(--t-med) var(--e-out); }
@keyframes route-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .route-view { animation: none; } }

/* Page hero (interior pages) */
.page-hero { background: var(--grad-deep); color: #fff; padding-top: calc(var(--header-h) + var(--s-7)); padding-bottom: var(--s-7); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 85% 10%, rgba(39,214,197,0.16), transparent 60%); pointer-events: none; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #C6DBE2; }
.breadcrumb { display: flex; gap: 0.5rem; font-size: 0.82rem; color: #A9CFCB; margin-bottom: var(--s-4); flex-wrap: wrap; }
.breadcrumb a { color: #A9CFCB; } .breadcrumb a:hover { color: var(--aqua); }
.breadcrumb span { color: var(--aqua); }

/* Feature list with checks */
.check-list { display: grid; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.check-list li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-brand); margin-top: 2px; background-image: var(--grad-brand), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23052a26' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: cover, 12px; }

/* Accordion (industries / FAQ) */
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--text); }
.accordion__btn .ic { flex: none; transition: transform var(--t-med); color: var(--teal-600); }
.accordion__btn[aria-expanded="true"] .ic { transform: rotate(45deg); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--t-slow) var(--e-out); }
.accordion__panel > div { padding-bottom: var(--s-5); }

/* Insight / news cards */
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-elevated); transition: transform var(--t-med), box-shadow var(--t-med); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.post-card__img { aspect-ratio: 16/9; background: var(--grad-brand); position: relative; overflow: hidden; }
.post-card__img[data-cat]::after { content: attr(data-cat); position: absolute; left: var(--s-3); top: var(--s-3); background: rgba(7,26,38,0.7); color: #fff; font-size: 0.72rem; padding: 0.3em 0.7em; border-radius: var(--r-pill); font-weight: 600; }
.post-card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.post-card__body time { font-size: 0.78rem; color: var(--text-soft); }
.post-card h3 { font-size: 1.12rem; margin: var(--s-2) 0; }
.post-card .link-arrow { margin-top: auto; padding-top: var(--s-3); color: var(--teal-600); }

/* Contact split */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } }
.contact-cards { display: grid; gap: var(--s-4); }
.contact-card { display: flex; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elevated); }
.contact-card__ic { flex: none; width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--grad-brand); color: #04231f; }

/* Quote form banner */
.cta-band { background: var(--grad-brand); border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 3.5rem); color: #04231f; position: relative; overflow: hidden; }
.cta-band h2 { color: #04231f; }
.cta-band p { color: #05413b; }
.cta-band::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,0.16); }

/* Pill row */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill { padding: 0.45em 0.95em; border-radius: var(--r-pill); background: var(--bg-sunken); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 500; color: var(--text-soft); }
.section--deep .pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #C6DBE2; }