/* ==========================================================
   keeplee - the Asset Management page: a route a container
   travels, a passport with a stamp, a band of types, a logbook.
   ========================================================== */
.am-hero { padding: calc(72px + var(--under, 0px)) 0 0; background: linear-gradient(180deg, #f0eee6 0%, #faf9f5 100%); text-align: center; overflow: hidden; }
.am-copy { max-width: 880px; padding-bottom: 60px; }
.am-kicker { margin: 0 0 16px; font-weight: 600; color: var(--brand); }
.am-kicker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.am-hero h1 { margin: 0 0 20px; font-size: clamp(2.3rem, 6vw, 4.25rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.am-hero h1 span { color: var(--accent-600); }
.am-hero .lead { max-width: 36em; margin: 0 auto 30px; }

/* The route */
.am-route { position: relative; padding: 44px 0 34px; background: radial-gradient(900px 300px at 50% 120%, var(--navy-2), var(--navy) 70%); color: #fff; }
.am-route .container { position: relative; }
.am-route ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; text-align: left; }
.am-route ol::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; border-left: 2px dashed rgba(255,255,255,.3); }
.am-route li { position: relative; display: flex; align-items: center; gap: 16px; font-weight: 600; color: #cfccc2; animation: amLit 21s linear infinite; animation-delay: calc(var(--i) * 3s); }
.am-route i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); border: 2px solid rgba(255,255,255,.55); }
@keyframes amLit { 0%, 13% { color: #fff; } 16%, 100% { color: #cfccc2; } }
.am-box { position: absolute; left: 20px; top: 0; display: none; }
.am-honest { margin: 28px 0 0; color: #cfccc2; font-size: .92rem; text-align: center; }
@media (min-width: 760px) {
  .am-route { padding-top: 76px; }
  .am-route ol { grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; }
  .am-route ol::before { left: 7%; right: 7%; top: 8px; bottom: auto; border-left: 0; border-top: 2px dashed rgba(255,255,255,.3); }
  .am-route li { flex-direction: column; gap: 10px; font-size: .92rem; }
  .am-box { display: grid; place-items: center; left: 7%; top: -46px; width: 44px; height: 32px; margin-left: -22px; border-radius: 6px; background: var(--accent); color: #fff; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6); animation: amGo 21s linear infinite; }
  .am-box .ico { width: 18px; height: 18px; }
}
@keyframes amGo { from { left: 7%; } to { left: 93%; } }

.am-head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.am-head h2 { margin: 8px 0 14px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.16; text-wrap: balance; }
.am-head .lead { margin: 0 auto; }

/* The list */
.am-list { padding: 88px 0 64px; background: #fff; }
.am-tiles { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-tiles li { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.am-tiles strong { color: var(--navy); font-size: .95rem; line-height: 1.25; }
.am-tiles span { color: var(--muted); font-size: .86rem; }
.am-shot { max-width: 1040px; margin: 0 auto; text-align: center; }
.am-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.am-shot figcaption { margin-top: 14px; }
@media (min-width: 860px) { .am-tiles { grid-template-columns: repeat(4, 1fr); } }

/* The passport */
.am-pass-sec { padding: 64px 0 88px; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.am-pass { position: relative; max-width: 560px; margin: 0 auto 48px; padding: 26px; border-radius: 18px; border: 1px solid var(--line); border-top: 8px solid var(--navy); background: #fff; box-shadow: var(--shadow-lg); text-align: left; }
.am-pass-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.am-pass-head small { display: block; color: var(--muted); font-size: .82rem; }
.am-pass-head strong { color: var(--navy); font-size: clamp(1.25rem, 3.6vw, 1.6rem); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.am-stamp { flex: none; padding: 7px 12px; border: 2px solid var(--accent-600); border-radius: 8px; color: var(--accent-600); font-size: .74rem; font-weight: 600; line-height: 1.25; text-align: center; text-transform: uppercase; transform: rotate(-5deg); }
.am-pass dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; padding: 14px 0; border-block: 1px solid var(--line); }
.am-pass dt { color: var(--muted); font-size: .8rem; }
.am-pass dd { margin: 0; color: var(--navy); font-weight: 600; font-size: .95rem; }
.am-pass ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.am-pass li { display: grid; grid-template-columns: 58px 1fr; gap: 0 10px; font-size: .92rem; }
.am-pass li b { grid-row: span 2; color: var(--brand); font-size: .84rem; }
.am-pass li span { color: var(--navy); font-weight: 600; }
.am-pass li small { color: var(--muted); }
.am-pass .fine { margin: 16px 0 0; }
.am-can { list-style: none; max-width: 1040px; margin: 0 auto; padding: 0; display: grid; gap: 28px; text-align: center; }
.am-can h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--navy); }
.am-can p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (min-width: 640px) { .am-can { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .am-can { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

/* The types */
.am-types { padding: 56px 0; background: var(--brand); color: #fff; text-align: center; }
.am-types h2 { margin: 0 0 28px; color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.am-types ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.am-types li { display: grid; justify-items: center; gap: 4px; }
.am-types .ico { width: 26px; height: 26px; margin-bottom: 4px; }
.am-types span { color: #d6e2ff; font-size: .9rem; }
@media (min-width: 860px) { .am-types ul { grid-template-columns: repeat(4, 1fr); } }

/* What a job suggests */
.am-job { padding: 88px 0; background: #fff; }
.am-lanes { list-style: none; max-width: 1080px; margin: 0 auto; padding: 0; display: grid; gap: 10px; }
.am-lanes li { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.am-lanes span { display: grid; place-items: center; padding: 14px 10px; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.am-event { background: var(--navy); color: #fff; }
.am-move { background: var(--brand-50); color: var(--navy); }
.am-more { display: grid; gap: 14px; max-width: 1080px; margin: 28px auto 0; }
.am-more article { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.am-more .dd-ico { flex: none; }
.am-more h3 { margin: 0 0 4px; font-size: 1.02rem; }
.am-more h3 a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.am-more p { margin: 0; color: var(--muted); font-size: .94rem; }
@media (min-width: 860px) {
  .am-lanes { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .am-lanes li { grid-template-columns: 1fr; grid-template-rows: 1fr 1.5fr; }
  .am-more { grid-template-columns: 1fr 1fr; }
}

/* The logbook */
.am-story { padding: 88px 0; background: radial-gradient(900px 420px at 50% 110%, var(--navy-2), var(--navy) 70%); color: #fff; }
.am-story h2 { color: #fff; }
.p-madeup { max-width: 640px; margin: 18px auto 0; padding: 12px 16px; border: 1px dashed var(--accent); border-radius: 14px; background: rgba(255,255,255,.96); color: var(--warm-ink); font-size: .94rem; }
.am-log { list-style: none; max-width: 820px; margin: 0 auto; padding: 0; border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.am-log li { display: grid; gap: 6px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.am-log li:last-child { border-bottom: 0; }
.am-log b { display: block; color: var(--brand); font-size: .88rem; }
.am-log small { color: var(--muted); font-size: .84rem; }
.am-log p { margin: 0; line-height: 1.55; }
@media (min-width: 680px) { .am-log li { grid-template-columns: 170px 1fr; gap: 22px; } }

@media (max-width: 639px) {
  .am-hero { padding-top: calc(48px + var(--under, 0px)); }
  .am-copy { padding-bottom: 44px; }
  .am-list { padding-top: 60px; padding-bottom: 44px; }
  .am-pass-sec { padding-top: 44px; padding-bottom: 60px; }
  .am-job, .am-story { padding-top: 60px; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-route li, .am-box { animation: none; }
  .am-box { left: 50%; }
  .am-route li { color: #fff; }
}