/* Uber's supplied artwork keeps its original proportions and readable detail. */
.detail.detail-uber .detail-opening>.detail-hero-media{aspect-ratio:6008/3464!important;background:#e7eef6!important;min-height:0;padding:0;box-sizing:border-box}
.detail.detail-uber .detail-opening>.detail-hero-media img{object-fit:contain!important;width:100%;height:100%}
.uber-story{color:var(--case-ink);background:var(--case-base)}
.uber-chapter{padding:clamp(56px,7vw,112px) 0;overflow:hidden}
/* Color follows the operational story, with light surfaces for dense diagrams. */
.uber-chapter[data-chapter="Fleet management"]{background:#d7e4ed;color:#142e43}
.uber-chapter[data-chapter="Field operations"],.uber-chapter[data-chapter="Map system"]{background:#dceaf5;color:#142e43}
.uber-chapter[data-chapter="Shift workflow"]{background:#d5e4de;color:#193c36}
.uber-chapter[data-chapter="Repair architecture"]{background:#d5e4dc;color:#143c35}
.uber-chapter[data-chapter="Warehouse tools"]{background:#e4eae5;color:#172b2a}
.uber-chapter[data-chapter="Battery service"]{background:#edd9cf;color:#4c3028}
.uber-chapter[data-chapter="Connected hardware"]{background:#dce4e9;color:#203c4a}
.uber-chapter[data-chapter="Fleet management"] .detail-label{color:#285a62}
.uber-chapter[data-chapter="Connected hardware"] .detail-label{color:#385869}
.uber-chapter[data-chapter="Shift workflow"] .detail-label{color:#365f53}
.uber-chapter .uber-chapter-copy>.detail-label{opacity:1}
.uber-chapter .uber-expand-hint{opacity:.85}
.detail.detail-uber .detail-opening{background:#e7eef6;color:#142e43}
.detail.detail-uber .detail-opening .detail-side{color:#142e43}
.detail.detail-uber .detail-opening .detail-side>p:not(.detail-category){max-width:100%;width:100%}
.detail.detail-uber .detail-brief{background:#d5e4dc;color:#143c35}
.uber-chapter[data-chapter="Map system"] .uber-diagram,.uber-chapter[data-chapter="Repair architecture"] .uber-diagram,.uber-chapter[data-chapter="Battery service"] .uber-diagram,.uber-chapter[data-chapter="Connected hardware"] .uber-diagram{box-shadow:0 18px 48px rgba(9,24,30,.12)}
.uber-chapter-copy{width:var(--site-content-width);margin:0 auto clamp(32px,4vw,64px);display:grid;grid-template-columns:var(--reading-rail) minmax(0,1fr);gap:24px var(--reading-gap)}
.uber-chapter-copy>.detail-label{grid-column:1;grid-row:1;margin:8px 0 0;font-size:14px;line-height:1.5;letter-spacing:.04em}
.uber-chapter-copy>h2{grid-column:2;grid-row:1;font-size:clamp(36px,4.4vw,72px);line-height:1.08;letter-spacing:-.045em;max-width:none;margin:0;text-wrap:wrap}
.uber-chapter-copy>p:last-child{grid-column:2;max-width:60ch;margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.65}
/* Let the marked descriptions fill the reading column. */
.uber-chapter:is([data-chapter="Shift workflow"],[data-chapter="Map system"],[data-chapter="Fleet management"],[data-chapter="Warehouse tools"],[data-chapter="Repair architecture"],[data-chapter="Battery service"],[data-chapter="Connected hardware"]) .uber-chapter-copy>p:last-child{max-width:none}
.uber-chapter:is([data-chapter="Shift workflow"],[data-chapter="Map system"],[data-chapter="Fleet management"],[data-chapter="Warehouse tools"],[data-chapter="Battery service"]) .uber-chapter-copy>p:last-child{font-size:clamp(18.7px,1.43vw,22px)}
.uber-chapter-images{display:grid;gap:clamp(36px,5vw,72px);width:var(--site-content-width);margin:auto}
.uber-figure{margin:0;min-width:0}
.uber-figure img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;border-radius:0;transform:none}
.uber-figure img[data-expandable="true"]{cursor:zoom-in}
.uber-figure img:focus-visible{outline:3px solid currentColor;outline-offset:6px}
.uber-figure figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:18px 0 0;font-size:14px;line-height:1.6}
.uber-figure figcaption>span:first-child{max-width:80ch}
.uber-expand-hint{white-space:nowrap;opacity:.65}
.uber-diagram{padding:clamp(12px,2vw,28px);background:#f0f0f0;color:#242a28}
.uber-figure.uber-diagram:last-child:has(img[src*="hardware-feedback"]){background:#f0f0f0;color:#242a28}
.media-lightbox-image-button img[src*="/uber-refresh/hardware-feedback"]{background:#f0f0f0}
@media(max-width:800px){.uber-chapter-copy{grid-template-columns:1fr;gap:20px}.uber-chapter-copy>.detail-label,.uber-chapter-copy>h2,.uber-chapter-copy>p:last-child{grid-column:1;grid-row:auto;margin:0}.uber-figure figcaption{display:block}.uber-expand-hint{display:block;margin-top:8px}.uber-chapter-images{gap:40px}}
@media(max-width:600px){.uber-vehicle-detail picture{display:block;max-width:300px;margin:auto}.uber-vehicle-detail img{aspect-ratio:1992/4001}.detail.detail-uber .detail-opening>.detail-hero-media{padding:0}}

/* Match the expanded artwork's sampled edge color, including the controls and backdrop. */
body:has(.media-lightbox img[src*="/uber-refresh/"]){--uber-viewer-background:#eee}
body:has(.media-lightbox img[src*="/uber-refresh/map-language"]),
body:has(.media-lightbox img[src*="/uber-refresh/warehouse-stations"]){--uber-viewer-background:#efefef}
body:has(.media-lightbox img[src*="/uber-refresh/repair-journey"]){--uber-viewer-background:#fff}
body:has(.media-lightbox img[src*="/uber-refresh/hardware-feedback"]){--uber-viewer-background:#f0f0f0}
.media-lightbox:has(img[src*="/uber-refresh/"]){background:var(--uber-viewer-background)!important;color:#242a28!important;box-shadow:none}
.media-lightbox:has(img[src*="/uber-refresh/"]) .media-lightbox-controls button{background:var(--uber-viewer-background);color:#242a28;border-color:#999;backdrop-filter:none}
.media-lightbox:has(img[src*="/uber-refresh/"]) .media-lightbox-controls button:hover{background:color-mix(in srgb,var(--uber-viewer-background) 90%,#242a28)}
.media-lightbox:has(img[src*="/uber-refresh/"]) .media-lightbox-controls button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body:has(.media-lightbox img[src*="/uber-refresh/"]) [data-slot="dialog-overlay"]{background:var(--uber-viewer-background);backdrop-filter:none}

/* Hide the white export seam on the dropoff artwork’s right edge. */
img[src*="/uber-refresh/dropoff.webp"]{clip-path:inset(0 .2% 0 0)}

/* Extend the artwork surface to the page edges while retaining image scale. */
.uber-chapter[data-chapter="Shift workflow"] .uber-figure>img{background:#f6f6f6;box-shadow:0 0 0 100vmax #f6f6f6;clip-path:inset(0 -100vmax)}

/* A continuous editorial surface lets the artwork lead the story. */
.detail.detail-uber .detail-brief,
.uber-story .uber-chapter{background:#e7eef6;color:#142e43}
.uber-story .uber-chapter .detail-label{color:#365d69}
.uber-chapter-images{width:100%;gap:clamp(40px,6vw,88px)}
.uber-figure{background:transparent}
.uber-figure>img,.uber-figure>picture{display:block;width:var(--site-content-width);margin-inline:auto}
.uber-diagram{padding:0;background:transparent;color:inherit;box-shadow:none!important}
.uber-figure.uber-diagram:last-child:has(img[src*="hardware-feedback"]){background:transparent;color:inherit}
.uber-figure figcaption{width:var(--site-content-width);margin:18px auto 0;padding:0}
.uber-figure>img,.uber-figure>picture img{mix-blend-mode:multiply;filter:brightness(1.07)}
.uber-chapter[data-chapter="Shift workflow"] .uber-figure>img{background:transparent;box-shadow:none;clip-path:none}
@media(max-width:600px){.uber-vehicle-detail picture{width:var(--site-content-width)}}

/* Every artwork sits on a full-width band, never an inset card. */
.uber-story .uber-figure{width:100%;padding:clamp(24px,3vw,48px) 0;background:#f0f0f0;color:#142e43;box-shadow:none!important}
.uber-story .uber-figure:has(img[src*="field-app"]),
.uber-story .uber-figure:has(img[src*="vehicle-detail"]),
.uber-story .uber-figure:has(img[src*="repair-ipad"]),
.uber-story .uber-figure:has(img[src*="shift-tasks"]){background:#f6f6f6}
.uber-story .uber-figure:has(img[src*="repair-journey"]){background:#fff}
.uber-story .uber-figure:has(img[src*="fleet-planning"]),
.uber-story .uber-figure:has(img[src*="asset-management"]),
.uber-story .uber-figure:has(img[src*="vehicle-history"]){background:#e7eef6}
.uber-story .uber-figure>img,.uber-story .uber-figure>picture img{mix-blend-mode:normal;filter:none}
.uber-story .uber-figure figcaption{margin-bottom:0}

.uber-story .uber-figure.uber-diagram:last-child:has(img[src*="hardware-feedback"]){background:#f0f0f0;color:#142e43}

/* Align the closing sections to the same outer gutter as the artwork. */
.detail.detail-uber .system-outcome>.detail-label,
.detail.detail-uber .system-outcome-grid{width:100%;margin-inline:0}
.detail.detail-uber .system-outcome>.detail-label:before{display:none}
.detail.detail-uber .system-outcome-card{justify-self:start}
.detail.detail-uber .next-project>strong{margin-inline-start:-.055em}
.detail.detail-uber .next-project>svg{align-self:center}

/* Use one heading treatment across the challenge and operational chapters. */
.detail.detail-uber .detail-brief>h2,
.detail.detail-uber .uber-chapter-copy>h2{font-family:var(--font-display),var(--font-sans),sans-serif;font-weight:520}
.detail.detail-uber .detail-brief>.detail-label,
.detail.detail-uber .detail-brief>div strong,
.detail.detail-uber .uber-chapter-copy>.detail-label{font-family:var(--font-mono),ui-monospace,monospace;font-weight:500;letter-spacing:.06em}
.detail.detail-uber .detail-brief{row-gap:28px}
.detail.detail-uber .detail-brief>div{padding-top:0}

/* An unboxed closing statement: the result is the composition. */
.detail.detail-uber .uber-result{padding:clamp(40px,4vw,64px) var(--site-gutter);background:#101f35;color:#d5e4dc}
.uber-result p,.uber-result h2,.uber-result h3{margin:0}
.uber-result-header{display:flex;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid #d5e4dc55;font:500 14px/1.5 var(--font-mono),monospace;letter-spacing:.06em;text-transform:uppercase}
.uber-result-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding:clamp(32px,4vw,56px) 0}
.uber-result-before{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;font:400 16px/1.5 var(--font-mono),monospace}
.uber-result-before span{color:#eea58f;font-size:clamp(26px,2.6vw,40px);font-weight:500;line-height:1.2}
.uber-result-metric h2{display:flex;align-items:baseline;font:500 clamp(110px,17vw,280px)/1 var(--font-display),sans-serif;letter-spacing:-.07em;margin:22px 0 0 -.035em;white-space:nowrap;color:#d5e4dc}
.uber-result-currency{font-size:.38em;align-self:flex-start;padding-top:.19em;letter-spacing:0;margin-right:.08em}
.uber-result-unit{font:500 clamp(28px,4vw,60px)/1.1 var(--font-display),sans-serif;letter-spacing:-.04em}
.uber-result-story h3{font:500 clamp(34px,4vw,62px)/1.05 var(--font-display),sans-serif;letter-spacing:-.045em;margin-bottom:28px;color:#eea58f}
.uber-result-story>p{font-size:clamp(17px,1.45vw,21px);line-height:1.6;max-width:40ch}
.uber-result-story .uber-result-platforms{margin-top:28px;font:400 14px/1.6 var(--font-mono),monospace}
.uber-result-lifecycle{border-top:1px solid #d5e4dc55;padding-top:24px;display:grid;grid-template-columns:1fr 3fr;gap:32px}
.uber-result-lifecycle>p{font:400 14px/1.6 var(--font-mono),monospace;max-width:16ch}
.uber-result-lifecycle ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.uber-result-lifecycle li{display:flex;flex-direction:column;gap:14px;border-top:2px solid #eea58f;padding-top:12px}
.uber-result-lifecycle li span{font:400 14px/1.4 var(--font-mono),monospace;color:#eea58f}
.uber-result-lifecycle li strong{font-size:16px;font-weight:500;line-height:1.4}
@media(max-width:800px){
 .uber-result-layout{grid-template-columns:1fr;gap:48px}
 .uber-result-metric h2{font-size:clamp(110px,27vw,210px)}
 .uber-result-story>p{max-width:none}
 .uber-result-lifecycle{grid-template-columns:1fr;gap:24px}
 .uber-result-lifecycle>p{max-width:none}
}
@media(max-width:480px){
 .uber-result-header{flex-direction:column;gap:8px}
 .uber-result-lifecycle ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}

/* A cost-drop poster: oversized result, angled annotation, stepped operations. */
.detail.detail-uber .uber-result{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 15% 35%,#284e60,transparent 64%),linear-gradient(130deg,#112a40,#0c1729 85%);padding-bottom:76px}
.uber-result-header{border:0;padding-bottom:28px}
.uber-result-layout{display:block;padding:16px 0 48px}
.uber-result-metric{position:relative;padding-bottom:20px}
.uber-result-before{justify-content:space-between;align-items:center;gap:24px}
.uber-result-before span{display:block;background:#eea58f;color:#192638;box-shadow:8px 10px 0 #070f1c55;padding:14px 24px;transform:rotate(6deg);margin:6px 4% 0 0;font-size:clamp(26px,3vw,44px)}
.uber-result-metric h2{font-size:clamp(90px,19.5vw,310px);line-height:.95;letter-spacing:-.085em;margin:20px 0 0 -.045em;background:linear-gradient(145deg,#effcf0 12%,#bfd7ce 55%,#749999);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(12px 20px 20px #050f202b)}
.uber-result-currency{font-size:.26em;padding-top:.34em}
.uber-result-unit{margin-top:4px!important;text-align:right;padding-right:6%;font-size:clamp(32px,5vw,76px)}
.uber-result-story{display:grid;grid-template-columns:1fr 1.2fr;gap:20px 48px;margin:36px 0 0 17%;align-items:start}
.uber-result-story h3{grid-column:1;grid-row:1/3;font-size:clamp(34px,4.6vw,70px);margin:0}
.uber-result-story>p{grid-column:2;max-width:42ch}
.uber-result-story .uber-result-platforms{margin:0}
.uber-result-lifecycle{display:block;border:0;padding:0}
.uber-result-lifecycle>p{max-width:none;margin-bottom:22px}
.uber-result-lifecycle ol{gap:0;align-items:start}
.uber-result-lifecycle li{padding:20px 24px;min-height:112px;border-top:1px solid #b4d4d56b;background:linear-gradient(135deg,#315866,#1d3d4d);box-shadow:0 16px 22px #06111f40}
.uber-result-lifecycle li:nth-child(2){transform:translateY(12px);background:linear-gradient(135deg,#294958,#183343)}
.uber-result-lifecycle li:nth-child(3){transform:translateY(24px);background:linear-gradient(135deg,#203c4b,#142a3a)}
.uber-result-lifecycle li:nth-child(4){transform:translateY(36px);background:linear-gradient(135deg,#182e40,#0d2032)}
@media(max-width:800px){
 .uber-result-metric h2{font-size:clamp(80px,19.5vw,155px)}
 .uber-result-story{margin-left:5%;gap:24px;grid-template-columns:1fr 1.2fr}
 .uber-result-lifecycle li{padding:18px 16px}
}
@media(max-width:480px){
 .uber-result-before{align-items:flex-start;font-size:14px;gap:18px}.uber-result-before span{margin:0 4px 4px auto;font-size:26px;padding:10px 16px}
 .uber-result-metric h2{font-size:21.5vw;margin-top:24px}
 .uber-result-unit{font-size:34px}
 .uber-result-story{display:block;margin:28px 0 0 8%}.uber-result-story h3{margin-bottom:22px}.uber-result-story .uber-result-platforms{margin-top:20px}
 .uber-result-lifecycle ol{gap:16px 0}.uber-result-lifecycle li{min-height:100px}
 .uber-result-lifecycle li:nth-child(3){transform:none}.uber-result-lifecycle li:nth-child(4){transform:translateY(12px)}
}

.uber-result-map{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,#0003,#000 65%)}
.uber-result-header,.uber-result-layout,.uber-result-lifecycle{position:relative;z-index:1}
.uber-result-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:20px 0 44px}
.uber-result-metric{padding:0}
.uber-result-before{justify-content:flex-start;gap:18px;align-items:center}
.uber-result-before span{font-size:clamp(22px,2.3vw,32px);padding:10px 16px;margin:0;transform:rotate(3deg)}
.uber-result-metric h2{margin-top:22px}
.uber-result-unit{text-align:left;padding:0;margin-top:6px!important;font-size:clamp(30px,3.5vw,48px)}
.uber-result-story{display:block;margin:0;padding:24px 0}
.uber-result-story h3{font-size:clamp(36px,4.5vw,64px);margin-bottom:24px}
.uber-result-story .uber-result-platforms{margin-top:22px}
@media(max-width:800px){.uber-result-layout{grid-template-columns:1fr;gap:28px}.uber-result-story{padding:0;margin-left:6%}.uber-result-story>p{max-width:48ch}.uber-result-before{gap:18px}.uber-result-map{mask-image:linear-gradient(90deg,#0004,#0009)}}

/* Street-poster composition: one statement, no dashboard panels. */
.detail.detail-uber .uber-result{padding-top:40px;padding-bottom:52px;background:radial-gradient(ellipse at 18% 65%,#234854,transparent 65%),#0c1b2b}
.uber-result-map{mask-image:linear-gradient(110deg,#000b,#0005 45%,#000);opacity:.85}
.uber-result-headline{position:relative;z-index:1;font-size:clamp(62px,9.6vw,148px);font-weight:500;letter-spacing:-.065em;line-height:.96;margin:24px 0 44px;max-width:none}
.uber-result-headline em{display:block;font-style:normal;margin-left:20%;color:#eea58f}
.uber-result-layout{grid-template-columns:1fr 1fr;gap:8%;padding:0 4% 38px 9%;align-items:center}
.uber-result-before{display:block;font-size:13px}
.uber-result-before span{display:inline;background:none;box-shadow:none;padding:0;margin-left:10px;color:#eea58f;font-size:inherit;transform:none}
.uber-result-price{display:flex;align-items:flex-start;font-size:clamp(96px,14vw,210px)!important;letter-spacing:-.085em;line-height:.95!important;font-weight:500;margin:12px 0 0!important;color:#d5e4dc}
.uber-result-price .uber-result-currency{font-size:.3em;letter-spacing:-.04em;margin-right:.12em}
.uber-result-unit{font-size:clamp(24px,2.7vw,38px);margin:0!important;padding-left:12%}
.uber-result-story{padding:0;margin:0}
.uber-result-story>p{font-size:clamp(16px,1.6vw,22px);line-height:1.5}
.uber-result-story .uber-result-platforms{font-size:12px}
.uber-result-lifecycle>p{font-size:11px;opacity:.65;margin-bottom:16px}
.uber-result-lifecycle ol{gap:24px;position:relative}
.uber-result-lifecycle ol>li:nth-child(n){min-height:0;padding:8px 0;background:none;border:0;box-shadow:none;transform:none;display:flex;gap:12px;align-items:baseline}
.uber-result-lifecycle li span{margin:0;color:#eea58f;font-size:11px}
.uber-result-lifecycle li strong{font-size:clamp(13px,1.3vw,18px);font-weight:400}
@media(max-width:800px){
 .uber-result-headline{font-size:clamp(56px,10vw,80px);margin-bottom:32px}
 .uber-result-headline em{margin-left:9%}
 .uber-result-layout{grid-template-columns:1fr 1fr;gap:6%;padding:0 0 32px}
 .uber-result-price{font-size:clamp(90px,16vw,128px)!important}
 .uber-result-lifecycle ol{grid-template-columns:1fr 1fr;gap:8px 20px}
}
@media(max-width:480px){
 .uber-result-headline{font-size:14vw;line-height:1.02}
 .uber-result-layout{grid-template-columns:1fr;gap:30px}
 .uber-result-price{font-size:32vw!important}
 .uber-result-unit{padding-left:0}
 .uber-result-story{margin-left:8%}
}
