/* ═══════════════════════════════════════════════════════════════════════════
   KAIN GLOBE TELEMATICS — site.css
   Single authored stylesheet for every page. Generated by flattening the old
   styles.css -> enhancements.css -> page.css -> contact.css -> premium.css
   chain, then removing overridden declarations and selectors that match no
   markup on the site. Source order is preserved, so the cascade is unchanged.

   CONTENTS
     1  Base + reset ............ original styles.css foundation
     2  Layout primitives ....... .wrap, header, hero, sections
     3  Home page components .... solutions, story, metrics, partners,
                                  customers, journey, testimonials, CTA
     4  Inner page components ... inner hero, feature cards, split, forms
     5  Footer
     6  Premium layer ........... tokens, type scale, rhythm, colour,
                                  elevation, icon masks, motion, responsive

   Section banners below mark where each original layer began. Edit in place;
   later rules win over earlier ones at equal specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═════ from styles.css ═════ */
:root{--blue:#0649db;--navy:#071a4b;--muted:#64708b;--line:#dce4f2;--white:#fff;--radius:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,Arial,sans-serif}
a{text-decoration:none;color:inherit}
.wrap{margin-inline:auto}
.site-header{z-index:10;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:9px;min-width:255px}
.site-header nav{display:flex;align-self:stretch;align-items:center;justify-content:center;flex:1;font-size:12px;font-weight:700}
.site-header nav a{display:flex;align-items:center;position:relative;white-space:nowrap}
.site-header nav a.active{color:var(--blue)}
.site-header nav a.active:after{content:"";position:absolute;bottom:12px;left:0;right:0;height:2px;background:var(--blue)}
.button{display:inline-flex;align-items:center;justify-content:center;color:#fff;border:1px solid var(--blue)}
.header-cta{white-space:nowrap}
.menu-btn{border:0;background:transparent;font-size:25px}
.hero{background:linear-gradient(90deg,rgba(246,250,255,.97) 0%,rgba(246,250,255,.87) 27%,rgba(246,250,255,.12) 58%),url('../hero-city.png') center 42%/cover no-repeat}
.eyebrow,.section-title p{color:var(--blue);font-weight:800;font-size:11px;margin:0 0 10px}
.hero h1{margin:0 0 17px}
.lead{line-height:1.7;margin:0 0 18px}
.actions{display:flex}
.benefits{height:72px;margin-top:-72px;background:linear-gradient(90deg,#071943,#031432ee);border-radius:var(--r-ctl) var(--r-ctl) 0 0;color:white;display:grid;grid-template-columns:repeat(4,1fr);padding:12px 22px}
.benefits>div{display:flex;align-items:center;gap:15px;padding:0 21px;border-right:1px solid #ffffff1f}
.benefits>div:last-child{border:0}
.benefits i,.metrics i{font-style:normal;width:43px;height:43px;display:grid;place-items:center;border:1px solid #3a71ff;border-radius:50%;font-size:24px}
.benefits b,.benefits small{display:block}
.benefits small{margin-top:4px}
.section-title h2{margin:0}
.solution-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.card-photo{display:grid;place-items:center;font-size:58px;overflow:hidden}
.solution-grid h3,.solution-grid p,.solution-grid a{margin-left:13px;margin-right:10px}
.solution-grid p{font-size:8.5px;height:42px}
.solution-grid a{color:var(--blue);font-size:9px;font-weight:800}
.metrics{color:#fff;display:grid;grid-template-columns:repeat(5,1fr)}
.metrics>div{display:grid;grid-template-columns:51px 1fr;grid-template-rows:1fr 1fr;align-items:center}
.metrics>div:last-child{border:0}
.metrics i{grid-row:1/3;font-size:15px}
.partner-grid{display:grid;margin:auto}
.partner-grid article{border:1px solid var(--line)}
.partner-grid p,.partner-grid a{font-size:9px}
.partner-grid a{color:var(--blue);font-weight:800}
.logo-row{display:grid;grid-template-columns:repeat(8,1fr)}
.timeline{position:relative;display:grid}
.timeline:before{content:"";position:absolute;left:0;right:0}
.timeline article{text-align:center;z-index:1}
.timeline i{display:grid;place-items:center;margin:auto;border-radius:50%;font-style:normal}
.timeline b,.timeline strong{display:block}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.quote-grid blockquote{margin:0}
.quote-grid span{color:#ff9900;letter-spacing:2px}
.quote-grid p{line-height:1.6}
.quote-grid strong{display:block;margin-left:75px}
.cta{color:#fff;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}
.cta:after{position:absolute;right:300px;bottom:-9px;font-size:50px;opacity:.15}
.cta h2{margin:0}
.cta p{font-size:8px;margin:4px 0}
.button.white{min-width:210px;z-index:1}
footer{background:#031442;color:#fff;padding:16px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:35px}
.footer-grid>div:not(.brand){display:flex;flex-direction:column}
.footer-grid>div>b{font-size:9px;margin-bottom:6px}
.footer-grid a{opacity:.75;line-height:1.55}
.footer-grid p{margin:0 0 6px;opacity:.75}
@media(max-width:1000px){
  .site-header nav{position:absolute;left:0;right:0;background:#fff;display:none;flex-direction:column;align-items:stretch}
  .site-header nav.open{display:flex}
  .site-header nav a.active:after{display:none}
  .site-header .brand{min-width:0;margin-right:auto}
  .header-cta{display:none}
  .partner-grid{width:100%}
  .logo-row{grid-template-columns:repeat(4,1fr);height:auto}
  .footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}
}
@media(max-width:700px){
  .site-header{height:72px}
  .benefits{height:auto;margin-top:-155px;grid-template-columns:1fr 1fr;padding:8px}
  .benefits>div{border:0;padding:10px}
  .metrics{height:auto}
  .metrics>div{border:0}
  .partner-grid,.quote-grid{grid-template-columns:1fr}
  .logo-row{grid-template-columns:1fr 1fr}
  .timeline:before{display:none}
  .cta{gap:15px;flex-direction:column}
  .cta:after{right:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid .brand{grid-column:1/-1}
}
@media(max-width:430px){
  .actions{flex-direction:column}
  .benefits{grid-template-columns:1fr}
  .solution-grid article{min-height:290px}
  .card-photo{height:150px}
  .metrics{grid-template-columns:1fr}
  .partner-grid article{padding:18px}
  .quote-grid blockquote{padding:18px}
  .footer-grid{grid-template-columns:1fr}
}

/* ═════ from enhancements.css ═════ */

/* Premium refinement layer: supplied assets, optical sizing and responsive polish */
body{-webkit-font-smoothing:antialiased}
.brand img{display:block;height:auto;object-fit:contain}
.hero{background-image:linear-gradient(90deg,rgba(247,250,255,.98) 0%,rgba(247,250,255,.88) 28%,rgba(247,250,255,.14) 60%),url('../hero-city-reference.png');background-position:center 46%}
.hero h1{text-wrap:balance}
.solution-grid article,.partner-grid article,.quote-grid blockquote{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.solution-grid article:hover,.partner-grid article:hover,.quote-grid blockquote:hover{transform:translateY(-4px);border-color:#b8c9e8}
.partner-grid{grid-template-columns:repeat(5,1fr);width:100%}
.partner-grid article{display:flex;flex-direction:column}
.partner-grid article>img{display:block;width:100%;margin:0 auto 10px}
.partner-grid article p{flex:1;line-height:1.55}
.partner-grid .dark-logo{color:#fff;border-color:#162856}
.partner-grid .dark-logo a{color:#74a2ff}
.logo-row{background:#fff}
.logo-row>span{display:grid;place-items:center;overflow:hidden}
.logo-row img{display:block;width:auto;height:auto;max-width:100%;max-height:64px;object-fit:contain}
.logo-row>span:nth-child(1) img{max-height:68px}
.logo-row>span:nth-child(3) img{max-height:70px}
.logo-row>span:nth-child(7) img{max-height:76px}
.light img{filter:brightness(0) invert(1);opacity:.92}
footer{padding-top:23px}
.footer-grid a{transition:opacity .2s}
.footer-grid a:hover{opacity:1}
@media(max-width:1100px){
  .partner-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .brand img{width:155px}
  .hero{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-city-reference.png');background-position:60% center}
  .logo-row img{max-height:58px}
  .footer-grid .brand img{width:180px}
}
@media(max-width:430px){
  .partner-grid{grid-template-columns:1fr}
  .partner-grid article{min-height:125px}
  .logo-row>span{padding:14px}
  .hero-content{padding-top:105px}
}

/* Accessible background hero carousel */
.hero-slider{position:relative;isolation:isolate;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:-2}
.hero-slide{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(247,250,255,.98) 0%,rgba(247,250,255,.88) 28%,rgba(247,250,255,.14) 62%),var(--slide);background-position:center 46%;opacity:0;transform:scale(1.025);transition:opacity 1s ease,transform 7s ease}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-content{z-index:1}
.hero-controls{position:absolute;z-index:3;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.hero-dots,.hero-arrows{display:flex;gap:8px;pointer-events:auto}
.hero-dots button{border:0;cursor:pointer;transition:.25s}
.hero-arrows button{border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.2s}
.hero-arrows button:hover{transform:translateY(-2px)}
@media(max-width:700px){
  .hero-slide{background-position:60% center;background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),var(--slide)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none;transform:none}
  .hero-slide.is-active{transform:none}
}

/* Persistent benefit overlay shared by every hero slide */
.hero-slider>.benefits{position:absolute;z-index:4;left:50%;bottom:0;transform:translateX(-50%);margin-top:0}

/* Reference-aligned layout and UX finish */
:root{--premium-shadow:0 14px 40px rgba(8,31,76,.09);--soft-border:rgba(25,67,137,.13)}
.wrap{width:min(var(--page-width),calc(100% - 48px))}
.site-header nav a,.button,.solution-grid a,.partner-grid a{outline-offset:4px}
.site-header nav a:focus-visible,.button:focus-visible,.solution-grid a:focus-visible,.partner-grid a:focus-visible,.hero-controls button:focus-visible{outline:3px solid rgba(0,75,224,.35);border-radius:5px}
.hero{height:480px}
.hero .eyebrow{letter-spacing:.025em}
.hero-content .button{min-height:44px;padding-inline:22px}
.hero-slider>.benefits{padding-inline:24px}
.section-title h2{letter-spacing:-.035em}
.solution-grid{gap:13px}
.solution-grid article{border-color:var(--soft-border)}
.solution-grid h3{letter-spacing:-.015em}
.solution-grid p{color:#44516d;line-height:1.65}
.solution-grid a{display:inline-flex;margin-top:5px;padding:5px 0}
.partner-grid article{background:#fff;border-color:var(--soft-border);box-shadow:0 8px 22px rgba(8,31,76,.045)}
.logo-row{border-color:var(--soft-border)}
.timeline article p{color:#53617c}
.quote-grid blockquote{border-color:var(--soft-border);font-size:9.5px}
.quote-grid blockquote p{color:#43506b}
.footer-grid{padding-top:4px}
.footer-grid>div:not(.brand){font-size:9px}
@media(max-width:1000px){
  .hero{height:500px}
  .solution-grid{grid-template-columns:repeat(3,1fr)}
  .solution-grid article{min-height:292px}
}
@media(max-width:700px){
  .wrap,.site-header{width:min(100% - 28px,var(--page-width))}
  .hero{height:620px}
  .hero .lead{font-size:12px}
  .hero-slider>.benefits{height:auto;min-height:152px}
  .hero-controls{bottom:165px}
  .solution-grid{grid-template-columns:1fr 1fr}
  .metrics{margin-top:14px}
  .logo-row{height:auto}
  .cta{margin-top:28px}
}
@media(max-width:430px){
  .hero{height:650px}
  .hero-slider>.benefits{min-height:128px}
  .hero-slider>.benefits>div{padding-block:8px}
  .hero-controls{bottom:141px}
  .solution-grid{grid-template-columns:1fr}
  .logo-row{grid-template-columns:1fr 1fr}
}

/* Enterprise production finish */
body{min-width:280px}  /* was 320px: on a 320px viewport with a classic scrollbar the content box is 305px, and a 320px floor forced a horizontal scrollbar on every page. 280px is below any real device width. */
.site-header{position:fixed;top:0}
.site-header.is-scrolled nav a.active:after{bottom:8px}
.brand img{transition:width .25s ease}
.button:active{box-shadow:0 3px 10px rgba(6,73,219,.22)}
.section-title{margin-inline:auto}
.section-title h2{text-wrap:balance}
.solution-grid article{display:flex;flex-direction:column}
.solution-grid article p{flex:1}
.solution-grid article a{width:max-content}
.benefits b,.metrics b{letter-spacing:-.02em}
.solution-grid p,.partner-grid p,.timeline p,.quote-grid p{font-weight:500}
.partner-grid article a{width:max-content}
.logo-row>span{background:#fff}
.logo-row>span img{transition:transform .25s ease,filter .25s ease}
.cta .button.white{border-color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.footer-grid a{cursor:pointer}
@media(max-width:1000px){
  .site-header nav{border:1px solid var(--soft-border)}
  .site-header nav a{height:auto}
  .site-header nav a.active{border-radius:8px}
  .site-header nav.open{max-height:calc(100vh - 82px);overflow:auto}
}
@media(max-width:700px){
  .site-header.is-scrolled .brand img{width:145px}
  .hero-content .actions{gap:10px}
  .hero-content .button{min-height:42px}
  .benefits b{font-size:11px}
  .benefits small{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Cohesive photographic solution cards */
.card-photo{position:relative;background-color:#dce8f1;background-size:cover;background-position:center}
.card-photo:after{position:absolute;inset:0;pointer-events:none}
@media(min-width:1001px){
  .solution-grid article{min-height:252px}
  .card-photo{height:116px}
  .solution-grid h3{margin-top:18px}
  .partners,.customers,.journey,.testimonials{padding-top:19px}
  .partner-grid article{min-height:124px}
  .quote-grid blockquote{min-height:108px}
  .cta{margin-top:18px}
}

/* Production-optimized WebP sources */

/* Premium enterprise footer */
.sr-only{padding:0;margin:-1px;clip:rect(0,0,0,0);border:0}
.site-footer{position:relative;padding:37px 0 0;color:#fff}
.site-footer:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#447dff,transparent)}
.site-footer .footer-grid{grid-template-columns:1.45fr .85fr .75fr 1.1fr 1.25fr}
.footer-intro .brand{min-width:0}
.footer-intro .brand img{width:195px}
.footer-intro>p{margin:15px 0;line-height:1.65}
.site-footer .footer-grid>div:not(.brand){font-size:9px}
.site-footer .footer-grid>div>b{display:block;margin-bottom:13px}
.site-footer .footer-grid a{opacity:1;line-height:1.8}

.footer-contact a span{color:#6d9cff}
.footer-bottom{min-height:46px;display:flex;align-items:center;justify-content:space-between}
.footer-bottom nav{display:flex}
@media(max-width:1000px){
  .site-footer .footer-grid{grid-template-columns:1.35fr repeat(2,1fr)}
  .footer-intro{grid-row:span 2}
}
@media(max-width:700px){
  .site-footer{padding-top:30px}
  .footer-intro{grid-column:1/-1;grid-row:auto}
  .footer-bottom{padding-block:14px;gap:10px;align-items:flex-start;flex-direction:column}
  .footer-bottom nav{gap:15px}
}
@media(max-width:430px){
  .site-footer .footer-grid{grid-template-columns:1fr}
  .footer-intro{grid-column:auto}
  .footer-intro>p{max-width:none}
}

/* Refined closing sequence: journey, proof and conversion */
.journey{padding-top:28px}
.journey .section-title{margin-bottom:17px}
.timeline{padding-top:1px}
.timeline:before{top:27px;height:1px;background:linear-gradient(90deg,transparent 0,var(--blue) 5%,var(--blue) 95%,transparent)}
.timeline i{font-size:17px}
.timeline b{margin:10px 0 5px}
.timeline strong{min-height:27px}
.timeline p{max-width:145px;margin:6px auto 0;line-height:1.55}
.testimonials{padding-top:30px}
.testimonials .section-title{margin-bottom:19px}
.quote-grid blockquote{position:relative;min-height:166px;overflow:hidden}
.quote-grid blockquote:before{content:'“';position:absolute;right:18px;top:-14px;color:#edf3ff;font:800 76px/1 Georgia,serif}
.quote-brand{height:38px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.quote-brand img{display:block;max-width:112px;object-fit:contain}
.quote-grid blockquote>p{margin:16px 0 13px}
.quote-grid blockquote footer{padding:0;background:none;color:var(--ink)}
.quote-grid blockquote footer strong{margin:0}
.quote-grid blockquote footer small{margin-top:3px}
.cta-copy{position:relative;z-index:2}
.cta-label{font-weight:800}
.cta h2{letter-spacing:-.025em}
.cta p:not(.cta-label){line-height:1.5}
.cta-fleet{position:absolute;background:linear-gradient(90deg,#0638aa00,#0638aa33),url('../solution-fleet.webp') center 58%/cover no-repeat}
.cta .button.white{min-width:220px;min-height:47px;border-radius:var(--r-ctl)}
.cta .button.white span{font-size:17px}
@media(max-width:900px){
  .timeline{grid-template-columns:repeat(4,1fr);row-gap:26px}
  .timeline:before{display:none}
  .timeline article p{max-width:180px}
  .cta-fleet{left:48%;right:180px}
  .cta{padding-inline:30px}
}
@media(max-width:700px){
  .quote-grid blockquote{min-height:auto}
  .cta{align-items:flex-start}
  .cta-fleet{inset:0 0 0 40%;opacity:.15}
  .cta .button.white{min-width:190px}
}
@media(max-width:430px){
  .timeline article{padding-bottom:8px}
  .cta-fleet{display:none}
}

/* Asset paths relative to /assets/css */
.card-photo.van{background-image:url('../solution-delivery.webp')}
.card-photo.cold{background-image:url('../solution-cold.webp')}

/* Stable slider stacking and reusable enterprise carousels */
.hero-slides,.hero-slide{z-index:0}
.carousel-shell{position:relative}
.carousel-track{scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.solutions-carousel{overflow:hidden}
.solutions-carousel .solution-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:1px 1px 18px}
.solutions-carousel .solution-grid article{flex:0 0 calc((100% - 56px)/5);scroll-snap-align:start}
.carousel-nav{position:absolute;right:0;bottom:0;display:flex;align-items:center}
.carousel-nav button{border-radius:50%;cursor:pointer}
.carousel-nav button:hover{color:#fff;background:#0649db;border-color:#0649db;transform:translateY(-1px)}
.carousel-nav button:disabled{cursor:not-allowed}
.carousel-progress{width:72px;overflow:hidden}
.carousel-progress span{display:block;width:34%;height:100%;transition:transform .3s ease}
.customer-carousel{padding:0 42px 36px;overflow:hidden}
.customer-carousel .logo-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.customer-carousel .logo-row>span{flex:0 0 calc(100%/6);min-height:108px;scroll-snap-align:start}
.customer-carousel .logo-row img{max-width:88%;max-height:77px}
.customer-carousel .carousel-nav{right:42px}
.partner-grid article>img{height:52px;max-width:90%;margin-bottom:12px}
.partner-grid article{justify-content:flex-start}
.partner-grid article p{margin-top:8px}
@media(max-width:1000px){
  .solutions-carousel .solution-grid article{flex-basis:calc((100% - 28px)/3)}
  .customer-carousel .logo-row>span{flex-basis:25%}
}
@media(max-width:700px){
  .solutions-carousel .solution-grid article{flex-basis:calc((100% - 14px)/2)}
  .customer-carousel{padding-inline:0}
  .customer-carousel .logo-row>span{flex-basis:50%}
  .customer-carousel .carousel-nav{right:0}
}
@media(max-width:430px){
  .solutions-carousel .solution-grid article{flex-basis:88%}
  .customer-carousel .logo-row>span{flex-basis:75%}
}

/* Direct hero image sources prevent custom-property URL resolution failures */
@media(max-width:700px){
  .hero-slide.hero-highway,.hero-slide.hero-port,.hero-slide.hero-night-road{background-position:60% center}
  .hero-slide.hero-highway,.hero-slide.hero-port{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-highway.webp')}
}

/* Final layout stabilization */
.hero-slider{background:linear-gradient(90deg,rgba(247,250,255,.98),rgba(247,250,255,.45)),url('../hero-highway.webp') center 46%/cover no-repeat}
.hero-slides{pointer-events:none}
.hero-slide{background-size:cover;background-repeat:no-repeat;will-change:opacity,transform}
.hero-slide:not(.is-active){visibility:hidden}
.hero-slide.is-active{visibility:visible}
.solution-grid article,.partner-grid article,.quote-grid blockquote,.logo-row{contain:layout paint}
.solutions-carousel .solution-grid article{height:auto;min-width:0}
.solutions-carousel .solution-grid{grid-template-columns:none}
.customer-carousel .logo-row{grid-template-columns:none}
.section-title p:first-child{margin-bottom:4px}
.partners .section-title,.customers .section-title{margin-bottom:14px}
.partner-grid article>img{object-fit:contain}
.metrics,.partner-grid,.logo-row,.quote-grid,.cta,.site-footer{isolation:isolate}
.site-footer{overflow:hidden}
@media(max-width:1000px){
  .hero-content{height:calc(100% - 76px)}
}
@media(max-width:700px){
  .hero-content{height:calc(100% - 152px)}
  .site-header{max-width:calc(100% - 20px)}
  .solution-grid article{min-width:0}
}
@media(max-width:430px){
  .hero-content{height:calc(100% - 128px)}
  .hero h1{max-width:100%}
  .hero .lead{max-width:100%}
}

/* Interaction and accessibility polish */
.skip-link{position:fixed;z-index:1000;left:16px;top:12px;padding:10px 15px;background:#fff;color:#0649db;font-weight:800;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
.back-to-top{position:fixed;z-index:50;border-radius:50%;backdrop-filter:blur(10px);color:#fff;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.22s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
a,button{-webkit-tap-highlight-color:transparent}
.carousel-track{overscroll-behavior-inline:contain}
.carousel-nav button:focus-visible,.back-to-top:focus-visible{outline:3px solid rgba(79,137,255,.48);outline-offset:3px}
.solution-grid article a:after,.partner-grid article a:after{content:"";position:absolute;inset:-5px}
.solution-grid article a,.partner-grid article a{position:relative}
@media(max-width:700px){
  
  .site-header nav a{min-height:44px}
}

/* Footer location panel */
.locate-us{min-width:0}
.site-footer .footer-grid a.footer-map{display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));line-height:1.35}
.footer-map:hover{border-color:rgba(105,154,255,.55);background:rgba(255,255,255,.1)}
.map-pin{display:grid;place-items:center;flex:0 0 36px;color:#fff;font-size:20px}
.footer-map strong,.footer-map small{display:block}
.footer-map small{margin-top:3px}
.site-footer .footer-grid a.map-link{display:flex;align-items:center;justify-content:space-between;color:#7fa6ff;font-weight:800}
.site-footer .footer-grid a.map-link:hover{color:#fff}

/* Readable enterprise typography */
.lead,.solution-grid article>p,.partner-grid article>p,.timeline article>p,.quote-grid blockquote>p,.cta p:not(.cta-label),.footer-intro>p,.page-heading>p:not(.eyebrow),.feature-card>p,.inner-hero>div>p:last-child,.contact-panel>p:not(.eyebrow){font-size:12px;line-height:1.65}
.solution-grid article>p{height:auto;min-height:60px;color:#44516d}
.solution-grid h3{height:auto}
.solution-grid a,.partner-grid a{font-size:10px}
.partner-grid article{min-height:154px}
.partner-grid article>p{margin-bottom:12px}
.footer-intro>p{font-size:10px}
.site-footer .footer-grid a{font-size:10px}
@media(max-width:700px){
  .solution-grid article{min-height:315px}
  .solution-grid article>p{min-height:0}
  .partner-grid article{min-height:165px}
  .timeline article>p{max-width:210px}
}

/* Type scale balanced around 12px reading copy */
.hero .eyebrow{font-size:12px}
.section-title p{font-size:11px}

@media(max-width:1000px){
  .hero h1{font-size:42px}
  .section-title h2{font-size:24px}
  .solution-grid h3{font-size:13.5px}
}
@media(max-width:700px){
  .hero h1{font-size:37px}
  .hero .eyebrow{font-size:11px}
  .section-title h2{font-size:23px}
  .cta h2{font-size:21px}
}
@media(max-width:430px){
  .hero h1{font-size:32px}
  .section-title h2{font-size:21px}
  .solution-grid h3{font-size:14px}
}

/* Unified site-wide spacing and typography system */
:root{--space-1:6px;--space-2:10px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--content-reading:68ch;--card-radius:14px}
p{margin-top:0}
h1,h2,h3,h4{margin-top:0;text-wrap:balance}
main>section:not(.hero):not(.metrics):not(.platform):not(.cta){scroll-margin-top:84px}
.section{padding-top:var(--space-5)}
.section-title{margin-bottom:var(--space-4)}
.section-title p{margin-bottom:var(--space-1)}
.section-title h2{margin-bottom:0}
.actions{gap:var(--space-3)}
.solution-grid article>p{margin-top:0}
.metrics{padding-inline:var(--space-4)}
.partners,.customers,.journey,.testimonials{padding-top:var(--space-5)}
.partner-grid{gap:var(--space-3)}
.partner-grid article{padding:var(--space-3) var(--space-4);border-radius:var(--card-radius)}
.partner-grid article>p{max-width:34ch}
.journey .section-title,.testimonials .section-title{margin-bottom:var(--space-4)}
.cta-copy>p{max-width:56ch}
@media(max-width:1000px){
  :root{--space-7:52px}
  .section{padding-top:28px}
  .site-footer .footer-grid{gap:var(--space-4)}
}
@media(max-width:700px){
  :root{--space-4:20px;--space-5:28px;--space-6:38px}
  .wrap{width:min(100% - 32px,var(--page-width))}
  .section{padding-top:var(--space-5)}
  .section-title{margin-bottom:var(--space-3)}
  .actions{gap:var(--space-2)}
  .quote-grid blockquote{padding:var(--space-4)}
  .cta{padding:var(--space-5) var(--space-4)}
  .site-footer .footer-grid{gap:var(--space-5) var(--space-4)}
}
@media(max-width:430px){
  :root{--space-3:14px;--space-4:18px;--space-5:24px}
  .wrap{width:min(100% - 24px,var(--page-width))}
  .actions{align-items:stretch;width:100%}
  .actions .button{width:100%}
  .cta{padding:var(--space-5) var(--space-4)}
}

/* Professional site-wide Google typography */
:root{--font-primary:'Plus Jakarta Sans',Inter,'Segoe UI',Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--font-primary)}

/* Restrained premium visual finish */
:root{--surface:#fff;--surface-soft:#f7faff;--surface-blue:#eef4ff;--border-premium:rgba(25,67,137,.14);--shadow-sm:0 6px 18px rgba(6,31,78,.06);--shadow-md:0 16px 40px rgba(6,31,78,.09);--shadow-lg:0 26px 65px rgba(3,27,78,.14)}
.button{position:relative;overflow:hidden}
.button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.2) 48%,transparent 78%);transform:translateX(-120%);transition:transform .55s ease}
.button:hover:before{transform:translateX(120%)}
.section-title p{letter-spacing:.085em}
.section-title h2{color:#06143d}
.solution-grid article,.partner-grid article,.quote-grid blockquote{border:1px solid var(--border-premium);background:linear-gradient(180deg,#fff,#fcfdff);box-shadow:var(--shadow-sm)}
.solution-grid article:hover,.partner-grid article:hover,.quote-grid blockquote:hover{box-shadow:var(--shadow-md)}
.solution-grid article:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.card-photo:before{position:absolute;inset:0}
.partner-grid .dark-logo{background:radial-gradient(circle at 50% 0,rgba(26,72,160,.35),transparent 50%),linear-gradient(145deg,#071535,#02081a)}
.quote-grid blockquote:after{content:"";position:absolute;inset:0 0 auto}
.feature-card,.contact-panel,.contact-form{border-color:var(--border-premium);box-shadow:var(--shadow-sm)}
@media(prefers-reduced-motion:reduce){
  .button:before{display:none}
}

/* High-end micro polish */
.site-header nav a:before{content:"";position:absolute;opacity:0;transition:opacity .2s}
.site-header nav a:hover:before{opacity:1}
.button>*{position:relative;z-index:1}
.eyebrow,.section-title>p{display:inline-flex;align-items:center}
.section-title>p:before{content:"";border-radius:4px}
.section-title{text-align:center}
.section-title>p{justify-content:center}
.solution-grid article{overflow:hidden}
.partner-grid article{overflow:hidden}
.partner-grid article:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#4a83f7,transparent);opacity:0;transition:opacity .25s}
.partner-grid article:hover:before{opacity:1}
.partner-grid article{position:relative}
.partner-grid article>img{filter:drop-shadow(0 4px 7px rgba(7,32,77,.08))}
.logo-row>span{transition:background .25s}
.logo-row>span:hover{background:#f5f8ff}
.timeline:after{content:"";position:absolute;left:0;right:0;z-index:-1}
.quote-brand img{filter:drop-shadow(0 3px 7px rgba(7,32,77,.08))}
.footer-bottom{letter-spacing:.015em}
.footer-map{box-shadow:inset 0 1px rgba(255,255,255,.06)}
.crafted-by{transition:color .2s ease}
.crafted-by:hover{color:#fff}
.about-logo{display:block;height:auto;margin:0 0 24px;object-fit:contain}
@media(max-width:700px){
  .about-logo{width:min(200px,70%);margin-bottom:20px}
}

/* Final usability pass: readable supporting text, calmer spacing and clearer interaction states. */
.solution-grid article>p,.partner-grid article>p,.why-grid p,.about-panel p:not(.eyebrow),.quote-grid blockquote>p{font-size:12px;line-height:1.7}
.partners .partner-grid article>a{margin-top:auto}
.home-story>article,.solution-grid article,.partner-grid article,.quote-grid blockquote{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.text-link:focus-visible,.map-link:focus-visible,.footer-bottom a:focus-visible{outline:3px solid rgba(91,148,255,.65);outline-offset:4px;border-radius:4px}
@media(max-width:1000px){
  .partners .partner-grid article{min-height:170px}
}
@media(max-width:700px){
  .partners .partner-grid article{min-height:165px}
}
.partners .partner-grid .dark-logo{background:linear-gradient(180deg,#fff,#fcfdff);color:var(--ink);border-color:var(--border-premium)}
.partners .partner-grid .dark-logo a{color:#0754dd}

/* Geometrically consistent circular controls and badges. */
.carousel-nav button,.hero-arrows button,.back-to-top{box-sizing:border-box;display:grid;place-items:center;aspect-ratio:1;padding:0;border-radius:50%;font:700 16px/1 'Plus Jakarta Sans',sans-serif}
.carousel-nav button:disabled{box-shadow:none}
.benefits i,.metrics i,.timeline i{box-sizing:border-box;flex:0 0 auto;aspect-ratio:1;border-radius:50%;line-height:1}
.benefits i{width:44px;height:44px}
.hero-dots{align-items:center;min-height:44px}
.hero-dots button.is-active{aspect-ratio:auto}
.carousel-progress{border-radius:var(--r-pill)}
.carousel-progress span{border-radius:var(--r-pill)}
@media(max-width:700px){
  
  .benefits i{width:40px;height:40px}
  .metrics i{width:40px;height:40px}
}

/* Why Choose Us: stronger hierarchy and outcome-led scanning. */
.why-heading>div{max-width:590px}
.why-summary{max-width:60ch;margin:12px 0 0;font-size:12px;line-height:1.7}
.why-link{display:inline-flex;align-items:center;flex:0 0 auto;font-weight:800;transition:.2s}
.why-link span{font-size:15px}
.why-grid>div{position:relative;display:flex;flex-direction:column;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.why-grid>div:hover{z-index:1}
.why-grid b{display:grid;place-items:center}
.why-grid p{flex:1}
.why-grid>div>span{display:inline-flex;align-items:center;width:max-content;border-radius:var(--r-pill);font-weight:800;text-transform:uppercase}
@media(max-width:700px){
  .why-heading{margin-bottom:20px}
  .why-link{margin-top:16px}
  .why-grid{gap:10px}
  .why-grid>div{min-height:0}
  .why-grid>div:hover{transform:none}
}
@media(max-width:1000px){
  .card-photo{height:140px}
  .site-header nav a:before{inset:4px}
}
@media(max-width:700px){
  .site-header{border-bottom:0}
  .solution-grid article:hover,.quote-grid blockquote:hover{transform:none}
}

/* Four-up solutions carousel: generous card width and consistent responsive rhythm. */

/* Homepage company story */
.home-story{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.55fr)}
.home-story>article{position:relative;overflow:hidden}
.about-panel{display:flex;flex-direction:column;justify-content:center;color:#fff}
.about-panel h2,.why-panel h2{letter-spacing:-.04em}
.about-panel p:not(.eyebrow){font-size:12px;line-height:1.75}
.text-link{display:inline-flex;align-items:center;width:max-content;font-size:12px;font-weight:800}
.text-link span{transition:transform .2s}
.text-link:hover span{transform:translateX(4px)}
.why-heading{display:flex;align-items:end;justify-content:space-between}
.why-heading h2{max-width:560px;margin:6px 0 0}
.why-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce6f5;border-radius:var(--r-ctl);overflow:hidden;background:#fff}
.why-grid p{font-size:12px;line-height:1.6;color:#44516d;margin:0}
.partners .partner-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none}
.partners .partner-grid article{padding-inline:14px}
@media(max-width:1000px){
  .home-story{grid-template-columns:1fr}
  .about-panel{padding:32px}
  .partners .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .home-story{margin-top:26px}
  .about-panel,.why-panel{padding:24px}
  .why-heading{display:block}
  .why-grid{grid-template-columns:1fr}
  .partners .partner-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .about-panel,.why-panel{padding:21px}
  .why-grid>div{min-height:0;padding:18px}
  .partners .partner-grid{grid-template-columns:1fr}
}

/* Usability, responsiveness and rendering-quality guarantees */
.site-header nav a,.button,.carousel-nav button,.hero-arrows button,.back-to-top{min-height:44px}
.solution-grid article>p,.partner-grid article>p,.quote-grid blockquote>p{color:#33425f}
.card-photo{height:auto}
.logo-row img,.partner-grid img{height:auto}
.carousel-track{touch-action:pan-x}
.carousel-nav button[disabled]{pointer-events:none}
.carousel-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1000px){
  .site-header nav a{min-height:44px}
  .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  body{font-size:14px}
  .hero{min-height:620px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics>div:last-child{grid-column:1/-1}
  .partner-grid{grid-template-columns:1fr 1fr}
  .quote-grid{grid-template-columns:1fr}
  .site-footer .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .metrics,.partner-grid,.site-footer .footer-grid{grid-template-columns:1fr}
  .metrics>div:last-child{grid-column:auto}
  .site-footer .footer-grid>div{min-width:0}
}

/* ═════ from page.css ═════ */
.page-heading p:not(.eyebrow),.feature-card p,.inner-hero p:last-child,.contact-panel p:not(.eyebrow){line-height:1.7}
.contact-panel h2,.map-heading h2{font-size:clamp(25px,2.5vw,34px);line-height:1.16}
@media(max-width:800px){
}
@media(max-width:520px){
  .feature-card h3{font-size:18px}
}
.page-heading h2{margin-bottom:14px}
.feature-card p{margin-bottom:14px}
@media(max-width:800px){
  .split{gap:36px}
  .feature-cards{gap:18px}
}
@media(max-width:520px){
  .inner-hero{padding:110px 0 48px}
  .page-section{padding:44px 0}
  .feature-card,.contact-panel,.contact-form{padding:22px}
}
.form-status{color:#0754dd}
.inner-header{position:fixed;backdrop-filter:blur(16px)}
.inner-hero .eyebrow{margin-bottom:12px}
.inner-hero h1{max-width:780px;margin:0}
.inner-hero p:last-child{margin:20px 0 0;font-size:16px}
.page-heading{max-width:690px}
.page-heading h2{margin:6px 0 12px}
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr)}
.feature-card{background:#fff;transition:.25s}
.feature-card i{display:grid;place-items:center;font-style:normal}
.feature-card a{display:inline-flex;margin-top:8px;color:#0649db;font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.check-list{list-style:none;padding:0}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px}
.contact-panel,.contact-form{background:#fff}
.contact-panel a{margin:17px 0}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{font-weight:800}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;font:inherit}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form .wide{grid-column:1/-1}
.page-cta{color:#fff}
.page-cta .wrap{display:flex;align-items:center;justify-content:space-between}
.page-cta h2{margin:0 0 6px}
.page-cta p{margin:0;opacity:.78}
@media(max-width:800px){
  .inner-hero{padding:120px 0 55px}
  .feature-cards{grid-template-columns:1fr 1fr}
  .split,.contact-grid{grid-template-columns:1fr;gap:30px}
  .page-section{padding:52px 0}
  .page-cta .wrap{align-items:flex-start;flex-direction:column;gap:22px}
}
@media(max-width:520px){
  .feature-cards{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .contact-form .wide{grid-column:auto}
}

/* Shared readability and interaction refinements. */
.site-footer .footer-grid a,.site-footer .footer-grid p{font-size:12px;line-height:1.65}

.crafted-by{color:#aebbd5}
.crafted-by strong{color:#fff;font-weight:800;letter-spacing:.1em}
.map-link:focus-visible,.footer-bottom a:focus-visible{outline:3px solid rgba(91,148,255,.65);outline-offset:4px;border-radius:4px}
@media(max-width:700px){
  .site-header nav.open{max-height:calc(100vh - 92px);overflow-y:auto}
  .footer-bottom{font-size:11px}
  .footer-bottom nav{flex-wrap:wrap}
}

/* ═════ from contact.css ═════ */
.map-section{margin-top:34px}
.map-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.map-heading h2{margin:4px 0 0;letter-spacing:-.04em}
.map-section iframe{display:block;width:100%;height:390px;border:0}
@media(max-width:700px){
  .map-heading{align-items:flex-start;flex-direction:column}
  .map-section iframe{height:320px}
}

/* ═════ from premium.css ═════ */

/* ── Icon tokens: stroke SVGs applied as CSS masks (colour follows currentColor) ── */
:root{--ic-crosshair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.4'/%3E%3Cpath d='M12 1.8v3.2M12 19v3.2M1.8 12H5M19 12h3.2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");--ic-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 18.4a9 9 0 1 1 16.8 0'/%3E%3Cpath d='m12 17 4.4-6.2'/%3E%3Ccircle cx='12' cy='17.4' r='1.5'/%3E%3C/svg%3E");--ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.4 4.6 5.4v5.9c0 4.5 3 8.3 7.4 9.9 4.4-1.6 7.4-5.4 7.4-9.9V5.4z'/%3E%3Cpath d='m8.9 11.9 2.2 2.2 4.2-4.2'/%3E%3C/svg%3E");--ic-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.4h18'/%3E%3Cpath d='M6.6 20.4v-5.6M12 20.4V5.6M17.4 20.4v-9'/%3E%3C/svg%3E");--ic-award:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.9' r='5.4'/%3E%3Cpath d='m8.3 13.4-1.5 7.4L12 18l5.2 2.8-1.5-7.4'/%3E%3C/svg%3E");--ic-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 6.6h10.6v9.2H2.2z'/%3E%3Cpath d='M12.8 10h3.7l3.3 3.2v2.6h-7z'/%3E%3Ccircle cx='6.6' cy='18' r='1.9'/%3E%3Ccircle cx='16.4' cy='18' r='1.9'/%3E%3C/svg%3E");--ic-headset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 14.2v-2.1a7.6 7.6 0 0 1 15.2 0v2.1'/%3E%3Cpath d='M4.4 13.6h2.5v5.2H5.7a1.3 1.3 0 0 1-1.3-1.3z'/%3E%3Cpath d='M19.6 13.6h-2.5v5.2h1.2a1.3 1.3 0 0 0 1.3-1.3z'/%3E%3Cpath d='M17.1 18.8v.5a2.4 2.4 0 0 1-2.4 2.4h-2.2'/%3E%3C/svg%3E");--ic-smile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M8.3 13.9a4.6 4.6 0 0 0 7.4 0'/%3E%3Cpath d='M9.2 9.4h.02M14.8 9.4h.02'/%3E%3C/svg%3E");--ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 21.4V3.4'/%3E%3Cpath d='M5.2 4.4h11.4l-1.9 3.6 1.9 3.6H5.2z'/%3E%3C/svg%3E");--ic-cpu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.4' y='6.4' width='11.2' height='11.2' rx='2.2'/%3E%3Cpath d='M9.8 2.8v3.6M14.2 2.8v3.6M9.8 17.6v3.6M14.2 17.6v3.6M2.8 9.8h3.6M2.8 14.2h3.6M17.6 9.8h3.6M17.6 14.2h3.6'/%3E%3C/svg%3E");--ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.4 14.6 5.2-5.2'/%3E%3Cpath d='m10.4 6.6 1.7-1.7a4.1 4.1 0 0 1 5.8 5.8l-1.7 1.7'/%3E%3Cpath d='m13.6 17.4-1.7 1.7a4.1 4.1 0 0 1-5.8-5.8l1.7-1.7'/%3E%3C/svg%3E");--ic-trending:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16.4 5.6-5.6 3.5 3.5L21 5.8'/%3E%3Cpath d='M15.3 5.8H21v5.7'/%3E%3C/svg%3E");--ic-activity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12h4.2l2.6-7.2 5.2 14.4 2.6-7.2h4.2'/%3E%3C/svg%3E");--ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.6s7-6.3 7-11.1a7 7 0 1 0-14 0c0 4.8 7 11.1 7 11.1z'/%3E%3Ccircle cx='12' cy='10.3' r='2.6'/%3E%3C/svg%3E");--ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.1 3.2h3.1l1.6 4-2.1 1.5a12.8 12.8 0 0 0 6.5 6.5l1.5-2.1 4 1.6v3.1a2 2 0 0 1-2.2 2A17.7 17.7 0 0 1 4.1 5.4a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");--ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='4.9' width='18.4' height='14.2' rx='2.6'/%3E%3Cpath d='m3.7 6.7 7 5.2a2.2 2.2 0 0 0 2.6 0l7-5.2'/%3E%3C/svg%3E");--ic-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 12h15'/%3E%3Cpath d='m12.9 5.8 6.2 6.2-6.2 6.2'/%3E%3C/svg%3E");--ic-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.9V4.1'/%3E%3Cpath d='m5.9 10.2 6.1-6.1 6.1 6.1'/%3E%3C/svg%3E");--ic-chevl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.6 4.8-7.2 7.2 7.2 7.2'/%3E%3C/svg%3E");--ic-chevr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.4 4.8 7.2 7.2-7.2 7.2'/%3E%3C/svg%3E");--ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.6 12.4 4.9 4.9 9.9-10.6'/%3E%3C/svg%3E");--ic-quote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 5.6C6 7.1 4 10 4 13.4c0 3 1.8 5 4.3 5 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.4-3.5-.4 0-.8 0-1.1.2.4-1.9 1.7-3.4 3.6-4.4zM20.2 5.6c-3.4 1.5-5.4 4.4-5.4 7.8 0 3 1.8 5 4.3 5 2.2 0 3.8-1.6 3.8-3.7 0-2-1.4-3.5-3.4-3.5-.4 0-.8 0-1.1.2.4-1.9 1.7-3.4 3.6-4.4z'/%3E%3C/svg%3E");--ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2.6 2.94 5.96 6.58.96-4.76 4.64 1.12 6.55L12 17.62l-5.88 3.09 1.12-6.55L2.48 9.52l6.58-.96z'/%3E%3C/svg%3E");--ic-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.4' r='3.6'/%3E%3Cpath d='M2.9 20.2a6.4 6.4 0 0 1 12.2 0'/%3E%3Cpath d='M16.4 5.2a3.4 3.4 0 0 1 0 6.5'/%3E%3Cpath d='M17.6 13.6a6 6 0 0 1 3.6 5.4'/%3E%3C/svg%3E");--ic-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 19.6C3 13.4 6.6 6.2 19.8 4.6c1.1 8.4-2.8 15.4-11 15.4a6 6 0 0 1-4.4-1.8z'/%3E%3Cpath d='M4.6 20.4C7 15.6 10.8 12 15.6 9.8'/%3E%3C/svg%3E");--ic-snowflake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6v18.8M4 7.2l16 9.6M20 7.2 4 16.8'/%3E%3Cpath d='m9.2 4.6 2.8 2.6 2.8-2.6M9.2 19.4l2.8-2.6 2.8 2.6'/%3E%3C/svg%3E");--ic-fuel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21.4V4.6a1.6 1.6 0 0 1 1.6-1.6h5.6a1.6 1.6 0 0 1 1.6 1.6v16.8'/%3E%3Cpath d='M2.8 21.4h11.2'/%3E%3Cpath d='M6.4 6.6h4'/%3E%3Cpath d='M13.4 9.4h2.8a1.8 1.8 0 0 1 1.8 1.8v5.4a1.6 1.6 0 0 0 3.2 0V8.6l-2.6-2.6'/%3E%3C/svg%3E");--ic-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 21.4V6.6L12 3.2l8.6 3.4v14.8'/%3E%3Cpath d='M2.4 21.4h19.2'/%3E%3Cpath d='M8.6 21.4v-5.2h6.8v5.2'/%3E%3Cpath d='M9.2 10.4h1.2M13.6 10.4h1.2'/%3E%3C/svg%3E");--ic-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M19.6 14.4a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.84 2.84l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.55v.18a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.55 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.84-2.84l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.55-1.03H2.9a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.54 8.4a1.7 1.7 0 0 0-.34-1.87l-.06-.06A2 2 0 1 1 6.98 3.63l.06.06a1.7 1.7 0 0 0 1.87.34h.08A1.7 1.7 0 0 0 10 2.48V2.3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.03 1.55 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.84 2.84l-.06.06a1.7 1.7 0 0 0-.34 1.87v.08c.26.63.87 1.04 1.55 1.05h.18a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.55 1.03z'/%3E%3C/svg%3E");--ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 2.8H6.8a1.8 1.8 0 0 0-1.8 1.8v14.8a1.8 1.8 0 0 0 1.8 1.8h10.4a1.8 1.8 0 0 0 1.8-1.8V8.2z'/%3E%3Cpath d='M13.6 2.8v5.4h5.4'/%3E%3Cpath d='M8.6 13.2h6.8M8.6 16.6h4.6'/%3E%3C/svg%3E");--ic-clipboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='4.6' width='13.6' height='16.6' rx='2'/%3E%3Cpath d='M9.2 4.6a2.8 2.8 0 0 1 5.6 0'/%3E%3Cpath d='m9.4 13.4 2 2 3.6-4'/%3E%3C/svg%3E");--ic-iso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 3.4v17.2M3.4 12h17.2'/%3E%3Cpath d='M12 3.4c2.6 2.4 4 5.3 4 8.6s-1.4 6.2-4 8.6c-2.6-2.4-4-5.3-4-8.6s1.4-6.2 4-8.6z'/%3E%3C/svg%3E");--ic-facebook:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.25-1.5 1.55-1.5h1.65V4.12a22 22 0 0 0-2.4-.12c-2.38 0-4 1.45-4 4.12v2.28H7.6v3.1h2.7v8z'/%3E%3C/svg%3E");--ic-linkedin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.94 5.5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0zM3.4 8.9h3.2V21H3.4zM9.3 8.9h3.06v1.65h.04c.43-.8 1.47-1.65 3.02-1.65 3.23 0 3.83 2.1 3.83 4.84V21h-3.2v-5.9c0-1.4-.03-3.22-1.96-3.22-1.97 0-2.27 1.53-2.27 3.11V21H9.3z'/%3E%3C/svg%3E")}

/* ════════════════════════════════════════════════════════════════════════
   KAIN GLOBE — PREMIUM LAYER
   Final stylesheet. Loads after styles.css + enhancements.css and re-tunes
   the design system: type scale, vertical rhythm, colour hierarchy,
   elevation, iconography and micro-interaction.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Foundations ──────────────────────────────────────────────────── */
:root{--ink:#0A1630;--ink-soft:#233250;--brand:#0B4FE0;--brand-hi:#2A6BF5;--brand-deep:#072F9E;--brand-abyss:#04123C;--brand-wash:#EEF4FF;--paper:#FFFFFF;--mist:#F5F8FD;--hair:rgba(10,35,85,.085);--hair-strong:rgba(10,35,85,.15);--hair-light:rgba(255,255,255,.13);--e1:0 1px 2px rgba(10,30,70,.05), 0 2px 6px rgba(10,30,70,.04);--e2:0 2px 4px rgba(10,30,70,.04), 0 14px 32px rgba(10,30,70,.07);--e3:0 4px 10px rgba(10,30,70,.05), 0 30px 64px rgba(10,30,70,.12);--e-brand:0 10px 26px rgba(11,79,224,.24);--r-card:18px;--r-ctl:12px;--r-pill:999px;--r-tile:14px;--r-panel:24px;--sec-y:clamp(60px,6.8vw,108px);--gap:clamp(16px,1.6vw,24px);--ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.4,0,.2,1);--page-width:1240px}
html{scroll-padding-top:112px}
body{background:linear-gradient(180deg,#fff 0,#fbfcff 46%,#f6f9fe 100%);color:var(--copy);font-size:clamp(15px,.55vw + 13.2px,16.5px);line-height:1.72;letter-spacing:-.004em;text-rendering:optimizeLegibility}
::selection{background:var(--brand);color:#fff}

/* ── 2. Typography ───────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{color:var(--ink);font-weight:800;letter-spacing:-.032em;text-wrap:balance}
h3,h4{letter-spacing:-.02em}
strong,b{color:var(--ink)}
.hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.05;letter-spacing:-.038em;margin-bottom:22px;max-width:min(100%,700px)}
.hero .lead{font-size:clamp(15px,.9vw + 9px,18px);line-height:1.65;max-width:52ch;color:var(--ink-soft)}
.section-title h2{font-size:clamp(27px,2.9vw,40px);line-height:1.14;max-width:20ch;margin-inline:auto}
.about-panel h2,.why-panel h2{font-size:clamp(25px,2.5vw,34px);line-height:1.16;margin:12px 0 18px}
.cta h2{font-size:clamp(24px,2.4vw,34px);line-height:1.14}


/* Eyebrow — hairline rule + tracked label */
.eyebrow,.section-title>p{font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);gap:10px}
.section-title>p:before{width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--brand))}

/* Supporting copy — lifted from 12px to a readable 14.5px */
.solution-grid article>p,.partner-grid article>p,.why-grid p,.about-panel p:not(.eyebrow),.quote-grid blockquote>p,.timeline article>p,.why-summary,.cta p:not(.cta-label),.footer-intro>p,.site-footer .footer-grid a,.site-footer .footer-grid p{font-size:14.5px;line-height:1.7}
.solution-grid article>p,.partner-grid article>p,.why-grid p{color:var(--copy)}
.timeline article>p{font-size:14.5px;line-height:1.65;max-width:22ch}
.solution-grid h3{font-size:17px;line-height:1.3;min-height:0;color:var(--ink)}
.why-grid h3{font-size:17px;margin:14px 0 8px}

.solution-grid a,.partner-grid a,.solution-grid article a,.partner-grid article a{font-size:14px;font-weight:800;letter-spacing:-.005em}
.site-footer .footer-grid>div>b{font-size:12px;letter-spacing:.14em}
.footer-map strong{font-size:15px}
.footer-map small{font-size:12.5px}
.footer-bottom{font-size:12.5px}
.quote-grid blockquote>p{font-size:15.5px;line-height:1.68;min-height:0}
.quote-grid blockquote footer strong{font-size:15px}

.cta p:not(.cta-label){font-size:15.5px}
.metrics b{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:1.05}
.metrics span{line-height:1.4}
.benefits b{font-size:14.5px;letter-spacing:-.015em}
.benefits small{font-size:12.5px;line-height:1.35}
.timeline b{font-size:14px;letter-spacing:.01em}
.timeline strong{font-size:14px;line-height:1.35}
.button{font-size:15px;font-weight:700;letter-spacing:-.005em}
.header-cta{font-size:14px}

/* ── 3. Icon system — Unicode dingbats replaced with masked stroke SVGs ─ */
.benefits i,.metrics i,.timeline i,.footer-contact a>span,.map-pin,.back-to-top,.hero-arrows button,.carousel-nav button,.button>span,.text-link>span,.why-link>span,.map-link>span,.solution-grid article>a>span,.partner-grid article>a>span{font-size:0 !important;line-height:0}
.benefits i:before,.metrics i:before,.timeline i:before,.footer-contact a>span:before,.map-pin:before,.back-to-top:before,.hero-arrows button:before,.carousel-nav button:before,.button>span:before,.text-link>span:before,.why-link>span:before,.map-link>span:before,.solution-grid article>a>span:before,.partner-grid article>a>span:before{content:"";display:block;width:var(--is,20px);height:var(--is,20px);background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:transform .3s var(--ease)}

/* Hero benefit strip */
.benefits>div:nth-child(1) i{--ic:var(--ic-crosshair)}
.benefits>div:nth-child(2) i{--ic:var(--ic-gauge)}
.benefits>div:nth-child(3) i{--ic:var(--ic-shield)}
.benefits>div:nth-child(4) i{--ic:var(--ic-chart)}
.benefits i{--is:22px}

/* Proof metrics — the 5th cell keeps its "ISO" wordmark */
.metrics>div:nth-child(1) i{--ic:var(--ic-award)}
.metrics>div:nth-child(2) i{--ic:var(--ic-truck)}
.metrics>div:nth-child(3) i{--ic:var(--ic-headset)}
.metrics>div:nth-child(4) i{--ic:var(--ic-smile)}
.metrics i{--is:21px}
.metrics>div:nth-child(5) i{line-height:1;letter-spacing:.06em}

/* Journey — the 6th milestone keeps its "ISO" wordmark */
.timeline i{--is:23px}

/* Footer contact + map */
.footer-contact a:nth-of-type(2)>span{--ic:var(--ic-phone)}
.footer-contact a:nth-of-type(3)>span{--ic:var(--ic-mail)}
.footer-contact a>span{--is:17px}
.map-pin{--ic:var(--ic-pin);--is:19px}

/* Directional controls */
.button>span,.text-link>span,.why-link>span,.map-link>span,.solution-grid article>a>span,.partner-grid article>a>span{--ic:var(--ic-right);--is:17px}
.solution-grid article>a>span,.partner-grid article>a>span{--is:15px}
.back-to-top{--ic:var(--ic-up);--is:18px}
.hero-prev,.carousel-nav [data-prev]{--ic:var(--ic-chevl);--is:17px}
.hero-next,.carousel-nav [data-next]{--ic:var(--ic-chevr);--is:17px}

/* Arrows nudge on hover */
a:hover>span:before,.button:hover>span:before{transform:translateX(3px)}
.hero-arrows button:hover:before,.carousel-nav button:not(:disabled):hover:before{transform:none}

/* ── 4. Header ───────────────────────────────────────────────────────── */
.site-header{width:min(var(--page-width),calc(100% - 56px));height:94px;gap:24px;padding-inline:8px;border-bottom:0;border-radius:0 0 20px 20px;transition:height .3s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease),backdrop-filter .3s var(--ease),padding .3s var(--ease)}
.site-header.is-scrolled{height:74px;padding-inline:18px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);border-top:0;box-shadow:0 1px 0 var(--hair),0 20px 44px rgba(6,28,74,.10);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
.brand img{width:196px}
.site-header.is-scrolled .brand img{width:168px}
.site-header .brand img{filter:none}
.site-header nav{gap:2px}
.site-header nav a{height:auto;min-height:42px;align-self:center;padding:9px 15px;border-radius:var(--r-pill);color:var(--ink-soft);font-size:14px;font-weight:600;letter-spacing:-.012em;transition:color .2s var(--ease),background-color .2s var(--ease)}
.site-header nav a:before{inset:0;border-radius:var(--r-pill);background:rgba(11,79,224,.07)}
.site-header nav a:hover{color:var(--brand)}
.site-header nav a.active:after,.site-header nav a[aria-current]:after{display:none}
.header-cta{padding:12px 22px;min-height:46px}

/* ── 5. Hero ─────────────────────────────────────────────────────────── */

/* The hero content was absolutely positioned, which capped the section at a
   fixed height. Returning it to flow lets the hero size to its own type. */
.hero,.hero-slider{height:auto;min-height:clamp(640px,88vh,860px);display:flex;flex-direction:column;justify-content:center}
.hero-content{position:relative;left:auto;top:auto;transform:none;height:auto;padding-top:clamp(124px,14vh,164px);padding-bottom:clamp(174px,20vh,214px)}
.hero .eyebrow{margin-bottom:18px}
.hero-content .actions{margin-top:34px}

/* Deeper, cooler scrim so display type sits cleanly off the photograph */
.hero-slide.hero-highway{background-image:linear-gradient(99deg,rgba(246,249,255,.985) 0%,rgba(246,249,255,.94) 30%,rgba(243,247,255,.56) 52%,rgba(240,246,255,.05) 76%),url('../hero-highway.webp')}
.hero-slider{background-image:linear-gradient(99deg,rgba(246,249,255,.985),rgba(246,249,255,.45)),url('../hero-highway.webp')}

/* Benefit strip — deep navy glass shelf anchored to the hero */
.hero-slider>.benefits{height:auto;min-height:106px;align-items:center;padding:16px 12px;border:1px solid rgba(255,255,255,.10);border-bottom:0;border-radius:22px 22px 0 0;background:linear-gradient(100deg,rgba(6,22,60,.965),rgba(3,15,45,.94));box-shadow:0 -14px 44px rgba(2,14,44,.20);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.hero-slider>.benefits>div{gap:16px;padding-inline:clamp(14px,1.8vw,28px);border-right:1px solid rgba(255,255,255,.10)}
.hero-slider>.benefits>div:last-child{border-right:0}
.hero-slider>.benefits i{width:46px;height:46px;aspect-ratio:auto;border:0;border-radius:var(--r-tile);background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:#9EC1FF}
.benefits b{color:#fff}

/* Slider controls */
.hero-controls{bottom:calc(106px + 30px);gap:20px}
.hero-dots button{flex-basis:9px}
.hero-dots button:hover{background:rgba(10,32,84,.42)}
.hero-dots button.is-active{background:var(--brand)}
.hero-arrows{gap:10px}
.hero-arrows button{border:1px solid rgba(10,35,85,.12);background:rgba(255,255,255,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);box-shadow:var(--e1)}
.hero-arrows button:hover{background:#fff;color:var(--brand);box-shadow:var(--e2)}

/* ── 6. Buttons & links ──────────────────────────────────────────────── */
.button{gap:10px;min-height:52px;padding:14px 26px;border-radius:var(--r-ctl);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),var(--e-brand);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.button:before{display:none}
.button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 38px rgba(11,79,224,.30)}
.button:active{transform:translateY(0)}
.button.ghost{background:rgba(255,255,255,.94);color:var(--brand);border:1px solid var(--hair-strong);box-shadow:var(--e1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.button.ghost:hover{border-color:rgba(11,79,224,.35);box-shadow:var(--e2)}
.button.white{background:#fff;color:var(--brand-deep);border-color:#fff;box-shadow:0 14px 34px rgba(0,12,45,.22)}
.button.white:hover{box-shadow:0 20px 44px rgba(0,12,45,.28)}
.text-link,.why-link{font-size:14px}
.solution-grid article>a,.partner-grid article>a{gap:8px;color:var(--brand);transition:color .2s var(--ease),gap .25s var(--ease)}
.solution-grid article>a:hover,.partner-grid article>a:hover{color:var(--brand-deep);gap:11px}

/* Unified focus treatment */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.site-header nav a:focus-visible,.button:focus-visible,.solution-grid a:focus-visible,.partner-grid a:focus-visible,.hero-controls button:focus-visible,.carousel-nav button:focus-visible,.back-to-top:focus-visible,.text-link:focus-visible,.map-link:focus-visible,.footer-bottom a:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px;border-radius:var(--r-ctl)}

/* ── 7. Section rhythm ───────────────────────────────────────────────── */
.section,.partners,.customers,.journey,.testimonials{padding-top:var(--sec-y)}
.section-title,.partners .section-title,.customers .section-title,.journey .section-title,.testimonials .section-title{margin-bottom:clamp(30px,3.2vw,50px)}
.section-title>p{margin-bottom:14px}
.section-title{max-width:800px}
.home-story{margin-top:var(--sec-y);margin-bottom:0;gap:20px}
.metrics{margin-top:clamp(28px,3vw,46px)}
.cta{margin-top:var(--sec-y)}

/* ── 8. Solution cards ───────────────────────────────────────────────── */
.solutions-carousel{padding-bottom:clamp(52px,5vw,72px)}
.solutions-carousel .solution-grid{gap:20px}
@media(min-width:1001px){
  .solutions-carousel .solution-grid article{flex-basis:calc((100% - 60px)/4)}
}
.solution-grid article{border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1);min-height:0;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.solution-grid article:hover{transform:translateY(-7px);box-shadow:var(--e3);border-color:rgba(11,79,224,.20)}
.solution-grid article:after{box-shadow:none}
.card-photo{aspect-ratio:3/2}

/* Brand-tinted overlay unifies seven unrelated stock photographs */
.card-photo:after{z-index:2}
.solution-grid h3,.solution-grid article>p,.solution-grid article>a{margin-left:24px;margin-right:24px}
.solution-grid h3{margin-top:24px;margin-bottom:10px}
.solution-grid article>p{margin-bottom:18px}
.solution-grid article>a{margin-bottom:24px}

/* Carousel controls */
.carousel-nav{gap:14px}
.carousel-nav button{border:1px solid var(--hair-strong);background:#fff;color:var(--ink);box-shadow:var(--e1);transition:.25s var(--ease)}
.carousel-nav button:not(:disabled):hover{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--e-brand)}
.carousel-nav button:disabled{background:var(--mist);border-color:var(--hair);color:#B4C0D4;opacity:1}
.carousel-progress{height:3px;background:var(--hair-strong)}
.carousel-progress span{background:var(--brand)}

/* ── 9. Story + Why panels ───────────────────────────────────────────── */
.home-story>article{border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--e2)}
.about-panel{padding:clamp(30px,3.1vw,50px);background:radial-gradient(120% 95% at 0% 0%,rgba(72,133,255,.30),transparent 56%),
             linear-gradient(158deg,#0A2C7E,#061B50 58%,#04123C)}
.about-panel .eyebrow{color:#8FB6FF}
.text-link{margin-top:22px;gap:10px;color:#fff}
.text-link:hover{gap:13px}
.why-panel{padding:clamp(30px,3vw,46px);background:linear-gradient(158deg,#fff,#F7FAFF 72%)}
.why-heading{margin-bottom:30px;gap:28px}
.why-summary{margin-top:14px;color:var(--copy)}
.why-link{margin-top:0;padding:12px 18px;border:1px solid var(--hair-strong);border-radius:var(--r-ctl);background:#fff;color:var(--brand);font-size:14.5px;box-shadow:var(--e1);gap:9px}
.why-link:hover{border-color:rgba(11,79,224,.35);box-shadow:var(--e2);transform:translateY(-2px)}
.why-grid{gap:14px}
.why-grid>div{min-height:0;padding:26px 24px;border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1)}
.why-grid>div:hover{border-color:rgba(11,79,224,.22);box-shadow:var(--e2);transform:translateY(-4px)}
.why-grid b{width:40px;height:40px;border-radius:var(--r-ctl);letter-spacing:.06em}
.why-grid>div>span{margin-top:16px;letter-spacing:.1em}

/* ── 10. Proof metrics ───────────────────────────────────────────────── */
.metrics{height:auto;min-height:0;align-items:center;padding:clamp(26px,2.6vw,40px) clamp(14px,1.6vw,26px);border-radius:var(--r-panel);background:radial-gradient(95% 150% at 6% 0%,rgba(45,107,238,.5),transparent 62%),
             linear-gradient(120deg,#062260,#031446 60%,#061F5C);box-shadow:0 30px 72px rgba(3,28,90,.26)}
.metrics>div{gap:16px;padding-inline:clamp(12px,1.7vw,26px);border-right:1px solid rgba(255,255,255,.10)}
.metrics>div:last-child{border-right:0}
.metrics i{width:48px;height:48px;aspect-ratio:auto;border:0;border-radius:var(--r-tile);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#9EC1FF}
.metrics b{color:#fff}
.metrics>div:nth-child(5) i{color:#9EC1FF;font-weight:800}

/* ── 11. Partners & customer logos ───────────────────────────────────── */
.partners .partner-grid{gap:16px}
.partners .partner-grid article{min-height:0;border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1)}
.partners .partner-grid article:hover{border-color:rgba(11,79,224,.20);box-shadow:var(--e2);transform:translateY(-5px)}
.partners .partner-grid article>img{margin-bottom:18px}
.partners .partner-grid article>p{margin-top:0;margin-bottom:16px}
.logo-row{border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--e1);height:auto}
.logo-row>span{padding:26px 20px;min-height:118px;border-right:1px solid var(--hair)}
.customer-carousel{padding-bottom:clamp(52px,5vw,72px)}

/* ── 12. Journey timeline ────────────────────────────────────────────── */
.timeline{gap:18px}
.timeline i{width:62px;height:62px;border:1px solid var(--hair-strong);background:#fff;color:var(--brand);box-shadow:0 0 0 9px #fff,var(--e1);transition:.3s var(--ease)}
.timeline article:hover i{border-color:transparent;color:#fff;background:linear-gradient(180deg,#1B5CF0,#0A43C6);box-shadow:0 0 0 9px #fff,var(--e-brand)}
.timeline:after{top:31px;height:1px;opacity:1;background:linear-gradient(90deg,transparent,var(--hair-strong) 12%,var(--hair-strong) 88%,transparent)}
.timeline b{color:var(--brand);margin-top:4px}
.timeline strong{color:var(--ink)}

/* ── 13. Testimonials ────────────────────────────────────────────────── */
.quote-grid{gap:20px}
.quote-grid blockquote{padding:clamp(26px,2.7vw,36px);border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1)}
.quote-grid blockquote:hover{box-shadow:var(--e2);transform:translateY(-5px);border-color:rgba(11,79,224,.16)}
.quote-grid blockquote:after{height:2px;background:linear-gradient(90deg,var(--brand),rgba(11,79,224,0) 62%)}
.quote-brand{margin-bottom:20px}
.quote-brand img{max-height:30px;width:auto}
.quote-brand span{font-size:14px;letter-spacing:2px}
.quote-grid blockquote footer{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}

/* ── 14. Closing CTA ─────────────────────────────────────────────────── */
.cta{min-height:0;padding:clamp(36px,4vw,62px) clamp(28px,3.4vw,58px);border-radius:var(--r-panel);box-shadow:0 30px 76px rgba(4,32,110,.28)}
.cta h2{color:#fff}
.cta .cta-label{color:#9EC1FF;margin-bottom:16px}

/* ── 15. Footer ──────────────────────────────────────────────────────── */
.site-footer{padding-top:clamp(54px,5.4vw,86px);background:radial-gradient(70% 120% at 8% 0%,rgba(24,83,198,.30),transparent 56%),
             linear-gradient(150deg,#04143C,#02102F 62%,#010B22)}
.site-footer .footer-grid{gap:clamp(28px,3vw,48px);padding-bottom:clamp(34px,3.4vw,54px)}
.footer-intro>p{max-width:34ch;margin-top:20px}
.site-footer .footer-grid>div>b{text-transform:uppercase}
.site-footer .footer-grid a{transition:color .2s var(--ease)}
.site-footer .footer-grid a:hover{color:#fff;opacity:1}
.site-footer .footer-grid .footer-contact a{
  display:grid;grid-template-columns:18px 1fr;
  align-items:flex-start;gap:12px;
  margin-bottom:5px;padding-block:9px;
  line-height:1.55}
.footer-contact a>span{flex:0 0 auto;margin-top:4px;color:#7FA6FF}
.map-pin{width:42px;height:42px;flex-basis:42px;border-radius:var(--r-ctl)}
.footer-map{padding:14px;border-radius:var(--r-tile);border-color:rgba(255,255,255,.12)}
.footer-map strong{color:#fff}
.map-link{margin-top:12px;font-size:13px}
.footer-bottom{padding-block:22px;border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom a:hover{color:#fff}

/* ── 16. Floating controls ───────────────────────────────────────────── */
.back-to-top{right:26px;bottom:26px;width:50px;height:50px;flex-basis:50px;min-width:50px;min-height:50px;border:1px solid rgba(255,255,255,.22);box-shadow:var(--e-brand)}
.back-to-top:hover{transform:translateY(-3px)}
.skip-link{border-radius:var(--r-ctl);box-shadow:var(--e3)}

/* ── 17. Inner pages ─────────────────────────────────────────────────── */
.inner-header{background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.7);border-top:0;box-shadow:0 1px 0 var(--hair),0 18px 40px rgba(6,28,74,.09)}
.inner-hero{padding:clamp(142px,15vw,196px) 0 clamp(58px,6vw,96px);background:radial-gradient(66% 90% at 84% 4%,#DEEAFF,transparent 48%),
             linear-gradient(140deg,#F8FBFF,#EDF4FF);border-bottom:1px solid var(--hair)}
.inner-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.038em}
.inner-hero p:last-child{font-size:16.5px;line-height:1.72;margin-top:24px}
/* --sec-y is the gap the homepage puts BETWEEN sections - it applies it as
   padding-top only. .page-section applied the same value top and bottom, so
   two adjacent sections produced 2x the rhythm: 196px at 1440px against the
   homepage's 98px. Halving it makes every page share one vertical rhythm. */
.page-section{padding-block:calc(var(--sec-y) / 2)}
.page-section.tint{background:var(--mist)}
.page-heading{margin-bottom:clamp(28px,3vw,44px)}
.page-heading h2{font-size:clamp(26px,2.9vw,38px);letter-spacing:-.032em}
.page-heading p:not(.eyebrow){font-size:15px;line-height:1.72;color:var(--copy)}
.feature-cards{gap:20px}
.feature-card{padding:clamp(26px,2.6vw,34px);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--e1)}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:rgba(11,79,224,.20)}
.feature-card i{width:50px;height:50px;border-radius:var(--r-tile);background:var(--brand-wash);color:var(--brand);font-size:22px}
.feature-card h3{font-size:19px;margin:22px 0 10px}
.feature-card p{font-size:14.5px;line-height:1.7;color:var(--copy)}
.feature-card a{font-size:13.5px;gap:8px}
.split{gap:clamp(36px,5vw,72px)}
.check-list li{border-bottom:1px solid var(--hair);padding:13px 0}
.check-list li:before{content:'\2713';display:inline-grid;place-items:center;vertical-align:-4px;width:21px;height:21px;padding:0;margin-right:13px;border-radius:50%;background:var(--brand-wash);color:var(--brand);font-size:11px;font-weight:800}
.contact-panel,.contact-form{padding:clamp(26px,2.8vw,36px);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--e1)}
.contact-panel p:not(.eyebrow){font-size:14.5px;color:var(--copy)}
.contact-panel a{color:var(--ink-soft)}
.contact-form label{color:var(--ink)}
.contact-form input,.contact-form textarea,.contact-form select{min-height:50px;padding:14px 16px;border:1px solid var(--hair-strong);border-radius:var(--r-ctl);font-size:15px;background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px rgba(11,79,224,.12)}
.page-cta{padding:clamp(40px,4.2vw,68px) 0;background:radial-gradient(70% 160% at 82% 110%,rgba(64,124,255,.4),transparent 58%),
             linear-gradient(115deg,#062585,#0A45C8 52%,#04154A)}
.page-cta h2{color:#fff;font-size:clamp(24px,2.4vw,34px)}
.page-cta p{font-size:15.5px}
.map-section iframe{border-radius:var(--r-card);box-shadow:var(--e2)}

/* ── 18. Reveal on scroll ────────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
  .reveal.is-in{opacity:1;transform:none}
  .hero-content>*{opacity:0;transform:translate3d(0,22px,0);animation:heroRise .95s var(--ease) forwards}
  .hero-content>.eyebrow{animation-delay:.05s}
  .hero-content>h1{animation-delay:.14s}
  .hero-content>.lead{animation-delay:.24s}
  .hero-content>.actions{animation-delay:.34s}
  @keyframes heroRise{
    to{opacity:1;transform:none}
  }
}

/* ── 19. Optional cinematic hero (add class "hero-dark" to <section class="hero">) ── */
.hero-dark .hero-slide.hero-highway{background-image:linear-gradient(96deg,rgba(4,14,40,.92) 0%,rgba(4,14,40,.78) 38%,rgba(4,14,40,.42) 68%,rgba(4,14,40,.30) 100%),url('../hero-highway.webp')}
.hero-dark .hero-slide.hero-port{background-image:linear-gradient(96deg,rgba(4,14,40,.92) 0%,rgba(4,14,40,.78) 38%,rgba(4,14,40,.42) 68%,rgba(4,14,40,.30) 100%),url('../hero-port.webp')}
.hero-dark .hero-slide.hero-night-road{background-image:linear-gradient(96deg,rgba(4,14,40,.92) 0%,rgba(4,14,40,.78) 38%,rgba(4,14,40,.42) 68%,rgba(4,14,40,.30) 100%),url('../hero-night-road.webp')}
.hero-dark h1{color:#fff}
.hero-dark .lead{color:rgba(255,255,255,.78)}
.hero-dark .eyebrow{color:#8FB6FF}
.hero-dark .button.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.hero-dark .hero-dots button{background:rgba(255,255,255,.32)}
.hero-dark .hero-dots button.is-active{background:#fff}
.hero-dark .hero-arrows button{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff}
.hero-dark .hero-arrows button:hover{background:rgba(255,255,255,.2);color:#fff}
body:has(.hero-dark) .site-header:not(.is-scrolled) nav a{color:rgba(255,255,255,.86)}
body:has(.hero-dark) .site-header:not(.is-scrolled) nav a.active{color:#fff;background:rgba(255,255,255,.12)}
body:has(.hero-dark) .site-header:not(.is-scrolled) .brand img{filter:brightness(0) invert(1)}
body:has(.hero-dark) .site-header:not(.is-scrolled) .menu-btn{color:#fff}

/* ── 20. Responsive ──────────────────────────────────────────────────── */
@media(max-width:1100px){
  .site-header{width:min(var(--page-width),calc(100% - 36px));gap:14px}
  .site-header nav{gap:0}
  .site-header nav a{padding:9px 11px;font-size:13.5px}
  .brand img{width:172px}
}
@media(max-width:1000px){
  .site-header{height:82px;padding-inline:14px}
  .site-header.is-scrolled{height:72px}
  .site-header nav{top:74px;gap:4px;padding:12px;border-radius:var(--r-card);box-shadow:var(--e3)}
  .site-header nav a{width:100%;justify-content:flex-start;padding:12px 14px;border-radius:var(--r-ctl)}
  .site-header nav a.active{background:var(--brand-wash)}
  .menu-btn{color:var(--ink);font-size:26px}
  .hero,.hero-slider{min-height:660px}
  .hero-slider>.benefits{min-height:0;padding:14px 8px}
  .hero-slider>.benefits>div{padding-inline:14px}
  .hero-controls{bottom:186px}
  .metrics>div{padding-inline:14px}
  .partners .partner-grid article>img{height:30px}
}
@media(max-width:700px){
  :root{--sec-y:clamp(44px,10vw,64px)}
  html{scroll-padding-top:92px}
  .site-header,.site-header.is-scrolled{height:70px;padding-inline:12px}
  .brand img,.site-header.is-scrolled .brand img{width:150px}
  .hero,.hero-slider{min-height:0}
  .hero-content{padding-top:120px;padding-bottom:46px}
  .hero h1{max-width:none;margin-bottom:16px}
  .hero .lead{max-width:none}
  .hero-content .actions{margin-top:26px;flex-direction:column;align-items:stretch}
  .hero-content .actions .button{width:100%}
  .hero-slider>.benefits{position:static;transform:none;left:auto;margin-top:26px;grid-template-columns:1fr 1fr;gap:4px;border-radius:var(--r-card);border-bottom:1px solid rgba(255,255,255,.10);padding:14px 8px}
  .hero-slider>.benefits>div{padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .hero-slider>.benefits>div:nth-last-child(-n+2){border-bottom:0}
  .hero-slider>.benefits>div:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}
  .hero-controls{position:static;transform:none;left:auto;margin-top:22px;justify-content:flex-start}
  .hero-arrows{display:flex}
  .metrics{gap:4px;padding:20px 10px}
  .metrics>div{padding:14px 12px;border-right:0}
  .metrics>div:nth-child(odd){border-right:1px solid rgba(255,255,255,.10)}
  .logo-row>span{min-height:96px;padding:20px 16px}
  .timeline:after{display:none}
  .solution-grid article:hover,.quote-grid blockquote:hover,.why-grid>div:hover,.partners .partner-grid article:hover,.feature-card:hover{transform:none}
  .back-to-top{right:16px;bottom:16px;width:46px;height:46px;flex-basis:46px;min-width:46px;min-height:46px}
}
@media(max-width:430px){
  .hero-slider>.benefits{grid-template-columns:1fr}
  .hero-slider>.benefits>div:nth-child(odd){border-right:0}
  .hero-slider>.benefits>div{border-bottom:1px solid rgba(255,255,255,.08)}
  .hero-slider>.benefits>div:last-child{border-bottom:0}
  .metrics>div:nth-child(odd){border-right:0}
  .cta{border-radius:var(--r-panel)}
}

/* ── 21. Motion & print safeguards ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important}
  .hero-content>*{opacity:1 !important;transform:none !important;animation:none !important}
}
@media print{
  .site-header,.back-to-top,.hero-controls,.carousel-nav,.skip-link{display:none !important}
  body{background:#fff;color:#000}
}

/* ── 22. Corrections pass ────────────────────────────────────────────── */

/* content-visibility:auto paired with a 300px intrinsic guess made the
   scrollbar jump and left sections unpainted on fast jumps. The cards are
   few enough that skipping render work buys nothing measurable. */
.solution-grid article,.partner-grid article,.quote-grid blockquote,.feature-card{content-visibility:visible;contain-intrinsic-size:auto}

/* Card call-to-action links must be flex for the icon + gap to lay out */
.solution-grid article>a,.partner-grid article>a,.text-link,.why-link,.map-link,.feature-card a{display:inline-flex;align-items:center}
.button>span,.text-link>span,.why-link>span,.map-link>span,.solution-grid article>a>span,.partner-grid article>a>span,.footer-contact a>span,.benefits i,.metrics i,.timeline i{display:inline-grid;place-items:center}

/* Wordmark reversed out of the navy story panel instead of sitting in a plate */
.about-logo{width:min(190px,58%);margin-bottom:28px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:brightness(0) invert(1);opacity:.94}

/* Stronger, cooler tint so seven unrelated photographs read as one set */

/* Partner logos: one optical size, generous plate */
.partners .partner-grid article{padding:28px 24px}
.partners .partner-grid article>img{filter:none}

/* Customer wall reads as a single band */
.logo-row>span:last-child{border-right:0}

/* ── 23. Refinement pass ─────────────────────────────────────────────── */

/* Solution photography reads as one cohesive wall, then lights up on hover */
.card-photo:before{mix-blend-mode:multiply;transition:opacity .45s var(--ease);z-index:1}
.solution-grid article:hover .card-photo:before{opacity:.4}

/* Partner logos normalised to one optical height and a shared left baseline */
.partners .partner-grid article>img{height:30px;max-height:30px;max-width:150px;width:auto;margin:0 0 20px;object-fit:contain;object-position:left center}

/* ISO proof cell needs a smaller setting than the numerals beside it */

/* Keep the legal links clear of the floating back-to-top control */
@media(min-width:701px){
  .footer-bottom nav{padding-right:58px}
}
@media(max-width:700px){
  .footer-bottom{padding-bottom:76px}
}

/* ── 24. Duotone correction ──────────────────────────────────────────── */

/* A filter on .card-photo also greys out its own pseudo-element overlays, so
   the brand tint lives on the article instead, outside the filtered subtree. */
.solution-grid article{position:relative}
.solution-grid article:before{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;z-index:2;pointer-events:none;background:linear-gradient(158deg,rgba(11,56,148,.40) 0%,rgba(11,56,148,.16) 58%,rgba(11,56,148,.05) 100%);transition:opacity .45s var(--ease)}
.solution-grid article:hover:before{opacity:0}

/* ── 25. Small-screen content parity ─────────────────────────────────── */

/* styles.css hid benefits 3 and 4 below 430px; the stacked strip now has
   room for all four, and dropping half the value props was a content loss. */
@media(max-width:430px){
  .benefits>div:nth-child(n+3){display:flex}
}

/* Hero headline no longer relies on hard <br>s, so nothing to un-hide */

/* ── 26. Data-driven icons on inner pages ────────────────────────────── */
[data-icon]{font-size:0 !important;line-height:0;display:inline-grid;place-items:center}
[data-icon]:before{content:"";display:block;width:var(--is,24px);height:var(--is,24px);background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.feature-card i[data-icon]{--is:23px}

/* ── 27. Heading leading ─────────────────────────────────────────────── */
h1,h2{line-height:1.14}
h3,h4,h5{line-height:1.3}
.page-heading h2,.map-heading h2,.contact-panel h2,.page-cta h2,.about-panel h2,.why-panel h2{line-height:1.14}

/* ═════ Finishing pass — measured accessibility + premium detail ═════ */

/* Every value below answers a specific finding from the contrast / type-size /
   target-size audit run across all seven pages. */

/* --- Contrast ---------------------------------------------------------- */

/* The global `h1,h2 {color: ink}` rule was painting headings navy-on-navy
   inside the dark panels. Reverse them out instead. */
.about-panel h2,.about-panel h3,.about-panel strong,.about-panel b,.cta h2,.cta h3,.cta strong,.cta b,.page-cta h2,.page-cta h3,.page-cta strong,.metrics b,.benefits b,.footer-map strong,.site-footer h2,.site-footer h3,.site-footer strong,.site-footer b{color:#fff}
:root{--gold:#A06B00}
.quote-grid blockquote footer small{color:var(--copy-dim)}
.footer-bottom a{color:rgba(255,255,255,.72)}


/* --- Type sizes -------------------------------------------------------- */
.eyebrow,.section-title>p{font-size:12.5px}
p.cta-label{margin:0 0 16px;letter-spacing:.16em;text-transform:uppercase}
.benefits small,.metrics span,.quote-grid blockquote footer small,.footer-map small,.footer-bottom,.crafted-by,.site-footer .footer-grid>div>b{font-size:14px}

/* --- Target sizes ------------------------------------------------------ */

/* The hero dots stay 9px visually but carry a 44px hit area. */
.hero-dots button{position:relative}
.hero-dots button:after{position:absolute;inset:-18px -9px}
.solution-grid article>a,.partner-grid article>a,.text-link,.why-link,.map-link,.feature-card a{min-height:40px}
.footer-bottom a{display:inline-flex;align-items:center;padding-block:7px}
.footer-bottom nav{gap:18px}

/* --- Closing CTA ------------------------------------------------------- */

/* Was: three truck emoji at 50px as background decoration. */
.cta:after{content:none}

/* The photograph now reads as tone, not as a picture pasted into the panel. */
.cta-fleet{filter:grayscale(1) contrast(1.15);mix-blend-mode:soft-light;background-image:url('../solution-fleet.webp')}
.cta{gap:clamp(24px,3vw,48px)}
.cta-copy{max-width:56ch}
.cta h2{margin-bottom:14px}

/* --- Audit round two --------------------------------------------------- */
.eyebrow,.section-title>p,.hero .eyebrow,.about-panel .eyebrow,.inner-hero .eyebrow{font-size:13px}
.cta-label{font-size:13px}
.site-footer .footer-grid>div:not(.footer-intro)>a{padding-block:9px}
.footer-bottom a{min-height:40px}


/* --- Closing CTA, second pass ------------------------------------------ */

/* Texture, not photography: the traffic frame fades on both axes so no edge
   of the image meets an edge of the panel. */
.cta{background:radial-gradient(90% 165% at 78% 112%,rgba(64,124,255,.36),transparent 58%),
     linear-gradient(115deg,#05215C,#0A3FB0 54%,#041640)}
.cta-fleet{inset:0 0 0 26%;opacity:.36;-webkit-mask-image:linear-gradient(100deg,transparent 0,#000 50%,#000 84%,transparent 100%);mask-image:linear-gradient(100deg,transparent 0,#000 50%,#000 84%,transparent 100%),
             linear-gradient(180deg,transparent 0,#000 26%,#000 68%,transparent 100%);mask-composite:intersect}

/* --- Floating control keeps clear of the footer ------------------------- */
.back-to-top.is-near-footer{bottom:calc(26px + 68px)}
@media(max-width:700px){
  .back-to-top.is-near-footer{bottom:calc(16px + 60px)}
}

/* --- Audit round three -------------------------------------------------- */

/* Brand blue on a navy panel measured 1.98:1. Eyebrows on any dark surface
   use the light tint instead. */
.page-cta .eyebrow,.metrics .eyebrow,.site-footer .eyebrow,.about-panel .eyebrow,.cta .eyebrow{color:#A9C7FF}
.contact-panel a{padding-block:8px;min-height:40px;display:flex;gap:10px}
.footer-bottom a{padding-inline:6px;min-width:44px;justify-content:center}
.footer-bottom nav{margin-inline:-6px}

/* Form field labels are read, not scanned - give them body-text size. */
.contact-form label{font-size:13.5px;letter-spacing:0}

/* Contact panel rows: masked icon, aligned baseline, real map link. */
.contact-panel a>span[data-icon]{--is:18px;flex:0 0 auto;color:var(--brand)}
.contact-panel a{align-items:flex-start}
.contact-panel a>span[data-icon]{margin-top:3px}

/* Menu button: a drawn icon rather than the U+2630 glyph, which renders
   differently on every platform. Swaps to a close mark when the nav is open. */
:root{--ic-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 7h16.8M3.6 12h16.8M3.6 17h16.8'/%3E%3C/svg%3E");--ic-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.menu-btn{font-size:0 !important;display:none;place-items:center;width:44px;height:44px;color:var(--ink);--ic:var(--ic-menu)}
@media(max-width:1000px){
  .menu-btn{display:grid}
}
.menu-btn[aria-expanded="true"]{--ic:var(--ic-close)}
.menu-btn:before{content:"";display:block;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

/* --- Solution cards: photographs in full colour --------------------------
   Earlier passes desaturated and blue-tinted these to force visual cohesion.
   Direction is to show each image in its own colour, clear and unfaded, so
   the greyscale, the brand tint and both darkening overlays are removed.
   Cohesion now comes from the identical crop, radius and card frame instead. */
.card-photo{filter:saturate(1.06) contrast(1.03);transition:filter .35s var(--ease),transform .5s var(--ease)}
.solution-grid article:before{content:none}
.card-photo:before{background:none;content:none}
.card-photo:after{background:none;content:none}
.solution-grid article:hover .card-photo{filter:saturate(1.12) contrast(1.04);transform:scale(1.035)}

/* A hairline keeps the photo from bleeding into the white card body. */
.card-photo{box-shadow:inset 0 -1px 0 rgba(10,35,85,.10)}

/* --- Remaining audit items --------------------------------------------- */

/* Uppercase counters and badge chips were the last text under 13px. */
.why-grid b{font-size:13px}
.why-grid>div>span{font-size:13px;padding:6px 13px}

/* Hero slider dots: the button itself is now the target. The visual dot is
   drawn by a pseudo-element, so a 40x44 hit area costs no visual weight. */
.hero-dots{gap:0;margin-left:-8px}
.hero-dots button{flex:0 0 40px;width:40px;height:44px;min-width:40px;min-height:44px;padding:0;display:grid;place-items:center;background:transparent;box-shadow:none;border-radius:0;aspect-ratio:auto}
.hero-dots button:after{content:none}
.hero-dots button:before{content:"";display:block;width:10px;height:10px;border-radius:var(--r-pill);background:rgba(10,32,84,.26);transition:width .3s var(--ease),background-color .25s var(--ease)}
.hero-dots button:hover:before{background:rgba(10,32,84,.48)}
.hero-dots button.is-active{flex-basis:64px;width:64px;min-width:64px}
.hero-dots button.is-active:before{width:34px;background:var(--brand)}
.hero-dark .hero-dots button:before{background:rgba(255,255,255,.36)}
.hero-dark .hero-dots button.is-active:before{background:#fff}

/* The active-dot rule still painted the whole 64x44 button; the colour now
   belongs to the pseudo-element only. */
.hero-dots button,.hero-dots button.is-active,.hero-dots button:hover{background:transparent;border:0;box-shadow:none;border-radius:0}

/* ISO proof cell caption was the last sub-13px string. */

/* --- Customer wall: true colour, matching the solution cards -------------
   Removes the greyscale-until-hover treatment, the opacity fade, the
   multiply blend and the drop shadows, so each mark shows its own colour. */
.logo-row img{filter:none;opacity:1;mix-blend-mode:normal;transition:transform .35s var(--ease)}
.logo-row>span:hover img{filter:none;opacity:1;transform:scale(1.04)}
.partners .partner-grid article>img,.quote-brand img{filter:none}

/* On narrow desktops the page is nearly as wide as the viewport, so the
   carousel's next button collides with the floating back-to-top. */
@media(min-width:1001px) and (max-width:1400px){
  .carousel-nav{padding-right:60px}
}

/* --- Tablet: proof metrics --------------------------------------------
   Five equal columns held all the way down to 700px, where the icon plus
   "ISO 9001:2015" no longer fit and pushed the document 124px wide. */
@media(min-width:701px) and (max-width:1100px){
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}
  .metrics>div{border-right:1px solid rgba(255,255,255,.10)}
  .metrics>div:nth-child(3n),.metrics>div:last-child{border-right:0}
}

/* Comfortable measure for continuous copy at every width. */
p{max-width:66ch}
.inner-hero p:last-child{max-width:62ch}

/* --- Hero slides 2 and 3 leave the critical path ------------------------
   All three slides are CSS backgrounds on elements present at parse time,
   so 357 KB downloaded before first paint for two frames the visitor does
   not see for six seconds. They now carry only the scrim until load fires. */
.hero-slide.hero-port{background-image:linear-gradient(99deg,rgba(246,249,255,.985) 0,rgba(246,249,255,.94) 30%,rgba(243,247,255,.56) 52%,rgba(240,246,255,.05) 76%)}
.hero-slide.hero-night-road{background-image:linear-gradient(99deg,rgba(246,249,255,.98) 0,rgba(246,249,255,.92) 30%,rgba(243,247,255,.5) 52%,rgba(240,246,255,.03) 76%)}
.hero-ready .hero-slide.hero-port{background-image:linear-gradient(99deg,rgba(246,249,255,.985) 0,rgba(246,249,255,.94) 30%,rgba(243,247,255,.56) 52%,rgba(240,246,255,.05) 76%),url('../hero-port.webp')}
.hero-ready .hero-slide.hero-night-road{background-image:linear-gradient(99deg,rgba(246,249,255,.98) 0,rgba(246,249,255,.92) 30%,rgba(243,247,255,.5) 52%,rgba(240,246,255,.03) 76%),url('../hero-night-road.webp')}
@media(max-width:700px){
  .hero-slide.hero-port{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66))}
  .hero-slide.hero-night-road{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.5))}
  .hero-ready .hero-slide.hero-port{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-port.webp')}
  .hero-ready .hero-slide.hero-night-road{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.5)),url('../hero-night-road.webp')}
}

/* --- Mobile hero art ----------------------------------------------------
   Phones were downloading the 1920px hero (269 KB) to paint a 390px band.
   A 960px variant covers 2x on every phone at a third of the weight. */
@media(max-width:800px){
  .hero-slider{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-highway-sm.webp')}
  .hero-slide.hero-highway{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-highway-sm.webp')}
  .hero-ready .hero-slide.hero-port{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.66)),url('../hero-port-sm.webp')}
  .hero-ready .hero-slide.hero-night-road{background-image:linear-gradient(90deg,rgba(247,250,255,.97),rgba(247,250,255,.5)),url('../hero-night-road-sm.webp')}
}

/* --- Journey: nine real milestones -------------------------------------
   The grid was built for seven; the real company history has nine, so it
   wraps to two rows and the single-row connector is retired. */
.timeline{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:34px}
.timeline:after{display:none}
.timeline article{padding-inline:6px}
@media(max-width:1000px){
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
}
@media(max-width:430px){
  .timeline{grid-template-columns:1fr}
}

/* Client wordmark where no logo file exists, so every quote is attributed. */
.quote-mark{display:inline-flex;align-items:center;min-height:30px;padding:6px 12px;border:1px solid var(--hair);border-radius:8px;background:var(--mist);font-size:12.5px;font-weight:800;letter-spacing:.01em}

/* Metrics icons now use the shared data-icon system, so the old positional
   mapping (which reserved cell 5 for an "ISO" wordmark) is retired. */
.metrics>div:nth-child(5) i{font-size:0 !important}
.metrics>div:nth-child(5) i:before{content:""}
.metrics>div:nth-child(4) b,.metrics>div:nth-child(5) b{font-size:clamp(22px,1.9vw,28px)}

/* --- Solution detail pages ---------------------------------------------- */
.solution-figure{margin:0}
.solution-figure img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--e2);background:#fff}
.split>div>.page-heading{margin-bottom:20px}

@media(max-width:800px){
  .solution-figure{order:-1;margin-bottom:8px}
}

/* Card photo classes reused on the homepage carousel keep their crops. */

/* --- Long-form legal / prose pages -------------------------------------- */
.prose{max-width:74ch}
.prose h2{margin:clamp(34px,3.4vw,48px) 0 14px;font-size:clamp(20px,1.9vw,25px);letter-spacing:-.025em}
.prose p{margin:0 0 16px;font-size:16px;line-height:1.78;max-width:none}
.prose ul{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:10px;font-size:16px;line-height:1.75}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--brand-deep)}
.prose code{padding:2px 6px;border-radius:5px;background:var(--brand-wash);color:var(--brand-deep);font-size:14.5px}
.prose-meta{margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--hair);color:var(--copy-dim);font-size:14px}

/* --- 404 ---------------------------------------------------------------- */
.notfound-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(34px,4vw,52px)}
.notfound-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.notfound-links a{display:flex;align-items:center;min-height:52px;padding:12px 18px;border:1px solid var(--hair);border-radius:var(--r-ctl);background:#fff;box-shadow:var(--e1);color:var(--ink);font-weight:600;transition:.22s var(--ease)}
.notfound-links a:hover{border-color:rgba(11,79,224,.3);color:var(--brand);box-shadow:var(--e2);transform:translateY(-2px)}

/* The ISO cell carries a longer label than the numerals beside it. */
.metrics>div:nth-child(5) b{font-size:clamp(16px,1.35vw,20px);letter-spacing:-.02em}

/* --- Testimonial attribution with a portrait ---------------------------- */
.quote-grid blockquote footer{display:flex;align-items:center;gap:14px}
.quote-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--brand-wash);box-shadow:0 0 0 1px var(--hair),0 4px 12px rgba(10,30,70,.10)}

/* Shown by premium.js when the portrait file is not present yet. */
.quote-avatar.is-fallback{display:grid;place-items:center;color:#fff;font-size:17px;font-weight:800;letter-spacing:.02em}
.quote-person{display:flex;flex-direction:column}
.quote-person strong{display:block}
.quote-person small{display:block;margin-top:2px}
@media(max-width:430px){
  .quote-avatar{flex-basis:48px;width:48px;height:48px}
}

/* --- Corrections ------------------------------------------------------- */

/* The attribution row was inheriting flex-wrap, so the portrait stacked
   above the name instead of sitting beside it. */
.quote-grid blockquote footer{flex-wrap:nowrap}
.quote-person{flex:1 1 auto;min-width:0}
.quote-avatar{flex:0 0 56px}

/* The contact column now carries four rows (address, two numbers, email),
   so the positional icon map needs a fourth entry. */
.footer-contact a:nth-of-type(1)>span{--ic:var(--ic-pin)}
.footer-contact a:nth-of-type(2)>span,.footer-contact a:nth-of-type(3)>span{--ic:var(--ic-phone)}
.footer-contact a:nth-of-type(4)>span{--ic:var(--ic-mail)}

/* An earlier layer set flex-direction:column on the attribution row, which is
   why the portrait sat above the name rather than beside it. */
.quote-grid blockquote footer{flex-direction:row;justify-content:flex-start}

/* --- Enquiry form ------------------------------------------------------- */
.contact-form .field{display:flex;flex-direction:column;min-width:0}
.contact-form label{margin-bottom:7px}
.contact-form .req{color:#B4231F;font-weight:800}
.contact-form input,.contact-form select,.contact-form textarea{margin-top:0}
.contact-form input.is-invalid,.contact-form textarea.is-invalid{border-color:#B4231F;box-shadow:0 0 0 4px rgba(180,35,31,.10)}
.field-error{margin:7px 0 0;color:#9A1B18;font-size:13.5px;line-height:1.5;font-weight:600}
.form-note{margin:4px 0 0;color:var(--copy);font-size:13.5px;line-height:1.65}
.form-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.form-status{margin:4px 0 0;padding:14px 16px;border-radius:var(--r-ctl);font-size:14.5px;line-height:1.6;font-weight:600}
.form-status.is-ok{background:#E9F4EC;border:1px solid #BFE0C9;color:#175A2E}
.form-status.is-error{background:#FDECEB;border:1px solid #F3C6C4;color:#9A1B18}
.form-fallback{margin-top:8px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--hair-strong);border-radius:var(--r-card);background:var(--mist)}
.form-fallback h3{margin:0 0 8px;font-size:17px}
.form-fallback p{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--copy)}
.form-fallback a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.form-copy{width:100%;margin-bottom:16px;padding:14px 16px;border:1px solid var(--hair-strong);border-radius:var(--r-ctl);background:#fff;color:var(--ink-soft);font:500 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.form-fallback-actions{display:flex;flex-wrap:wrap;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ═════ Final pass: contrast to AAA, and the missing responsive tiers ═════ */

/* --- Contrast ----------------------------------------------------------
   Body copy measured 6.4:1 — comfortably AA, short of the 7:1 AAA line.
   These values clear 7:1 on white and on the tinted panels. */
:root{--copy:#47536C;--copy-dim:#46526B}
.benefits small{color:rgba(255,255,255,.86)}
.metrics span{color:rgba(255,255,255,.86)}
.about-panel p:not(.eyebrow){color:rgba(255,255,255,.88)}
.cta p:not(.cta-label){color:rgba(255,255,255,.88)}
.page-cta p{color:rgba(255,255,255,.88)}
.site-footer .footer-grid a{color:rgba(255,255,255,.82)}
.site-footer .footer-grid>div>b{color:rgba(255,255,255,.8)}
.footer-intro>p{color:rgba(255,255,255,.8)}
.footer-map small{color:rgba(255,255,255,.8)}
.footer-bottom{color:rgba(255,255,255,.78)}
.footer-bottom a,.crafted-by{color:rgba(255,255,255,.84)}
.quote-grid blockquote>p{color:#2B3752}

/* --- Tier 1: 901–1000px keeps the full navigation ----------------------
   The burger used to appear at 1000px, on screens with room to spare. */
@media(min-width:901px) and (max-width:1000px){
  .site-header nav{position:static;display:flex;flex-direction:row;align-items:center;top:auto;padding:0;gap:0;max-height:none;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
  .site-header nav a{width:auto;height:auto;justify-content:center;padding:8px 9px;font-size:13px}
  .site-header nav a.active{background:var(--brand-wash)}
  .menu-btn{display:none}
  .header-cta{padding:10px 15px;min-height:42px;font-size:13px}
  .header-cta>span{display:none}
  .brand img,.site-header.is-scrolled .brand img{width:148px}
  .site-header{gap:10px;width:min(var(--page-width),calc(100% - 32px))}
}

/* --- Tier 2: 701–1000px gives tablets a real layout -------------------- */
@media(min-width:701px) and (max-width:1000px){
  .hero h1{font-size:clamp(38px,5.2vw,50px)}
  .hero .lead{font-size:17px}
  .feature-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notfound-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr;gap:24px}
}

/* --- Tier 3: 1600px and up uses the extra room ------------------------- */
@media(min-width:1600px){
  :root{--page-width:1380px}
  .hero h1{font-size:64px}
  .hero .lead{font-size:19px}
  .section-title h2{font-size:44px}
}

/* --- Brand blue, split into a fill tone and a text tone -----------------
   #0B4FE0 measures 6.5:1 on white: past AA, short of AAA. Rather than
   darken the whole brand, text uses a deeper tone and fills keep the
   original, so buttons and accents look unchanged. */
:root{--brand-text:#0A47CC}

/* 7.5:1 on #fff */
.eyebrow,.section-title>p,.solution-grid article>a,.partner-grid article>a,.site-header nav a.active,.site-header nav a[aria-current],.site-header nav a:hover,.button.ghost,.why-link,.timeline b,.why-grid b,.feature-card a,.feature-card i,.check-list li:before,.check-head,.prose a,.form-note a,.field-error a,.contact-panel a:hover,.contact-panel a>span[data-icon],.solution-grid article>a:hover,.partner-grid article>a:hover{color:var(--brand-text)}
.solution-grid article>a:hover,.partner-grid article>a:hover,.prose a:hover{color:#07349B}

/* White on the primary button needs the same headroom. */
.button{background:linear-gradient(180deg,#1550E0,#0836A8)}
.button:hover{background:linear-gradient(180deg,#1A5AF0,#0A3FBC)}
.back-to-top{background:linear-gradient(180deg,#1550E0,#0836A8)}
.back-to-top:hover{background:linear-gradient(180deg,#1A5AF0,#0A3FBC)}
.map-pin{background:linear-gradient(180deg,#1550E0,#0836A8)}
.quote-avatar.is-fallback{background:linear-gradient(160deg,#1550E0,#0836A8)}

/* Text sitting on a tinted chip needs a little more depth than text on white,
   and a few legacy literals were still winning on specificity. */
.partners .partner-grid article>a,.solutions-carousel .solution-grid article>a,.solution-grid article>a,.partner-grid article>a{color:var(--brand-text)}
.site-header nav a.active,.site-header nav a[aria-current]{background:#F3F7FF;color:#0A41BE}
.why-grid b{background:#EAF0FF;color:#083699}
.why-grid>div>span{background:#F0F5FF;color:#2F4470}
.cta-label{color:#BBD3FF}
.about-panel .eyebrow,.page-cta .eyebrow,.cta .eyebrow{color:#BBD3FF}

/* --- Journey as a single scrollable row --------------------------------
   Nine milestones in one line, with the connector restored and the same
   prev/next controls the other carousels use. */
.journey-carousel{position:relative;padding-bottom:clamp(52px,5vw,72px)}
.journey-carousel .timeline{display:flex;grid-template-columns:none;gap:0;row-gap:0;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-inline:contain}
.journey-carousel .timeline::-webkit-scrollbar{display:none}
.journey-carousel .timeline article{flex:0 0 calc(100% / 5);min-width:0;scroll-snap-align:start;padding-inline:10px}

/* The connector sits behind the markers and spans the whole scrollable row. */
.journey-carousel .timeline:after{content:"";position:absolute;left:0;right:0;top:31px;height:1px;z-index:-1;opacity:1;background:linear-gradient(90deg,transparent,var(--hair-strong) 4%,var(--hair-strong) 96%,transparent)}
.journey-carousel .timeline{position:relative;isolation:auto}
.journey-carousel .timeline article p{max-width:none}
@media(max-width:1100px){
  .journey-carousel .timeline article{flex-basis:calc(100% / 4)}
}
@media(max-width:900px){
  .journey-carousel .timeline article{flex-basis:calc(100% / 3)}
}
@media(max-width:640px){
  .journey-carousel .timeline article{flex-basis:calc(100% / 2)}
}
@media(max-width:430px){
  .journey-carousel .timeline article{flex-basis:80%}
}

/* --- Last AAA items ------------------------------------------------------ */
.timeline article>p,.timeline article p{color:var(--copy)}
.partner-grid a,.partner-grid article a,.partners .partner-grid article a,.solution-grid a,.solution-grid article a{color:var(--brand-text)}

/* Every icon token gets a data-icon mapping; the timeline's ninth marker
   had none, so it rendered as an empty circle. */
[data-icon="activity"]{--ic:var(--ic-activity)}
[data-icon="award"]{--ic:var(--ic-award)}
[data-icon="building"]{--ic:var(--ic-building)}
[data-icon="chart"]{--ic:var(--ic-chart)}
[data-icon="check"]{--ic:var(--ic-check)}
[data-icon="chevl"]{--ic:var(--ic-chevl)}
[data-icon="chevr"]{--ic:var(--ic-chevr)}
[data-icon="clipboard"]{--ic:var(--ic-clipboard)}
[data-icon="close"]{--ic:var(--ic-close)}
[data-icon="cpu"]{--ic:var(--ic-cpu)}
[data-icon="crosshair"]{--ic:var(--ic-crosshair)}
[data-icon="file"]{--ic:var(--ic-file)}
[data-icon="flag"]{--ic:var(--ic-flag)}
[data-icon="fuel"]{--ic:var(--ic-fuel)}
[data-icon="gauge"]{--ic:var(--ic-gauge)}
[data-icon="gear"]{--ic:var(--ic-gear)}
[data-icon="headset"]{--ic:var(--ic-headset)}
[data-icon="iso"]{--ic:var(--ic-iso)}
[data-icon="leaf"]{--ic:var(--ic-leaf)}
[data-icon="link"]{--ic:var(--ic-link)}
[data-icon="mail"]{--ic:var(--ic-mail)}
[data-icon="menu"]{--ic:var(--ic-menu)}
[data-icon="phone"]{--ic:var(--ic-phone)}
[data-icon="pin"]{--ic:var(--ic-pin)}
[data-icon="quote"]{--ic:var(--ic-quote)}
[data-icon="right"]{--ic:var(--ic-right)}
[data-icon="shield"]{--ic:var(--ic-shield)}
[data-icon="smile"]{--ic:var(--ic-smile)}
[data-icon="snowflake"]{--ic:var(--ic-snowflake)}
[data-icon="star"]{--ic:var(--ic-star)}
[data-icon="trending"]{--ic:var(--ic-trending)}
[data-icon="truck"]{--ic:var(--ic-truck)}
[data-icon="up"]{--ic:var(--ic-up)}
[data-icon="users"]{--ic:var(--ic-users)}

/* The gold was applied to every span in the quote header, which caught the
   company wordmark chip as well as the stars. */
.quote-brand span{color:inherit}
.quote-brand span[aria-label]{color:#6E4A00}

/* 8:1 on white */
.quote-mark{color:var(--ink-soft)}
.cta-label,.about-panel .eyebrow,.page-cta .eyebrow,.cta .eyebrow{color:#D2E2FF}

/* The card links were still resolving to the legacy #0754dd. */
.solution-grid article>a,.solution-grid article>a:link,.partner-grid article>a,.partner-grid article>a:link,.partners .partner-grid article>a,.solutions-carousel .solution-grid article>a,.feature-card>a{color:var(--brand-text)}

/* .cta .cta-label was still winning on specificity. */
.cta .cta-label,.page-cta .cta-label{color:#D2E2FF}

/* The inner hero sits on a tinted wash, which costs about 0.5:1 against
   white — these tones restore the AAA margin on that surface. */
.inner-hero .eyebrow{color:#0842BC}
.inner-hero p:last-child{color:#414D66}
.contact-panel a,.contact-panel a:link{color:#3B4763}
.contact-panel a:hover{color:var(--brand-text)}
.prose a{color:#0842BC}

/* Links inside the form note and the fallback panel sit on tinted cards. */
.form-note a,.form-fallback a,.field-error a{color:#0842BC}
.form-note a:hover,.form-fallback a:hover{color:#06308F}

/* The ISO caption was the last string under 13px. */
.metrics>div:nth-child(5) span{line-height:1.4}

/* --- Solution cards use the company's own photography -------------------
   Replaces the generic stock crops with images taken from kainglobe.com.
   Cold chain and delivery keep their existing art — the live site has no
   equivalent photograph for those two. */
.card-photo.truck{background-image:url('../card-fleet.webp')}
.card-photo.field{background-image:url('../card-field.webp')}
.card-photo.fuel{background-image:url('../card-fuel.webp')}
.card-photo.machine{background-image:url('../card-agri.webp')}
.card-photo.station{background-image:url('../card-consultancy.webp')}

/* The platform screenshot and the field-force artwork read better uncropped. */
.card-photo.truck,.card-photo.station{background-size:contain;background-color:#F2F6FD;background-position:center}

/* Field force is a photograph now, so it crops like the others. */
.card-photo.field{background-size:cover;background-position:center}

/* --- Vision & mission cards --------------------------------------------- */
.vm-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:20px;margin-bottom:clamp(28px,3vw,44px)}
.vm-card{padding:clamp(26px,2.6vw,34px);border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1)}
.vm-card i{display:grid;place-items:center;width:50px;height:50px;border-radius:var(--r-tile);background:var(--brand-wash);color:var(--brand-text);--is:23px}
.vm-card h3{margin:20px 0 10px;font-size:20px}
.vm-card p{margin:0;font-size:15.5px;line-height:1.72;color:var(--copy);max-width:none}
@media(max-width:900px){
  .vm-grid{grid-template-columns:1fr}
}

/* --- Why-choose-us list -------------------------------------------------- */
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.why-list li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--hair);border-radius:var(--r-ctl);background:#fff;box-shadow:var(--e1);font-size:15px;line-height:1.6;color:var(--ink-soft);font-weight:600}
.why-list li:before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--brand-wash);-webkit-mask:none;mask:none;box-shadow:inset 0 0 0 20px var(--brand-wash);background-image:var(--ic-check);background-size:14px;background-position:center;background-repeat:no-repeat}

/* The about page reuses the metrics band inside a section. */
.page-section .metrics{margin-top:0;width:100%}

/* --- Technology partner list (products page) ---------------------------- */
.partner-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.partner-item{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1)}
.partner-item img{flex:0 0 auto;height:30px;width:auto;max-width:140px;object-fit:contain}
.partner-word{flex:0 0 auto;padding:8px 14px;border-radius:8px;background:var(--mist);border:1px solid var(--hair);color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.01em}
.partner-item strong{display:block;font-size:16px}
.partner-item small{display:block;margin-top:3px;font-size:13.5px;color:var(--copy)}

/* --- Industry cards that carry a photograph ----------------------------- */
.feature-card.has-photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.feature-photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--hair)}
.feature-card.has-photo>i{margin:clamp(24px,2.4vw,30px) clamp(24px,2.4vw,30px) 0}
.feature-card.has-photo h3,.feature-card.has-photo p,.feature-card.has-photo a{margin-left:clamp(24px,2.4vw,30px);margin-right:clamp(24px,2.4vw,30px)}
.feature-card.has-photo>a,.feature-card.has-photo>p:last-of-type{margin-bottom:clamp(24px,2.4vw,30px)}

/* --- Case study cards ---------------------------------------------------- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.case-card{overflow:hidden;border:1px solid var(--hair);border-radius:var(--r-card);background:#fff;box-shadow:var(--e1);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.case-card:hover{transform:translateY(-5px);box-shadow:var(--e2);border-color:rgba(11,79,224,.2)}
.case-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.case-card>div{padding:clamp(22px,2.3vw,28px)}
.case-card h3{margin:10px 0 8px;font-size:19px}
.case-card p:last-child{margin:0;font-size:14.5px;line-height:1.7;color:var(--copy)}

/* --- Journey connector, corrected --------------------------------------
   The line was one absolutely-positioned pseudo-element on the scroll
   container, so left:0/right:0 resolved against the visible width and the
   line scrolled out of view — the later milestones had nothing behind them.
   Each milestone now draws its own segment, so the line is continuous for
   the full length of the row however far it scrolls. */
.journey-carousel .timeline:after{display:none}
.journey-carousel .timeline article{position:relative}
.journey-carousel .timeline article:before{content:"";position:absolute;top:31px;left:0;right:0;height:1px;z-index:0}

/* Start at the first marker and stop at the last, rather than running off. */
.journey-carousel .timeline article:first-child:before{left:50%}
.journey-carousel .timeline article:last-child:before{right:50%}

/* The marker sits above the line and masks it with its white ring. */
.journey-carousel .timeline i{position:relative;z-index:1}
@media(max-width:430px){

  /* One per view: a horizontal connector has nothing to connect. */
  .journey-carousel .timeline article:before{display:none}
}

/* The nine milestones are driven entirely by data-icon; nothing positional. */
.timeline i:before{content:""}
.timeline i{font-size:0 !important}

/* A touch more presence so the connector reads on the pale section wash. */
.journey-carousel .timeline article:before{background:rgba(10,35,85,.22)}

/* --- Sub-heading, corrected --------------------------------------------
   .check-head is an <h3>, but it was styled as a 13px uppercase micro-label,
   which made it smaller than the body copy beneath it. It now reads as the
   sub-heading it actually is. */
.check-head{display:flex;align-items:center;gap:12px;margin:clamp(30px,3vw,40px) 0 16px;font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.check-head:before{content:"";flex:0 0 22px;width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-hi))}

/* 17px sat only half a point above the 16.5px body copy beneath it. */
.check-head{font-size:19px}

/* --- Reveal stagger, in CSS ---------------------------------------------
   Was an inline custom property written per element by JavaScript. Position
   in the group is something CSS already knows. */
@media(prefers-reduced-motion:no-preference){
  .reveal:nth-child(2){transition-delay:70ms}
  .reveal:nth-child(3){transition-delay:140ms}
  .reveal:nth-child(4){transition-delay:210ms}
  .reveal:nth-child(5){transition-delay:280ms}
  .reveal:nth-child(n+6){transition-delay:350ms}
}

/* --- Solutions dropdown --------------------------------------------------
   The trigger stays a real link to solutions.html; a separate disclosure
   button opens the panel, so keyboard and touch users get an explicit
   control rather than relying on hover. Without JavaScript the panel still
   opens on hover and on focus-within. */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{padding-right:8px}

.nav-toggle{
  display:grid;place-items:center;
  width:26px;height:26px;margin-left:-4px;
  padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--ink-soft);
  cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .25s var(--ease)}
.nav-toggle:before{
  content:"";display:block;width:15px;height:15px;
  background:currentColor;
  -webkit-mask:var(--ic-chevr) center/contain no-repeat;
  mask:var(--ic-chevr) center/contain no-repeat;
  transform:rotate(90deg)}
.nav-toggle:hover{background:rgba(11,79,224,.07);color:var(--brand-text)}
.nav-item.is-open>.nav-toggle,.nav-item:hover>.nav-toggle{color:var(--brand-text)}
.nav-item.is-open>.nav-toggle{transform:rotate(180deg)}
.nav-item.is-current>a{color:var(--brand-text);background:#F3F7FF}

.nav-menu{
  position:absolute;z-index:60;
  top:calc(100% + 12px);left:50%;
  min-width:274px;padding:10px;
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--hair);border-radius:var(--r-card);
  background:rgba(255,255,255,.97);
  box-shadow:var(--e3);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
/* Bridges the gap so travelling from the trigger to the panel does not close it. */
.nav-menu:before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-item:hover>.nav-menu,
.nav-item:focus-within>.nav-menu,
.nav-item.is-open>.nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.site-header nav .nav-menu a{
  width:100%;height:auto;min-height:44px;
  justify-content:flex-start;
  padding:11px 14px;border-radius:var(--r-ctl);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-soft);
  white-space:normal}
.site-header nav .nav-menu a:before{content:none}
.site-header nav .nav-menu a:hover{background:var(--brand-wash);color:var(--brand-text)}
.site-header nav .nav-menu a.active{background:var(--brand-wash);color:var(--brand-text)}
.site-header nav .nav-menu a.active:after{display:none}
/* Scoped to the same ancestor chain as `.site-header nav .nav-menu a`, plus
   its own class - (0,4,1) against (0,3,1). It now wins on specificity, which
   is what the four !important flags were standing in for. */
.site-header nav .nav-menu a.nav-menu-all{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--hair);
  border-radius:0;
  color:var(--brand-text);font-weight:800;
  gap:8px}
.nav-menu-all>span{--ic:var(--ic-right);--is:15px;font-size:0 !important}

/* Mobile: the nav is already a column, so the panel becomes an accordion. */
@media(max-width:900px){
  .site-header nav .nav-item{display:block;width:100%}
  .site-header nav .nav-item>a{display:flex;padding-right:15px}
  .nav-toggle{
    position:absolute;top:4px;right:6px;
    width:40px;height:40px;margin:0;border-radius:var(--r-ctl);
    background:var(--mist)}
  .nav-toggle:before{transform:rotate(90deg)}
  .nav-item.is-open>.nav-toggle{transform:none}
  .nav-item.is-open>.nav-toggle:before{transform:rotate(-90deg)}
  .nav-menu{
    position:static;transform:none;min-width:0;
    margin:4px 0 6px 12px;padding:6px;
    border-radius:var(--r-ctl);box-shadow:none;
    background:var(--mist);
    display:none}
  .nav-item:hover>.nav-menu,.nav-item:focus-within>.nav-menu{display:none}
  .nav-item.is-open>.nav-menu{display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .site-header nav .nav-menu a{font-size:14.5px;min-height:42px}
}
@media(min-width:901px) and (max-width:1000px){
  .nav-menu{min-width:250px}
  .nav-toggle{width:22px;height:22px}
}

/* Wordmark stand-in for a client logo whose image is not in place yet. */
.logo-wordmark{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;
  border:1px solid var(--hair);border-radius:var(--r-ctl);
  background:var(--mist);
  color:var(--ink-soft);
  font-size:14px;font-weight:800;letter-spacing:-.01em;
  text-align:center;line-height:1.3}

/* The dropdown footer link needs the shared arrow-mask treatment. */
.nav-menu-all>span{font-size:0 !important;line-height:0;display:inline-grid;place-items:center}
.nav-menu-all>span:before{
  content:"";display:block;width:15px;height:15px;
  background:currentColor;
  -webkit-mask:var(--ic-right) center/contain no-repeat;
  mask:var(--ic-right) center/contain no-repeat;
  transition:transform .3s var(--ease)}
.nav-menu-all:hover>span:before{transform:translateX(3px)}

/* ═════ Slider controls, unified ═════════════════════════════════════════
   Three carousels and the hero all had slightly different arrow treatments.
   One size, one shape language, one set of states. */

.carousel-nav{display:flex;align-items:center;gap:16px}
.carousel-nav button,
.hero-arrows button{
  width:52px;height:52px;flex:0 0 52px;min-width:52px;min-height:52px;
  border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}

/* Resting: white disc, hairline edge, a highlight along the top */
.carousel-nav button{
  border:1px solid rgba(10,35,85,.14);
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(10,30,70,.04),0 10px 22px rgba(10,30,70,.07)}
.carousel-nav button:not(:disabled):hover{
  transform:translateY(-2px);
  border-color:transparent;
  background:linear-gradient(180deg,#1550E0,#0836A8);
  color:#fff;
  box-shadow:0 12px 26px rgba(11,79,224,.28)}
.carousel-nav button:not(:disabled):active{transform:translateY(0);box-shadow:0 4px 12px rgba(11,79,224,.24)}

/* Disabled: clearly inert, still legible — not a ghost */
.carousel-nav button:disabled{
  border-color:rgba(10,35,85,.08);
  background:#F4F7FC;
  color:#9AA8BF;
  box-shadow:none;
  transform:none;
  cursor:default}
.carousel-nav button:before{transition:transform .25s var(--ease)}
.carousel-nav button:not(:disabled):hover[data-prev]:before{transform:translateX(-2px)}
.carousel-nav button:not(:disabled):hover[data-next]:before{transform:translateX(2px)}

/* Hero arrows sit on photography. They used to be 72% white over a
   saturate(160%) backdrop, which amplified whatever was behind them - over a
   sandy shot the discs turned cream and looked broken. Dropping the
   saturation boost and taking the fill close to opaque keeps them white on
   any image, while the blur and inset highlight keep the glass character. */
.hero-arrows button{
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(6,26,74,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.hero-arrows button:hover{
  transform:translateY(-2px);
  background:#fff;color:var(--brand-text);
  box-shadow:0 12px 28px rgba(6,26,74,.18)}
.hero-arrows button:active{transform:translateY(0)}

/* Progress rail: a touch more substance, brand fill, rounded ends */
.carousel-progress{
  width:92px;height:4px;
  border-radius:var(--r-pill);
  background:rgba(10,35,85,.12);
  overflow:hidden}
.carousel-progress span{
  display:block;height:100%;width:34%;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,#1550E0,#2A6BF5);
  transition:transform .4s var(--ease)}

/* Focus is visible on every control, over photography included. */
.carousel-nav button:focus-visible,.hero-arrows button:focus-visible{
  outline:2px solid var(--brand-hi);
  outline-offset:3px}

@media(max-width:700px){
  .carousel-nav{gap:12px}
  .carousel-nav button,.hero-arrows button{
    width:46px;height:46px;flex-basis:46px;min-width:46px;min-height:46px}
  .carousel-progress{width:72px}
}

/* Industries lists eight sectors, so its panel runs two columns rather than
   becoming a very tall single file. */
.nav-menu-wide{
  min-width:432px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.nav-menu-wide .nav-menu-all{grid-column:1 / -1}
@media(max-width:1100px){.nav-menu-wide{min-width:392px}}
@media(max-width:900px){
  .nav-menu-wide{min-width:0;display:flex;flex-direction:column}
}

/* Fuel Storage & Distribution uses the Ceypetco forecourt photograph. */
.card-photo.fuel{background-image:url('../card-fuel-station.webp')}

/* Spam honeypot — hidden from people, visible to bots that fill every field. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Case study pages ---------------------------------------------------- */
.case-step{margin-top:clamp(30px,3vw,42px)}
.figure-note{
  margin-top:12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--copy-dim)}
.case-note{
  margin:clamp(26px,3vw,36px) 0 0;padding:16px 18px;
  border:1px solid var(--hair);border-radius:var(--r-ctl);
  background:#fff;
  border-bottom:1px solid var(--hair)}
.case-note a{color:#0842BC;text-decoration:underline;text-underline-offset:3px}

/* Whole case/resource card is one target, so the image and the copy both click. */
.case-link{display:block;color:inherit;height:100%}
.case-link:hover{color:inherit}
.case-more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  color:var(--brand-text);font-size:13.5px;font-weight:800;
  transition:gap .25s var(--ease)}
.case-link:hover .case-more{gap:11px}
.case-more>span{font-size:0 !important;line-height:0;display:inline-grid;place-items:center}
.case-more>span:before{
  content:"";display:block;width:15px;height:15px;
  background:currentColor;
  -webkit-mask:var(--ic-right) center/contain no-repeat;
  mask:var(--ic-right) center/contain no-repeat}
.case-card:focus-within{outline:2px solid var(--brand-hi);outline-offset:3px}
.case-link:focus-visible{outline:none}

/* --- Full-width closing CTA (homepage) ----------------------------------
   The band now runs edge to edge; its content stays on the page grid. */
.cta-full{
  width:auto;max-width:none;
  margin-inline:0;
  border-radius:0;
  padding-inline:0;
  padding-block:clamp(44px,4.6vw,72px)}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,48px);
  position:relative;z-index:2}
.cta-full .cta-fleet{inset:0 0 0 30%}
@media(max-width:800px){
  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* With four dropdowns the row is tighter; keep the CTA clear of the header's
   rounded corner so it never reads as clipped. */
.site-header{padding-right:16px}
.site-header.is-scrolled{padding-right:24px}
@media(max-width:1100px){.site-header{padding-right:12px}}

/* Four dropdowns left the CTA with 1px of clearance on a 1265px viewport.
   Tighten the nav rhythm below 1350px so the button keeps real breathing room. */
@media(max-width:1350px){
  .site-header nav{gap:0}
  .site-header nav a{padding:9px 11px}
  .nav-item>a{padding-right:6px}
  .nav-toggle{width:22px;height:22px}
}

/* --- Nav breakpoint, recalculated for four dropdowns --------------------
   Seven items plus four chevrons no longer fit beside the logo and the CTA
   below ~1150px — at 1024 the button was overflowing the bar by 30px. The
   901–1000 full-nav tier added when the nav was narrower is withdrawn. */
@media(min-width:901px) and (max-width:1150px){
  .site-header nav{
    position:absolute;display:none;flex-direction:column;align-items:stretch;
    top:74px;left:0;right:0;
    gap:4px;padding:12px;
    border:1px solid var(--hair);border-radius:var(--r-card);
    background:#fff;box-shadow:var(--e3)}
  .site-header nav.open{display:flex}
  .site-header nav a{width:100%;height:auto;justify-content:flex-start;padding:12px 14px;border-radius:var(--r-ctl)}
  .menu-btn{display:grid}
  .header-cta{padding:12px 22px;min-height:46px;font-size:14px}
  .header-cta>span{display:inline-grid}
  .brand img,.site-header.is-scrolled .brand img{width:180px}
  .site-header nav .nav-item{display:block;width:100%}
  .site-header nav .nav-item>a{display:flex;padding-right:15px}
  .nav-toggle{position:absolute;top:4px;right:6px;width:40px;height:40px;margin:0;border-radius:var(--r-ctl);background:var(--mist)}
  .nav-menu{
    position:static;transform:none;min-width:0;display:none;
    margin:4px 0 6px 12px;padding:6px;
    border-radius:var(--r-ctl);box-shadow:none;background:var(--mist)}
  .nav-item:hover>.nav-menu,.nav-item:focus-within>.nav-menu{display:none}
  .nav-item.is-open>.nav-menu{display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-menu-wide{display:flex;flex-direction:column}
}

/* The chevron is a real control: 28x40 clears the WCAG 2.2 AA 24x24 minimum
   without widening the row the way a 40x40 disc would. */
@media(min-width:1151px){
  .nav-toggle{width:40px;height:40px;border-radius:var(--r-ctl);margin-left:-4px}
  .nav-item>a{padding-right:2px}
  .site-header nav{gap:2px}
}
@media(min-width:1500px){
  .site-header nav{gap:6px}
  .site-header nav a{padding:9px 13px}
}

/* A .button inside .prose was losing its label: `.prose a` (0,1,1) outranks
   `.button` (0,1,0), so the 404 page's primary action rendered blue-on-blue
   at 1.04:1. Restore each variant's own label colour above the prose rule. */
.prose a.button{color:#fff}
.prose a.button.white{color:var(--brand-deep)}
.prose a.button.ghost{color:var(--brand-text)}

/* --- Windows High Contrast / forced colours ----------------------------
   The 34-token icon set draws with `background:currentColor` behind a CSS
   mask. Forced-colours mode overrides background-color, so every icon on the
   site was rendering as an empty box. System colour keywords are honoured in
   this mode, so CanvasText restores them and follows the user's own theme.
   Buttons and cards are shaped by gradients and transparent borders, which
   are likewise dropped — they need a real border to keep their outline. */
@media (forced-colors: active){
  [data-icon]:before,.check-list li:before{background:CanvasText;forced-color-adjust:none}
  .button,.button.white,.button.ghost{border:2px solid ButtonText}
  .site-header,.site-footer,.nav-menu,.solution-grid article,.partner-grid article,
  .feature-card,.case-card,.why-grid li,.quote-card,.metric,.contact-panel{
    border:1px solid CanvasText
  }
  .nav-toggle,.menu-btn,.carousel-nav button,.hero-arrows button,.back-to-top{
    border:1px solid ButtonText
  }
  .site-header nav a.active,.site-header nav a[aria-current]{
    text-decoration:underline;text-underline-offset:4px
  }
  .hero-slide-overlay,.cta-fleet,.button:before{display:none}
}

/* --- Careers ------------------------------------------------------------
   Two states. With no vacancies published the page shows a single notice
   panel; add roles to build-careers-page.py and it becomes a card grid. Both
   reuse the existing card tokens rather than introducing new ones. */
.notice-panel{
  max-width:760px;padding:clamp(26px,3vw,38px);
  border:1px solid var(--hair);border-radius:var(--r-card);
  background:#fff;box-shadow:var(--e1)}
.notice-panel .check-head{margin:0 0 12px}
.notice-panel p+p{margin-top:14px}
.notice-panel p:last-child{margin-bottom:0}

.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.role-card{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--hair);border-radius:var(--r-card);
  background:#fff;box-shadow:var(--e1);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.role-card:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.role-head{margin-bottom:14px}
.role-card h3{margin:0 0 10px;font-size:19px;line-height:1.3}
.role-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.role-meta span{
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--mist);color:var(--brand-text);
  font-size:13px;font-weight:700;letter-spacing:.01em}
.role-card>p{margin:0 0 18px}
.role-card .check-head{margin:6px 0 10px}
.role-card .check-list{margin-bottom:18px}
.role-card .button{margin-top:auto}

@media(max-width:520px){
  .role-grid{grid-template-columns:1fr}
}

@media (forced-colors: active){
  .notice-panel,.role-card{border:1px solid CanvasText}
  .role-meta span{border:1px solid CanvasText}
}


/* --- Partner carousel ---------------------------------------------------
   Seven brands in a fixed six-column grid stranded the last one on its own
   row. As a track it scrolls instead, five across on desktop, and the count
   can grow without the layout caring. Same shell, nav and autoplay contract
   as the solutions and customer carousels. */
.partners-carousel{position:relative;padding:0 42px 36px;overflow:hidden}
.partners-carousel .partner-grid{
  display:flex;grid-template-columns:none;max-width:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:1px 1px 18px;scrollbar-width:none}
.partners-carousel .partner-grid::-webkit-scrollbar{display:none}
.partners-carousel .partner-grid>article{
  flex:0 0 calc((100% - 4 * 16px) / 5);
  min-width:0;scroll-snap-align:start}
.partners-carousel .carousel-nav{right:42px}

@media(max-width:1150px){
  .partners-carousel .partner-grid>article{flex-basis:calc((100% - 3 * 16px) / 4)}
}
@media(max-width:900px){
  .partners-carousel .partner-grid>article{flex-basis:calc((100% - 2 * 16px) / 3)}
}
@media(max-width:700px){
  .partners-carousel{padding-inline:0}
  .partners-carousel .carousel-nav{right:0}
  .partners-carousel .partner-grid>article{flex-basis:calc((100% - 16px) / 2)}
}
@media(max-width:520px){
  .partners-carousel .partner-grid>article{flex-basis:88%}
}

/* --- Carousel nav, centred ---------------------------------------------
   The nav was absolutely positioned bottom-right. Centring it there would
   have put it on top of the middle cards, so it moves into normal flow
   underneath the track instead - no overlap at any width, and the same
   treatment on all four carousels. The per-carousel right offsets that
   positioned the old absolute box are no longer meaningful. */
.carousel-nav{
  position:static;right:auto;bottom:auto;
  justify-content:center;gap:16px;
  margin-top:6px}
.solutions-carousel .carousel-nav,
.customer-carousel .carousel-nav,
.partners-carousel .carousel-nav,
.journey-carousel .carousel-nav{right:auto}

/* The disabled end-stop read as a rendering fault rather than a state: no
   shadow, washed border, next to a fully elevated sibling. It now keeps the
   same shape and simply sits back. */
.carousel-nav button:disabled{
  opacity:.42;box-shadow:none;
  background:#fff;border-color:var(--hair-strong)}

/* Nav sits at the right, in normal flow under the track. Staying in flow is
   what stops it landing on top of the cards - the original absolute box only
   avoided that because it was pinned to a corner. A fit-content box with
   margin-left:auto pins it to the content edge at every width. */
.carousel-nav{
  position:static;right:auto;bottom:auto;
  width:fit-content;margin:10px 0 0 auto;
  justify-content:flex-end;gap:16px}
.customer-carousel .carousel-nav,
.partners-carousel .carousel-nav,
.solutions-carousel .carousel-nav,
.journey-carousel .carousel-nav{right:auto;margin-left:auto;margin-right:0}

/* A single heading with no eyebrow needs the eyebrow's space back. */
.section-title.solo{margin-bottom:clamp(22px,2.4vw,34px)}
.section-title.solo>h2{margin-top:0}

/* --- Arrow geometry, enforced ------------------------------------------
   .hero-arrows never set align-items, so its buttons inherited the flex
   default of stretch and could render as ellipses rather than circles the
   moment anything made the row taller than the button. Pinning the axis,
   forbidding grow/shrink and restating aspect-ratio makes every arrow on the
   site a true circle regardless of what its container does. */
.hero-arrows,.carousel-nav{align-items:center}
.hero-arrows button,.carousel-nav button,.back-to-top{
  flex-grow:0;flex-shrink:0;align-self:center;
  aspect-ratio:1;border-radius:50%;
  padding:0;line-height:0}
.hero-arrows button>*,.carousel-nav button>*{flex:0 0 auto}

/* The solo heading is meant to read as a single line. `text-wrap:balance`
   from the shared rule splits it into two the moment it is near the limit,
   so this opts out above the width where it comfortably fits and hands
   wrapping back below that - nowrap at narrow widths would overflow. */
.section-title.solo{max-width:none}
@media(min-width:880px){
  .section-title.solo>h2{white-space:nowrap;text-wrap:nowrap}
}
@media(max-width:879px){
  .section-title.solo>h2{white-space:normal;text-wrap:balance}
}

/* --- Footer social ------------------------------------------------------
   Two real profiles, verified before linking. Brand marks are filled glyphs
   rather than outlines - an outlined Facebook f or LinkedIn in reads as a
   drawing of the logo rather than the logo. */
.social-row{display:flex;gap:10px;margin-top:18px}
.social-row a{
  display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 44px;aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.92);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),
             transform .22s var(--ease)}
.social-row a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.social-row a>span{font-size:0;line-height:0}
.social-row a>span:before{
  content:"";display:block;width:18px;height:18px;
  background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.social-row a>span[data-icon=facebook]{--ic:var(--ic-facebook)}
.social-row a>span[data-icon=linkedin]{--ic:var(--ic-linkedin)}

@media (forced-colors: active){
  .social-row a{border:1px solid CanvasText}
  .social-row a>span:before{background:CanvasText;forced-color-adjust:none}
}

/* --- Metrics band alignment --------------------------------------------
   `.metrics>div` used `grid-template-rows:1fr 1fr` with `align-items:center`.
   Two forced-equal rows mean a label that wraps to three or four lines grows
   BOTH rows, and the value - centred in a taller row - drifts upward. At
   1440px the five values sat at 101/101/101/82/86, which is the misalignment
   visible in the band.

   Anchoring the value to the bottom of row one and the label to the top of
   row two puts every value on the same baseline and every label on the same
   top edge, whatever the wrap. The icon stays centred across both rows. */
.metrics>div{align-items:stretch}
.metrics>div>b{align-self:end}
.metrics>div>span{align-self:start}
.metrics>div>i{align-self:center}

/* A value must never wrap - a wrapped figure reads as two figures. */
.metrics b{white-space:nowrap}

/* The fifth value is a standard reference, not a figure. It is set a size
   down so it fits the column on one line and stops competing with the
   numbers, which are the point of the band. */
.metrics>div:nth-child(5) b{font-size:clamp(17px,1.35vw,21px);letter-spacing:-.01em}

/* `1fr` carries an automatic minimum of the content's intrinsic width, so the
   no-wrap value in the fifth cell was pushing its column to 251px while the
   other four sat at 235px - five columns that were supposed to be identical.
   minmax(0,1fr) lets them shrink to a true equal fifth. */
@media(min-width:1101px){
  .metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.metrics>div{min-width:0}
.metrics>div>b,.metrics>div>span{min-width:0}

/* nowrap only where the column is wide enough to hold the value. Below that
   the band drops to three, two and finally one column, and a value that
   cannot wrap would push the whole page sideways - it did, by 127px at
   320px wide. */
@media(max-width:1100px){
  .metrics b{white-space:normal}
}

/* --- Case / document card grid ----------------------------------------
   `auto-fit` collapses empty tracks, so the downloads section - which holds a
   single card - stretched it across the full 1240px row. Capping the card and
   centring the tracks keeps one card the same size as one of three. */
.case-grid{justify-items:center}
.case-grid>article{width:100%;max-width:440px}

/* A portrait document scan forced into a 3:2 landscape box and cropped from
   the centre shows a mid-paragraph slice. Anchoring the crop to the top shows
   the letterhead and title, which is what makes it recognisable as the
   document it is. */
.case-card.is-doc img{object-position:top center;background:var(--mist)}

/* --- Icon-led solution card -------------------------------------------
   Three solutions have no photography yet. Rather than borrow an unrelated
   image - a fuel station standing in for energy monitoring misrepresents the
   service - these cards carry the mask icon on a brand wash. Same geometry as
   the photo cards, so the carousel stays even. Swap `is-icon` for a real
   photo class once artwork exists. */
.card-photo.is-icon{
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--brand-wash),#E4EDFF 60%,#DCE8F1);
  box-shadow:inset 0 -1px 0 rgba(10,35,85,.10);
}
.card-photo.is-icon:before{
  content:"";display:block;
  width:clamp(38px,4.2vw,54px);height:clamp(38px,4.2vw,54px);
  background:var(--brand-text);opacity:.62;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.solution-grid article:hover .card-photo.is-icon:before{opacity:.78;transform:scale(1.06)}
.card-photo.is-icon[data-icon=gauge]{--ic:var(--ic-gauge)}
.card-photo.is-icon[data-icon=activity]{--ic:var(--ic-activity)}
.card-photo.is-icon[data-icon=building]{--ic:var(--ic-building)}

@media (forced-colors: active){
  .card-photo.is-icon:before{background:CanvasText;opacity:1;forced-color-adjust:none}
}