:root{
    --ink:#0B0A0E; --ink-2:#16121C; --ink-3:#1F1926;
    --edge:#2E2639; --edge-soft:#241E2E;
    --purple:#662D91; --purple-lift:#8B44BE;
    --magenta:#EC008C; --magenta-lift:#FF3FAC;
    --bone:#F3F0F7; --mute:#9C93AC; --mute-dim:#6E667C;
    --display:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
    --wrap:1180px;
  }
  /* Committed dark identity — a brand site, not a document. Tokens hold in both themes. */
  :root[data-theme="light"],:root[data-theme="dark"]{
    --ink:#0B0A0E; --ink-2:#16121C; --bone:#F3F0F7; --mute:#9C93AC;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);
       font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

  h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
           letter-spacing:-.015em;line-height:1.03;text-wrap:balance;margin:0}
  h1{font-size:clamp(2.5rem,6.4vw,5rem)}
  h2{font-size:clamp(1.75rem,3.4vw,2.75rem)}
  h3{font-size:1.2rem;letter-spacing:.01em}
  p{margin:0}

  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.19em;
           text-transform:uppercase;color:var(--mute);margin:0}
  .lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:#CFC7DA;max-width:62ch}

  /* ---------- double badge: both companies in one tile ---------- */
  /* flex:none on the images matters — a flex child with a fixed height still gets stretched across
     the cross axis, which squashes a logo out to the container's full width. */
  .badge{display:inline-flex;align-items:center;gap:20px;padding:10px 20px;
         border:1px solid var(--edge-soft);border-radius:3px;background:rgba(255,255,255,.025);
         text-decoration:none;line-height:1;transition:border-color .15s}
  .badge:hover{border-color:var(--edge)}
  .badge img{height:84px;width:auto;flex:none;display:block}
  .badge-split{width:1px;align-self:stretch;background:var(--edge);flex:none}

  /* Each company's own registered logo, reversed for the dark ground. */
  .co-logo{height:124px;width:auto;align-self:flex-start;flex:none}
  .co-logo svg{height:124px;width:auto;display:block}

  /* ---------- top bars ---------- */
  .utility{border-bottom:1px solid var(--edge-soft);background:#08070B}
  .utility .wrap{display:flex;align-items:center;justify-content:space-between;
                 gap:16px;height:44px;font-family:var(--mono);font-size:.74rem;
                 letter-spacing:.1em;text-transform:uppercase}
  .utility a{color:var(--mute);text-decoration:none}
  .utility a:hover{color:var(--bone)}
  .utility .right{display:flex;align-items:center;gap:22px;flex:none}

  /* ---------- location ticker ---------- */
  .ticker{flex:1;min-width:0;overflow:hidden;position:relative;margin-right:18px;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 70px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 70px),transparent)}
  .ticker-track{display:flex;width:max-content;gap:0;
                animation:ticker-roll var(--ticker-seconds,120s) linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .ticker i{font-style:normal;white-space:nowrap;padding-right:26px;color:var(--mute)}
  .ticker i.hub{color:var(--magenta)}
  .ticker i.city{color:var(--bone)}
  /* The track holds the list twice, so shifting exactly half of it loops with no visible seam. */
  @keyframes ticker-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .login{display:inline-flex;align-items:center;gap:8px;background:var(--purple);
         color:#fff !important;padding:7px 16px;border-radius:2px;font-weight:600}
  .login:hover{background:var(--purple-lift)}

  /* The whole top area sticks as one piece — nothing in it scrolls out of reach. */
  .topbar{position:sticky;top:0;z-index:30}
  .masthead{background:rgba(11,10,14,.92);backdrop-filter:blur(10px);
            border-bottom:1px solid var(--edge-soft)}
  .masthead .wrap{display:flex;align-items:center;justify-content:space-between;
                  gap:24px;padding-top:14px;padding-bottom:14px;
                  transition:padding .18s ease}
  /* Fills the space the menu used to take, sized to sit level with the badge beside it. */
  .masthead-tag{font-family:var(--display);font-weight:800;text-transform:uppercase;
                font-size:clamp(1rem,2.7vw,2.15rem);letter-spacing:-.02em;line-height:1;
                color:var(--bone);margin:0;white-space:nowrap}
  .masthead-tag em{font-style:normal;color:var(--magenta)}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge)}
  .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            object-position:52% 62%;filter:saturate(.82) contrast(1.04)}
  .hero-veil{position:absolute;inset:0;
             background:linear-gradient(180deg,rgba(11,10,14,.62) 0%,rgba(11,10,14,.38) 34%,
                                        rgba(11,10,14,.86) 76%,var(--ink) 100%)}
  .hero .wrap{position:relative;padding-top:clamp(90px,15vw,170px);padding-bottom:clamp(44px,7vw,74px)}
  .hero h1{max-width:16ch}
  .hero h1 .accent{color:var(--magenta)}
  .hero .lede{margin-top:22px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:2px;
       font-family:var(--mono);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
       text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s}
  .btn-purple{background:var(--purple);color:#fff}
  .btn-purple:hover{background:var(--purple-lift)}
  .btn-magenta{background:var(--magenta);color:#12060D}
  .btn-magenta:hover{background:var(--magenta-lift)}
  /* This one sits on top of a photograph, so a bare outline disappears into whatever is behind it —
     badly on a phone, where the hero image fills the screen. It carries its own dark ground. */
  .btn-ghost{background:rgba(8,7,11,.72);border-color:rgba(243,240,247,.55);color:var(--bone);
             backdrop-filter:blur(3px)}
  .btn-ghost:hover{background:rgba(8,7,11,.9);border-color:var(--bone)}

  .hero-strip{position:relative;border-top:1px solid var(--edge);background:rgba(8,7,11,.72)}
  .hero-strip .wrap{display:flex;flex-wrap:wrap;gap:10px 44px;padding-top:16px;padding-bottom:16px;
                    font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;
                    text-transform:uppercase;color:var(--mute)}
  .hero-strip b{color:var(--bone);font-weight:600}

  /* ---------- generic section ---------- */
  .band{padding:clamp(64px,8vw,110px) 0}
  .band-head{max-width:64ch;display:flex;flex-direction:column;gap:14px;margin-bottom:52px}

  /* ---------- the two companies ---------- */
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .door{position:relative;background:var(--ink-2);border:1px solid var(--edge-soft);
        display:flex;flex-direction:column;overflow:hidden}
  .door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .door.courier::before{background:var(--purple-lift)}
  .door.heavy::before{background:var(--magenta)}
  .door figure{margin:0;height:210px;overflow:hidden;border-bottom:1px solid var(--edge-soft)}
  .door figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
  .door .door-body{padding:30px 30px 34px;display:flex;flex-direction:column;gap:18px;flex:1}
  .door.courier h3{color:var(--purple-lift)}
  .door.heavy h3{color:var(--magenta)}
  .door p{color:#C6BED2}
  .spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;
        border-top:1px solid var(--edge-soft)}
  .spec li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
           border-bottom:1px solid var(--edge-soft);font-size:.92rem}
  .spec .k{color:var(--mute)}
  .spec .v{font-family:var(--mono);font-size:.82rem;color:var(--bone);text-align:right;
           font-variant-numeric:tabular-nums}
  .door .btn{align-self:flex-start;margin-top:auto}

  /* ---------- network ---------- */
  .network{background:var(--ink-2);border-top:1px solid var(--edge-soft);
           border-bottom:1px solid var(--edge-soft)}
  /* The map was removed 2026-07-30 (Bill) — the section is one column of words now. */
  .net-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:start}

  .levels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge-soft);
          border:1px solid var(--edge-soft);margin:34px 0}
  .level{background:var(--ink-2);padding:22px 18px;display:flex;flex-direction:column;gap:6px;
         align-items:center;text-align:center}
  .level .name{font-family:var(--display);font-weight:800;text-transform:uppercase;
               font-size:1.05rem;letter-spacing:-.01em;color:var(--bone)}
  /* Sits above the name and stays quieter, so the place names carry the line. */
  .level .lead{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
               text-transform:uppercase;color:var(--mute)}

  /* Full width since the map came out — 3 columns here would leave a town name floating in 370px
     of empty column, so the count goes up to keep the list sized to its content. */
  .places{columns:5;column-gap:26px;font-family:var(--mono);font-size:.76rem;
          line-height:2.1;color:var(--mute);border-top:1px solid var(--edge-soft);padding-top:20px}

  /* ---------- fleet ---------- */
  .fleet-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .fleet-figure{border:1px solid var(--edge-soft);background:var(--ink-2)}
  /* Two offers stacked in one column: the gap before a second heading has to be bigger than the
     gap under the one above it, or the two blocks read as one. */
  .fleet-copy h2 + .lede{margin-top:16px}
  .fleet-copy .lede + h2{margin-top:40px}

  /* ---------- why ---------- */
  .why{background:linear-gradient(180deg,var(--ink) 0%,#0F0A14 100%);
       border-top:1px solid var(--edge-soft)}
  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .cards{display:grid;gap:14px}
  .card{background:var(--ink-2);border:1px solid var(--edge-soft);padding:22px 24px;
        display:flex;flex-direction:column;gap:6px}
  .card .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
           text-transform:uppercase;color:var(--mute)}
  .card .v{font-size:1.05rem}
  .card a{color:var(--magenta);text-decoration:none}
  .card a:hover{text-decoration:underline}
  .rule{height:1px;background:var(--edge-soft);border:0;margin:0}
  .callout{border-left:3px solid var(--purple-lift);padding:4px 0 4px 18px;color:var(--mute)}
  .callout a{color:var(--magenta);text-decoration:none}
  .callout a:hover{text-decoration:underline}

  /* ---------- footer ---------- */
  footer{background:#08070B;border-top:1px solid var(--edge-soft);padding:52px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
  .foot-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
  .foot-logos img{height:62px;width:auto}
  .foot-ded svg{height:62px;width:auto;display:block}
  .foot-grid h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
                color:var(--mute);margin:0 0 14px;font-weight:400}
  .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
                font-size:.92rem;color:#C6BED2}
  .foot-grid a{text-decoration:none}
  .foot-grid a:hover{color:var(--magenta)}
  .colophon{margin-top:44px;padding-top:20px;border-top:1px solid var(--edge-soft);
            display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
            font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--mute-dim)}

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

  /* The top bar is sticky and no longer shrinks, so anything jumped to from a button or the footer
     must clear its full height or the section heading lands hidden behind it. */
  section[id],article[id]{scroll-margin-top:200px}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  @media (max-width:980px){
    .doors,.net-grid,.fleet-grid,.contact-grid,.foot-grid{grid-template-columns:1fr}
    .places{columns:2}
    .net-grid,.fleet-grid,.contact-grid{gap:34px}
  }
  @media (max-width:640px){
    body{font-size:16px}
    .levels{grid-template-columns:1fr}
    .places{columns:1}
    /* Wraps to two lines rather than crowding the badge off the bar. */
    .masthead-tag{font-size:.92rem;white-space:normal;text-align:right;line-height:1.15}
    .utility .wrap{font-size:.68rem}
    /* The phone number and login button need the whole bar on a phone. */
    .ticker{display:none}
    .badge{gap:10px;padding:6px 10px}
    .badge img{height:38px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}

    /* ★ THE TOWN STRIP IS THE ONE EXCEPTION — IT KEEPS SCROLLING (Bill, 2026-07-31).

       He found it stopped dead on an office computer. Windows' "Animation effects" setting, which is
       frequently off across a managed work fleet by IT policy rather than by choice, makes the
       browser report reduced motion, and the blanket rule above then froze the strip mid-list behind
       an edge-fade meant for something moving. It read as broken, not as a decision.

       Put to him with the trade-off stated plainly — that a few people switch this on because motion
       genuinely makes them unwell — he chose to run it for everyone: *"im not going crazy with
       movement even if someone were to have issues with that. its a scroll line, nothing crazy."*
       Which is a fair reading of the scale: WCAG's rule here (2.2.2) asks that moving content can be
       paused, and this is one line of small text at about 60 pixels a second, not a parallax
       background. There is no accessibility statute reaching an Alberta private business on this.

       ⚠ SCOPED DELIBERATELY TO THE TICKER. Everything else on the site still honours the setting —
       hover transitions, the masthead, smooth scrolling. Deleting the blanket rule instead would have
       switched all of that back on too, which is not what he asked for. */
    .ticker-track{animation:ticker-roll var(--ticker-seconds,120s) linear infinite !important}
  }