@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root{--ink:#07171e;--ink-2:#0b222b;--ink-3:#10333e;--cream:#f4f1e9;--muted:#b2c2c3;--gold:#e2c988;--line:rgba(231,239,232,.17);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);font-family:'DM Sans',Arial,sans-serif}
.site-footer{position:relative;isolation:isolate;overflow:hidden;color:var(--cream);background:linear-gradient(135deg,#07171e 0%,#0a2028 52%,#07171e 100%);border-top:1px solid rgba(226,201,136,.6)}
.footer-glow{position:absolute;inset:-30% -10% auto;height:480px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 24% 10%,rgba(39,113,128,.3),transparent 52%),radial-gradient(ellipse at 87% 45%,rgba(226,201,136,.1),transparent 42%);filter:blur(18px)}
.site-footer-main{position:relative;display:grid;grid-template-columns:minmax(235px,.9fr) minmax(350px,1.2fr) minmax(210px,.65fr);gap:clamp(44px,8vw,126px);width:min(1360px,calc(100% - clamp(48px,12vw,220px)));margin:0 auto;padding:clamp(72px,8vw,122px) 0 66px}
.site-footer-brand>a{display:inline-flex;width:min(230px,100%);margin-bottom:28px;transition:transform .5s var(--ease)}
.site-footer-brand>a:hover{transform:translateY(-4px)}
.site-footer-brand img{display:block;width:100%;height:auto}.site-footer-brand p{margin:0 0 19px;color:var(--muted);font-size:17px;line-height:1.65}.site-footer-phone,.site-footer-contact>a{color:var(--gold);font-family:Manrope,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:.02em;text-decoration:none}
.site-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:18px 42px;padding-top:5px}.site-footer-nav a{position:relative;width:max-content;color:var(--cream);font-family:Manrope,Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:color .3s ease,transform .45s var(--ease)}.site-footer-nav a:before{content:'';position:absolute;right:0;bottom:-7px;left:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}.site-footer-nav a:hover{color:var(--gold);transform:translateX(6px)}.site-footer-nav a:hover:before{transform:scaleX(1);transform-origin:left}
.site-footer-contact{display:flex;flex-direction:column;align-items:flex-start;padding-top:2px}.site-footer-kicker{margin:0 0 12px;color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.site-footer-canada{width:138px;height:auto;margin-top:35px;opacity:.95;transition:transform .5s var(--ease)}.site-footer-canada:hover{transform:translateY(-4px)}
.footer-road{position:relative;height:112px;margin-top:1px;overflow:hidden;border-top:1px solid rgba(226,201,136,.27);border-bottom:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,#0d2d37 0%,#0a222b 55%,#07171e 56%,#07171e 100%)}.footer-road:before{content:'';position:absolute;right:0;bottom:18px;left:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(226,201,136,.25) 10%,rgba(226,201,136,.65) 50%,rgba(226,201,136,.25) 90%,transparent 100%)}.footer-road:after{content:'';position:absolute;right:-10%;bottom:5px;left:-10%;height:1px;background:repeating-linear-gradient(90deg,rgba(231,239,232,.42) 0 74px,transparent 74px 132px);opacity:.46}.road-lights{position:absolute;inset:auto 0 19px;height:9px;background:radial-gradient(ellipse,rgba(226,201,136,.45),transparent 65%);filter:blur(7px);opacity:.65}
.footer-truck{position:absolute;bottom:13px;left:-570px;width:545px;height:112px;overflow:visible;mix-blend-mode:screen;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));animation:footerTruckDrive 20s linear infinite}.footer-truck img{position:relative;z-index:1;display:block;width:545px;height:112px;object-fit:contain;object-position:center;transform:none}.site-footer-bottom{display:flex;justify-content:space-between;gap:30px;width:min(1360px,calc(100% - clamp(48px,12vw,220px)));margin:0 auto;padding:24px 0 29px;color:#9fb1b2;font-size:17px;font-weight:500;line-height:1.5;letter-spacing:.02em}.site-footer-bottom a{color:var(--gold);font-weight:600;text-decoration:none}.site-footer-bottom a:hover{text-decoration:underline}
@media(max-width:760px){.site-footer-main{grid-template-columns:1fr;gap:43px;width:calc(100% - 52px);padding:61px 0 52px}.site-footer-brand>a{width:205px}.site-footer-brand p{font-size:16px}.site-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}.site-footer-nav a{font-size:17px}.site-footer-contact{padding-top:1px}.site-footer-canada{margin-top:28px}.footer-road{height:94px}@media(max-width:760px){.footer-truck{bottom:10px;width:360px;height:75px;left:-380px;animation-duration:16s}.footer-truck img{width:360px;height:75px}}.site-footer-bottom{flex-direction:column;gap:11px;width:calc(100% - 52px);padding:20px 0 26px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.footer-truck{opacity:.92}.site-footer-nav a,.site-footer-brand>a,.site-footer-canada{transition:none}}

/* Motion emphasis: the truck remains one attached cutout while the environment and light trail move around it. */
.footer-truck{animation-duration:15s;will-change:transform}
.footer-truck:before{content:'';position:absolute;z-index:0;right:58%;bottom:34px;width:250px;height:22px;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(90,210,255,.28) 20px 90px,transparent 90px 132px);filter:blur(4px);opacity:.85;transform:skewX(-12deg);animation:truckSpeedLines .46s linear infinite}
.footer-truck:after{content:'';position:absolute;z-index:0;right:4%;bottom:20px;width:82px;height:38px;border-radius:50%;background:radial-gradient(ellipse,rgba(100,216,255,.58),rgba(100,216,255,.15) 38%,transparent 72%);filter:blur(8px);animation:headlightPulse .72s ease-in-out infinite alternate}
.footer-truck img{animation:truckChassis .17s steps(2,end) infinite alternate;will-change:transform,filter}
.footer-road:after{animation:roadDashFlow .75s linear infinite}
@keyframes truckSpeedLines{from{transform:translateX(42px) skewX(-12deg);opacity:.28}to{transform:translateX(-46px) skewX(-12deg);opacity:.9}}
@keyframes headlightPulse{from{opacity:.46;transform:scale(.86)}to{opacity:1;transform:scale(1.13)}}
@keyframes truckChassis{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@keyframes roadDashFlow{from{background-position:0 0}to{background-position:-132px 0}}
@media(max-width:760px){.footer-truck:before{right:58%;bottom:22px;width:155px;height:15px}.footer-truck:after{bottom:13px;width:52px;height:27px}.footer-road:after{animation-duration:.58s}}
@media(prefers-reduced-motion:reduce){.footer-truck:before,.footer-truck:after,.footer-truck img,.footer-road:after{animation:none}}
/* Start mid-route so the vehicle is visible immediately on load, then continue its full crossing. */
.footer-truck{animation-delay:-6s}
@media(max-width:760px){.footer-truck{animation-delay:-5s}}
/* Aspect correction: preserve the complete 3:2 side-profile instead of letterboxing it into a shallow strip. */
.footer-truck{width:420px;height:280px;bottom:-104px;overflow:visible}
.footer-truck img{width:420px;height:280px;object-fit:contain}
.footer-truck:before{bottom:126px;right:58%}
.footer-truck:after{bottom:112px;right:4%}
@media(max-width:760px){.footer-truck{width:300px;height:200px;bottom:-68px}.footer-truck img{width:300px;height:200px}.footer-truck:before{bottom:86px}.footer-truck:after{bottom:76px}}
/* Keep the complete enlarged vehicle above the footer edge. */
.footer-truck{width:360px;height:240px;bottom:0}
.footer-truck img{width:360px;height:240px}
.footer-truck:before{bottom:104px}
.footer-truck:after{bottom:92px}
@media(max-width:760px){.footer-truck{width:280px;height:187px;bottom:0}.footer-truck img{width:280px;height:187px}.footer-truck:before{bottom:80px}.footer-truck:after{bottom:68px}}
/* Final layering correction: the road band owns the truck’s full vertical profile. */
.footer-road{height:220px;position:relative;z-index:4;overflow:visible}
.footer-truck{z-index:8}
@media(max-width:760px){.footer-road{height:180px}}

/* Traveling trail system: layered streaks move independently behind the vehicle. */
.footer-road:after{animation:roadDashFlow .8s linear infinite!important;background-size:132px 1px!important}
/* Replace the hard rectangular block with a tapered, attached motion trail. */
.footer-truck:before{right:56%;bottom:108px;width:190px;height:16px;background:linear-gradient(90deg,transparent 0%,rgba(86,205,255,.08) 18%,rgba(86,205,255,.28) 66%,rgba(190,244,255,.82) 100%);clip-path:polygon(0 45%,72% 22%,100% 50%,72% 78%,0 58%);filter:blur(2px);opacity:.55;transform-origin:right center;animation:attachedTrail .62s ease-in-out infinite alternate}
@keyframes attachedTrail{from{transform:translateX(10px) scaleX(.55);opacity:.2;filter:blur(3px)}to{transform:translateX(-18px) scaleX(1.12);opacity:.82;filter:blur(1px)}}
@media(max-width:760px){.footer-truck:before{right:56%;bottom:80px;width:125px;height:12px}}
@media(prefers-reduced-motion:reduce){.footer-truck:before{animation:none;opacity:.35}}

/* No screen-wide trail: motion stays attached to the truck only. */

/* Axle-locked wheel motion: overlays are positioned within the exact 360x240 truck image box. */
.wheel-spin{position:absolute;z-index:4;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1px solid rgba(190,245,255,.5);background:conic-gradient(from 0deg,rgba(220,250,255,.82) 0 9deg,transparent 10deg 58deg,rgba(220,250,255,.82) 59deg 68deg,transparent 69deg 118deg,rgba(220,250,255,.82) 119deg 128deg,transparent 129deg 178deg,rgba(220,250,255,.82) 179deg 188deg,transparent 189deg 238deg,rgba(220,250,255,.82) 239deg 248deg,transparent 249deg 298deg,rgba(220,250,255,.82) 299deg 308deg,transparent 309deg);box-shadow:0 0 5px rgba(95,220,255,.75),inset 0 0 4px rgba(95,220,255,.55);opacity:.75;transform-origin:center;animation:wheelTurn .34s linear infinite;pointer-events:none}.wheel-spin:after{content:'';position:absolute;inset:8px;border:1px solid rgba(231,204,135,.72);border-radius:50%;filter:blur(.3px)}
.wheel-1{left:34px;top:145px}.wheel-2{left:56px;top:145px}.wheel-3{left:79px;top:145px}.wheel-4{left:194px;top:145px}.wheel-5{left:219px;top:145px}.wheel-6{left:304px;top:145px}
@keyframes wheelTurn{to{transform:rotate(360deg)}}
@media(max-width:760px){.wheel-spin{width:22px;height:22px}.wheel-spin:after{inset:6px}.wheel-1{left:26px;top:113px}.wheel-2{left:44px;top:113px}.wheel-3{left:62px;top:113px}.wheel-4{left:151px;top:113px}.wheel-5{left:171px;top:113px}.wheel-6{left:237px;top:113px}}
@media(prefers-reduced-motion:reduce){.wheel-spin{animation:none}}
/* Refined wheel pass: restrained spoke rotation, true axle alignment, no floating-ring look. */
.wheel-spin{width:24px;height:24px;border:0;border-radius:50%;opacity:.58;background:radial-gradient(circle at center,rgba(7,23,30,.9) 0 13%,rgba(214,246,255,.62) 14% 18%,transparent 19%),repeating-conic-gradient(from 0deg,transparent 0 8deg,rgba(203,246,255,.8) 9deg 14deg,transparent 15deg 43deg);box-shadow:0 0 4px rgba(112,224,255,.75);filter:blur(.2px);animation:wheelTurn .23s linear infinite}.wheel-spin:after{inset:5px;border:1px solid rgba(231,204,135,.48);filter:blur(.5px)}
.wheel-spin:before{content:'';position:absolute;inset:10px;border-radius:50%;background:rgba(226,249,255,.8);box-shadow:0 0 4px rgba(226,249,255,.7)}
@media(max-width:760px){.wheel-spin{width:19px;height:19px}.wheel-spin:after{inset:4px}.wheel-spin:before{inset:8px}}
/* Final wheel polish: use rotating partial arcs and spokes, not bright full circles. */
.wheel-spin{width:22px;height:22px;opacity:.64;background:repeating-conic-gradient(from 0deg,rgba(215,248,255,.8) 0 5deg,transparent 6deg 42deg);border:1px solid rgba(201,244,255,.38);box-shadow:0 0 3px rgba(105,220,255,.55);filter:blur(.15px);mix-blend-mode:screen;animation:wheelTurn .2s linear infinite}
.wheel-spin:after{inset:3px;border:1px solid rgba(230,205,139,.52);border-left-color:transparent;border-bottom-color:transparent;animation:wheelTurnReverse .3s linear infinite}
.wheel-spin:before{inset:9px;width:4px;height:4px;left:9px;top:9px;background:rgba(227,249,255,.78);box-shadow:0 0 3px rgba(227,249,255,.8)}
.wheel-1{left:37px;top:151px}.wheel-2{left:59px;top:151px}.wheel-3{left:82px;top:151px}.wheel-4{left:197px;top:151px}.wheel-5{left:222px;top:151px}.wheel-6{left:307px;top:151px}
@keyframes wheelTurnReverse{to{transform:rotate(-360deg)}}
@media(max-width:760px){.wheel-spin{width:18px;height:18px}.wheel-spin:after{inset:3px}.wheel-spin:before{inset:7px;left:7px;top:7px;width:4px;height:4px}.wheel-1{left:29px;top:118px}.wheel-2{left:46px;top:118px}.wheel-3{left:64px;top:118px}.wheel-4{left:154px;top:118px}.wheel-5{left:174px;top:118px}.wheel-6{left:240px;top:118px}}
@media(prefers-reduced-motion:reduce){.wheel-spin:after{animation:none}}
/* Measured axle correction: CSS positions are box edges, so subtract half the wheel size. */
.wheel-1{left:26px;top:140px}.wheel-2{left:48px;top:140px}.wheel-3{left:71px;top:140px}.wheel-4{left:186px;top:140px}.wheel-5{left:211px;top:140px}.wheel-6{left:296px;top:140px}
/* The truck must never fade during its crossing; it only enters/exits by viewport clipping. */
.footer-truck{opacity:1!important}
@keyframes footerTruckDrive{0%{transform:translateX(-12vw);opacity:1}100%{transform:translateX(calc(100vw + 300px));opacity:1}}
@media(max-width:760px){.wheel-1{left:20px;top:109px}.wheel-2{left:37px;top:109px}.wheel-3{left:55px;top:109px}.wheel-4{left:144px;top:109px}.wheel-5{left:164px;top:109px}.wheel-6{left:230px;top:109px}}

/* Full-width travel correction: use the rendered truck width, so it never vanishes halfway offscreen. */
.footer-truck{left:-360px!important;transform:translateX(0);opacity:1!important}
@keyframes footerTruckDrive{0%{transform:translateX(0);opacity:1}100%{transform:translateX(calc(100vw + 360px));opacity:1}}
@media(max-width:760px){
  .footer-truck{left:-280px!important}
  @keyframes footerTruckDrive{0%{transform:translateX(0);opacity:1}100%{transform:translateX(calc(100vw + 280px));opacity:1}}
}

/* Joomla container breakout: the animated road must use the viewport, not the template content column. */
.site-footer{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.footer-road{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
/* Tablet composition: switch before the three-column desktop grid becomes cramped. */
@media (min-width:761px) and (max-width:900px){
  .site-footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;width:calc(100% - 64px);padding:64px 0 52px}
  .site-footer-contact{grid-column:1/-1;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:28px;padding-top:0}
  .site-footer-canada{margin-top:0}
  .site-footer-bottom{width:calc(100% - 64px);font-size:15px}
}
/* Always begin outside the viewport; never load halfway through the crossing. */
.footer-truck{animation-delay:0s!important}
