/* ==========================================================
   Meraki Global Logistics – custom CSS
   Layout, spacing, type, colour, borders and simple hovers live
   in Tailwind classes in the HTML. This file only holds what
   utilities can't express: keyframes, pseudo-elements, gradient
   text, SVG styling, JS-driven states and CSS variables.

   Design language: photography split by the logo's swoosh curve,
   squared buttons with a sliding arrow, route lines and dotted map.
   ========================================================== */
:root{
  /* ===== BRAND PALETTE from the Meraki logo - the only place colours are defined =====
       navy   = logo wordmark blue (headings, dark panels)      deep / deeper = darker panel shades
       blue   = royal blue (primary, links, gradient start)     sky  = bright blue (accents on dark)
       teal   = blue-green (gradient middle)                    green = logo green (gradient end)
       lime   = bright logo green (accents on dark panels)
       mist / line / text / muted = cool page tint, border, ink, muted text */
  --c-deeper:5 20 41; --c-deep:8 31 61; --c-navy:13 59 110;
  --c-blue:21 101 192; --c-sky:33 158 222; --c-teal:14 138 140;
  --c-green:40 140 62; --c-lime:141 198 63;
  --c-mist:242 247 251; --c-line:219 229 239; --c-text:24 38 56; --c-muted:88 104 122;
  --grad:linear-gradient(90deg,rgb(var(--c-blue)),rgb(var(--c-teal)) 55%,rgb(var(--c-lime)));
  --grad-button:linear-gradient(100deg,rgb(var(--c-blue)) 0%,rgb(var(--c-teal)) 50%,rgb(var(--c-green)) 100%);
  --grad-soft:linear-gradient(135deg,#E6F0FB,#E8F5E5);
  --ease:cubic-bezier(.22,.8,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --header-h:80px;
}

.container{--bs-gutter-x:1.5rem;width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}
@media (min-width:1400px){.container{max-width:1320px}}

:focus-visible{outline:2px solid rgb(var(--c-sky));outline-offset:3px}

/* Gradient text: blue to green on light backgrounds, sky to lime on dark ones */
.gradient_text{background:linear-gradient(90deg,rgb(var(--c-blue)),rgb(var(--c-teal)) 60%,rgb(var(--c-green)));-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient_text_bright{background:linear-gradient(90deg,rgb(var(--c-sky)),#3FC1B4 50%,rgb(var(--c-lime)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Scroll progress bar (CSS scroll timeline) ---------- */
.scroll_progress{display:none}
@supports (animation-timeline: scroll()){
  .scroll_progress{display:block;position:fixed;inset:0 0 auto;height:3px;z-index:60;background:var(--grad);transform-origin:0 50%;
    animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- Header CTA (gradient pill, header only) ---------- */
.site_button{transition:transform .35s var(--ease),box-shadow .35s,background-position .6s var(--ease)}
.site_button>span{position:relative;z-index:2}
.site_button:hover{transform:translateY(-2px)}
.site_button_arrow{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.site_button_gradient{color:#fff;background-image:var(--grad-button);background-size:200% 100%;background-position:0 0;box-shadow:0 10px 24px -12px rgb(var(--c-blue)/.75)}
.site_button_gradient:hover{background-position:100% 0;box-shadow:0 18px 32px -14px rgb(var(--c-teal)/.8)}
button.site_button_gradient{background-image:var(--grad-button)}

/* ---------- Route buttons: squared, arrow slides through its box on hover ---------- */
.route_button{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s}
.route_button_box{position:relative;overflow:hidden;transition:background .35s}
.route_button_box svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.route_button_box svg+svg{transform:translateX(-300%)}
.route_button:hover .route_button_box svg{transform:translateX(300%)}
.route_button:hover .route_button_box svg+svg{transform:translateX(0)}
/* primary: navy, the gradient fills in from the left on hover */
.route_button_primary{background:rgb(var(--c-navy));color:#fff;isolation:isolate}
.route_button_primary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-button);clip-path:inset(0 100% 0 0 round 14px);transition:clip-path .55s var(--ease)}
.route_button_primary:hover{box-shadow:0 18px 34px -18px rgb(var(--c-blue)/.9)}
.route_button_primary:hover::before{clip-path:inset(0 0 0 0 round 14px)}
.route_button_primary .route_button_box{background:rgba(255,255,255,.14)}
/* gradient: for dark backgrounds */
.route_button_gradient{color:#fff;background-image:var(--grad-button);background-size:200% 100%;background-position:0 0;box-shadow:0 14px 30px -14px rgb(var(--c-teal)/.9);transition:background-position .6s var(--ease),box-shadow .35s}
.route_button_gradient:hover{background-position:100% 0}
.route_button_gradient .route_button_box{background:rgba(255,255,255,.18)}
/* light: outlined white, for dark backgrounds */
.route_button_light{color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.route_button_light:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.route_button_light .route_button_box{background:rgba(255,255,255,.12)}
.route_button_light:hover .route_button_box{background:var(--grad-button)}
/* ghost: outlined, box turns into the gradient on hover */
.route_button_ghost{color:rgb(var(--c-navy))}
.route_button_ghost:hover{border-color:rgb(var(--c-navy))}
.route_button_ghost .route_button_box{background:rgb(var(--c-mist))}
.route_button_ghost:hover .route_button_box{background:var(--grad-button);color:#fff}

/* ---------- Header: nav underline, services dropdown, burger to X ---------- */
.header_link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.header_link:hover::after,.header_link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header_menu_button span{transition:transform .3s var(--ease),opacity .2s}
.header_menu_button[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header_menu_button[aria-expanded="true"] span:nth-child(2){opacity:0}
.header_menu_button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Services dropdown (desktop): opens on hover, or .is_open from main.js (click, keyboard focus) */
.nav_drop_button::before{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:34px} /* bridge so the panel stays open while the pointer moves down */
.nav_drop_caret{transition:transform .35s var(--ease)}
.nav_panel{opacity:0;visibility:hidden;translate:-50% 12px;transition:opacity .3s var(--ease),translate .4s var(--ease),visibility 0s .4s}
.nav_drop:hover .nav_panel,.nav_drop.is_open .nav_panel{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .3s var(--ease),translate .4s var(--ease),visibility 0s}
.nav_drop:hover .nav_drop_caret,.nav_drop.is_open .nav_drop_caret{transform:rotate(180deg)}
.nav_service_icon{transition:background .35s,color .35s,transform .45s var(--spring)}
.nav_service:hover .nav_service_icon,.nav_service:focus-visible .nav_service_icon{background:var(--grad-button);color:#fff;transform:rotate(-8deg) scale(1.06)}
.nav_service_arrow{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ease)}
.nav_service:hover .nav_service_arrow{opacity:1;transform:none}
.mobile_services_button[aria-expanded="true"] .nav_drop_caret{transform:rotate(180deg)}

/* ==========================================================
   SECTION HEADINGS (shared)
   ========================================================== */
.eyebrow_line{display:inline-block;width:34px;height:2px;border-radius:2px;background:var(--grad)}

/* ==========================================================
   HERO: full-bleed photo under a navy gradient, service band below
   ========================================================== */
.hero_photo{animation:kenBurns 14s var(--ease) forwards}
@keyframes kenBurns{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero_fade{opacity:0;transform:translateY(18px);animation:loadIn .85s var(--ease) forwards}
.hero_pulse{box-shadow:0 0 0 0 rgb(var(--c-lime)/.7);animation:pulse 2s infinite}
.hero_band_item{transition:background .35s}
.hero_band_item:hover{background:rgba(255,255,255,.04)}
.hero_band_icon{transition:transform .5s var(--spring)}
.hero_band_item:hover .hero_band_icon{transform:translateY(-4px) rotate(-6deg)}
.hero_band_item::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hero_band_item:hover::after{transform:scaleX(1)}
/* floating coordination card: bar fills, stages light in turn (7s loop) */
.flow_fill{transform:scaleX(0);transform-origin:left;animation:flowFill 7s var(--ease) infinite 1.6s}
@keyframes flowFill{0%{transform:scaleX(0)}65%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.flow_dot{animation:flowDot 7s infinite 1.6s}
.flow_step:nth-child(2) .flow_dot{animation-delay:2.9s}
.flow_step:nth-child(3) .flow_dot{animation-delay:4.1s}
.flow_step:nth-child(4) .flow_dot{animation-delay:5.3s}
@keyframes flowDot{0%{background:rgb(var(--c-line))}5%,62%{background:rgb(var(--c-teal));box-shadow:0 0 0 5px rgb(var(--c-teal)/.18)}75%,100%{background:rgb(var(--c-line));box-shadow:none}}
.hero_float{animation:bob 6s ease-in-out infinite}
.hero_float_two{animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgb(var(--c-lime)/0)}100%{box-shadow:0 0 0 0 rgb(var(--c-lime)/0)}}
@keyframes loadIn{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ==========================================================
   ABOUT: photo collage
   ========================================================== */
.manage_item{transition:border-color .35s,box-shadow .35s,transform .45s var(--ease)}
.manage_item:hover{transform:translateY(-3px);border-color:rgb(var(--c-teal)/.45);box-shadow:0 16px 30px -20px rgb(var(--c-navy)/.4)}
.manage_item:hover .manage_icon{background:var(--grad-button);color:#fff}
.manage_icon{transition:background .35s,color .35s}

/* ==========================================================
   SERVICES: photo bento + compact cards
   ========================================================== */
.service_photo img{transition:transform 1.1s var(--ease)}
.service_photo:hover img{transform:scale(1.07)}
.service_photo .service_more{transition:transform .45s var(--ease),background .35s}
.service_photo:hover .service_more{background:var(--grad-button);transform:rotate(-45deg)}
.service_card{overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .35s}
.service_card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.service_card:hover{transform:translateY(-6px);border-color:rgb(var(--c-teal)/.35);box-shadow:0 26px 50px -28px rgb(var(--c-navy)/.45)}
.service_card:hover::before{transform:scaleX(1)}
.service_card_icon{transition:background .35s,color .35s,transform .5s var(--spring)}
.service_card:hover .service_card_icon{background:var(--grad-button);color:#fff;transform:rotate(-8deg)}
.service_card_arrow{transition:transform .35s var(--ease),color .35s}
.service_card:hover .service_card_arrow{transform:translateX(4px);color:rgb(var(--c-teal))}

/* ==========================================================
   PROCESS: route timeline. Cards alternate above / below the line on
   desktop; a vertical timeline on mobile. Switching re-runs the animation.
   ========================================================== */
.process_switch [aria-selected="true"]{background:rgb(var(--c-navy));color:#fff;box-shadow:0 10px 20px -12px rgb(var(--c-navy)/.8)}
.process_flow[hidden]{display:none}
.route_fill{transform:scaleY(0);transform-origin:top}
.process_flow.is_active .route_fill{animation:fillY 1.8s var(--ease) forwards .1s}
@keyframes fillY{to{transform:scaleY(1)}}
@keyframes fillX{to{transform:scaleX(1)}}
.route_step{opacity:0}
.process_flow.is_active .route_step{animation:stepIn .6s var(--ease) both;animation-delay:calc(var(--i) * 140ms + 200ms)}
@keyframes stepIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.route_dot{transition:box-shadow .35s,border-color .35s}
.route_card{transition:box-shadow .45s,border-color .35s}
.route_step:hover .route_card{border-color:rgb(var(--c-teal)/.45);box-shadow:0 22px 44px -26px rgb(var(--c-navy)/.5)}
.route_step:hover .route_dot{border-color:rgb(var(--c-blue));box-shadow:0 0 0 7px rgb(var(--c-teal)/.18)}
.route_icon{transition:background .35s,color .35s}
.route_step:hover .route_icon{background:var(--grad-button);color:#fff}
.route_vehicle{opacity:0}
@media (min-width:1024px){
  .route_fill{transform:scaleX(0);transform-origin:left}
  .process_flow.is_active .route_fill{animation-name:fillX}
  .route_step:nth-child(odd) .route_card{bottom:calc(50% + 34px)}
  .route_step:nth-child(even) .route_card{top:calc(50% + 34px)}
  .route_step:nth-child(odd) .route_stem{bottom:50%}
  .route_step:nth-child(even) .route_stem{top:50%}
  /* first and last cards align to the panel edge so they never stick out */
  .route_step:first-child .route_card{left:0;--tw-translate-x:0}
  .route_step:last-child .route_card{left:auto;right:0;--tw-translate-x:0}
  .route_step:first-child .route_card{width:148%}
  .route_step:last-child .route_card{width:148%}
  .process_flow.is_active .route_vehicle{animation:drive 9s linear infinite 2s}
  @keyframes drive{0%{left:0;opacity:0}5%{opacity:1}92%{left:100%;opacity:1}100%{left:100%;opacity:0}}
}

/* ==========================================================
   WHY MERAKI
   ========================================================== */
.why_item{transition:background .4s,border-color .4s}
.why_item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.why_num{transition:transform .5s var(--spring)}
.why_item:hover .why_num{transform:translateX(6px)}

/* ==========================================================
   GLOBAL NETWORK: dotted map, pins, arcs
   ========================================================== */
.map_dots{fill:none;stroke:rgb(var(--c-navy)/.16);stroke-width:3.2;stroke-linecap:round}
.map_arc{fill:none;stroke:url(#gMapArc);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.aos-animate .map_arc{animation:draw 1.6s var(--ease) forwards;animation-delay:var(--d,0s)}
.map_pin{fill:rgb(var(--c-blue))}
.map_pin_ring{fill:none;stroke:rgb(var(--c-teal));stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 2.8s ease-out infinite}
.map_pin_label{font:700 11px "Sora",sans-serif;fill:rgb(var(--c-navy))}
.map_packet{fill:rgb(var(--c-lime))}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.region_row{transition:background .35s,border-color .35s,padding .45s var(--ease)}
.region_row:hover{background:#fff;border-color:rgb(var(--c-teal)/.4);padding-left:22px}

/* ==========================================================
   CTA band + footer
   ========================================================== */
.cta_photo{transition:transform 1.4s var(--ease)}
.cta_band:hover .cta_photo{transform:scale(1.04)}
.footer_link{transition:color .3s,padding .35s var(--ease)}
.footer_link:hover{color:#fff;padding-left:6px}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero_fade{opacity:1;transform:none}
  .map_arc{stroke-dashoffset:0}
  .route_fill{transform:none}
  .route_step{opacity:1}
}

/* ==========================================================
   INNER PAGES: page hero
   ========================================================== */
.page_hero_photo{animation:kenBurns 14s var(--ease) forwards}
.crumb_link{transition:color .3s}
.crumb_link:hover{color:#fff}
/* About: approach steps */
.approach_card{transition:transform .5s var(--ease),box-shadow .5s,border-color .35s}
.approach_card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgb(var(--c-navy)/.5);border-color:transparent}
.approach_num{color:rgb(var(--c-line));transition:color .4s}
.approach_card:hover .approach_num{color:rgb(var(--c-teal))}
.capability_link{transition:background .3s,padding .4s var(--ease),color .3s}
.capability_link:hover{background:rgba(255,255,255,.06);padding-left:14px;color:#fff}