/* ============================================================
   DELMAN SHIPPING — Shared design system  (vanilla, multi-page)
   Brand tokens reused from the source site.
   ============================================================ */
:root{
  --teal:#12A6BE; --teal-deep:#0B7C90; --teal-bright:#46C9DE;
  --teal-ink:#072E37; --teal-ink-2:#0A3B46; --teal-ink-3:#0E5563;
  --green:#7BB63F; --green-deep:#5E9A2C; --green-bright:#9ED36A;
  --ink:#13262C; --paper:#FFFFFF; --cloud:#EEF6F7;
  --mist:#8DAFB7; --mist-2:#CADFE3;
  --line:rgba(18,40,48,.12);
  --line-dark:rgba(255,255,255,.12);
  --grad:linear-gradient(135deg,#12A6BE 0%,#7BB63F 100%);
  --grad-r:linear-gradient(90deg,#12A6BE 0%,#7BB63F 100%);
  --grad-soft:linear-gradient(135deg,#46C9DE 0%,#9ED36A 100%);
  --shadow:0 28px 60px -28px rgba(7,46,55,.45);
  --shadow-sm:0 10px 30px -18px rgba(7,46,55,.5);
  --glow:0 0 60px -10px rgba(18,166,190,.55);
  --display:"Mohave",sans-serif;
  --body:"Mohave",-apple-system,system-ui,sans-serif;
  --mono:"Mohave",sans-serif;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --maxw:1220px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-spring:cubic-bezier(0.16, 1, 0.3, 1);
  --t:.22s var(--ease);
  --nav-h:56px;
  --header-stick-gap:0;
}

*{box-sizing:border-box}
::selection{background:rgba(18,166,190,.28); color:#04222a}
html{scroll-behavior:smooth}
html:focus-within{scroll-padding-top:100px}
body{
  margin:0; font-family:var(--body); font-weight:400; letter-spacing:.006em; color:var(--ink);
  background:var(--paper); line-height:1.62; font-size:16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.01em; color:var(--teal-ink); margin:0; text-wrap:balance}
h3,h4{font-weight:600; letter-spacing:-.005em}
/* Mohave is condensed: large lead/intro paragraphs read as elegant in Light (300) under bold heads */
.section-head p,.article-dek,.blog-hero .lead,.subscribe p,.cta-band p{font-weight:300}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; border:none; background:none}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep); display:inline-flex; align-items:center; gap:10px; font-weight:500}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--grad); border-radius:2px}
.eyebrow.light{color:var(--teal-bright)}
.eyebrow.center{justify-content:center}

.gradient-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:6px;
}

/* ---------- Buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px; padding:14px 24px; border-radius:999px; border:1px solid transparent; transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t); white-space:nowrap; min-height:48px; overflow:hidden}
.btn svg{width:18px; height:18px; flex:none; transition:transform var(--t)}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 14px 30px -14px rgba(11,124,144,.8)}
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 22px 44px -14px rgba(11,124,144,.9)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-light{background:#fff; color:var(--teal-ink); border-color:var(--line)}
.btn-light:hover{border-color:var(--teal); color:var(--teal-deep); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.btn-outline{background:transparent; color:var(--teal-ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px)}
.btn-outline.on-dark{color:#eafafd; border-color:var(--line-dark)}
.btn-outline.on-dark:hover{border-color:var(--teal-bright); color:#fff}
.btn-lg{padding:17px 30px; font-size:16px; min-height:56px}

/* ---------- Header / nav (Apple-style frosted sticky bar) ---------- */
.header{
  /* Nav foreground is a variable so the transparent-over-hero state on the home
     page can flip every link, caret and icon in one place. */
  --nav-fg:rgba(0,0,0,.8);
  --nav-fg-strong:#000;
  --nav-icon:#1d1d1f;
  position:sticky; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:var(--cloud);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background .28s ease, border-color .28s ease;
}
.header.scrolled{
  background:var(--cloud);
  border-bottom-color:rgba(0,0,0,.1);
}
.header:has(.nav-drop.open){
  background:var(--cloud);
  border-bottom-color:transparent;
}
/* Three-track grid rather than flex: the nav is centred on the header itself,
   not on whatever space the brand and CTA happen to leave over. That keeps it
   centred even though the two sides are different widths. */
.header-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; height:var(--nav-h);
  width:100%; max-width:100%; margin:0; padding:0 clamp(18px,3vw,44px);
}
.header .wrap.header-inner{max-width:100%; padding:0 clamp(18px,3vw,44px)}
/* The source PNG carries a lot of transparent padding, so the mark is scaled up
   and the box clips it back — that is what turns the padding into real logo
   size. scale(2.5) puts the artwork at ~47px inside the 56px bar. */
.brand{display:flex; align-items:center; gap:11px; margin-right:0; justify-self:start; position:relative; width:132px; height:var(--nav-h); overflow:hidden}
.brand img{
  position:absolute; left:0; top:50%;
  height:38px; width:auto; max-width:none; display:block;
  transform:translateY(-50%) scale(2.5); transform-origin:left center;
}
.brand .bt{display:flex; flex-direction:column; line-height:1}
.brand .bt b{font-family:var(--display); font-weight:700; font-size:15px; color:#1d1d1f; letter-spacing:-.01em}
.brand .bt span{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#6e6e73}
.nav{display:flex; align-items:center; justify-content:center; gap:0; min-width:0}
.nav > a,
.nav-drop-btn,
.nav-split-link{
  position:relative; white-space:nowrap; font-weight:400; font-size:16px; letter-spacing:-.01em;
  color:var(--nav-fg); padding:0 11px; height:var(--nav-h); display:inline-flex; align-items:center;
  border-radius:0; background:transparent; transition:color .18s ease, opacity .18s ease; opacity:.88;
}
.nav > a::after,
.nav-split-link::after{display:none !important}
.nav > a:hover,
.nav-drop-btn:hover,
.nav-split-link:hover,
.nav > a.active,
.nav-split-link.active,
.nav-drop.active .nav-drop-btn,
.nav-drop.active .nav-split-link{color:var(--nav-fg-strong); opacity:1}
.nav-drop{position:static}
.nav-drop-btn{gap:4px; cursor:pointer}
.nav-drop-btn svg{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; opacity:.7}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute; left:0; right:0; top:100%;
  padding:14px 0 16px;
  background:#f5f5f7;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.1);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:40;
  display:flex; flex-direction:column; align-items:flex-start;
  max-width:none; min-width:0; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.nav-drop.open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav-drop-menu a{
  display:block; width:100%; max-width:980px; margin:0 auto; padding:5px 22px;
  border-radius:0; font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:#1d1d1f; white-space:nowrap; transition:color .15s ease; background:transparent;
  box-sizing:border-box;
}
.nav-drop-menu a::after{display:none}
.nav-drop-menu a:hover{color:var(--teal-deep); background:transparent}
.nav-drop-menu a.active{color:var(--teal-deep); background:transparent}
.nav-drop-split .nav-split{display:inline-flex; align-items:stretch; height:var(--nav-h)}
.nav-split-link{padding-right:4px}
.nav-split-caret{padding-left:2px !important; padding-right:11px !important; min-width:0}
.header-cta{display:flex; align-items:center; gap:10px; justify-self:end}
.header-cta .btn{min-height:32px; padding:0 14px; font-size:13px; font-weight:500; border-radius:980px; box-shadow:none}
.header-cta .btn-light,
.header-cta .btn.btn-light{background:transparent; border:none; color:rgba(0,0,0,.8); padding:0 8px}
.header-cta .btn-light:hover{color:#000; background:transparent; transform:none; box-shadow:none}
.header-cta .btn-light svg{width:14px; height:14px}

/* ---------- Header track-a-shipment button ----------
   The wordy "Track Shipment" text button is gone; what is left is a small,
   deliberately expressive mark — a parcel emitting a tracking signal — sitting
   next to the blue Get a Quote button. The tinted disc and the slow ping keep
   it findable at 32px rather than letting it read as a stray glyph. */
.btn-track{
  position:relative; flex:none;
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--teal-deep);
  background:rgba(18,166,190,.10);
  border:1px solid rgba(18,166,190,.30);
  transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn-track svg{
  position:relative; z-index:1;
  width:18px; height:18px;
  stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.btn-track:hover{
  background:var(--teal); border-color:var(--teal); color:#fff;
  transform:translateY(-1px);
}
.btn-track:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.btn-track .bt-ping{
  position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--teal); opacity:0;
  animation:btPing 2.8s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
@keyframes btPing{
  0%{transform:scale(1); opacity:.55}
  70%{transform:scale(1.5); opacity:0}
  100%{transform:scale(1.5); opacity:0}
}
.header-cta .btn-primary{background:var(--teal); color:#fff; border:none; padding:0 14px; min-height:28px}
.header-cta .btn-primary:hover{background:var(--teal-deep); transform:none; box-shadow:none}
.header-cta .btn-primary::after{display:none}
.menu-btn{display:none; width:36px; height:36px; border-radius:0; border:none; background:transparent; align-items:center; justify-content:center}
.menu-btn svg{width:18px; height:18px; stroke:var(--nav-icon); fill:none; stroke-width:1.6; stroke-linecap:round}
.m-sublink{padding-left:14px !important; font-size:14px !important; opacity:.9}
.header.on-dark:not(.scrolled){color:#1d1d1f}
.header.on-dark:not(.scrolled) .nav a,
.header.on-dark:not(.scrolled) .nav-drop-btn,
.header.on-dark:not(.scrolled) .nav-split-link{color:rgba(0,0,0,.8)}
.header.on-dark:not(.scrolled) .menu-btn{background:transparent; border:none}
.header.on-dark:not(.scrolled) .menu-btn svg{stroke:#1d1d1f}

/* ---------- Scroll progress + cursor + preloader (injected) ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad-r); z-index:300; box-shadow:0 0 12px rgba(18,166,190,.7)}
.cursor-glow{position:fixed; top:0; left:0; width:460px; height:460px; border-radius:50%; pointer-events:none; z-index:1; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(18,166,190,.18) 0%,rgba(123,182,63,.06) 50%,transparent 70%); opacity:0; transition:opacity .4s ease; mix-blend-mode:screen; will-change:transform}
body.cursor-on .cursor-glow{opacity:1}
.preloader{position:fixed; inset:0; z-index:9999; background:var(--teal-ink); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; transition:opacity .6s ease,visibility .6s ease}
.preloader.done{opacity:0; visibility:hidden}
.preloader .pl-logo{font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:.02em; color:#fff}
.preloader .pl-logo .gradient-text{filter:drop-shadow(0 0 18px rgba(70,201,222,.5))}
.preloader .pl-bar{width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden}
.preloader .pl-bar i{display:block; height:100%; width:40%; background:var(--grad-r); border-radius:3px; animation:plload 1s var(--ease) infinite}
@keyframes plload{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-spring),transform .7s var(--ease-spring)}
.reveal.in{opacity:1; transform:none}
.reveal[data-rv="left"]{transform:translateX(-40px)}
.reveal[data-rv="right"]{transform:translateX(40px)}
.reveal[data-rv="scale"]{transform:scale(.92)}
.reveal[data-rv="left"].in,.reveal[data-rv="right"].in,.reveal[data-rv="scale"].in{transform:none}
.stagger>*{opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease-spring),transform .6s var(--ease-spring)}
.stagger.in>*{opacity:1; transform:none}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:54px; width:max-content; animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.rev{animation-direction:reverse; animation-duration:40s}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-item{font-family:var(--display); font-weight:600; font-size:clamp(18px,2.4vw,26px); color:var(--mist); display:inline-flex; align-items:center; gap:18px; white-space:nowrap}
.marquee-item .dot{width:8px; height:8px; border-radius:50%; background:var(--grad)}

/* ---------- Footer ---------- */
.footer{background:var(--teal-ink); color:#cfe5e9; padding:78px 0 32px; position:relative; overflow:hidden}
.footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-r)}
.footer .fglow{position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(18,166,190,.18),transparent 60%); top:-220px; right:-120px; pointer-events:none}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line-dark); position:relative}
/* Match header .brand — same clip box and scale so the mark reads at identical size. */
.footer-brand .fb-logo{
  background:#fff; border-radius:12px; border:1px solid var(--line);
  padding:0; display:inline-flex; align-items:center;
  margin-bottom:18px; position:relative;
  width:132px; height:var(--nav-h); overflow:hidden;
}
.footer-brand .fb-logo img{
  position:absolute; left:0; top:50%;
  height:38px; width:auto; max-width:none; display:block;
  transform:translateY(-50%) scale(2.5); transform-origin:left center;
}
.footer-brand p{color:var(--mist-2); font-size:14.5px; max-width:320px; line-height:1.7}
.footer h4{color:#fff; font-size:12.5px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; font-weight:500}
.footer-col a{color:#bcd9de; font-size:14.5px; padding:6px 0; display:block; transition:color var(--t),transform var(--t); width:fit-content}
.footer-col a:hover{color:#fff; transform:translateX(4px)}
.contact-item{display:flex; gap:11px; align-items:flex-start; color:#bcd9de; font-size:14.5px; padding:7px 0}
.contact-item svg{width:18px; height:18px; flex:none; stroke:var(--green-bright); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}
.contact-item a:hover{color:#fff}
.footer-bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; color:var(--mist)}
.footer-legal{display:flex; gap:18px; flex-wrap:wrap}
.footer-legal a{color:var(--mist); font-size:13px; transition:color var(--t)}
.footer-legal a:hover{color:#fff; text-decoration:underline}
.footer-bottom .accs{display:flex; gap:8px; flex-wrap:wrap}
.footer-bottom .accs span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; border:1px solid var(--line-dark); padding:5px 10px; border-radius:999px; color:var(--mist-2)}

/* ---------- WhatsApp float (injected) ----------
   A labelled pill rather than a bare circle: it collapses to a 44px disc and
   expands on hover/focus to name the channel ("WhatsApp desk"). The width
   transition runs on max-width so the collapsed state stays a true circle. */
.wa-float{
  --wa-size:44px;
  --wa-open:260px;
  position:fixed; right:22px; bottom:22px; z-index:160;
  height:var(--wa-size); border-radius:999px; background:#25D366;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6);
  display:flex; align-items:center; gap:0;
  padding:0; overflow:hidden;
  max-width:var(--wa-size);
  transition:max-width .38s var(--ease), box-shadow var(--t);
}
.wa-float .wa-ico{
  width:var(--wa-size); height:var(--wa-size); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.wa-float svg{width:22px; height:22px; fill:#fff}
.wa-float .wa-label{
  display:flex; flex-direction:column; justify-content:center;
  white-space:nowrap; padding-right:18px; color:#fff; line-height:1.15;
}
.wa-float .wa-label b{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:-.01em}
.wa-float .wa-label i{font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.06em; opacity:.85; margin-top:2px}
.wa-float:hover,
.wa-float:focus-visible{
  max-width:var(--wa-open);
  box-shadow:0 18px 40px -12px rgba(37,211,102,.7);
}
.wa-float:focus-visible{outline:2px solid #fff; outline-offset:2px}
.wa-float .wa-ping{position:absolute; left:0; top:0; width:var(--wa-size); height:var(--wa-size); border-radius:50%; background:#25D366; opacity:.5; animation:waping 2.4s ease-out infinite; z-index:-1}
/* Touch devices have no hover to reveal the label, so keep the pill open. The
   narrow breakpoints below only re-set --wa-size / --wa-open, never max-width,
   so this declaration keeps winning regardless of source order. */
@media(hover:none){
  .wa-float{max-width:var(--wa-open)}
}
@keyframes waping{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.85);opacity:0}}

/* ---------- Bizzbot chat launcher (injected on all pages) ----------
   Sits above the WhatsApp float; sizing and hover label match the site. */
#bizbot-launcher .bizbot-fab{width:44px!important;height:44px!important}
#bizbot-launcher .bizbot-fab-icon{width:23px!important;height:23px!important}
#bizbot-launcher::after{
  content:"Message me";
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;
  background:rgba(7,46,55,.95);
  color:#fff; font-family:var(--display); font-weight:600; font-size:13px;
  padding:8px 13px; border-radius:10px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
#bizbot-launcher::before{
  content:""; position:absolute; right:calc(100% + 6px); top:50%;
  transform:translateY(-50%) translateX(6px);
  border:6px solid transparent; border-left-color:rgba(7,46,55,.95);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
#bizbot-launcher:hover::after,
#bizbot-launcher:focus-within::after,
#bizbot-launcher:hover::before,
#bizbot-launcher:focus-within::before{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
@media(hover:none){
  #bizbot-launcher::after,#bizbot-launcher::before{display:none}
}

/* ---------- Mobile nav (injected/overlay) ----------
   NOTE: the panel is position:absolute inside the fixed overlay (NOT position:fixed)
   — iOS Safari mis-paints fixed elements nested under a backdrop-filter ancestor,
   which showed up as a blank white drawer on iPhone. Scroll locking is done with
   body{position:fixed} in app.js (overflow:hidden alone doesn't lock iOS). */
.mobile-nav{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.28);
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.mobile-nav.show{visibility:visible; opacity:1; pointer-events:auto}
.mobile-nav .mn-panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(88vw,360px);
  background:#f5f5f7;
  padding:0 20px max(22px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  box-shadow:-12px 0 40px rgba(0,0,0,.12);
  transform:translate3d(102%,0,0); transition:transform .38s var(--ease);
}
.mobile-nav.show .mn-panel{transform:translate3d(0,0,0)}
body.menu-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}
body.menu-open .header{ z-index:199 }
.mn-head{
  position:sticky; top:0; z-index:2; background:#f5f5f7;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(16px, env(safe-area-inset-top)) 0 12px;
  margin-bottom:8px; border-bottom:1px solid rgba(0,0,0,.06);
}
.mn-brand{position:relative; width:120px; height:40px; overflow:hidden; flex-shrink:0}
.mn-brand img{position:absolute; left:0; top:50%; height:32px; width:auto; max-width:none; display:block; transform:translateY(-50%) scale(2.0); transform-origin:left center}
.mn-close{width:36px; height:36px; border-radius:0; border:none; background:transparent; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.mn-close:active{opacity:.6}
.mn-close svg{width:18px; height:18px; stroke:#1d1d1f; fill:none; stroke-width:1.6; stroke-linecap:round}
.m-link{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.02em; color:#1d1d1f; padding:12px 2px; border-bottom:1px solid rgba(0,0,0,.06); transition:color var(--t)}
.m-link:hover,.m-link.active{color:var(--teal-deep)}
.m-group{border-bottom:1px solid rgba(0,0,0,.06)}
.m-group-btn{display:flex; align-items:center; justify-content:space-between; width:100%; font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.02em; color:#1d1d1f; padding:12px 2px; transition:color var(--t)}
.m-group-btn svg{width:14px; height:14px; stroke:#1d1d1f; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t)}
.m-group.open .m-group-btn svg{transform:rotate(180deg)}
.m-group.open .m-group-btn,.m-group-btn:hover{color:var(--teal-deep)}
.m-group-menu{display:none; padding:4px 0 14px 8px; border-left:none; margin:0}
.m-group.open .m-group-menu{display:flex; flex-direction:column; gap:2px}
.m-group-menu .m-link{font-size:17px; font-weight:500; padding:9px 2px; border-bottom:none; color:#6e6e73}
.m-group-menu .m-link.active{color:var(--teal-deep)}
.mn-panel .btn{width:100%; justify-content:center; min-height:50px}
/* contact quick-links at the foot of the drawer (injected by app.js) */
.mn-contact{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px}
.mn-contact a{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:#4a6168; transition:color var(--t)}
.mn-contact a:hover{color:var(--teal-deep)}
.mn-contact svg{width:15px; height:15px; stroke:var(--teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}

/* ---------- Shared atoms ---------- */
.section-head{max-width:680px; margin-bottom:52px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(30px,4.4vw,48px); margin:14px 0 16px}
.section-head p{color:#4a6168; font-size:17px}
.section-head.on-dark h2{color:#fff}
.section-head.on-dark p{color:var(--mist-2)}

.skip{position:absolute; left:14px; top:-60px; background:var(--teal-ink); color:#fff; padding:11px 18px; border-radius:10px; z-index:400; transition:top var(--t); font-weight:600; font-size:14px}
.skip:focus{top:14px}

/* page fade-in transition — CSS-only so visibility never depends on JS/rAF.
   Opacity ONLY: animating transform on <body> (with fill-mode:both) leaves a permanent
   transform containing-block, which re-anchors every position:fixed element (mobile nav,
   WhatsApp float, modal) to the full document instead of the viewport — that was the
   "blank white drawer" bug on phones. */
.page-fade{animation:pageIn .55s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .nav,.header-cta .btn{display:none}
  .menu-btn{display:flex}
  /* the centre track is empty once .nav is hidden — collapse to brand | actions
     so the buttons stay pinned right instead of drifting into the middle */
  .header-inner{grid-template-columns:1fr auto}
  .footer-top{grid-template-columns:1fr 1fr; gap:32px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .footer-top{grid-template-columns:1fr}
  .wa-float{--wa-size:40px; --wa-open:230px; right:16px; bottom:16px}
  .cursor-glow{display:none}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1!important; transform:none!important}
  .marquee-track{animation:none!important}
  .cursor-glow,.wa-float .wa-ping,.btn-track .bt-ping,.preloader{display:none!important}
}

/* ============================================================
   BLOG — index (listing) + article (single post)
   Shared by blog.html and every blog-*.html post
   ============================================================ */

/* ---- shared breadcrumbs ---- */
.crumbs{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:#5f7a81; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.crumbs a{color:var(--teal-deep); transition:color var(--t)}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{color:var(--mist); user-select:none}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---- blog index hero ---- */
.blog-hero{padding:calc(var(--nav-h) + 64px) 0 18px; position:relative; overflow:hidden; background:linear-gradient(180deg,#fff,var(--cloud))}
.blog-hero .blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.4; pointer-events:none}
.blog-hero .blob.b1{width:380px; height:380px; background:rgba(18,166,190,.4); right:-90px; top:-120px}
.blog-hero .blob.b2{width:320px; height:320px; background:rgba(123,182,63,.35); left:-110px; top:40px}
.blog-hero .wrap{position:relative; z-index:2}
.blog-hero h1{font-size:clamp(40px,6vw,72px); line-height:1; margin:16px 0 0}
.blog-hero .lead{color:#3c555c; font-size:clamp(16px,1.7vw,20px); max-width:620px; margin-top:18px}

/* ---- category filter pills ---- */
.blog-filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.blog-filters .chip{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-ink); background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:999px; cursor:pointer; transition:all var(--t)}
.blog-filters .chip:hover{border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px)}
.blog-filters .chip.active{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px -12px rgba(11,124,144,.8)}

/* ---- featured post ---- */
.featured-post{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-spring),box-shadow .5s var(--ease-spring),border-color .5s var(--ease-spring)}
.featured-post:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--mist-2)}
.featured-post .fp-media{position:relative; overflow:hidden; min-height:320px; margin:10px; border-radius:calc(var(--r-xl) - 10px)}
.featured-post .fp-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.featured-post:hover .fp-media img{transform:scale(1.06)}
.featured-post .fp-flag{position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--teal-ink); color:#fff; padding:7px 13px; border-radius:999px}
.featured-post .fp-body{padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center}
.featured-post .fp-body h2{font-size:clamp(24px,2.8vw,36px); line-height:1.08; margin:14px 0 12px}
.featured-post .fp-body h2 a{transition:color var(--t)}
.featured-post .fp-body h2 a:hover{color:var(--teal-deep)}
.featured-post .fp-body p{color:#4a6168; font-size:16px; line-height:1.7}

/* ---- post grid + cards ---- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px}
.post-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-spring),border-color .45s var(--ease-spring)}
.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--mist-2)}
.post-card .pc-media{position:relative; aspect-ratio:16/10; overflow:hidden; margin:10px 10px 0; border-radius:calc(var(--r-lg) - 10px)}
.post-card .pc-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.post-card:hover .pc-media img{transform:scale(1.07)}
.post-card .pc-cat{position:absolute; top:13px; left:13px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--teal-deep); padding:6px 11px; border-radius:999px; backdrop-filter:blur(6px)}
.post-card .pc-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.post-card .pc-body h3{font-size:20px; line-height:1.18; margin-bottom:10px}
.post-card .pc-body h3 a{transition:color var(--t)}
.post-card:hover .pc-body h3 a{color:var(--teal-deep)}
.post-card .pc-body p{color:#4a6168; font-size:14.5px; line-height:1.6; flex:1}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; color:#7a949b; margin-top:16px}
.post-meta .mdot{width:3px; height:3px; border-radius:50%; background:var(--mist)}
.post-card .pc-more{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600; font-size:14px; color:var(--teal-deep)}
.post-card .pc-more svg{width:16px; height:16px; transition:transform var(--t)}
.post-card:hover .pc-more svg{transform:translateX(4px)}
.post-card.is-hidden{display:none}

/* ---- newsletter / subscribe strip ---- */
.subscribe{background:var(--teal-ink); border-radius:var(--r-xl); padding:clamp(34px,5vw,56px); position:relative; overflow:hidden; color:#fff; text-align:center}
.subscribe .mesh2{position:absolute; inset:-30%; filter:blur(70px); opacity:.65; background:radial-gradient(40% 40% at 28% 40%,rgba(18,166,190,.6),transparent 60%),radial-gradient(40% 40% at 76% 60%,rgba(123,182,63,.5),transparent 60%)}
.subscribe>*{position:relative; z-index:2}
.subscribe h2{color:#fff; font-size:clamp(26px,3.4vw,40px); margin-bottom:12px}
.subscribe p{color:var(--mist-2); max-width:480px; margin:0 auto 26px; font-size:16px}
.subscribe form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap}
.subscribe input{flex:1; min-width:200px; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); color:#fff; font-size:14.5px}
.subscribe input::placeholder{color:#9fc4cc}
.subscribe input:focus{outline:none; border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(70,201,222,.25)}

/* ============================================================
   ARTICLE (single blog post)
   ============================================================ */
.article-hero{padding:calc(var(--nav-h) + 40px) 0 clamp(28px,4vw,48px); background:linear-gradient(180deg,#fff,var(--cloud))}
.article-hero .wrap{max-width:880px}
.article-cat{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--grad); padding:7px 14px; border-radius:999px; margin:18px 0 0}
.article-hero h1{font-size:clamp(32px,5vw,56px); line-height:1.04; margin:18px 0 0}
.article-dek{color:#3c555c; font-size:clamp(17px,1.7vw,21px); line-height:1.55; margin-top:18px; margin-bottom:0}
.article-hero .article-figure{margin-top:clamp(36px,5vw,56px)}
.article-hero .wrap > .article-body{margin-top:0}
.article-body{margin-top:clamp(40px,5vw,64px); padding-bottom:48px}
.article-byline{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:26px 0 30px; font-size:14px; color:#5f7a81}
.article-byline .av{width:42px; height:42px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:16px; flex:none; object-fit:cover}
.article-byline .av.av-photo,.author-box .ab-av.ab-photo{background:none; object-fit:cover}
.article-inline-figure{margin:32px 0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line)}
.article-inline-figure img{width:100%; height:auto; display:block}
.article-inline-figure figcaption{padding:12px 16px; font-size:13.5px; color:#5f7a81; background:var(--cloud); line-height:1.5}
.article-figure figcaption{padding:12px 0 0; font-size:13.5px; color:#5f7a81; line-height:1.5}
.article-byline b{color:var(--teal-ink); font-weight:600}
.article-byline .bdot{width:3px; height:3px; border-radius:50%; background:var(--mist)}
.article-byline .mono{font-family:var(--mono); font-size:12.5px}

.article-figure{margin:0; position:relative}
/* 16/9, not 21/9. Every hero source sits between 1.33:1 and 2.03:1, so the old
   ultra-wide frame was cropping up to 38% of the height off — enough to cut the
   subject in half on the 3:2 shots. 16/9 roughly halves that. */
.article-figure .af-frame{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.article-figure img{width:100%; height:100%; object-fit:cover; object-position:center}
.img-credit{font-family:var(--mono); font-size:11px; color:#8aa2a9; margin-top:8px; text-align:right}
.img-credit a{color:#6f8c93; text-decoration:underline}

/* layout: content + sticky TOC */
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:54px; align-items:start; margin-top:48px}
.toc{grid-column:2; position:sticky; top:96px}
.toc .toc-card{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--paper)}
.toc h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:14px; font-weight:500}
.toc a{display:block; font-size:13.5px; color:#4a6168; padding:6px 0 6px 14px; border-left:2px solid var(--line); transition:all var(--t); line-height:1.4}
.toc a:hover{color:var(--teal-deep); border-left-color:var(--teal)}
.toc a.active{color:var(--teal-deep); border-left-color:var(--teal); font-weight:600}

/* prose */
.article-body{grid-column:1; grid-row:1; font-size:17px; line-height:1.78; color:#2b4248; max-width:72ch}
.article-body>*+*{margin-top:22px}
.article-body h2{font-size:clamp(24px,3vw,32px); line-height:1.12; margin-top:48px; scroll-margin-top:96px}
.article-body h3{font-size:21px; margin-top:34px; scroll-margin-top:96px}
.article-body p{color:#2b4248}
.article-body a:not(.btn){color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color var(--t)}
.article-body a:not(.btn):hover{color:var(--teal)}
.article-body strong{color:var(--teal-ink); font-weight:700}
.article-body ul,.article-body ol{padding-left:24px; color:#2b4248}
.article-body ul{list-style:disc} .article-body ol{list-style:decimal}
.article-body li{margin-top:9px; padding-left:4px}
.article-body li::marker{color:var(--teal)}
.article-body blockquote{margin:30px 0; padding:18px 24px; border-left:4px solid var(--teal); background:var(--cloud); border-radius:0 12px 12px 0; font-size:18px; color:var(--teal-ink); font-style:italic}
.article-body figure{margin:30px 0}
.article-body figure img{border-radius:var(--r); box-shadow:var(--shadow-sm)}
.article-body figcaption{font-family:var(--mono); font-size:12px; color:#7a949b; margin-top:10px; text-align:center}

/* tables */
.table-wrap{overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:var(--r); -webkit-overflow-scrolling:touch}
.article-body table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
.article-body table caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep); padding:14px 16px 0}
.article-body th,.article-body td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.article-body thead th{background:var(--teal-ink); color:#fff; font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:.01em; border-bottom:none}
.article-body tbody tr:nth-child(even){background:var(--cloud)}
.article-body tbody tr:last-child td{border-bottom:none}
.article-body td strong{color:var(--teal-deep)}

/* callouts */
.callout{border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; background:linear-gradient(135deg,rgba(18,166,190,.06),rgba(123,182,63,.06)); margin:30px 0}
.callout h4{font-size:16px; color:var(--teal-ink); margin-bottom:12px; display:flex; align-items:center; gap:9px}
.callout h4 svg{width:20px; height:20px; stroke:var(--teal-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.callout ul{padding-left:20px; margin:0}
.callout li{font-size:15px; margin-top:8px; color:#3c555c}

/* FAQ */
.faq-list{margin-top:18px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 44px 20px 4px; position:relative; font-family:var(--display); font-weight:600; font-size:17.5px; color:var(--teal-ink); transition:color var(--t)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--teal-deep)}
.faq-item summary::after{content:""; position:absolute; right:8px; top:24px; width:13px; height:13px; border-right:2px solid var(--teal-deep); border-bottom:2px solid var(--teal-deep); transform:rotate(45deg); transition:transform var(--t)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item .faq-a{padding:0 4px 22px; color:#3c555c; font-size:16px; line-height:1.7}
.faq-item .faq-a>*+*{margin-top:14px}

/* author box */
.author-box{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:var(--paper); margin-top:54px}
.author-box .ab-av{width:60px; height:60px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:22px; flex:none; object-fit:cover}
.author-box h4{font-size:18px; margin-bottom:6px}
.author-box p{font-size:14.5px; color:#4a6168; line-height:1.65}

/* share */
.share-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.share-row span{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7a949b; margin-right:4px}
.share-row a{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all var(--t)}
.share-row a:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.share-row a svg{width:19px; height:19px; fill:var(--teal-ink); transition:fill var(--t)}
.share-row a:hover svg{fill:var(--teal-deep)}

/* related */
.related .post-grid{margin-top:34px}

@media(max-width:980px){
  .article-layout{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .featured-post{grid-template-columns:1fr}
  .featured-post .fp-media{min-height:230px}
  .article-figure .af-frame{aspect-ratio:16/10}
}
@media(max-width:560px){
  .post-grid{grid-template-columns:1fr}
  .article-body{font-size:16px}
}

/* ============================================================
   GLOBAL LIGHT THEME  (no dark anywhere) + TOP CONTACT BAR
   This layer is intentionally last so it wins the cascade.
   ============================================================ */

/* Nav bar sticks flush to top (Apple-style) */
.header.scrolled{top:0; box-shadow:none}

/* --- Home hero: video spans behind nav (full-bleed) --- */
body[data-page="home"] .header{
  position:sticky; top:0; z-index:210;
  background:var(--cloud);
}
/* The bar sits directly on the hero footage until you scroll. Two states are
   excluded: .scrolled (content behind is light again) and an open dropdown
   (the menu needs an opaque bar to sit against) — in both it returns to solid
   cloud with dark text.
   Desktop only: below 1024px the responsive block forces the bar solid and
   .scrolled is never applied, so a light-on-dark nav there would put white
   icons on a light bar. */
@media (min-width:1025px){
  body[data-page="home"] .header:not(.scrolled):not(:has(.nav-drop.open)){
    --nav-fg:rgba(255,255,255,.92);
    --nav-fg-strong:#fff;
    --nav-icon:#fff;
    background:transparent;
    border-bottom-color:transparent;
  }
  body[data-page="home"] .header:not(.scrolled):not(:has(.nav-drop.open)) .btn-track{
    color:#fff;
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.45);
  }
  body[data-page="home"] .header:not(.scrolled):not(:has(.nav-drop.open)) .btn-track:hover{
    background:#fff; border-color:#fff; color:var(--teal-deep);
  }
  body[data-page="home"] .header:not(.scrolled):not(:has(.nav-drop.open)) .btn-track .bt-ping{
    border-color:rgba(255,255,255,.85);
  }
}
body[data-page="home"] .header.scrolled{
  top:0;
  background:var(--cloud);
}
body[data-page="home"] .home-hero{
  margin-top:calc(-1 * var(--nav-h));
  min-height:100vh; min-height:100dvh;
  padding:calc(var(--nav-h) + 18px) 0 48px;
  display:flex; align-items:center;
  background:transparent !important;
}
/* Top-aligned so the track card tucks in directly under the header's
   "Get a Quote" button instead of floating at the column's vertical centre. */
body[data-page="home"] .hero-grid{align-items:center}

/* Desktop: pin the track card directly beneath the header's track + Get a Quote
   buttons. It is anchored to .home-hero (not .wrap) and uses the same
   `clamp(18px,3vw,44px)` right padding the header does, so its right edge lines
   up with Get a Quote at every width. Below 1025px it drops back into normal
   flow and stacks under the copy. */
@media (min-width:1025px){
  body[data-page="home"] .hero-side{
    position:absolute;
    top:calc(var(--nav-h) + 14px);
    right:clamp(18px,3vw,44px);
    width:400px; max-width:none;
    margin:0; padding:0;
    z-index:4;
  }
}
body[data-page="home"] .home-hero .hero-kicker{margin-top:0}

/* --- footer → light --- */
.footer{background:var(--cloud); color:#3c555c}
.footer .fglow{opacity:.45}
.footer-top{border-bottom:1px solid var(--line)}
.footer-brand p{color:#4a6168}
.footer h4{color:var(--teal-ink)}
.footer-col a{color:#4a6168}
.footer-col a:hover{color:var(--teal-deep)}
.contact-item{color:#4a6168}
.contact-item svg{stroke:var(--green-deep)}
.contact-item a:hover{color:var(--teal-deep)}
.footer-bottom{color:#6f8c93}
.footer-legal a{color:#6f8c93}
.footer-legal a:hover{color:var(--teal-deep)}
.footer-bottom .accs span{border:1px solid var(--line); color:#6f8c93}

/* --- shared dark accent blocks → light --- */
.cta-band, .cell.big, .cell.accent, .help-card.a, .vm-card.vision, .subscribe{
  background:var(--cloud) !important; color:var(--ink) !important; border:1px solid var(--line)}
.cta-band h2, .cell.big h3, .cell.accent h3, .help-card.a h3, .vm-card.vision h3, .subscribe h2{color:var(--teal-ink) !important}
.cta-band .bignum, .cell.big .bignum{color:var(--green-deep) !important}
.cta-band p, .cell.big p, .cell.accent p, .help-card.a p, .help-card.a li, .vm-card.vision p, .subscribe p{color:#4a6168 !important}
.cta-band .mesh2, .subscribe .mesh2{opacity:.45 !important}
.cta-band .eyebrow.light, .subscribe .eyebrow.light, .eyebrow.center.light, .eyebrow.light{color:var(--teal-deep) !important}
.cell.big .bignum span:not(.suf), .cell.big .bignum{color:var(--green-deep) !important}
.cell.big .bignum .suf, .cell.big .suf{color:#6f8c93 !important}
.cell.big .trust-points li{color:#3c555c !important}
.cell.big .trust-chips span{color:var(--green-deep) !important; border-color:rgba(123,182,63,.4); background:rgba(123,182,63,.1)}
.cell.accent .ci{background:linear-gradient(135deg,rgba(18,166,190,.14),rgba(123,182,63,.14)) !important}
.cell.accent .ci svg{stroke:var(--teal-deep) !important}
.cell.accent:hover .ci{background:var(--grad) !important}
.cell.accent:hover .ci svg{stroke:#fff !important}
.cell.big .arrow-link, .cell.accent .arrow-link, .cta-band .arrow-link{color:var(--teal-deep) !important}
.cta-band .btn-outline.on-dark, .subscribe .btn-outline.on-dark{color:var(--teal-ink) !important; border-color:var(--line) !important}
.cta-band .btn-outline.on-dark:hover, .subscribe .btn-outline.on-dark:hover{border-color:var(--teal) !important; color:var(--teal-deep) !important}
.lane-band{background:var(--cloud) !important; border-color:var(--line) !important}
.subscribe input{background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important}
.subscribe input::placeholder{color:#9bb1b7 !important}

/* --- neutralise any on-dark header / section heads to dark text --- */
.section-head.on-dark h2{color:var(--teal-ink) !important}
.section-head.on-dark p{color:#4a6168 !important}
/* vision card (was dark) icon visibility on light */
.vm-card.vision .ico{background:linear-gradient(135deg,rgba(18,166,190,.14),rgba(123,182,63,.14)) !important}
.vm-card.vision .ico svg{stroke:var(--teal-deep) !important}
.vm-card.vision::after{background:rgba(18,166,190,.06) !important}

/* ============================================================
   TOP BAR EXTRAS · 24/7 AOG BANNER · HERO VIDEO · CONTACT PAGE
   ============================================================ */

/* home hero video background */
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none}

/* contact page */
.contact-hero{padding:calc(var(--nav-h) + 60px) 0 12px; background:linear-gradient(180deg,#fff,var(--cloud))}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:14px}
.cinfo-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; background:#fff; box-shadow:var(--shadow-sm)}
.cinfo-card h2{font-size:24px; margin-bottom:6px}
.cinfo-card>p{color:#4a6168}
.cinfo-list{margin-top:18px; display:flex; flex-direction:column; gap:16px}
.cinfo-item{display:flex; gap:14px; align-items:flex-start}
.cinfo-item .ci-ico{width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,rgba(18,166,190,.14),rgba(123,182,63,.14)); display:flex; align-items:center; justify-content:center; flex:none}
.cinfo-item .ci-ico svg{width:22px; height:22px; stroke:var(--teal-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cinfo-item .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7a949b}
.cinfo-item .val{font-size:16px; color:var(--teal-ink); font-weight:600; margin-top:2px}
.cinfo-item .val a:hover{color:var(--teal-deep)}
.contact-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.map-frame{position:relative; width:100%; height:460px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.map-frame iframe{width:100%; height:100%; border:0; display:block}
/* two-branch map grid (contact page) */
.maps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:26px}
.maps-grid .map-frame{height:400px}
.map-card h3{font-size:20px; color:var(--teal-ink); margin-bottom:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.map-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); background:rgba(18,166,190,.09); border:1px solid var(--line); border-radius:999px; padding:4px 11px}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} .map-frame{height:360px} .maps-grid{grid-template-columns:1fr} }

/* about: discover-more cards */
.discover-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.disc-card{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:#fff; transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring),border-color .4s var(--ease-spring)}
.disc-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--mist-2)}
.disc-card .dc-ico{width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,rgba(18,166,190,.14),rgba(123,182,63,.14)); display:flex; align-items:center; justify-content:center; flex:none}
.disc-card .dc-ico svg{width:22px; height:22px; stroke:var(--teal-deep); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.disc-card span:not(.dc-ico){display:flex; flex-direction:column; gap:2px; min-width:0}
.disc-card b{font-family:var(--display); font-size:15.5px; color:var(--teal-ink)}
.disc-card small{font-size:12.5px; color:#6f8c93}
.disc-card .dc-ar{width:17px; height:17px; margin-left:auto; stroke:var(--teal-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; transition:transform var(--t)}
.disc-card:hover .dc-ar{transform:translate(3px,-3px)}
@media(max-width:820px){ .discover-grid{grid-template-columns:1fr} }

/* ============================================================
   RESPONSIVE — tablets, phones, all viewports
   ============================================================ */

@media (max-width:1024px){
  :root{ --nav-h:56px }
  html:focus-within{ scroll-padding-top:72px }
  .section{ padding:clamp(48px,8vw,88px) 0 }
  .section-head{ margin-bottom:40px }
  .header .wrap{ padding:0 16px }
  .header,.header.scrolled,body[data-page="home"] .header,body[data-page="home"] .header.scrolled{
    top:0 !important; box-shadow:none !important;
    background:var(--cloud) !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
  }
  .header.scrolled .header-inner,.header.glass .header-inner,.header .header-inner{
    height:var(--nav-h) !important; margin:0 !important; padding:0 16px !important;
    border-radius:0 !important; border:none !important;
    box-shadow:none !important; background:transparent !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .header.scrolled .brand img,.header.glass .brand img,.brand img{
    height:30px !important;
    transform:translateY(-50%) scale(2.5) !important;
  }
  /* Track-a-shipment reads as a faint outline on a phone: 32px is under the 44px
     touch-target minimum, and a 10% fill with a 30% border next to a solid black
     hamburger looks like a stray glyph rather than a button. The desktop header
     solves this by turning it white over the hero, but that treatment is gated at
     1025px and the mobile bar is always solid --cloud. So give it weight here
     instead — bigger target, a fill you can actually see, a heavier ring. */
  .btn-track{
    width:38px; height:38px;
    background:rgba(18,166,190,.18);
    border-color:rgba(18,166,190,.62);
  }
  .btn-track svg{ width:21px; height:21px; stroke-width:1.9 }
  .brand{ width:106px; height:var(--nav-h) }
  .footer-brand .fb-logo{ width:106px; height:var(--nav-h) }
  .footer-brand .fb-logo img{ height:30px !important; transform:translateY(-50%) scale(2.5) !important }
  /* The hero is a flex row on desktop; .hero-side is a sibling of .wrap, so it
     has to stack rather than sit beside the copy once the card drops back into
     normal flow. */
  body[data-page="home"] .home-hero{
    min-height:auto; padding:calc(var(--nav-h) + 20px) 0 44px;
    flex-direction:column; align-items:stretch;
  }
  /* one column below the desktop breakpoint — the card centres under the copy */
  .hero-grid{ grid-template-columns:1fr !important; gap:32px }
  .page-hero{ padding-top:calc(var(--nav-h) + 52px) !important }
  .blog-hero{ padding-top:calc(var(--nav-h) + 52px) !important }
  .article-hero{ padding-top:calc(var(--nav-h) + 36px) !important }
  .contact-hero{ padding-top:calc(var(--nav-h) + 48px) !important }
  .svc-hero{ padding-top:calc(var(--nav-h) + 56px) !important }
  .car-hero{ padding-top:calc(var(--nav-h) + 52px) !important }
}

@media (max-width:768px){
  :root{ --nav-h:56px }
  .wrap{ padding:0 18px }
  .section-head h2{ font-size:clamp(26px,6vw,38px) }
  .section-head p{ font-size:15px }
  .header-inner{ gap:8px }
  .header.scrolled .header-inner,.header.glass .header-inner,.header .header-inner{
    height:var(--nav-h) !important; margin:0 !important; border-radius:0 !important;
  }
  .brand{ width:100px; height:var(--nav-h) }
  .brand img{ height:28px !important; transform:translateY(-50%) scale(2.5) !important }
  .footer-brand .fb-logo{ width:100px; height:var(--nav-h) }
  .footer-brand .fb-logo img{ height:28px !important; transform:translateY(-50%) scale(2.5) !important }
  .menu-btn{ width:36px; height:36px }
  .btn-lg{ width:100%; max-width:100%; padding:15px 22px; font-size:15px; min-height:52px }
  .btn{ white-space:normal; text-align:center }
  .cta-band .row{ flex-direction:column; align-items:center }
  .cta-band .row .btn{ width:100%; max-width:320px }
  body[data-page="home"] .home-hero{
    margin-top:calc(-1 * var(--nav-h)); min-height:auto;
    padding:calc(var(--nav-h) + 16px) 0 36px;
  }
  .hero-grid{ grid-template-columns:1fr !important; gap:28px !important }
  .home-hero h1{ font-size:clamp(30px,8vw,44px) !important }
  .home-hero .sub{ font-size:15px; max-width:none }
  .hh-stats{
    display:grid !important; grid-template-columns:repeat(2,1fr);
    gap:22px 16px !important; margin-top:28px;
  }
  /* Five stats in a two-column grid leaves the last one stranded in a half
     row — let it span the full width instead so the block stays balanced. */
  .hh-stats .s:last-child{ grid-column:1 / -1 }
  /* "100,000+" is far wider than the old "24/7", so the number scales down a
     step on phones to keep each stat inside its column. */
  .hh-stats .s b{ font-size:clamp(26px,7vw,38px) !important }
  /* Direct child only. This used to be `.hh-stats .s span`, which also caught the
     counted number and the suffix spans inside <b> — that is why "24" rendered at
     11px next to a full-size "/7". */
  .hh-stats .s > span{ font-size:11px !important }
  .hh-cta{ flex-direction:column }
  .hh-cta .btn{ width:100% }
  .rot-badge{ width:80px; height:80px; right:4px !important; top:-24px !important }
  .bento{ grid-template-columns:1fr !important }
  .bento .cell.big,.bento .cell.wide{ grid-column:span 1 !important; grid-row:span 1 !important }
  .ph-grid{ grid-template-columns:1fr !important; gap:20px !important }
  .ph-grid > .reveal[data-rv="right"]{ padding-top:0 !important }
  .ph-title{ font-size:clamp(32px,8vw,48px) !important }
  .ph-lead{ max-width:none !important; font-size:16px !important }
  .page-hero{ padding-bottom:28px !important }
  .footer{ padding:56px 0 28px }
  .footer-top{ grid-template-columns:1fr !important; gap:28px }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px }
  .subscribe form{ flex-direction:column; max-width:100% }
  .subscribe input{ min-width:0; width:100% }
  .subscribe form .btn{ width:100% }
  .marquee-item{ font-size:clamp(14px,3.5vw,18px); gap:12px }
  .lane-band{ padding:18px 0 }
  .cta-band{ padding:clamp(32px,8vw,48px) 20px; border-radius:var(--r-lg) }
  .cta-band h2{ font-size:clamp(24px,6.5vw,36px) }
  .faq-q{ font-size:16px; padding:18px 16px; gap:12px }
  .faq-a .inner{ padding:0 16px 18px; font-size:15px }
  .faq-search input{ font-size:16px }
  .contact-actions{ flex-direction:column }
  .contact-actions .btn{ width:100% }
  .map-frame{ height:280px !important }
  .cinfo-card{ padding:22px }
  .disc-card{ padding:16px }
  .fgrid{ grid-template-columns:1fr !important }
  .form-card{ padding:24px 20px !important }
  .q-aside{ padding-left:20px !important; padding-right:20px !important }
  .q-main{ padding-left:16px !important; padding-right:16px !important }
  .q-steps{ flex-wrap:wrap; gap:8px }
  .fc-top{ flex-direction:column; align-items:flex-start; gap:10px }
  .filters{ gap:8px }
  .chip{ font-size:13px; padding:9px 14px }
  .svc-hero h1{ font-size:clamp(32px,8vw,52px) }
  .promise{ grid-template-columns:1fr !important }
  .mobile-nav .mn-panel{ width:min(88vw,330px) }
  .author-box{ flex-direction:column; padding:20px }
  .featured-post .fp-body{ padding:22px }
  .vm{ grid-template-columns:1fr !important }
  .ceo{ grid-template-columns:1fr !important }
  .ceo-photo{ max-width:100% !important }
  .about-grid{ grid-template-columns:1fr !important }
  .values-grid{ grid-template-columns:1fr !important }
  .net-grid{ grid-template-columns:1fr !important }
}

@media (max-width:480px){
  :root{ --nav-h:56px; --header-stick-gap:0 }
  .wrap{ padding:0 14px }
  .header.scrolled .header-inner,.header.glass .header-inner,.header .header-inner{
    height:var(--nav-h) !important; margin:0 !important; padding:0 14px !important;
  }
  .brand{ width:92px; height:var(--nav-h) }
  .brand img{ height:26px !important; transform:translateY(-50%) scale(2.5) !important }
  .footer-brand .fb-logo{ width:92px; height:var(--nav-h) }
  .footer-brand .fb-logo img{ height:26px !important; transform:translateY(-50%) scale(2.5) !important }
  .rot-badge{ display:none }
  .hh-stats{ grid-template-columns:1fr 1fr; gap:16px !important }
  .hh-badge{ font-size:10px; padding:7px 12px }
  .wa-float{ --wa-size:38px; --wa-open:186px; right:12px; bottom:12px }
  /* the sub-line is the first thing to go when the pill has to stay open */
  .wa-float .wa-label i{ display:none }
  .footer-bottom .accs{ flex-direction:column; align-items:flex-start }
  .vm-card{ padding:28px 22px !important }
  .help-card{ padding:24px !important }
  .post-card .pc-body{ padding:18px }
  .article-body{ font-size:16px }
  .article-hero h1{ font-size:clamp(26px,7vw,36px) }
  .tline::before{ left:24px }
  .tl-row{ grid-template-columns:48px 1fr !important; gap:12px !important }
  .tl-row .yr{ font-size:16px; text-align:left }
  .ph-meta{ flex-wrap:wrap; gap:20px }
  .car-hero h1{ font-size:clamp(30px,8vw,44px) }
}

@media (min-width:769px) and (max-width:1024px){
  .bento{ grid-template-columns:repeat(2,1fr) !important }
  .bento .cell.big{ grid-column:span 2 !important; grid-row:span 1 !important }
  .bento .cell.wide{ grid-column:span 2 !important }
  .post-grid{ grid-template-columns:repeat(2,1fr) !important }
  .ph-grid{ grid-template-columns:1fr !important; gap:24px }
  .ph-grid > .reveal[data-rv="right"]{ padding-top:0 !important }
  .footer-top{ grid-template-columns:1fr 1fr !important }
}

@media (hover:none) and (pointer:coarse){
  .chip,.faq-q{ min-height:44px }
  .btn:hover,.post-card:hover,.disc-card:hover,.bento .cell:hover{ transform:none }
}

/* ===== Industries we cater to ===== */
.ind-hero{
  padding:calc(var(--nav-h) + 72px) 0 28px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,var(--cloud) 100%);
}
.ind-hero .mesh{
  position:absolute; inset:-20%; filter:blur(70px); opacity:.55;
  background:
    radial-gradient(40% 40% at 80% 10%,rgba(18,166,190,.35),transparent 60%),
    radial-gradient(40% 40% at 15% 60%,rgba(123,182,63,.3),transparent 60%);
  background-size:160% 160%;
  animation:ind-meshmove 20s ease-in-out infinite;
}
@keyframes ind-meshmove{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(4%,4%,0) scale(1.14)}
}
.ind-hero .wrap{position:relative; z-index:2}
.ind-hero .hh-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:999px;
  background:rgba(18,166,190,.08); border:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal-deep);
}
.ind-hero h1{
  font-size:clamp(36px,5.5vw,64px); line-height:1.05;
  color:var(--teal-ink); margin:16px 0 0;
}
.ind-hero p{
  color:#4a6168; font-size:clamp(15px,1.5vw,18px);
  max-width:560px; margin-top:16px;
}
.ind-section{padding:28px 0 64px}
.ind-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 18px;
}
.ind-card{
  /* Each card carries its own sector colour via --ic / --ic-soft, set inline on
     the article. These are the fallbacks for anything that does not. */
  --ic:var(--teal-deep);
  --ic-soft:rgba(18,166,190,.13);
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px 20px;
  background:#fff;
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ind-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--ic);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--t); pointer-events:none; z-index:1;
}
.ind-card:hover,
.ind-card:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.ind-card:hover::before,
.ind-card:focus-within::before{opacity:1}
.ind-card:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}
/* Tinted tile at rest, solid on hover — so fourteen sectors read as fourteen
   distinct marks instead of one repeated brand-gradient square. */
.ind-ico{
  width:52px; height:52px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--ic-soft);
  transition:transform var(--t), background var(--t);
}
.ind-card:hover .ind-ico,
.ind-card:focus-within .ind-ico{transform:scale(1.06); background:var(--ic)}
.ind-ico svg{
  width:27px; height:27px;
  stroke:var(--ic); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--t);
}
.ind-card:hover .ind-ico svg,
.ind-card:focus-within .ind-ico svg{stroke:#fff}
.ind-card h3{
  flex:1; min-width:0;
  font-size:17px; line-height:1.3;
  color:var(--teal-ink); margin:0;
  font-weight:600;
}
.ind-card .ind-desc{
  flex-basis:100%;
  max-height:0; opacity:0; overflow:hidden;
  margin:0; color:#4a6168; font-size:13.5px; line-height:1.55;
  transition:max-height .45s var(--ease), opacity .3s ease, margin .35s ease;
}
.ind-card:hover .ind-desc,
.ind-card:focus-within .ind-desc{
  max-height:160px; opacity:1; margin-top:4px;
}
/* Touch devices have no hover: keep the description visible so cards are
   readable without a desktop-only interaction. */
@media (hover: none){
  .ind-card .ind-desc{
    max-height:none; opacity:1; overflow:visible; margin-top:4px;
  }
}
.ind-cta{margin-top:42px; text-align:center}
@media(max-width:760px){
  .ind-grid{grid-template-columns:1fr}
  .ind-card{padding:14px 16px; gap:14px}
  .ind-ico{width:46px; height:46px}
  .ind-card h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .ind-hero .mesh{animation:none}
  .ind-card,
  .ind-card .ind-desc{transition:none}
}