/* DPO case study. Shared pieces: case-study.css, case-contact.css; more in case-dpo-2.css.
   Ice blue logistics: frosted panels, royal blue for action, teal and green status chips.
   Signature: the booking road in .dp-route, where a truck drives down the page and parks at each stop (case-dpo.js). */

:root {
  --accent: #2f5bea;
  --dp-royal: #2f5bea;
  --dp-navy: #0f2a6b;
  --dp-ice: #e7f1fd;
  --dp-frost: #f4f8fe;
  --dp-teal: #14b8b8;
  --dp-green: #22a447;
  --dp-red: #e53935;
  --dp-tar: #3e5a78;
  --cs-ink: #0f1e3d;
  --cs-muted: #4a5873;
  --cs-faint: #7a879e;
  --cs-line: rgb(15 30 61 / 11%);
  --cs-bg: var(--dp-frost);
  --cs-dark: #0b1d4a;
  --cs-dot-radius: 2px;
  --cs-dot-dark: #7fb0ff;
  --cf-dots: rgb(47 91 234 / 9%);
  --cf-glow: rgb(20 184 184 / 14%);
  --cf-btn: #0f1e3d;
  --cf-btn-icon: #2f5bea;
  --cf-btn-icon-fg: #fff;
  --cf-sent: #0f1e3d;
  --cf-sent-fg: #7fb0ff;
}

a:hover { color: var(--accent); }

/* ---------- hero: the purpose-built art in an ice panel, copy on its empty left ---------- */
.dp-hero { padding: clamp(28px, 3vw, 48px) var(--gutter) 0; background: linear-gradient(180deg, var(--white), var(--dp-frost)); }
.dp-hero__panel { position: relative; max-width: 1440px; border-radius: 32px; background: #f2f6fd; overflow: hidden; box-shadow: 0 30px 80px -50px rgb(15 42 107 / 40%), 0 0 0 1px var(--cs-line); }
.dp-hero__art img { display: block; width: 100%; height: auto; }
.dp-hero__copy { position: absolute; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; width: 46%; padding: 0 0 6% clamp(32px, 4.4vw, 72px); }
.dp-logo { margin: 0; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--dp-navy); }
.dp-hero__title { font-weight: 600; font-size: clamp(32px, 3.9vw, 62px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; color: var(--cs-ink); }
.dp-hero__lead { max-width: 480px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--cs-muted); }
.dp-plates { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1360px; margin: -44px auto 0; }
.dp-plates > div { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -24px rgb(15 42 107 / 35%), 0 0 0 1px var(--cs-line); }
.dp-plates dt { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-faint); }
.dp-plates svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--dp-royal); fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dp-plates dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cs-ink); }

/* ---------- the marketplace: hosts | phone | renters ---------- */
.dp-market { background: var(--dp-frost); }
.dp-market__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 56px; }
.dp-market__art { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px -36px rgb(15 42 107 / 45%); }
.dp-market__art img { display: block; width: 100%; height: auto; }
.dp-side { display: grid; gap: 14px; padding: 28px 26px; border-radius: 22px; background: var(--white); border: 1px solid var(--cs-line); }
.dp-side__who { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); }
.dp-side__who span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--dp-ice); font-size: 14px; letter-spacing: 0; color: var(--dp-royal); }
.dp-side h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.dp-side ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dp-side li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--cs-line); font-size: 15px; line-height: 1.5; color: var(--cs-muted); }
.dp-side li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--dp-teal); transform: translateY(-2px); }

/* ---------- signature: the booking road ---------- */
.dp-route { background: linear-gradient(180deg, var(--dp-frost), #e3eefc 30%, #eef4fd 100%); }
.dp-route__intro { position: relative; z-index: 1; width: 100vw; margin: 56px 0 0 calc(50% - 50vw); border-radius: 0; overflow: hidden; }
.dp-route__intro img { display: block; width: 100%; height: auto; }
.dp-road { position: relative; padding: 0 0 40px; }
.dp-road__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dp-road__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dp-road__shoulder { stroke: var(--white); stroke-width: 64; filter: drop-shadow(0 8px 18px rgb(15 42 107 / 14%)); }
.dp-road__tar { stroke: var(--dp-tar); stroke-width: 50; }
.dp-road__lane { stroke: rgb(255 255 255 / 85%); stroke-width: 2.5; stroke-dasharray: 16 18; }
.dp-road__exit { stroke-linecap: butt; }
.dp-exit-sign { position: absolute; z-index: 2; display: none; align-items: center; gap: 8px; margin: 0; padding: 8px 12px 8px 14px; border-radius: 10px; background: var(--white); box-shadow: 0 10px 30px -14px rgb(15 42 107 / 40%), 0 0 0 1px var(--cs-line); font-size: 14px; font-weight: 600; color: var(--dp-red); transform: translate(-50%, -50%); white-space: nowrap; }
.dp-exit-sign span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--dp-red); font-size: 10px; color: var(--white); }
.dp-road.is-ready .dp-exit-sign { display: flex; }
.dp-truck { position: absolute; top: 0; left: 0; z-index: 3; width: 0; height: 0; pointer-events: none; will-change: transform; }
.dp-truck svg { position: absolute; left: -17px; top: -40px; display: block; width: 34px; max-width: none; height: 80px; overflow: visible; filter: drop-shadow(0 6px 6px rgb(15 30 61 / 30%)); }
.dp-truck__trailer { fill: #fff; stroke: #c7d1de; stroke-width: 1.2; }
.dp-truck__ribs { stroke: #dbe3ee; stroke-width: 1; }
.dp-truck__hitch { fill: #26354d; }
.dp-truck__cab { fill: var(--dp-royal); }
.dp-truck__glass { fill: #bfe0ff; }
.dp-truck__lamp { fill: #fff6c8; filter: drop-shadow(0 0 4px #fff3a0); }
.dp-stops { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; }
.dp-stop { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; min-height: 380px; }
.dp-stop__pin { position: absolute; top: 50%; left: 58%; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 10px; background: var(--dp-royal); border: 3px solid var(--white); font-weight: 700; font-size: 18px; color: var(--white); box-shadow: 0 6px 18px -6px rgb(15 42 107 / 50%); transition: background .4s, box-shadow .4s; }
.dp-stop:nth-child(even) .dp-stop__pin { left: 42%; }
.dp-stop__card { display: grid; gap: 12px; max-width: 470px; padding: 28px 28px 30px; border-radius: 22px; background: rgb(255 255 255 / 92%); border: 1px solid var(--cs-line); box-shadow: 0 20px 50px -34px rgb(15 42 107 / 40%); opacity: .55; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease), box-shadow .5s, border-color .5s; }
.dp-stop:nth-child(odd) .dp-stop__card { grid-column: 1; justify-self: end; margin-right: 22%; }
.dp-stop:nth-child(even) .dp-stop__card { grid-column: 2; justify-self: start; margin-left: 22%; }
.dp-stop.is-here .dp-stop__card, .dp-stop.is-done .dp-stop__card { opacity: 1; transform: none; }
.dp-stop.is-here .dp-stop__card { border-color: rgb(47 91 234 / 40%); box-shadow: 0 26px 60px -30px rgb(47 91 234 / 50%); }
.dp-stop.is-here .dp-stop__pin { background: var(--dp-teal); box-shadow: 0 0 0 8px rgb(20 184 184 / 22%); }
.dp-stop.is-done .dp-stop__pin { background: var(--dp-green); }
.dp-stop__n { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; color: var(--cs-faint); }
.dp-stop__card h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.dp-stop__card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--cs-muted); }
.dp-stop__card .dp-stop__n { color: var(--cs-faint); }
.dp-stop__card .dp-stop__aside { padding: 12px 14px; border-radius: 12px; background: #fdeeee; font-size: 14.5px; color: #6b2a2a; }
.dp-stop__aside b { display: block; color: var(--dp-red); }
.dp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dp-chip--royal { background: #e4ebff; color: var(--dp-royal); }
.dp-chip--teal { background: #d9f5f3; color: #0d8f8f; }
.dp-chip--blue { background: #e1e8fb; color: #1d3fae; }
.dp-chip--green { background: #e0f4e5; color: #187a35; }
.dp-chip--grey { background: #eceff4; color: #3c4658; }

@media (max-width: 1100px) {
  .dp-hero__copy { width: 50%; gap: 16px; }
  .dp-hero__lead { font-size: 15.5px; }
  .dp-market__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-market__art { grid-column: 1 / -1; grid-row: 1; }
  .dp-stop:nth-child(odd) .dp-stop__card { margin-right: 14%; }
  .dp-stop:nth-child(even) .dp-stop__card { margin-left: 14%; }
}
@media (max-width: 900px) {
  .dp-hero__panel { display: flex; flex-direction: column-reverse; }
  .dp-hero__copy { position: static; width: auto; padding: 36px 32px 8px; }
  .dp-hero__lead { max-width: 560px; }
  .dp-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
}
@media (max-width: 720px) {
  .dp-hero__panel { border-radius: 22px; }
  .dp-hero__copy { gap: 14px; padding: 28px 20px 4px; }
  .dp-logo { font-size: 22px; }
  .dp-plates { gap: 10px; }
  .dp-plates > div { padding: 14px; }
  .dp-plates dd { font-size: 14px; }
  .dp-market__grid { grid-template-columns: 1fr; margin-top: 40px; gap: 16px; }
  .dp-route__intro { margin-top: 40px; }
  .dp-road { padding-bottom: 24px; }
  .dp-road__shoulder { stroke-width: 40; }
  .dp-road__tar { stroke-width: 30; }
  .dp-truck svg { transform: scale(.74); }
  .dp-road__exit, .dp-exit-sign, .dp-road.is-ready .dp-exit-sign { display: none; }
  .dp-stop { display: block; min-height: 0; padding: 36px 0 36px 58px; }
  .dp-stop:nth-child(n) .dp-stop__pin { top: 64px; left: 22px; width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 15px; border-radius: 8px; }
  .dp-stop:nth-child(n) .dp-stop__card { max-width: none; margin: 0; padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-stop__card, .dp-stop__pin { transition: none; }
  .dp-stop__card { opacity: 1; transform: none; }
}

/* hero: full width, square edges; art spans edge to edge */
.dp-hero { padding: 0; }
.dp-hero__panel, .dp-hero .cs-inner.dp-hero__panel { max-width: none; width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.dp-hero__art img { width: 100%; max-width: none; margin: 0; }
.dp-hero__copy { left: 0; width: 46%; }
@media (max-width: 900px) { .dp-hero__copy { width: auto; } }
@media (max-width: 720px) { .dp-hero__panel, .dp-hero .cs-inner.dp-hero__panel { border-radius: 0; } }

/* hero v2 art (1920x900): copy sits over its open left sky; soft white wash behind the text only */
.dp-hero__art { position: relative; display: block; }
.dp-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 80%) 28%, rgb(255 255 255 / 0%) 48%); pointer-events: none; }
.dp-hero__copy { z-index: 1; width: 42%; padding-bottom: 4%; }
@media (max-width: 900px) { .dp-hero__art::after { display: none; } .dp-hero__copy { width: auto; } }