/* The public landing pages (core/landing.html: the warehouse; core/portquote.html: PortQuote). Colours are
   variables: each page sets its own on :root. */
/* Archivo (SIL Open Font License), served from this site: no request to Google. Width and weight axes. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url("../fonts/archivo-latin.de2f1fe81758.woff2") format('woff2-variations'),url("../fonts/archivo-latin.de2f1fe81758.woff2") format('woff2')}
:root{color-scheme:dark;--navy:#0E1A2E;--navy2:#142340;--navy3:#1A2B4A;--chip:#2A3B5C;--sand:#D9D3C7;--paper:#F4F1EA;--mist:#B8BFCC;--amber:#F5A524;--amber2:#FFB84D;--line:rgba(217,211,199,.16);--edge:rgba(217,211,199,.30);--ghost:rgba(217,211,199,.35);--ghost-bg:rgba(217,211,199,.08);--amber-ring:rgba(245,165,36,.3);--amber-soft:rgba(245,165,36,.14)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--navy)}
body{font-family:'Archivo','Helvetica Neue',Arial,sans-serif;color:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--amber);color:var(--navy)}
a{color:var(--sand)}a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.wide{font-variation-settings:'wdth' 118;font-weight:800;letter-spacing:-.015em;line-height:1.04;text-wrap:balance}
h2.wide{margin:0;font-size:clamp(32px,3.6vw,52px)}
h3{margin:0;font-variation-settings:'wdth' 110;font-weight:700;font-size:21px;line-height:1.25}
.muted{color:var(--mist)}
.section{padding:clamp(72px,9vw,120px) 0}
.light{background:var(--sand);color:var(--navy)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px;border-radius:12px;text-decoration:none;font-size:17px;font-weight:700;font-variation-settings:'wdth' 106;border:0;cursor:pointer}
.btn-primary{background:var(--amber);color:var(--navy)}.btn-primary:hover{background:var(--amber2);color:var(--navy)}
.btn-ghost{border:1px solid var(--ghost);color:var(--paper);font-weight:600;padding:0 22px}.btn-ghost:hover{border-color:var(--sand);background:var(--ghost-bg);color:var(--paper)}
.btn .ic{width:20px;height:20px;stroke-width:2.2}
.navlink{display:inline-flex;align-items:center;min-height:44px;color:var(--mist);text-decoration:none;font-size:15px;font-weight:500}.navlink:hover{color:var(--paper)}

/* header */
header{border-bottom:1px solid var(--line)}
.header-row{padding-top:12px;padding-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 32px}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--paper);text-decoration:none}.brand:hover{color:var(--paper)}
.brand svg{width:22px;height:28px;flex:none}
.brand-word{font-variation-settings:'wdth' 125;font-weight:800;font-size:20px;letter-spacing:.01em;line-height:1}
.nav-links{display:flex;flex-wrap:wrap;gap:0 30px}
.util{display:flex;align-items:center;gap:6px}
.util .lang{padding:0 12px}
.util .login{min-height:44px;padding:0 16px;border-radius:10px;font-size:15px}

/* hero */
.hero-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 48px}
.hero-copy{flex:2 1 600px;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,112px) 0 clamp(40px,6vw,96px);container-type:inline-size}
.h1{margin:0;font-variation-settings:'wdth' 112;font-weight:800;line-height:.98;letter-spacing:-.02em;text-wrap:balance;font-size:clamp(36px,calc(5.2vw + 18px),76px)}
@supports (font-size:1cqw){.h1{font-size:clamp(36px,10.5cqw,76px)}}
.lead{margin:30px 0 0;max-width:34em;font-size:clamp(18px,1.45vw,20px);line-height:1.55}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero-tag{flex:1 1 360px;min-width:0;display:flex;justify-content:center;align-items:flex-start;padding-bottom:clamp(40px,5vw,72px)}
.tag-wrap{position:relative;width:min(340px,100%);transform-origin:50% 0;filter:drop-shadow(0 30px 44px rgba(0,0,0,.35))}
.string{display:block;width:40px;height:150px;margin:0 auto;overflow:visible}
.string path{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tag-body{background:var(--sand);color:var(--navy);padding:92px 30px 30px;clip-path:polygon(64px 0,calc(100% - 64px) 0,100% 58px,100% 100%,0 100%,0 58px);-webkit-mask:radial-gradient(circle at 50% 46px,transparent 15px,#000 15.5px);mask:radial-gradient(circle at 50% 46px,transparent 15px,#000 15.5px)}
.tag-name{margin:0;text-align:center;font-variation-settings:'wdth' 125;font-weight:900;font-size:40px;line-height:1;letter-spacing:.01em}
.tag-sub{margin:12px 0 0;text-align:center;font-variation-settings:'wdth' 80;font-weight:600;font-size:16px;line-height:1.35}
.perf{margin:26px -30px 0;border-top:2px dashed rgba(14,26,46,.45)}
.tag-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.tag-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.38;font-weight:500}
.tag-list .ic{width:20px;height:20px;margin-top:1px;stroke-width:2.2}
.barcode{display:block;width:100%;height:54px;margin-top:24px}
.eyelet-cord{position:absolute;left:calc(50% - 1.25px);top:0;width:2.5px;height:30px;background:var(--amber);border-radius:2px}
.eyelet{position:absolute;left:calc(50% - 22px);top:24px;width:44px;height:44px;border-radius:50%;border:6px solid var(--amber);box-shadow:inset 0 1px 2px rgba(14,26,46,.35)}
@keyframes swing{0%{transform:rotate(5deg)}30%{transform:rotate(-3.4deg)}55%{transform:rotate(1.8deg)}78%{transform:rotate(-.7deg)}100%{transform:rotate(0)}}
.swing{animation:swing 2.8s cubic-bezier(.3,.6,.35,1) .25s both}
@media (prefers-reduced-motion:reduce){.swing{animation:none}html{scroll-behavior:auto}}

/* services */
#services{border-top:1px solid var(--line)}
#services h2{max-width:15em}
.services{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.services li{background:var(--navy);padding:32px 30px 36px;display:flex;flex-direction:column;gap:12px}
.services p{margin:0;font-size:16.5px;line-height:1.6}
.badge{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--sand);color:var(--navy);margin-bottom:10px}

/* shopify */
.split{display:flex;flex-wrap:wrap;align-items:center;gap:56px 80px}
#shopify h2{max-width:13em}
.ticks{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.45;font-weight:500}
.tick{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--sand)}
.tick .ic{width:16px;height:16px;stroke-width:2.6}
.note{margin:36px 0 0;max-width:34em;padding:20px 24px;border-radius:16px;background:var(--navy);color:var(--paper);font-size:16.5px;line-height:1.55}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.flow li{position:relative;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;background:var(--navy)}
.flow li:not(:last-child)::after{content:'';position:absolute;left:38px;top:100%;width:2px;height:14px;background:rgba(14,26,46,.5)}
.flow .dot{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--sand);color:var(--sand)}
.flow li:last-child .dot{border-color:var(--amber);background:var(--amber);color:var(--navy)}
.flow .dot .ic{width:18px;height:18px;stroke-width:2.4}
.flow .who{font-variation-settings:'wdth' 82;font-weight:600;font-size:14px;line-height:1.3;color:var(--mist)}
.flow .what{font-size:17px;font-weight:500;line-height:1.4;color:var(--paper)}
.flow .txt{display:flex;flex-direction:column;gap:3px;min-width:0}

/* portal */
.split.reverse{flex-direction:row-reverse}
.portal{flex:1.2 1 520px;min-width:0;margin:0;background:var(--navy2);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(0,0,0,.45)}
.portal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;background:var(--sand);color:var(--navy)}
.portal-top b{font-weight:700;font-size:15px;font-variation-settings:'wdth' 106}
.portal-top span{padding:6px 12px;border-radius:999px;background:rgba(14,26,46,.12);font-size:14px;font-weight:500}
.tiles{padding:clamp(14px,2vw,20px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 18px 20px;border-radius:14px;background:var(--navy3)}
.tile .label{font-size:14px;line-height:1.35;color:var(--mist)}
.tile .value{font-variation-settings:'wdth' 118;font-weight:800;font-size:clamp(26px,3vw,42px);line-height:1;color:var(--paper)}
.tile:nth-child(3) .value{color:var(--amber)}
.tile .unit{font-variation-settings:'wdth' 100;font-weight:600;font-size:16px;color:var(--mist)}
.portal figcaption{display:flex;padding:0 20px 18px}
.portal figcaption span{padding:4px 10px;border:1px solid var(--edge);border-radius:999px;font-size:13px;line-height:1.4;color:var(--mist)}
.textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;color:var(--sand);text-decoration:none;font-size:18px;font-weight:700;font-variation-settings:'wdth' 106}
.textlink .ic{width:20px;height:20px;stroke-width:2.2}
.powered{margin:14px 0 0;font-size:14px;line-height:1.5}
.powered strong{font-weight:700;color:var(--paper)}

/* how it works */
.how-top{border-top:1px solid var(--line);padding-top:clamp(72px,9vw,120px)}
.steps{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:40px 32px}
.steps li{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:2px solid var(--sand)}
.steps .n{font-variation-settings:'wdth' 125;font-weight:800;font-size:56px;line-height:1;color:var(--amber)}
.steps h3{margin-top:12px}
.steps p{margin:0;font-size:16.5px;line-height:1.6}

/* contact */
.contact-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px 72px}
.contact-intro{flex:1 1 340px;min-width:0}
.contact-intro p.lead2{margin:24px 0 0;max-width:26em;font-size:19px;line-height:1.55}
.reach{margin-top:48px;padding-top:28px;border-top:1px solid rgba(14,26,46,.3)}
.reach-title{margin:0;font-variation-settings:'wdth' 108;font-weight:700;font-size:15px;line-height:1.4}
.reach address{margin:12px 0 0;font-style:normal;font-size:17px;line-height:1.65}
.reach a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);font-weight:700;text-underline-offset:4px}
.form-card{flex:1.5 1 520px;min-width:0;padding:clamp(24px,3.4vw,44px);border-radius:24px;background:var(--navy);color:var(--paper);box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.q{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:20px}
.q .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.q .full{grid-column:1 / -1}
.q label,.q legend{font-size:14px;font-weight:600;line-height:1.4;color:var(--paper)}
.q input[type=text],.q input[type=email],.q input[type=tel],.q select,.q textarea{width:100%;height:50px;padding:0 14px;border:1px solid var(--edge);border-radius:10px;background:var(--navy2);color:var(--paper);font-size:16px}
.q textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.5;resize:vertical}
.q select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer}
.q input:focus,.q select:focus,.q textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-ring)}
.q .err input{border-color:#FF8A7A}
.q .err label{color:#FFB3A7}
.q fieldset{min-width:0;margin:0;padding:0;border:0}
.q legend{padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;background:var(--navy2);font-size:15px !important;font-weight:400 !important;cursor:pointer}
.chip input{width:18px;height:18px;margin:0;accent-color:var(--amber)}
.chip:has(input:checked){border-color:var(--sand);background:var(--chip)}
.chip:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
.select-wrap{position:relative}
.select-wrap .ic{position:absolute;right:14px;top:14px;width:22px;height:22px;color:var(--mist);pointer-events:none}
.msg{grid-column:1 / -1;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.5}
.msg.ok{background:var(--amber-soft);border:1px solid var(--amber);color:var(--paper)}
.msg.bad{background:rgba(255,138,122,.12);border:1px solid #FF8A7A;color:#FFD6CF}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
footer{padding:28px 0 36px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;font-size:14px;line-height:1.5;color:var(--mist)}
.foot .left{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.foot strong{font-weight:700;color:var(--paper)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot .navlink{font-size:14px}

/* phones */
@media (max-width:860px){.header-row{gap:4px 12px}.nav-links{order:3;width:100%;gap:0 16px}.nav-links a{white-space:nowrap;font-size:14px}.string{height:56px}}
@media (max-width:420px){.brand-word{font-size:16px}.util .lang{padding:0 6px;font-size:14px}.util .login{padding:0 10px;font-size:14px}}
@media (max-width:380px){.nav-links{gap:0 12px}.nav-links a{font-size:13.5px}}

/* PortQuote's page: a shipping-label card instead of the hanging tag */
.label-card{position:relative;width:min(360px,100%);background:var(--sand);color:var(--navy);border-radius:14px;padding:26px 28px 28px;box-shadow:0 30px 44px rgba(0,0,0,.35);transform:rotate(-2deg)}
.label-head{display:flex;align-items:center;gap:12px}
.label-head svg{width:44px;height:44px;flex:none;border-radius:10px}
.label-name{margin:0;font-variation-settings:'wdth' 125;font-weight:900;font-size:30px;line-height:1;letter-spacing:.01em}
.label-route{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;font-size:13px;line-height:1.35}
.label-route b{display:block;font-variation-settings:'wdth' 80;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.label-card .perf{margin:20px -28px 0}
.label-card .barcode{margin-top:20px}
.label-stamp{position:absolute;right:-14px;top:-14px;padding:6px 12px;border-radius:999px;background:var(--amber);color:var(--navy);font-weight:800;font-size:13px;transform:rotate(6deg)}
.hero-label{flex:1 1 360px;min-width:0;display:flex;justify-content:center;align-items:center;padding:clamp(24px,5vw,72px) 0}
@media (prefers-reduced-motion:no-preference){.label-card{animation:label-in .9s cubic-bezier(.3,.6,.35,1) .15s both}}
@keyframes label-in{from{opacity:0;transform:translateY(18px) rotate(-5deg)}to{opacity:1;transform:rotate(-2deg)}}

/* the maple leaf: "Canadian · Hosted in Canada" above PortQuote's headline, and on the label's last line */
.canada-badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:0 0 26px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--paper);color:var(--navy);font-weight:700;font-size:15px;font-variation-settings:'wdth' 106}
.canada-badge svg{width:22px;height:22px;flex:none}
.tag-list .ic.leaf{stroke:none;width:20px;height:20px}