@font-face{font-family:"Londrina Solid";src:url(fonts/londrina-solid-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Besley;src:url(fonts/besley-400-900.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --stock:#F3783A; --black:#17120E; --manila:#E6CFA0;
  --cut:"Londrina Solid","Arial Narrow",sans-serif; --text:Besley,Rockwell,Georgia,serif;
  --pad:clamp(1.25rem,4vw,3rem); --wrap:78rem;
  --rag:3px 7px 4px 8px/7px 3px 8px 4px;
  --out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --salt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .47 0 0 0 0 .23 0 0 0 1.2 -.64'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stock);color:var(--black);font:500 1.0625rem/1.55 var(--text);overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* sheets: every region is one printed sheet with its own stock and ink */
.sheet{--bg:var(--stock);--fg:var(--black);background:var(--bg) var(--grain);color:var(--fg)}
.sheet--manila{--bg:var(--manila)}
.sheet--black{--bg:var(--black);--fg:var(--stock);background-image:var(--salt);color:var(--manila)}
.sheet+.sheet,main>.sheet{border-top:6px solid var(--black)}
section.sheet{padding:clamp(4rem,9vw,7rem) var(--pad)}
.inner{max-width:var(--wrap);margin:0 auto}
:focus-visible{outline:4px solid var(--fg,var(--black));outline-offset:4px}
.skip{position:absolute;left:var(--pad);top:-5rem;z-index:6;padding:.6rem 1rem;background:var(--black);color:var(--stock);font-weight:700}
.skip:focus{top:.5rem}

/* carved blocks: outline at rest, flooded when pressed */
.blk{display:inline-flex;align-items:center;justify-content:center;min-height:3.4rem;padding:.45rem 1.5rem .35rem;border:4px solid var(--fg);border-radius:var(--rag);background:transparent;color:var(--fg);font:900 1.5rem/1 var(--cut);letter-spacing:.035em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .14s var(--out)}
.blk:active{transform:scale(.96)}
.blk--flood{background:var(--fg);color:var(--bg)}
@media (hover:hover){
  .blk:hover{background:var(--fg);color:var(--bg)}
  .blk--flood:hover{background:transparent;color:var(--fg)}
}
.blk[aria-disabled="true"]{border-style:dashed;background:transparent;color:var(--fg);cursor:progress;opacity:.65}

/* masthead: the approved mark is printed in black and persimmon, so it sits on manila */
.masthead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:var(--wrap);margin:0 auto;padding:.9rem var(--pad)}
.brand{display:block;flex:none;border-radius:var(--rag)}
.brand img{display:block;width:clamp(8.75rem,15vw,10.5rem);height:auto}
.masthead>.blk{min-height:2.9rem}
.primary>ul{display:none;align-items:center;gap:clamp(.25rem,1.2vw,1rem);margin:0;padding:0;list-style:none}
.primary>ul a:not(.blk){display:inline-flex;align-items:center;min-height:2.75rem;padding:.1rem .6rem 0;border-radius:var(--rag);font:900 1.3rem/1 var(--cut);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
@media (hover:hover){.primary>ul a:not(.blk):hover{background:var(--fg);color:var(--bg)}}
.primary>ul .blk{min-height:2.9rem;margin-left:.5rem}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--fg);color:var(--bg)}
.menu ul{position:absolute;left:0;right:0;top:100%;z-index:5;margin:0;padding:.75rem var(--pad) 1.5rem;list-style:none;background:var(--black)}
.menu li a{--fg:var(--stock);display:block;padding:.7rem 0 .5rem;border-bottom:3px solid var(--stock);color:var(--stock);font:900 2rem/1 var(--cut);letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
@media (min-width:62rem){.primary>ul{display:flex}.menu{display:none}}

/* hero: the slab and the figure share one block */
.hero{position:relative;overflow:hidden;border-top:6px solid var(--black)}
.hero-grid{display:grid;max-width:var(--wrap);margin:0 auto;padding:clamp(2rem,5vw,3rem) var(--pad) 0}
h1{margin:0;font:900 min(14.2vw,6rem)/.92 var(--cut);letter-spacing:.005em;text-transform:uppercase}
h1 span{display:block;width:fit-content}
h1 .slab{margin:.04em 0 .06em -.12em;padding:.06em .14em 0;border-radius:var(--rag);background:var(--black);color:var(--stock)}
.lede{max-width:33rem;margin:1.5rem 0 0;font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:600;line-height:1.45}
.cta{display:grid;gap:.8rem;margin-top:1.75rem}
.figure{aspect-ratio:760/880;margin:2rem calc(var(--pad)*-1) 0;overflow:hidden}
.figure svg{display:block;width:100%;height:auto}
@media (min-width:56rem){
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:2rem;align-items:end;min-height:min(46rem,calc(100svh - 6.2rem));padding-top:0}
  .hero-copy{align-self:center;padding:2rem 0 3rem}
  h1{font-size:min(7.4vw,6rem)}
  .cta{display:flex;flex-wrap:wrap}
  .figure{aspect-ratio:auto;margin:0 calc(var(--pad)*-1) 0 0;align-self:end}
}
.parcel .k{fill:#17120E}
.parcel .s{fill:var(--stock)}
.parcel .o{stroke:#17120E;stroke-width:7;stroke-linejoin:round}
.parcel .g{fill:none;stroke:var(--stock);stroke-width:5;stroke-linecap:round}
.parcel .i{fill:none;stroke:#17120E;stroke-linecap:round}
.parcel .carve{font:900 46px var(--cut);letter-spacing:.02em;fill:var(--stock)}

/* type */
h2{max-width:15ch;margin:0;font:900 clamp(2.6rem,6.6vw,5.25rem)/.94 var(--cut);letter-spacing:.008em;text-transform:uppercase;text-wrap:balance;color:var(--fg)}
h3{margin:0;font:900 clamp(1.9rem,3.4vw,2.6rem)/.95 var(--cut);letter-spacing:.015em;text-transform:uppercase}
p{text-wrap:pretty}
.standfirst{max-width:40rem;margin:1.5rem 0 0;font-size:1.2rem;font-weight:600;line-height:1.45}
.more{margin:2.5rem 0 0}

/* five jobs, one demand per row */
.jobs{margin:3rem 0 0;padding:0;list-style:none;border-bottom:5px solid var(--fg)}
.job{--tone:var(--fg);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.6rem 1rem;padding:1.3rem clamp(.75rem,2vw,1.5rem) 1.4rem;border-top:5px solid var(--fg);color:var(--tone)}
.job--core{--tone:var(--bg);background:var(--fg)}
.job svg{width:3.25rem;height:3.25rem;flex:none}
.job h3{font-size:clamp(3rem,13vw,5.5rem);line-height:.86;color:var(--tone)}
.job p{grid-column:1/-1;max-width:46ch;margin:0}
.job .mk{fill:var(--tone)}
.job .cut{fill:var(--bg)}
.job--core .cut{fill:var(--fg)}
.job .ln{fill:none;stroke:var(--tone);stroke-width:7}
@media (min-width:56rem){
  .job{grid-template-columns:4.5rem minmax(0,5fr) minmax(0,6fr);gap:2rem}
  .job svg{width:4.5rem;height:4.5rem}
  .job h3{font-size:clamp(3.5rem,7.4vw,5.75rem)}
  .job p{grid-column:auto}
}
.scope{max-width:44rem;margin:2rem 0 0;font-size:1.15rem;font-weight:700}

/* the line: the route one parcel takes, cut in the hero's ink (7-unit outlines, black solids, hatched sides, carved
   gouges). Five stops on one rail with the parcel resting at the far end. Phones stack it down a spine; from 44rem
   it runs across. The parcel and the rail move by fifths of their own box, so no coordinates are tied to a width. */
.line{--tone:var(--fg);--art:4.75rem;--lane:3.75rem;--mid:calc(var(--art) + .5rem + var(--lane)/2);position:relative;display:grid;grid-auto-rows:1fr;margin-top:3rem}
.line::before,.line::after{content:"";position:absolute;background:var(--fg)}
.line::before{left:calc(var(--mid) - 3px);top:0;bottom:.6rem;width:6px;transform-origin:0 0}
.line::after{left:calc(var(--mid) - .7rem);bottom:0;width:1.4rem;height:1.2rem;clip-path:polygon(4% 0,100% 6%,48% 100%)}
.stop{display:grid;grid-template-columns:var(--art) var(--lane) minmax(0,1fr);align-items:center;column-gap:.5rem;padding:.5rem 0}
.stop::before{content:"";grid-area:1/2;justify-self:center;width:1.1rem;height:1.1rem;border-radius:var(--rag);background:var(--fg)}
.stop svg{grid-area:1/1;display:block;width:var(--art);height:var(--art)}
.stop b{grid-area:1/3;font:900 clamp(1.75rem,9vw,2.75rem)/1 var(--cut);letter-spacing:.015em;text-transform:uppercase;color:var(--tone)}
.carry{position:absolute;left:calc(var(--art) + .5rem);top:0;display:grid;place-items:center;width:var(--lane);height:20%;transform:translateY(400%)}
.carry svg{display:block;width:min(86%,4.5rem);height:auto}
.line .k{fill:#17120E}
.line .s{fill:var(--stock)}
.line .p{fill:var(--bg)}
.line .o{stroke:#17120E;stroke-width:7;stroke-linejoin:round}
.line .g{fill:none;stroke:var(--bg);stroke-width:5;stroke-linecap:round}
.line .i{fill:none;stroke:#17120E;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:44rem){
  .line{--art:clamp(6rem,11vw,8.5rem);--lane:4.5rem;--mid:calc(var(--art) + var(--lane)/2);grid-template-columns:repeat(5,minmax(0,1fr))}
  .line::before{left:0;right:.6rem;top:calc(var(--mid) - 3px);bottom:auto;width:auto;height:6px}
  .line::after{left:auto;right:0;top:calc(var(--mid) - .7rem);bottom:auto;width:1.2rem;height:1.4rem;clip-path:polygon(0 4%,100% 48%,6% 100%)}
  .stop{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--art) var(--lane) auto;justify-items:center;padding:0}
  .stop::before{grid-area:2/1;align-self:center}
  .stop b{grid-area:3/1;font-size:clamp(1.5rem,3.3vw,2.6rem)}
  .carry{left:0;top:var(--art);width:20%;height:var(--lane);transform:translateX(400%)}
}

/* motion: the block presses once on load, and the five verbs flood as they arrive. Every rule sits behind the
   motion preference, so with motion reduced, on paper or without scripts the finished state is what shows. */
@media screen and (prefers-reduced-motion:no-preference){
  .figure svg{transform-origin:60% 70%;animation:press .55s var(--out) .12s both}
  .jobs.is-armed .job h3{color:transparent;-webkit-text-stroke:2px var(--tone)}
  .jobs.is-in .job h3{color:var(--tone);-webkit-text-stroke:0 var(--tone);animation:flood .34s steps(2,end) calc(var(--i,0)*.17s) both}
  /* the line, once, on arrival: the parcel is shunted stop to stop and holds at each; the rail is laid behind it;
     each stop is pressed onto the sheet and its verb floods as the parcel gets there. Nothing repeats. */
  .line.is-armed .stop svg{opacity:.12}
  .line.is-armed .stop b{color:transparent;-webkit-text-stroke:2px var(--tone)}
  .line.is-armed .carry{transform:none}
  .line.is-armed::before{transform:scaleY(.1)}
  .line.is-armed::after{transform:scale(0)}
  .line.is-in .stop svg{opacity:1;animation:press .55s var(--out) calc(var(--i,0)*.8s) both}
  .line.is-in .stop b{color:var(--tone);-webkit-text-stroke:0 var(--tone);animation:flood .34s steps(2,end) calc(var(--i,0)*.8s) both}
  .line.is-in .carry{animation:fall 3.6s var(--out) .3s both}
  .line.is-in::before{animation:reel-y 3.6s var(--out) .3s both}
  .line.is-in::after{transform:none;animation:tip .3s var(--out) 3.7s both}
  @media (min-width:44rem){.line.is-armed::before{transform:scaleX(.1)}.line.is-in .carry{animation-name:ride}.line.is-in::before{animation-name:reel-x}}
}
@keyframes press{0%{opacity:.12;transform:scale(1.045)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes flood{from{color:transparent;-webkit-text-stroke:2px var(--tone);transform:scale(1.025)}to{color:var(--tone);-webkit-text-stroke:0 var(--tone);transform:none}}
@keyframes fall{0%,8%{transform:none}22%,30%{transform:translateY(100%)}44%,52%{transform:translateY(200%)}66%,74%{transform:translateY(300%)}88%,100%{transform:translateY(400%)}}
@keyframes ride{0%,8%{transform:none}22%,30%{transform:translateX(100%)}44%,52%{transform:translateX(200%)}66%,74%{transform:translateX(300%)}88%,100%{transform:translateX(400%)}}
@keyframes reel-y{0%,8%{transform:scaleY(.1)}22%,30%{transform:scaleY(.3)}44%,52%{transform:scaleY(.5)}66%,74%{transform:scaleY(.7)}88%{transform:scaleY(.9)}100%{transform:none}}
@keyframes reel-x{0%,8%{transform:scaleX(.1)}22%,30%{transform:scaleX(.3)}44%,52%{transform:scaleX(.5)}66%,74%{transform:scaleX(.7)}88%{transform:scaleX(.9)}100%{transform:none}}
@keyframes tip{from{transform:scale(0)}to{transform:none}}

/* who it is for */
.pair{display:grid;gap:1.25rem;margin-top:3rem}
.pair article{padding:clamp(1.5rem,3vw,2.5rem);border:5px solid var(--fg);border-radius:var(--rag)}
.pair .flooded{background:var(--fg);color:var(--bg)}
.pair h3{font-size:clamp(2.6rem,5.4vw,4rem);line-height:.9}
.pair p{max-width:38ch;margin:1rem 0 0;font-weight:600}
.pair-close{max-width:40rem;margin:2rem 0 0;font-size:1.2rem;font-weight:700}
@media (min-width:56rem){.pair{grid-template-columns:1fr 1fr}}

/* how we get you started */
.steps{display:grid;margin:3rem 0 0;padding:0;list-style:none;border-top:5px solid var(--fg)}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.25rem;align-items:start;padding:1.6rem 0 1.75rem;border-bottom:5px solid var(--fg)}
.steps .n{min-width:.62em;font:900 clamp(5rem,13vw,8.25rem)/.78 var(--cut);color:var(--fg)}
.steps h3{padding-top:.2rem;color:var(--manila)}
.steps p{max-width:36ch;margin:.7rem 0 0}
@media (min-width:56rem){.steps{grid-template-columns:1fr 1fr;column-gap:3.5rem}}

/* technology and carriers: channel tiles and swing tags */
.powered{max-width:22ch;margin:2rem 0 0;font:900 clamp(1.9rem,4vw,3rem)/1 var(--cut);letter-spacing:.012em;text-transform:uppercase;text-wrap:balance}
.art{height:2.4rem;width:auto;margin-right:.3rem;padding:.45rem .6rem;border-radius:2px;background:#fff;vertical-align:middle}
.eco{display:grid;gap:2.5rem;margin-top:3rem;padding-top:2rem;border-top:5px solid var(--fg)}
@media (min-width:56rem){.eco{grid-template-columns:1.25fr 1fr;gap:4rem}}
.eco h3{font-size:1.5rem;margin:0 0 .9rem}
.tags{display:flex;flex-wrap:wrap;gap:.7rem;margin:0;padding:0;list-style:none}
.tags li{display:flex;align-items:center;gap:.7rem;min-height:3.5rem;padding:.55rem 1.3rem .45rem 3rem;background:radial-gradient(circle at 1.65rem 50%,var(--bg) .36rem,transparent .4rem) var(--fg);color:var(--bg);font:900 1.8rem/1 var(--cut);letter-spacing:.02em;clip-path:polygon(1.25rem 0,100% 0,100% 100%,1.25rem 100%,0 50%)}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.channels li{display:flex;align-items:center;justify-content:center;min-height:5.5rem;padding:.65rem;background:#fff;border:3px solid var(--black);border-radius:var(--rag)}
.channels img{display:block;width:100%;height:3.75rem;object-fit:contain}
.note{max-width:40ch;margin:1.1rem 0 0;font-size:.98rem;font-weight:600}

/* location: the address as a parcel label */
.where{display:grid;gap:2.5rem;align-items:center}
@media (max-width:22rem){.where h2{font-size:2.25rem}}
@media (min-width:56rem){.where{grid-template-columns:1fr 1fr;gap:4rem}}
.label{max-width:30rem;border:5px solid var(--black);border-radius:var(--rag);background:var(--manila) var(--grain);color:var(--black);transform:rotate(-1.4deg)}
.label-head{margin:0;padding:.5rem 1.25rem .35rem;background:var(--black);color:var(--manila);font:900 1.5rem/1 var(--cut);letter-spacing:.06em;text-transform:uppercase}
.label address{padding:1.25rem 1.25rem .5rem;font-style:normal;font-size:1.25rem;font-weight:700;line-height:1.4}
.label .pc{display:block;margin-top:.35rem;font:900 clamp(3rem,9vw,4.5rem)/.9 var(--cut);letter-spacing:.02em}
.label .bars{height:3rem;margin:1rem 1.25rem 1.25rem;background:repeating-linear-gradient(90deg,var(--black) 0 3px,transparent 3px 7px,var(--black) 7px 13px,transparent 13px 16px,var(--black) 16px 18px,transparent 18px 25px,var(--black) 25px 29px,transparent 29px 32px)}

/* questions */
.faq{max-width:50rem;margin:3rem 0 0;border-bottom:5px solid var(--fg)}
.faq details{border-top:5px solid var(--fg)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.15rem 0;list-style:none;cursor:pointer;font-size:1.22rem;font-weight:800;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.4rem;height:1.4rem;background:linear-gradient(currentColor,currentColor) center/100% 5px no-repeat,linear-gradient(currentColor,currentColor) center/5px 100% no-repeat}
.faq details[open] summary::after{background-size:100% 5px,5px 0}
.faq details p{max-width:66ch;margin:0 0 1.4rem}

/* enquiry */
.enquiry{display:grid;gap:1.25rem 1.5rem;max-width:50rem;margin-top:3rem}
.field{display:grid;gap:.45rem}
.field label{font-weight:800;color:var(--manila)}
.field .opt{font-weight:500}
.field .hint{margin:0;font-size:.98rem}
.field input,.field textarea{width:100%;padding:.85rem 1rem;border:4px solid var(--manila);border-radius:var(--rag);background:var(--manila);color:var(--black);font:600 1.0625rem/1.4 var(--text)}
.field textarea{min-height:9rem;resize:vertical}
.send{display:grid;justify-items:start;gap:1rem}
.send p{max-width:46ch;margin:0}
.form-note{font-weight:600}
.form-status{min-height:1.6em;font-weight:800;color:var(--stock)}
.direct{max-width:50rem;margin:2rem 0 0;padding-top:1.25rem;border-top:5px solid var(--fg);font-weight:600}
.direct a,.mail{display:inline-block;padding:.6rem 0;font-weight:800}
@media (min-width:44rem){.enquiry{grid-template-columns:1fr 1fr}.field--wide,.send{grid-column:1/-1}}

/* colophon */
.colophon{padding:clamp(3rem,6vw,4.5rem) var(--pad) 2rem;border-top:6px solid var(--black)}
.colophon .cols{display:grid;gap:2rem}
@media (min-width:56rem){.colophon .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}}
.colophon .brand{display:inline-block}
.colophon .brand img{width:clamp(11rem,18vw,13.5rem)}
.colophon h3{font-size:1.5rem;margin-bottom:.5rem}
.colophon address{font-style:normal;font-weight:600}
.legal{max-width:34ch;margin:1rem 0 0;font-weight:700}
.foot{margin:2.5rem 0 0;padding-top:.5rem;border-top:5px solid var(--black);font-size:.9rem;font-weight:600;line-height:1.55}
.foot ul{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin:0;padding:0;list-style:none}
.foot li a{display:inline-block;padding:.75rem 0;font-weight:800}
.foot p{max-width:80ch;margin:.4rem 0 0}

/* reading pages: privacy and terms */
section.page-head{padding-block:clamp(2.5rem,6vw,4rem)}
.page-head h1{max-width:14ch;text-wrap:balance}
.prose{max-width:44rem}
.prose h2{max-width:none;margin:2.75rem 0 .75rem;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:.95}
.prose>:first-child{margin-top:0}
.prose p,.prose ul{margin:0 0 1rem}
.prose ul{padding-left:1.25rem}
.prose li{margin-bottom:.6rem}
.prose a{font-weight:700}
.prose .dated{font-weight:700}