:root {
  --orange: #f58a1f;
  --orange-deep: #f58217;
  --ink: #171717;
  --muted: #6a6a6a;
  --page-width: 1289px;
  --font: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--font); font-size: 16px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.reference-view { display: block; position: relative; width: min(100%, var(--page-width)); margin: 0 auto; line-height: 0; container-type: inline-size; }
.reference-view > img { display: block; width: 100%; height: auto; }
.reference-about-entrance { position: absolute; z-index: 1; top: 14.4326%; left: 0; width: 100%; height: 13.5852%; pointer-events: none; }
.reference-about-entrance img { position: absolute; display: block; max-width: none; object-fit: fill; }
.reference-about-entrance__heading { z-index: 1; top: 0; left: 0; width: 100%; height: 18.3976%; transition: opacity .58s ease, filter .58s ease; }
.reference-about-entrance__background { z-index: 0; top: 18.3976%; left: 0; width: 100%; height: 81.6024%; transition: opacity .68s ease, filter .68s ease; }
.reference-about-story-fragment { z-index: 2; pointer-events: none; opacity: 1; transform-origin: center; transform: perspective(1100px) translate3d(0,0,0) scale(1); backface-visibility: hidden; will-change: opacity, transform, filter; transition: opacity .64s ease, transform .78s cubic-bezier(.16,.84,.2,1), filter .64s ease; }
.reference-about-story-fragment--company { left: 5.8185%; top: 23.442%; width: 43.4445%; height: 14.095%; }
.reference-about-static-mask { position: absolute; z-index: 1; display: block; background: #fff; pointer-events: none; }
.reference-about-static-mask--solution-list { left: 5.1%; top: 52.3%; width: 18.5%; height: 15%; }
.reference-about-solution-group { position: absolute; left: 5.896%; top: 40.652%; width: 31.264%; height: 27.8%; }
.reference-about-solution-group__heading { z-index: 0; top: 0; left: 0; width: 100%; height: 13.35%; }
.reference-about-solution-group__list { position: absolute; top: 43.2%; left: 0; width: 70%; margin: 0; padding: 0; color: var(--ink); font: 400 1.47cqw/1.1 var(--font); list-style: none; }
.reference-about-solution-group__list li { display: flex; align-items: center; min-height: 1.1em; white-space: nowrap; }
.reference-about-solution-group__list li::before { content: ""; flex: 0 0 .56em; width: .56em; height: .56em; margin-right: .42em; border: 1.5px solid var(--orange); border-radius: 50%; }
.reference-about-story-fragment--description { position: absolute; left: 52.832%; top: 44.51%; width: 40.186%; height: 11.6cqw; }
.reference-about-story-fragment__rule { position: absolute; top: .13cqw; left: -.93cqw; width: .08cqw; height: 75.9%; background: var(--orange); }
.reference-about-description-copy { position: relative; width: 100%; height: 100%; margin: 0; color: var(--ink); font-size: 1.38cqw; font-weight: 400; line-height: 1.2; letter-spacing: -.018em; }
.reference-about-description-copy span { display: block; white-space: nowrap; }
.reference-view.is-story-engaged .reference-about-story-fragment.is-story-active { z-index: 3; transform: perspective(1100px) translate3d(0,-.22cqw,20px) scale(1.02); filter: drop-shadow(0 .12cqw .24cqw rgba(24,24,24,.12)); }
.reference-view.is-story-hovered .reference-about-entrance__heading { opacity: .88; filter: blur(.35px); }
.reference-view.is-story-hovered .reference-about-entrance__background { opacity: .86; filter: blur(.75px); }
.reference-view.is-story-hovered .reference-about-story-fragment:not(.is-story-hovered) { opacity: .58; transform: none; filter: blur(1.1px); }
.reference-view.is-story-hovered .reference-about-story-fragment.is-story-hovered { z-index: 4; opacity: 1; transform: perspective(950px) translate3d(0,-.42cqw,36px) scale(1.035); filter: drop-shadow(0 .2cqw .42cqw rgba(24,24,24,.2)) drop-shadow(0 0 .42cqw rgba(245,130,23,.14)); }
@media (hover: hover) and (pointer: fine) {
  .reference-about-story-fragment { pointer-events: auto; cursor: default; }
  .reference-about-story-fragment:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
}
.reference-partners-mask { position: absolute; z-index: 2; left: 17.45%; top: 93.57%; width: 65.2%; height: 4.2%; background: #fff; pointer-events: none; }
.reference-partners-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.reference-partner-logo { position: absolute; display: block; max-width: none; height: auto; object-fit: contain; transform-origin: center; pointer-events: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); animation: partner-logo-float 5.2s ease-in-out infinite; transition: transform .28s cubic-bezier(.2,.7,.25,1), filter .28s ease; }
.reference-partner-logo:hover { z-index: 2; transform: perspective(700px) translateY(-5px) scale(1.13) rotateX(var(--partner-tilt-x, 0deg)) rotateY(var(--partner-tilt-y, 0deg)); filter: drop-shadow(0 9px 8px rgba(38,44,51,.25)); }
.partner-logo-1 { left: 18.54%; top: 93.75%; width: 5.82%; animation-delay: -.35s; }
.partner-logo-2 { left: 27.46%; top: 93.75%; width: 6.52%; animation-delay: -1.2s; }
.partner-logo-3 { left: 37.16%; top: 93.99%; width: 14.43%; animation-delay: -2.15s; }
.partner-logo-4 { left: 54.69%; top: 93.75%; width: 5.74%; animation-delay: -2.85s; }
.partner-logo-5 { left: 63.38%; top: 93.87%; width: 18.46%; animation-delay: -1.65s; }
.partner-logo-6 { left: 28.70%; top: 95.93%; width: 10.78%; animation-delay: -2.45s; }
.partner-logo-7 { left: 42.51%; top: 95.93%; width: 6.59%; animation-delay: -.8s; }
.partner-logo-8 { left: 52.13%; top: 95.95%; width: 9.93%; animation-delay: -3.2s; }
.partner-logo-9 { left: 64.99%; top: 95.95%; width: 6.75%; animation-delay: -1.9s; }
@keyframes partner-logo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.reference-hero-live { position: absolute; z-index: 1; top: 2.217%; left: 0; width: 100%; height: 12.215%; overflow: hidden; background: var(--orange); color: #fff; }
.reference-hero-road { position: absolute; z-index: 0; inset: 0 0 0 14%; background-image: linear-gradient(90deg, var(--orange) 0%, rgba(245,138,31,.98) 20%, rgba(245,138,31,.55) 48%, rgba(0,0,0,.05) 77%), url("assets/hero/ROAD-BG.jpg"); background-position: center, center 55%; background-size: cover; }
.reference-hero-copy { position: absolute; z-index: 2; left: 5.9%; top: 34%; width: 38%; color: #fff; }
.reference-hero-copy h1 { margin: 0; font-size: 5.2cqw; line-height: .98; letter-spacing: -.04em; font-weight: 750; }
.reference-hero-copy h1 > span { display: block; }
.reference-hero-copy .hero-type-character { display: inline-block; }
.reference-hero-actions { margin-top: max(2.5cqw, 28px); }
.reference-hero-button { display: inline-flex; align-items: center; gap: .7cqw; padding: .42cqw .9cqw; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; color: #fff; font-size: .87cqw; line-height: 1.1; white-space: nowrap; text-decoration: none; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.reference-hero-button-primary { border-color: #6d6d6d; background: #6d6d6d; }
.reference-hero-button:hover, .reference-hero-button:focus-visible { filter: brightness(1.1); transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.reference-hero-button span { display: inline-block; transition: transform .2s ease; }
.reference-hero-button:hover span, .reference-hero-button:focus-visible span { transform: translateX(4px); }
.reference-hero-trucks { position: absolute; z-index: 2; top: -1.65%; left: 36.69%; width: 59.27%; height: auto; pointer-events: none; transform-origin: 50% 60%; transform-style: preserve-3d; backface-visibility: hidden; filter: drop-shadow(0 .5cqw .45cqw rgba(0,0,0,.34)) drop-shadow(0 1.5cqw 1.5cqw rgba(0,0,0,.2)); will-change: transform; }
.reference-hero-signature { position: absolute; z-index: 2; right: 3.8%; bottom: 2%; width: 12.22%; height: auto; pointer-events: none; transform-origin: 75% 60%; }
.reference-hero-live.is-hero-entering .reference-hero-copy .hero-type-character { animation: hero-type-character .18s cubic-bezier(.2,.75,.22,1) var(--hero-type-delay, 0ms) both; }
.reference-hero-live.is-hero-entering .reference-hero-actions { animation: hero-text-descend .72s cubic-bezier(.2,.78,.22,1) .48s both; }
.reference-hero-live.is-hero-entering .reference-hero-trucks { animation: hero-trucks-pop 1.9s cubic-bezier(.14,.78,.22,1) .04s both; }
.reference-hero-live.is-hero-entering .reference-hero-signature { animation: hero-signature-depth .95s cubic-bezier(.2,.75,.22,1) .34s both; }
@keyframes hero-text-descend { from { opacity: .08; transform: translate3d(0, -34px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes hero-type-character { from { opacity: 0; transform: translate3d(0, .16em, 0) scale(.96); filter: blur(2px); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }
@keyframes hero-composite-depth { from { opacity: .5; transform: perspective(1200px) translate3d(0, 10px, -170px) scale(.74) rotateY(-1.4deg); } to { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) scale(1) rotateY(0); } }
@keyframes hero-trucks-pop { 0% { opacity: .2; transform: perspective(1200px) translate3d(0, 20px, -230px) scale(.68) rotateY(-1.6deg); } 55% { opacity: 1; transform: perspective(1200px) translate3d(0, -11px, 110px) scale(1.12) rotateY(.4deg); } 76% { opacity: 1; transform: perspective(1200px) translate3d(0, 3px, 28px) scale(1.025) rotateY(-.1deg); } 100% { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 48px) scale(1.045) rotateY(0); } }
@keyframes hero-signature-depth { from { opacity: .4; transform: perspective(1000px) translate3d(0, 0, -36px) scale(.93); } to { opacity: 1; transform: perspective(1000px) translate3d(0, 0, 0) scale(1); } }
@keyframes hero-reduced-text { from { opacity: .3; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-reduced-image { from { opacity: .55; transform: perspective(1200px) translate3d(0, 3px, -32px) scale(.94); } to { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reference-view { opacity: 1; }
  .reference-hotspot--service:hover, .reference-hotspot--service:focus-visible, .reference-hotspot--event:hover, .reference-hotspot--event:focus-visible,
  .reference-about-story-fragment.is-story-active, .reference-about-story-fragment:hover,
  .reference-partner-logo:hover,
  .reference-store-trigger:hover, .reference-store-trigger:focus-visible, .app-download-choice:hover, .app-download-choice:focus-visible, .reference-hero-button:hover, .reference-hero-button:focus-visible,
  .reference-hero-button:hover span, .service-card:hover, .fleet-card:hover, .service-card:hover img, .event-preview-link:hover,
  .event-preview-link:hover img, .store-links a:hover, .detail-hero:hover .detail-product, .detail-cta a:hover,
  .benefit-grid article.is-pointer-near, .benefit-grid article:hover, .reference-benefit-slot.is-pointer-near .reference-benefit-face, .reference-benefit-slot:hover .reference-benefit-face { transform: none !important; box-shadow: none !important; filter: none !important; }
  .reference-hero-live.is-hero-entering .reference-hero-copy h1 > span,
  .reference-hero-live.is-hero-entering .reference-hero-copy p,
  .reference-hero-live.is-hero-entering .reference-hero-actions { animation: hero-reduced-text .5s ease-out both !important; }
  .reference-hero-live.is-hero-entering .reference-hero-trucks { animation: hero-reduced-image .7s ease-out both !important; }
  .reference-hero-live.is-hero-entering .reference-hero-signature { animation: hero-reduced-image .55s ease-out both !important; }
  .reference-view.is-story-engaged .reference-about-story-fragment.is-story-active { opacity: 1; transform: none !important; filter: none !important; }
  .reference-view.is-story-hovered .reference-about-story-fragment:not(.is-story-hovered) { opacity: .58; transform: none !important; filter: blur(1.1px) !important; }
  .reference-view.is-story-hovered .reference-about-story-fragment.is-story-hovered { opacity: 1; transform: none !important; filter: drop-shadow(0 2px 5px rgba(24,24,24,.2)) !important; }
}
.reference-hotspot { position: absolute; z-index: 2; display: block; background: transparent; }
.reference-hotspot:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; background: #fff4; }
.reference-hotspot--event { transform-style: preserve-3d; transform-origin: center; transition: transform .28s cubic-bezier(.2,.7,.25,1), background-color .24s ease, box-shadow .24s ease; }
.reference-hotspot--service { overflow: visible; border: 0; border-radius: 8px; background: transparent; box-shadow: none; transform-style: preserve-3d; transform-origin: center; transition: transform .4s cubic-bezier(.18,.82,.22,1), box-shadow .4s ease, border-color .3s ease; }
.reference-hotspot--service img { position: absolute; z-index: 0; left: var(--art-left, 0%); top: var(--art-top, 0%); display: block; width: var(--art-w, 100%); height: var(--art-h, 100%); max-width: none; object-fit: fill; pointer-events: none; transition: transform .46s cubic-bezier(.18,.82,.22,1), filter .35s ease; }
.reference-hotspot--service .reference-service-label { position: absolute; z-index: 3; left: 8.5%; bottom: 11.5%; display: block; color: #fff; font-size: 2.05cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.035em; text-shadow: 0 1px 2px rgba(0,0,0,.18); white-space: nowrap; pointer-events: none; }
.reference-service-card--card { --art-left: -2.05%; --art-top: -4.96%; --art-w: 103.96%; --art-h: 111.51%; }
.reference-service-card--fleet { --art-left: -2.49%; --art-top: -2.17%; --art-w: 104.98%; --art-h: 103.86%; }
.reference-service-card--distributor { --art-left: -3.57%; --art-top: -3.21%; --art-w: 107.47%; --art-h: 106.42%; }
.reference-service-label__accent { color: var(--orange); }
.reference-service-card--fleet .reference-service-label { left: 4.8%; bottom: 8.5%; }
.reference-service-card--distributor .reference-service-label { left: 3.5%; bottom: 8.5%; }
.reference-service-label--stacked { display: grid !important; gap: 0; line-height: 1.02 !important; }
.reference-service-next { position: absolute; z-index: 9; left: 92.45%; top: 32.6%; display: grid; width: 4.7%; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #9baec6; background: #fff; box-shadow: 0 4px 11px rgba(0,0,0,.29); pointer-events: none; user-select: none; }
.reference-service-next > span { font-family: Arial, sans-serif; font-size: 3.35cqw; font-weight: 700; line-height: 1; transform: translate(.06cqw,-.08cqw); }
.reference-hotspot--service::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(180px circle at var(--tile-pointer-x, 50%) var(--tile-pointer-y, 50%), rgba(255,255,255,.22), transparent 74%), linear-gradient(140deg, rgba(255,255,255,.08), transparent 44%); transition: opacity .28s ease; }
.reference-hotspot--service:hover::after, .reference-hotspot--service:focus-visible::after { opacity: 1; }
.reference-hotspot--service:hover img, .reference-hotspot--service:focus-visible img { transform: scale(1.018); filter: brightness(1.035); }
.reference-hotspot--service:hover, .reference-hotspot--service:focus-visible { z-index: 8; transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0,-12px,24px) scale(1.028); box-shadow: 0 22px 38px rgba(21,26,32,.28), 0 7px 16px rgba(21,26,32,.13); }
.reference-hotspot--event:hover, .reference-hotspot--event:focus-visible { transform: perspective(1100px) translateY(-3px) scale(1.004); border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: 0 12px 24px rgba(0,0,0,.17); }
.reference-store-trigger { position: absolute; z-index: 4; display: block; width: 13.8%; aspect-ratio: 430 / 140; padding: 0; border: 1px solid transparent; border-radius: 9px; color: transparent; background: transparent; cursor: pointer; transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease; }
.reference-store-trigger--apple { left: 57.72%; top: 84.48%; }
.reference-store-trigger--google { left: 72.15%; top: 84.48%; }
.reference-store-trigger--huawei { left: 57.72%; top: 86.05%; }
.reference-store-trigger:hover, .reference-store-trigger[aria-expanded="true"] { border-color: rgba(245,130,23,.52); background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(245,130,23,.13), 0 7px 18px rgba(0,0,0,.2); }
.reference-store-trigger:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.reference-store-mobile-panel { display: contents; }
.reference-store-mobile-content { display: none; }
@media (max-width: 800px) {
  .reference-store-mobile-panel { position: absolute; z-index: 4; top: 83.65%; left: 55%; width: 42%; display: grid; grid-template-rows: repeat(3, 44px); gap: 4px; padding: 4px; border: 1px solid #e9e9e9; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 5px 16px rgba(0,0,0,.1); }
  .reference-store-trigger { position: relative; top: auto; left: auto; width: min(100%, 250px); min-height: 44px; justify-self: center; display: flex; align-items: center; aspect-ratio: auto; border: 1px solid #e8e8e8; border-radius: 9px; color: #262626; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); text-align: left; }
  .reference-store-trigger--apple, .reference-store-trigger--google, .reference-store-trigger--huawei { top: auto; left: auto; }
  .reference-store-mobile-content { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0 11px; color: #252525; font-size: clamp(11px, 1.7cqw, 14px); font-weight: 650; line-height: 1.1; }
  .reference-store-mobile-content img { flex: 0 0 25px; width: 25px; height: 29px; object-fit: contain; }
  .reference-store-trigger:hover, .reference-store-trigger[aria-expanded="true"] { transform: translateY(-2px) scale(1.008); }
}
.reference-anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.reference-map-overlay { position: absolute; z-index: 3; left: 19.7%; top: 48.78%; width: 57.5%; height: 16.75%; overflow: visible; }
.reference-map-overlay a { cursor: pointer; outline: none; }
.reference-map-overlay path { fill: rgba(23, 23, 23, .001); pointer-events: all; transition: fill .28s ease, filter .28s ease, transform .28s cubic-bezier(.2,.7,.25,1); }
.reference-map-overlay a:hover .province-region-visual, .reference-map-overlay a:focus-visible .province-region-visual { fill: rgba(245, 130, 23, .3); transform: none; filter: drop-shadow(0 0 5px rgba(245,130,23,.78)) drop-shadow(0 0 15px rgba(245,130,23,.42)); }
.reference-benefit-interactions { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.reference-benefit-interactions--card { --benefit-reference: url("assets/reference/card.png"); }
.reference-benefit-interactions--fleet { --benefit-reference: url("assets/reference/fleet.png"); }
.reference-benefit-interactions--distributor { --benefit-reference: url("assets/reference/distributor.png"); }
.reference-benefit-slot { position: absolute; left: var(--slot-x); top: var(--slot-y); display: block; width: 24.205cqw; height: 14.275cqw; border-radius: 2.33cqw; pointer-events: auto; }
.reference-benefit-slot::before { position: absolute; z-index: 0; inset: -.12cqw; border-radius: 2.45cqw; background: #fff; content: ""; }
.reference-benefit-face { position: absolute; z-index: 1; inset: 0; display: block; border-radius: inherit; background-color: #fff; background-image: var(--benefit-reference); background-position: calc(0cqw - var(--slot-x)) calc(0cqw - var(--slot-y)); background-repeat: no-repeat; background-size: 100cqw auto; pointer-events: none; transition: transform .36s cubic-bezier(.18,.82,.22,1), box-shadow .36s ease; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(1) { --slot-x: 11.094cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(2) { --slot-x: 37.936cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(3) { --slot-x: 64.779cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(4) { --slot-x: 11.094cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(5) { --slot-x: 37.936cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--card .reference-benefit-slot:nth-child(6) { --slot-x: 64.779cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(1) { --slot-x: 11.094cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(2) { --slot-x: 37.858cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(3) { --slot-x: 64.701cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(4) { --slot-x: 11.094cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(5) { --slot-x: 37.858cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--fleet .reference-benefit-slot:nth-child(6) { --slot-x: 64.701cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(1) { --slot-x: 11.016cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(2) { --slot-x: 37.781cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(3) { --slot-x: 64.701cqw; --slot-y: 101.319cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(4) { --slot-x: 11.016cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(5) { --slot-x: 37.781cqw; --slot-y: 118.154cqw; }
.reference-benefit-interactions--distributor .reference-benefit-slot:nth-child(6) { --slot-x: 64.701cqw; --slot-y: 118.154cqw; }
@media (hover: hover) and (pointer: fine) {
  .reference-benefit-slot.is-pointer-near { z-index: 2; }
  .reference-benefit-slot:hover { z-index: 3; }
  .reference-benefit-slot.is-pointer-near .reference-benefit-face { transform: translate3d(0,-4px,3px) scale(1.006); box-shadow: 0 9px 18px rgba(21,26,32,.12); }
  .reference-benefit-slot:hover .reference-benefit-face { transform: perspective(1100px) translate3d(0,-11px,18px) scale(1.022); box-shadow: 0 21px 34px rgba(21,26,32,.22), 0 7px 16px rgba(21,26,32,.13); }
}
.responsive-view { display: none; }
.reference-hotspot--service:focus-visible, .reference-hotspot--event:focus-visible { outline-offset: 3px; }
.reference-store-trigger, .reference-hotspot--service, .reference-hotspot--event { -webkit-tap-highlight-color: transparent; }
.reference-view .reference-hotspot--service, .reference-view .reference-hotspot--event { backface-visibility: hidden; }
.reference-view .reference-hotspot--service:hover, .reference-view .reference-hotspot--event:hover { will-change: transform; }
.reference-view .reference-hotspot--service:active { transform: perspective(1100px) translate3d(0,-5px,16px) scale(1.014); }
.reference-view .reference-hotspot--event:active { transform: perspective(900px) translateY(0) scale(.995); }
.reference-view .reference-store-trigger:active, .reference-hero-button:active { transform: translateY(0) scale(.99); }
.reference-hero-live .reference-hero-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.app-download-dialog { width: min(540px, calc(100vw - 28px)); max-height: min(620px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 24px 72px rgba(0,0,0,.28); }
.app-download-dialog[open] { animation: app-dialog-arrive .24s cubic-bezier(.2,.7,.25,1) both; }
.app-download-dialog::backdrop { background: rgba(20,18,16,.54); backdrop-filter: blur(2px); }
@keyframes app-dialog-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.app-download-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 25px 19px; border-bottom: 1px solid #eee; }
.app-download-dialog__eyebrow { margin: 0 0 5px; color: var(--orange-deep); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-download-dialog__header h2 { margin: 0; color: #222; font-size: clamp(21px, 4vw, 27px); line-height: 1.15; }
.app-download-dialog__context { margin: 7px 0 0; color: #696969; font-size: 14px; line-height: 1.35; }
.app-download-dialog__close { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #dedede; border-radius: 50%; color: #333; background: #fff; font: 26px/1 Arial,sans-serif; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.app-download-dialog__close:hover, .app-download-dialog__close:focus-visible { border-color: var(--orange); color: var(--orange-deep); background: #fff8f1; }
.app-download-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 20px 22px 23px; }
.app-download-choice { min-height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 13px 15px 12px; border: 1px solid #e8e8e8; border-radius: 12px; color: inherit; background: #fff; text-align: center; text-decoration: none; transition: transform .22s cubic-bezier(.2,.7,.25,1), border-color .22s ease, box-shadow .22s ease; }
.app-download-choice img { width: 100%; max-width: 190px; height: 78px; object-fit: contain; }
.app-download-choice__name { color: #272727; font-size: 16px; font-weight: 700; line-height: 1.15; }
.app-download-choice__action { display: inline-flex; align-items: center; gap: 7px; color: var(--orange-deep); font-size: 13px; font-weight: 650; }
.app-download-choice:hover, .app-download-choice:focus-visible { transform: translateY(-3px); border-color: rgba(245,130,23,.58); box-shadow: 0 10px 22px rgba(24,24,24,.12); outline: none; }
.app-download-choice:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.province-dialog { width: min(640px, calc(100vw - 28px)); max-height: min(780px, calc(100dvh - 28px)); padding: 0; border: 1px solid #d8d8d8; color: var(--ink); background: #fff; }
.province-dialog[open] { animation: dialog-arrive .2s ease-out both; }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.province-dialog::backdrop { background: rgba(0, 0, 0, .58); }
.province-dialog-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px 16px; border-bottom: 1px solid #272727; background: #fff; }
.province-dialog-kicker { margin: 0 0 4px; color: var(--orange-deep); font-size: 12px; line-height: 1.2; }
.province-dialog-header h2 { margin: 0; color: var(--orange-deep); font-size: clamp(22px, 4vw, 30px); line-height: 1.1; }
.province-dialog-close { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #292929; border-radius: 50%; background: #fff; color: #292929; font: 26px/1 Arial, sans-serif; cursor: pointer; }
.province-dialog-close:hover, .province-dialog-close:focus-visible { border-color: var(--orange-deep); color: var(--orange-deep); }
.province-address-list { margin: 0; padding: 4px 24px 12px 54px; overflow-y: auto; line-height: 1.45; }
.province-address-list li { padding: 13px 4px 13px 2px; border-bottom: 1px solid #e7e7e7; font-size: 15px; }
.province-address-list li::marker { color: var(--orange-deep); font-weight: 700; }
.province-address-list li strong { display: block; font-weight: 700; }
.province-address-list li span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.province-address-list li:last-child { border-bottom: 0; }

.site-header { width: 100%; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 5.8vw, 80px); background: #fff; position: relative; z-index: 5; }
.brand { width: 155px; flex: 0 0 155px; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.1vw, 32px); font-size: 14px; white-space: nowrap; }
.main-nav a { text-decoration: none; padding: 8px 0; position: relative; }
.main-nav a:hover, .main-nav a.active { color: var(--orange-deep); }
.main-nav .active::after { content: ""; position: absolute; height: 1px; width: 75%; background: #111; bottom: 2px; left: 12.5%; }
.language-pill { height: 40px; min-width: 139px; display: inline-flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 18px; border: 5px solid var(--orange); border-radius: 24px; background: #676767; color: white; }
.language-pill b { font-size: 17px; line-height: 1; font-weight: 400; }
.login-label { margin-left: 18px; }
.menu-toggle { display: none; }

.home-hero { height: clamp(320px, 27.8vw, 430px); background: var(--orange); color: #fff; position: relative; overflow: hidden; }
.hero-road { position: absolute; inset: 0 0 0 14%; background-image: linear-gradient(90deg, var(--orange) 0%, rgba(245,138,31,.98) 20%, rgba(245,138,31,.55) 48%, rgba(0,0,0,.05) 77%), url("assets/hero/ROAD-BG.jpg"); background-position: center, center 55%; background-size: cover; }
.hero-content { position: relative; height: 100%; max-width: var(--page-width); margin: auto; padding: 0 4.7%; display: flex; align-items: center; }
.hero-copy { position: relative; z-index: 2; flex: 0 0 38%; }
.hero-copy h1 { margin: 0; font-size: clamp(38px, 4vw, 58px); line-height: .98; letter-spacing: -.04em; font-weight: 750; }
.hero-copy p { margin: 12px 0 40px; font-size: clamp(17px, 1.8vw, 24px); }
.hero-actions { display: flex; gap: 15px; align-items: center; }
.small-pill { border: 1px solid rgba(255,255,255,.9); border-radius: 20px; color: #fff; padding: 7px 11px; font-size: 11px; text-decoration: none; background: rgba(116,116,116,.45); }
.small-pill span { margin-left: 11px; }
.small-pill.outline { background: transparent; }
.hero-cars { width: 66%; height: auto; object-fit: contain; position: absolute; right: 3.5%; bottom: 2%; z-index: 1; }
.hero-medal { position: absolute; width: 66px; height: 28px; object-fit: contain; object-position: center top; right: 1.5%; bottom: 16px; opacity: .7; }

.section-heading { text-align: center; color: var(--orange-deep); margin: 0 auto 25px; }
.section-heading h2 { display: inline-block; font-size: 24px; line-height: 1.15; margin: 0; font-weight: 700; text-transform: none; }
.section-heading span { display: block; width: 92px; height: 1px; background: #282828; margin: 9px auto 0; }
.patterned { background-image: url("assets/map/LINES-BG.png"); background-position: right bottom; background-size: auto 100%; background-repeat: no-repeat; }
.about-section { padding: 17px max(5.7%, calc((100% - 1120px)/2)) 70px; min-height: 382px; background-image: url("assets/about/BLUR-BG.png"); background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; }
.about-section .section-heading { margin-bottom: 60px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; font-size: 14px; line-height: 1.18; }
.about-left p { margin: 0 0 13px; }
.about-left strong { color: var(--orange-deep); font-weight: 700; }
.about-left ul { margin: 22px 0 0; padding: 0; list-style: none; }
.about-left li { position: relative; padding-left: 17px; margin: 3px 0; }
.about-left li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 7px; height: 7px; border: 1px solid var(--orange-deep); border-radius: 50%; }
.about-right { margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--orange-deep); align-self: center; }
.services-section { padding: 12px max(5.5%, calc((100% - 1120px)/2)) 42px; }
.services-section .section-heading { margin-bottom: 20px; }
.service-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: stretch; }
.service-card { height: auto; aspect-ratio: 1.58; position: relative; display: block; overflow: hidden; border-radius: 13px; background: #70420f; text-decoration: none; transform-style: preserve-3d; transition: transform .24s ease, box-shadow .24s ease; }
.service-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: filter .2s ease, transform .32s cubic-bezier(.2,.7,.25,1); }
.service-card:hover { transform: translateY(-3px) translateZ(5px); box-shadow: 0 9px 20px rgba(0,0,0,.16); }
.service-card:hover img { filter: brightness(.9); transform: scale(1.018); }
.service-card b { color: var(--orange); position: absolute; bottom: 14px; left: 16px; font-size: 17px; }
.service-card:nth-child(3) b { color: #fff; }
.fleet-card { transform: none; }
.fleet-card:hover { transform: translateY(-3px) translateZ(5px); }
.distributor-card img { object-position: 56% center; }
.event-preview { padding: 0 max(5.5%, calc((100% - 1120px)/2)) 38px; }
.event-preview .section-heading { margin-bottom: 13px; }
.event-preview-link { display: block; width: 100%; position: relative; overflow: hidden; border-radius: 15px; transition: transform .24s ease, box-shadow .24s ease; }
.event-preview-link img { width: 100%; height: auto; transition: transform .36s cubic-bezier(.2,.7,.25,1); }
.event-preview-link:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0,0,0,.14); }
.event-preview-link:hover img { transform: scale(1.012); }
.play-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 82px; height: 82px; display: grid; place-items: center; color: #828282; background: #fff; border-radius: 50%; font: 32px/1 Arial, sans-serif; padding-left: 6px; }
.event-preview-link .play-mark { display: none; }
.network-section { position: relative; padding: 0 max(5.5%, calc((100% - 1120px)/2)) 40px; min-height: 660px; background-size: 68% auto; }
.network-section .section-heading { margin-bottom: 12px; }
.map-instruction { width: 180px; margin-bottom: 14px; }
.map-layout { display: flex; justify-content: center; }
.moz-map { width: min(720px, 70%); height: 530px; position: relative; }
.province-map { height: 100%; width: auto; object-fit: contain; margin: auto; }
.compass { width: 68px; position: absolute; right: -14%; bottom: 3%; opacity: .75; }
.province-labels { position: absolute; inset: 0; pointer-events: none; }
.province-labels span { position: absolute; color: #fff; background: var(--orange-deep); border: 2px solid white; border-radius: 14px; padding: 2px 10px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.province-labels span:nth-child(1) { left: 36%; top: 6%; }
.province-labels span:nth-child(2) { right: 3%; top: 12%; }
.province-labels span:nth-child(3) { left: 10%; top: 25%; }
.province-labels span:nth-child(4) { right: 4%; top: 31%; }
.province-labels span:nth-child(5) { left: 21%; top: 45%; }
.province-labels span:nth-child(6) { right: 17%; top: 46%; }
.province-labels span:nth-child(7) { left: 43%; top: 58%; }
.province-labels span:nth-child(8) { right: 19%; top: 69%; }
.province-labels span:nth-child(9) { left: 16%; top: 77%; }
.province-labels span:nth-child(10) { left: 42%; bottom: 1%; }

.contact-section { max-width: 1250px; min-height: 300px; margin: 0 auto; padding: 22px 5.4%; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; border-radius: 22px; background: url("assets/contact/BG-CORES.jpg") center / cover no-repeat; }
.contact-copy h2 { color: var(--orange-deep); font-size: 26px; margin: 0 0 34px; }
.contact-copy h3 { font-size: 14px; margin: 0 0 6px; }
.contact-copy p { font-size: 12px; line-height: 1.25; margin: 0 0 12px; }
.contact-line { margin-top: 8px !important; }
.contact-line a { text-decoration: none; }
.contact-divider { width: 225px; border-top: 1px solid #555; margin: 11px 0 8px; }
.indent { padding-left: 18px; }
.contact-form { background: #fff; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 11px; align-self: center; }
.contact-form label { font-size: 11px; color: #515151; display: grid; gap: 5px; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #e9e9e9; border-radius: 4px; padding: 7px; color: #111; font: inherit; resize: vertical; transition: border-color .18s ease, box-shadow .18s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange-deep); outline: none; box-shadow: 0 0 0 3px rgba(245,130,23,.12); }
.downloads-section { min-height: 380px; max-width: 1120px; margin: 0 auto; padding: 35px 3%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7%; }
.download-phones { width: 420px; max-height: 345px; object-fit: contain; object-position: center top; }
.download-copy h2 { color: var(--orange-deep); margin: 0 0 3px; font-size: 26px; }
.download-copy p { font-size: 14px; margin: 0 0 30px; }
.download-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.download-app { min-width: 0; padding: 0 8px; }
.download-app + .download-app { border-left: 1px solid #444; }
.download-app-logo { width: 100%; height: 62px; margin: 0 auto 12px; object-fit: contain; }
.store-links { display: grid; gap: 8px; }
.store-links a { display: block; border-radius: 9px; line-height: 0; transition: transform .2s ease, box-shadow .2s ease; }
.store-links a:hover, .store-links a:focus-visible { transform: translateY(-2px) scale(1.015); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.store-links img { width: 100%; height: auto; }
.store-links a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.partners-section { padding: 0 max(5.5%, calc((100% - 1120px)/2)) 50px; background-size: 70% auto; }
.partners-section .section-heading { margin-bottom: 30px; }
.partner-logos { max-width: 900px; margin: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 22px; align-items: center; justify-items: center; }
.partner-logos img { width: 100%; max-width: 130px; height: 55px; object-fit: contain; }

/* Service and event pages */
.detail-hero { height: 605px; position: relative; overflow: hidden; display: flex; align-items: center; color: white; }
.reference-detail-hero { position: absolute; z-index: 2; top: 5.32%; left: 0; width: 100%; height: 29.27%; pointer-events: none; }
.reference-detail-hero .detail-title h1 { font-size: 5.4cqw; }
.reference-detail-hero .detail-title p { font-size: 3.3cqw; }
.reference-detail-hero .detail-title { position: absolute; top: 34.7%; left: 47%; width: 48%; margin: 0; }
.reference-detail-hero.fleet-hero .detail-title { top: 46.3%; left: 50%; margin-left: 0; }
.reference-detail-hero.distributor-hero .detail-title { top: 39.2%; left: 51.3%; margin-left: 0; }
.card-hero { background: radial-gradient(ellipse 42% 55% at 12% 82%, rgba(245,130,23,.5) 0%, rgba(211,118,42,.3) 38%, rgba(129,74,39,.1) 62%, transparent 80%),linear-gradient(90deg,rgba(13,12,14,.97) 0%,rgba(12,12,14,.88) 31%,rgba(15,15,15,.28) 70%,rgba(0,0,0,.05) 100%),url("assets/card/BG.jpg") center 45% / cover; }
.fleet-hero { background: linear-gradient(90deg,rgba(19,17,18,.98) 0%,rgba(20,18,19,.87) 39%,rgba(16,16,18,.18) 72%,rgba(0,0,0,.02) 100%),url("assets/fleet/BG.png") center / cover; }
.distributor-hero { background: linear-gradient(90deg,rgba(244,136,29,.98) 0%,rgba(241,137,32,.9) 42%,rgba(210,124,41,.2) 72%,rgba(0,0,0,.03) 100%),url("assets/distributor/BG.png") center / cover; }
.detail-product { position: absolute; z-index: 1; object-fit: contain; transition: transform .45s cubic-bezier(.2,.7,.25,1); transform-style: preserve-3d; }
.detail-hero:hover .detail-product { transform: perspective(1200px) translateY(-3px) translateZ(5px) rotateY(-.35deg); }
.card-product { width: 39%; left: 6%; top: 11%; }
.fleet-product { width: 47%; left: 2%; top: 14%; }
.distributor-product { width: 43%; left: 7%; top: 12%; }
.reference-detail-hero .card-product { width: 54.7%; left: .3%; top: 8.1%; }
.reference-detail-hero .fleet-product { width: 54.9%; left: -3%; top: 20.2%; }
.reference-detail-hero .distributor-product { width: 66.4%; left: -7.3%; top: .3%; }
.detail-title { position: relative; z-index: 2; margin-left: 48%; width: 48%; }
.detail-title h1 { font-size: clamp(48px, 5.4vw, 76px); line-height: 1.02; margin: 0 0 26px; color: #fff; font-weight: 750; letter-spacing: -.035em; }
.detail-title h1 > .detail-brand-accent { color: var(--orange); }
.detail-hero .hero-type-character { display: inline-block; }
.detail-hero.is-detail-entering .hero-type-character { animation: hero-type-character .18s cubic-bezier(.2,.75,.22,1) var(--hero-type-delay, 0ms) both; }
.detail-title p { margin: 0; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.11; }
.fleet-hero .detail-title { margin-left: 50%; }
.fleet-hero .detail-title p { max-width: 570px; }
.distributor-hero .detail-title { margin-left: 51%; }
.distributor-hero .detail-title h1 { max-width: 520px; }
.detail-intro { min-height: 330px; max-width: 1170px; margin: auto; padding: 62px 4%; display: grid; grid-template-columns: 1fr 1.2fr; gap: 5%; align-items: center; background-size: auto 100%; }
.detail-intro > img { max-height: 270px; width: 100%; object-fit: contain; }
.detail-intro > div p { margin: 0 0 20px; font-size: 18px; line-height: 1.25; }
.fleet-intro { min-height: 350px; }
.fleet-intro > img { max-height: 300px; }
.fleet-intro > div p { font-size: 17px; margin-bottom: 21px; }
.benefits { padding: 0 8% 72px; text-align: center; }
.benefits h2 { margin: 10px 0 12px; color: var(--orange-deep); font-size: 32px; font-weight: 400; }
.heading-rule { display: block; height: 1px; width: min(505px, 55%); background: #222; margin: 0 auto 57px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px 35px; max-width: 1000px; margin: 0 auto; text-align: left; }
.benefit-grid article { position: relative; z-index: 0; min-height: 184px; border: 1.5px solid var(--orange-deep); border-radius: 30px; padding: 52px 22px 18px; transition: transform .36s cubic-bezier(.18,.82,.22,1), box-shadow .36s ease; }
@media (hover: hover) and (pointer: fine) {
  .benefit-grid article.is-pointer-near { z-index: 1; transform: translateY(-4px) scale(1.006); box-shadow: 0 9px 18px rgba(21,26,32,.12); }
  .benefit-grid article:hover { z-index: 2; transform: perspective(1100px) translate3d(0,-11px,18px) scale(1.022); box-shadow: 0 21px 34px rgba(21,26,32,.22), 0 7px 16px rgba(21,26,32,.13); }
}
.benefit-grid h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.05; }
.benefit-grid p { margin: 0; font-size: 18px; line-height: 1.2; }
.benefit-grid .empty-benefit { min-height: 184px; }
.detail-cta { min-height: 245px; background: var(--orange); color: #fff; padding: 48px 7.2%; display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.detail-cta h2 { font-size: 27px; margin: 0 0 24px; }
.detail-cta p { font-size: 21px; line-height: 1.2; margin: 0; }
.detail-cta a { border-radius: 24px; background: #fff; color: #222; text-decoration: none; font-size: 14px; padding: 10px 16px; margin: 30px 5% 0 0; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.detail-cta a:hover, .detail-cta a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.detail-cta a span { margin-left: 12px; color: var(--orange-deep); }
.distributor-intro { min-height: 360px; }
.distributor-orange { width: 260px; height: 260px; background: var(--orange); border-radius: 50%; justify-self: center; }
.distributor-intro > div + div { border-left: 1px solid var(--orange); min-height: 220px; }
.distributor-intro > div + div p { padding: 22px; }
.distributor-benefits { padding-top: 0; }
.distributor-benefits .heading-rule { margin-bottom: 57px; }
.distributor-benefits .benefit-grid article { min-height: 184px; }

.events-main { max-width: 1289px; margin: auto; padding: 48px 6% 110px; }
.events-main > h1 { text-align: center; color: var(--orange-deep); font-size: 42px; margin: 8px 0 42px; }
.event-video-frame { position: relative; margin-bottom: 82px; }
.event-video-frame img { width: 100%; border-radius: 18px; }
.event-entry { display: grid; grid-template-columns: .8fr 1.35fr; align-items: center; gap: 6%; }
.event-description h2 { color: var(--orange-deep); font-weight: 400; font-size: 33px; line-height: 1.1; margin: 0; }
.event-entry img { width: 100%; height: auto; }
.event-entry-second { grid-template-columns: 1.35fr .95fr; }
.events-main hr { width: 48%; margin: 40px auto 44px; border: 0; border-top: 1px solid #292929; }
.empty-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.empty-gallery span { aspect-ratio: 1.4; background: var(--orange); border-radius: 18px; }

@media (max-width: 900px) {
  .site-header { height: 66px; padding: 0 24px; }
  .brand { width: 135px; flex-basis: 135px; }
  .menu-toggle { display: flex; width: 42px; height: 38px; padding: 8px; border: 0; background: transparent; flex-direction: column; justify-content: space-between; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; width: 26px; border-top: 2px solid #222; transition: transform .2s ease, opacity .16s ease; transform-origin: center; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 66px; background: #fff; padding: 15px 24px 22px; box-shadow: 0 8px 15px #0002; flex-direction: column; align-items: flex-start; gap: 8px; white-space: normal; }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; }
  .main-nav .active::after { display: none; }
  .language-pill { margin-top: 6px; }
  .login-label { margin: 4px 0 0; }
  .home-hero { height: 440px; }
  .hero-content { padding: 0 5%; }
  .hero-copy { flex-basis: 52%; }
  .hero-cars { width: 68%; right: -8%; bottom: 3%; }
  .about-section { min-height: auto; padding: 26px 6% 50px; }
  .about-section .section-heading { margin-bottom: 40px; }
  .about-grid { gap: 6%; font-size: 14px; }
  .services-section, .event-preview, .network-section, .partners-section { padding-left: 5%; padding-right: 5%; }
  .network-section { min-height: 570px; }
  .moz-map { height: 450px; }
  .contact-section { margin: 0 18px; padding: 22px 5%; gap: 5%; }
  .downloads-section { padding: 30px 5%; }
  .detail-hero { height: 500px; }
  .card-product { width: 44%; left: 2%; }
  .fleet-product { width: 50%; left: -4%; }
  .distributor-product { width: 47%; left: 3%; }
  .detail-title { margin-left: 48%; }
  .detail-title p { font-size: 31px; }
  .detail-intro { padding: 45px 5%; }
  .benefits { padding-left: 5%; padding-right: 5%; }
  .benefit-grid { gap: 20px; }
  .benefit-grid article { min-height: 175px; padding: 35px 18px 15px; }
  .benefit-grid h3 { font-size: 18px; }
  .benefit-grid p { font-size: 15px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .home-hero { height: 490px; }
  .hero-road { inset: 0; background-image: linear-gradient(90deg,rgba(245,138,31,.98) 0%,rgba(245,138,31,.82) 50%,rgba(245,138,31,.25) 100%),url("assets/hero/ROAD-BG.jpg"); }
  .hero-content { display: block; padding: 56px 7% 0; }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: 44px; }
  .hero-copy p { margin-bottom: 18px; font-size: 17px; }
  .hero-actions { gap: 7px; }
  .small-pill { font-size: 9px; padding: 6px 8px; }
  .hero-cars { width: 105%; right: -8%; bottom: 0; }
  .hero-medal { display: none; }
  .section-heading h2 { font-size: 22px; }
  .about-section { padding: 25px 7% 42px; background-size: auto 60%; }
  .about-section .section-heading { margin-bottom: 28px; }
  .about-grid { grid-template-columns: 1fr; gap: 21px; font-size: 14px; line-height: 1.35; }
  .about-left ul { margin-top: 12px; }
  .about-right { margin-left: 5%; }
  .services-section { padding: 20px 7% 35px; }
  .service-cards { grid-template-columns: 1fr; gap: 14px; }
  .service-card { aspect-ratio: 1.8; }
  .fleet-card { transform: none; }
  .service-card b { bottom: 11px; left: 14px; font-size: 16px; }
  .event-preview { padding: 0 7% 36px; }
  .network-section { min-height: auto; padding: 0 7% 35px; background-size: auto 70%; }
  .map-instruction { width: 145px; margin: 0 auto 10px; }
  .moz-map { width: 100%; height: 395px; }
  .province-map { max-width: 100%; }
  .compass { width: 48px; right: -1%; bottom: 0; }
  .province-labels span { font-size: 8px; padding: 2px 6px; border-width: 1px; }
  .province-labels span:nth-child(1) { left: 31%; }
  .province-labels span:nth-child(2) { right: 0; top: 14%; }
  .province-labels span:nth-child(3) { left: 0; }
  .province-labels span:nth-child(4) { right: 1%; }
  .province-labels span:nth-child(5) { left: 7%; }
  .province-labels span:nth-child(6) { right: 6%; }
  .province-labels span:nth-child(7) { left: 35%; }
  .province-labels span:nth-child(8) { right: 6%; }
  .province-labels span:nth-child(9) { left: 4%; }
  .province-labels span:nth-child(10) { left: 36%; }
  .contact-section { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 10px; border-radius: 18px; padding: 22px 7%; }
  .contact-copy h2 { margin-bottom: 24px; }
  .contact-form { padding: 16px; }
  .downloads-section { grid-template-columns: 1fr; gap: 5px; padding: 26px 8% 38px; }
  .download-phones { width: 76%; height: 270px; margin: auto; object-position: center 15%; }
  .download-copy { padding-left: 3%; }
  .download-copy h2 { font-size: 23px; }
  .download-copy p { margin-bottom: 20px; font-size: 13px; }
  .download-apps { max-width: 100%; }
  .download-app { padding: 0 5px; }
  .download-app-logo { height: 48px; margin-bottom: 9px; }
  .store-links { gap: 7px; }
  .app-download-dialog { max-height: min(640px, calc(100dvh - 20px)); border-radius: 14px; }
  .app-download-dialog__header { padding: 17px 18px 15px; gap: 12px; }
  .app-download-dialog__context { max-width: 260px; font-size: 13px; }
  .app-download-choices { grid-template-columns: 1fr; gap: 9px; padding: 13px 15px 16px; }
  .app-download-choice { min-height: 88px; flex-direction: row; justify-content: space-between; gap: 10px; padding: 10px 12px; text-align: left; }
  .app-download-choice img { flex: 0 0 31%; width: 31%; max-width: 115px; height: 55px; }
  .app-download-choice__name { flex: 1; font-size: 15px; }
  .app-download-choice__action { white-space: nowrap; font-size: 12px; }
  .partners-section { padding: 0 7% 35px; }
  .partners-section .section-heading { margin-bottom: 20px; }
  .partner-logos { grid-template-columns: repeat(3,1fr); gap: 12px; }
  .partner-logos img { height: 44px; }
  .detail-hero { min-height: 590px; height: auto; align-items: flex-start; }
  .card-hero { background-position: center, center, 62% center; }
  .fleet-hero { background-position: center, 58% center; }
  .distributor-hero { background-position: center, 62% center; }
  .detail-title, .fleet-hero .detail-title, .distributor-hero .detail-title { margin: 45px 7% 0; width: 86%; }
  .detail-title h1 { font-size: 46px; margin-bottom: 12px; }
  .detail-title p { font-size: 27px; }
  .detail-product { width: 100%; max-height: 315px; left: 0; right: 0; top: auto; bottom: 8px; }
  .card-product { width: 94%; }
  .fleet-product { width: 105%; left: -2%; }
  .distributor-product { width: 93%; }
  .detail-intro { min-height: auto; grid-template-columns: 1fr; gap: 14px; padding: 28px 8%; background-size: auto 60%; }
  .detail-intro > img { height: 205px; }
  .detail-intro > div p, .fleet-intro > div p { font-size: 15px; line-height: 1.35; margin-bottom: 14px; }
  .benefits { padding: 5px 7% 38px; }
  .benefits h2 { font-size: 23px; line-height: 1.2; }
  .heading-rule { margin-bottom: 25px; width: 70%; }
  .benefit-grid { grid-template-columns: 1fr; gap: 12px; }
  .benefit-grid article, .benefit-grid .empty-benefit { min-height: 130px; border-radius: 24px; padding: 23px 20px; }
  .benefit-grid h3 { font-size: 18px; }
  .benefit-grid p { font-size: 15px; }
  .detail-cta { min-height: auto; padding: 28px 7%; flex-direction: column; align-items: flex-start; }
  .detail-cta h2 { font-size: 22px; margin-bottom: 13px; }
  .detail-cta p { font-size: 16px; }
  .detail-cta p br { display: none; }
  .detail-cta a { margin: 4px 0; font-size: 12px; }
  .distributor-orange { width: 190px; height: 190px; }
  .distributor-intro > div + div { min-height: 50px; border: 0; }
  .distributor-intro > div + div p { display: none; }
  .distributor-benefits .benefit-grid article { min-height: 110px; }
  .events-main { padding: 34px 6% 60px; }
  .events-main > h1 { font-size: 28px; margin: 4px 0 24px; }
  .event-video-frame { margin-bottom: 40px; }
  .event-entry, .event-entry-second { grid-template-columns: 1fr; gap: 15px; }
  .event-entry-second img { order: 2; }
  .event-description h2 { font-size: 25px; }
  .events-main hr { width: 55%; margin: 25px auto; }
  .empty-gallery { gap: 7px; }
  .empty-gallery span { border-radius: 11px; }
}
.province-map-overlay { position: absolute; z-index: 2; top: 0; left: 50%; display: block; width: auto; height: 100%; overflow: visible; transform: translateX(-50%); }
.province-map-overlay a { cursor: pointer; outline: none; }
.reference-map-overlay a { cursor: pointer; outline: none; }
.province-map-overlay path { fill: rgba(23, 23, 23, .001); pointer-events: all; transition: fill .28s ease, filter .28s ease, transform .28s cubic-bezier(.2,.7,.25,1); }
.province-map-overlay a:hover .province-region-visual, .province-map-overlay a:focus-visible .province-region-visual { fill: rgba(245, 130, 23, .3); transform: none; filter: drop-shadow(0 0 5px rgba(245,130,23,.78)) drop-shadow(0 0 15px rgba(245,130,23,.42)); }
.reference-map-overlay path.province-region-visual, .province-map-overlay path.province-region-visual { pointer-events: none; }
.province-labels { z-index: 3; }

/* Province map selection and station list dialog */
.province-dialog { width: min(960px, calc(100vw - 28px)); max-height: min(780px, calc(100dvh - 28px)); overflow: hidden; border: 0; border-radius: 10px; box-shadow: 0 18px 56px rgba(0,0,0,.25); }
.province-dialog[open] { display: flex; }
.province-dialog-sidebar { flex: 0 0 112px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; padding: 20px 10px; color: #fff; background: var(--orange-deep); }
.province-dialog-sidebar span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(21px, 3vw, 34px); font-weight: 750; line-height: 1; white-space: nowrap; }
.province-dialog-main { display: grid; min-width: 0; min-height: 0; flex: 1; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.province-dialog-header { z-index: 1; padding: 17px 20px 14px; border-bottom: 1px solid #e8e8e8; }
.province-dialog-header h2 { display: block; width: fit-content; min-width: 190px; margin-top: 5px; padding: 6px 13px; border-radius: 7px; color: #fff; background: var(--orange-deep); font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.province-address-list { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 0 22px; min-height: 0; margin: 0; padding: 8px 20px 18px; overflow-y: auto; list-style: none; }
.province-address-list li { display: grid; grid-template-columns: 13px minmax(0,1fr); align-items: start; gap: 7px; padding: 8px 0; border-bottom: 1px solid #ededed; font-size: 12px; line-height: 1.25; }
.province-address-pin { position: relative; width: 12px; height: 12px; margin-top: 1px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange-deep); }
.province-address-pin::after { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; content: ""; }
.province-address-copy { min-width: 0; }
.province-dialog .province-address-copy strong { display: inline; font-weight: 700; }
.province-dialog .province-address-copy > span { display: inline; margin-left: 3px; color: var(--muted); font-size: inherit; }
.province-address-list li:last-child { border-bottom: 0; }
.reference-map-overlay a:focus-visible, .province-map-overlay a:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
.reference-map-overlay path.province-region-hit, .province-map-overlay path.province-region-hit { pointer-events: all; }
.reference-map-overlay path.province-region-visual, .province-map-overlay path.province-region-visual { pointer-events: none; }
@media (max-width: 600px) {
  .province-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); flex-direction: column; }
  .province-dialog-sidebar { flex: 0 0 auto; min-height: 48px; flex-direction: row; gap: 7px; padding: 8px 13px; }
  .province-dialog-sidebar span { writing-mode: horizontal-tb; transform: none; font-size: 16px; }
  .province-dialog-header { padding: 13px 14px 10px; }
  .province-dialog-header h2 { min-width: 0; }
  .province-address-list { grid-template-columns: minmax(0,1fr); padding: 6px 14px 12px; }
}

.province-hover-preview { position: fixed; z-index: 60; width: min(300px, calc(100vw - 24px)); max-height: min(300px, calc(100dvh - 24px)); overflow: auto; padding: 12px 14px 10px; border: 1px solid #dedede; border-top: 4px solid var(--orange-deep); border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(0,0,0,.2); pointer-events: none; animation: province-preview-in .16s ease-out both; }
.province-hover-preview[hidden] { display: none !important; }
.province-hover-preview__header { display: grid; gap: 5px; }
.province-hover-preview__header strong { padding: 4px 8px; border-radius: 5px; color: #fff; background: var(--orange-deep); font-size: 12px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.province-hover-preview__header span { color: var(--muted); font-size: 11px; font-weight: 650; }
.province-hover-preview__stations { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.province-hover-preview__stations li { position: relative; padding-left: 13px; font-size: 11px; line-height: 1.25; }
.province-hover-preview__stations li::before { position: absolute; top: .36em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-deep); content: ""; }
.province-hover-preview__hint { margin: 9px 0 0; color: var(--orange-deep); font-size: 10px; font-weight: 650; line-height: 1.25; }
@keyframes province-preview-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }