/* ============================================================
   Lolly Logistics Ltd — the distribution arm of Lonmar Group.
   Internal logistics only: no trade account, no supplier list, no shop.

   House rule: WHITE canvas. The brand navy (#0C0342, sampled from the
   supplied logo plate) is used as ink and as the plate the logo sits on —
   never as a page background. Flamingo pink (#D54382, also sampled) is the
   single accent. #D54382 clears 4.24:1 on white, which is AA for large text
   and UI only, so small text and links use the deeper #B62E68 (5.9:1).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#0C0342;
  --navy-700:#180B5C;
  --pink:#D54382;        /* graphics, large type, fills */
  --pink-ink:#B62E68;    /* small text and links — AA on white */
  --pink-050:#FCEFF5;

  --ink:#12102B;
  --body:#43405C;
  --muted:#6F6C86;
  --line:#E7E6EF;
  --line-2:#F0EFF6;
  --paper:#FFFFFF;
  --paper-2:#F7F7FB;

  --maxw:1240px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Outfit","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .55em;color:var(--ink);font-family:var(--display);font-weight:600;
  letter-spacing:-.03em;line-height:1.12}
p{margin:0 0 1rem}
.wrap{max-width:calc(var(--maxw) + 64px);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;
  padding:11px 18px;font-weight:600;font-size:14px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pink-ink);margin:0 0 16px}

/* ---------------- header ---------------- */
header.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
header.site .bar{max-width:calc(var(--maxw) + 64px);margin:0 auto;padding:0 32px;height:80px;
  display:flex;align-items:center;gap:36px;transition:height .35s var(--ease)}
header.site.is-lifted .bar{height:62px}
/* The mark sits directly on the white bar now — a navy chip made it read as a small dark
   button rather than a logo. The navy wordmark clears 19:1 on white. */
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:44px;width:auto;transition:height .35s var(--ease)}
header.site.is-lifted .brand img{height:34px}
.mainnav{display:flex;gap:30px;align-items:center}
.mainnav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:8px 0;
  border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--pink-ink);border-bottom-color:var(--pink)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;position:absolute;left:0;right:0;top:100%;
  border-bottom:1px solid var(--line);background:#fff;box-shadow:0 18px 34px -24px rgba(12,3,66,.4)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:15px 32px;border-top:1px solid var(--line-2);
  font-size:15.5px;font-weight:500;color:var(--ink)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:10px;font-size:15px;font-weight:600;white-space:nowrap;
  border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--pink);color:var(--pink-ink)}
.btn svg{width:17px;height:17px}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--paper)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* The veil is a scrim behind the WORDS, not a wash over the film. It holds AA contrast
   across the left third and is fully clear by 66%, so the lorry plays in the open. */
.hero-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(96deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.95) 24%,
    rgba(255,255,255,.82) 38%,
    rgba(255,255,255,.42) 52%,
    rgba(255,255,255,.10) 62%,
    rgba(255,255,255,0)   70%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:72px}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.5rem);font-weight:600;letter-spacing:-.045em;
  max-width:16ch;margin:0 0 22px}
/* The pink half of the headline has to sit on its own line on wide screens, where the
   veil has already cleared — on the film it only reaches 1.4:1. A <br> toggled with
   display:none swallowed the word space and rendered "behindthe", so the second half
   is a span that simply becomes a block once there is room for two lines. */
.hero h1 .h1-line2{display:inline}
@media(min-width:900px){.hero h1 .h1-line2{display:block}}
.hero h1 em{font-style:normal;color:var(--pink-ink)}
.hero .lede{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--body);max-width:34ch;margin:0 0 34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-rule{width:56px;height:3px;background:var(--pink);border-radius:2px;margin:0 0 26px}

/* ---------------- section furniture ---------------- */
.sec{padding:104px 0}
.sec-2{background:var(--paper-2)}
.sec-head{max-width:60ch;margin:0 0 52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h1,.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.7rem);margin:0 0 14px}
.sec-head p{font-size:1.05rem;color:var(--muted);margin:0}

/* ---------------- capability cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:32px 28px 30px;
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.card:hover{border-color:#D9D7E6;transform:translateY(-3px);
  box-shadow:0 28px 56px -34px rgba(12,3,66,.34)}
.card-ico{width:46px;height:46px;border-radius:12px;background:var(--pink-050);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.card-ico svg{width:22px;height:22px;color:var(--pink-ink)}
.card h3{font-size:1.16rem;margin:0 0 8px}
.card p{font-size:14.8px;color:var(--muted);margin:0;line-height:1.62}

/* ---------------- full-bleed figure ---------------- */
.figure{position:relative;overflow:hidden;background:var(--paper-2)}
.figure img,.figure video{width:100%;height:clamp(320px,52vw,620px);object-fit:cover;display:block}
.figure-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:84px 0 34px;
  background:linear-gradient(to top,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 34%,
                             rgba(255,255,255,.55) 70%,rgba(255,255,255,0) 100%)}
.figure-cap p{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:-.02em;color:var(--ink);margin:0;max-width:30ch}

/* ---------------- split statement ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.split .lede{font-size:1.08rem;color:var(--body)}

/* ---------------- group row ---------------- */
.group-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.group-tile{display:flex;align-items:center;justify-content:center;height:96px;padding:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  transition:border-color .3s,transform .3s var(--ease)}
.group-tile:hover{border-color:var(--pink);transform:translateY(-2px)}
.group-tile img{max-height:var(--cap-h,44px);max-width:82%;width:auto;height:auto;object-fit:contain}
/* A blanket max-width/max-height sizes each mark by its own aspect ratio, so Surrey rendered
   262px wide against 1Way's 21px in identical tiles. Cap each by shape instead, tuned for equal
   optical AREA rather than equal height. Retune these if a logo file is ever swapped. */
.group-tile img[src*="surrey"]    {--cap-h:26px}   /* 5.05:1 wordmark */
.group-tile img[src*="beveron"]   {--cap-h:30px}   /* 3.08:1 */
.group-tile img[src*="alaska"]    {--cap-h:28px}   /* 3.43:1 wordmark + range */
.group-tile img[src*="aopartners"]{--cap-h:42px}   /* 1.50:1 */
.group-tile img[src*="valafresh"] {--cap-h:48px}   /* 1.11:1 */
.group-tile img[src*="nanuq"]     {--cap-h:50px}   /* 1.01:1 */
.group-tile img[src*="ceta"]      {--cap-h:60px}   /* 0.71:1 */
.group-tile img[src*="1way"]      {--cap-h:60px}   /* 0.35:1 — at the 60px box ceiling */
.group-word{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:-.02em;color:var(--ink);text-align:center;line-height:1.2}

/* ---------------- contact ---------------- */
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px 32px}
.contact-card .k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-card .v{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--ink);word-break:break-word}
.contact-card a.v:hover{color:var(--pink-ink)}

/* ---------------- footer ---------------- */
footer.site{background:var(--paper-2);border-top:1px solid var(--line);padding:64px 0 96px;
  font-size:14.5px;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:44px;
  border-bottom:1px solid var(--line)}
.foot-brand{display:inline-flex;margin-bottom:22px}
.foot-brand img{height:40px;width:auto}
.foot-top h4{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.foot-top a{display:block;padding:5px 0;color:var(--muted);transition:color .2s}
.foot-top a:hover{color:var(--pink-ink)}
.foot-legal{padding-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;
  justify-content:space-between;font-size:13.5px}
.foot-legal p{margin:0}

/* ---------------- motion (resting state IS the final state) ---------------- */
.rise{opacity:1;transform:none}
.js-motion .rise{opacity:0;transform:translateY(18px)}
.js-motion .rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .group-grid{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  header.site .bar{height:64px;padding:0 20px;gap:14px}
  .brand img{height:34px}
  header.site.is-lifted .brand img{height:30px}
  .mainnav{display:none}
  .burger{display:flex}
  .hero{min-height:auto}
  .hero .wrap{padding-top:64px;padding-bottom:60px}
  .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.88) 46%,rgba(255,255,255,.34) 78%,rgba(255,255,255,.10) 100%)}
  .hero h1{max-width:none}
  .hero-cta .btn{width:100%}
  .sec{padding:68px 0}
  .cards,.group-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-legal{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* the film is never attached under reduced motion (see app.js), so the
     poster is already what shows — hiding it here would blank the hero */
  .js-motion .rise{opacity:1;transform:none;transition:none}
  .card:hover,.group-tile:hover{transform:none}
}

/* ---------------- legal prose ---------------- */
.sec h3{font-size:1.06rem;margin:34px 0 10px;letter-spacing:-.015em}
.sec h3:first-child{margin-top:0}
.sec p a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px}

/* a contact card that carries more than one row */
.contact-card + .contact-card{margin-top:16px}
.contact-rows{display:grid;gap:18px}
.contact-rows .row{display:flex;flex-direction:column;gap:5px}
.contact-rows .row + .row{padding-top:18px;border-top:1px solid var(--line)}
.foot-tel{margin-top:14px;line-height:1.9}
.foot-tel a{color:var(--ink);font-weight:600}
.foot-tel a:hover{color:var(--pink-ink)}

/* ============================================================
   CONTACT PAGE
   The two ways in are the whole point of the page, so they get the
   space a hero would. The route below is drawn in SVG rather than
   shot as film — it weighs nothing and stays sharp at any size.
   ============================================================ */
.c-hero{position:relative;overflow:hidden;padding:96px 0 104px;background:var(--paper)}
.c-glow{position:absolute;top:-30%;right:-12%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(213,67,130,.16) 0%,rgba(213,67,130,.06) 42%,rgba(255,255,255,0) 70%);
  pointer-events:none}
.c-hero .wrap{position:relative;z-index:1}
.c-hero h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:600;letter-spacing:-.045em;
  margin:0 0 20px;max-width:16ch}
.c-hero h1 em{font-style:normal;color:var(--pink-ink)}
.c-lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--body);max-width:46ch;margin:0 0 46px}

.c-cards{display:grid;gap:22px}   /* columns are set once, by the auto-fit rule below */
.c-card{position:relative;display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:34px 32px 30px;overflow:hidden;
  transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.c-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--navy));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.c-card:hover{border-color:#D9D7E6;transform:translateY(-4px);
  box-shadow:0 34px 64px -38px rgba(12,3,66,.42)}
.c-card:hover::after{transform:scaleX(1)}
.c-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;background:var(--pink-050);color:var(--pink-ink);margin-bottom:24px;
  transition:background .3s,color .3s}
.c-ico svg{width:24px;height:24px}
.c-card:hover .c-ico{background:var(--navy);color:#fff}
.c-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.c-v{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.45rem,3vw,2.15rem);color:var(--ink);line-height:1.15}
.c-v-mail{font-size:clamp(1.1rem,2.2vw,1.62rem);word-break:break-word}
.c-sub{display:block;font-size:14px;color:var(--muted);margin-top:12px}
.c-go{position:absolute;right:26px;top:34px;color:var(--pink);opacity:0;
  transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.c-go svg{width:22px;height:22px;display:block}
.c-card:hover .c-go{opacity:1;transform:translateX(0)}

/* ---------------- the animated run ---------------- */
.route-sec{padding:20px 0 104px;background:var(--paper)}
.route-head{font-size:clamp(1.5rem,3vw,2.2rem);text-align:center;max-width:22ch;
  margin:0 auto 8px}
.route{max-width:1100px;margin:0 auto}
.route svg{width:100%;height:auto;display:block;overflow:visible}
.rt-line{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.rt-lit{stroke:var(--pink);stroke-width:3;stroke-dasharray:26 1000;
  animation:rtDraw 7s linear infinite}
@keyframes rtDraw{from{stroke-dashoffset:1026}to{stroke-dashoffset:0}}
.rt-pulse{fill:var(--pink)}
.rt-stop circle{fill:var(--paper);stroke:var(--navy);stroke-width:2.5}
.rt-glyph{fill:none;stroke:var(--navy);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rt-glyph-d{fill:var(--navy);stroke:none}
.rt-tick{stroke:var(--pink-ink);stroke-width:2.4}
.rt-stop text{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;
  fill:var(--ink);text-anchor:middle}
.route-note{text-align:center;color:var(--muted);max-width:44ch;margin:26px auto 0;font-size:15px}

@media(max-width:760px){
  .c-hero{padding:64px 0 72px}
  .route-sec{padding:8px 0 68px}
  .c-card{padding:28px 24px 26px}
}
@media(prefers-reduced-motion:reduce){
  .rt-lit{animation:none;stroke-dasharray:none;opacity:.55}
  .rt-pulses{display:none}
  .c-card:hover{transform:none}
}

/* ---------------- WhatsApp ----------------
   Same floating button the other Lonmar sites carry. Sits above the page but
   clear of the footer text, and keeps a 52px target on every screen size. */
.wa{position:fixed;right:20px;bottom:20px;z-index:9998;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;
  box-shadow:0 10px 26px -6px rgba(37,211,102,.5),0 4px 12px rgba(0,0,0,.16);
  transition:transform .3s var(--ease),box-shadow .3s}
.wa svg{width:29px;height:29px;fill:#fff}
.wa:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 34px -8px rgba(37,211,102,.6),0 6px 16px rgba(0,0,0,.18)}
.wa:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media(max-width:600px){.wa{right:14px;bottom:14px;width:52px;height:52px}
  footer.site{padding-bottom:88px}.wa svg{width:26px;height:26px}}

/* three ways in rather than two — let the row reflow instead of forcing columns */
.c-cards{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
/* two cards, so auto-fit alone is correct: 2-up while both clear 268px, 1-up below */
.c-card-wa .c-ico{background:#E6F8EE;color:#128C4A}      /* WhatsApp green, darkened to 4.6:1 */
.c-card-wa .c-ico svg{fill:currentColor;stroke:none}
.c-card-wa:hover .c-ico{background:#128C4A;color:#fff}
.c-card-wa::after{background:linear-gradient(90deg,#25D366,var(--navy))}

/* visually hidden, still read aloud */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The route has two geometries. The landscape one squeezed into a phone column renders 76px
   tall with 7.6px labels — its text is SVG <text>, so it scales with the viewBox and no
   font-size override can rescue it. Below 760px a portrait version runs the same three stops,
   the same curve and the same classes down the page instead. */
.rt-portrait{display:none}
.rt-lab-start{text-anchor:start}
.rt-lab-end{text-anchor:end}
@media(max-width:760px){
  .rt-landscape{display:none}
  .rt-portrait{display:block;max-width:360px;margin:0 auto}
  .rt-stop text{font-size:21px}
}