/* Home, bold. His ultramarine as the ground, the crew's orange as the signal, Archivo condensed and heavy
   the way a site sign is lettered. Loud where it counts, quiet everywhere else. */
:root{--paper:#F4F3EF;--line:rgba(8,8,12,.14);--wline:rgba(255,255,255,.22)}
body{background:var(--paper);color:var(--ink)}
.wrap{width:min(1320px,100% - 2*clamp(22px,5vw,80px));margin-inline:auto}
.k{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.cond{font-variation-settings:"wdth" 64;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;line-height:.86}
.h2{font-size:clamp(52px,7.6vw,128px)}
.h2 em{font-style:normal;color:var(--hivis)}

/* nav */
.nav{position:absolute;inset:0 0 auto 0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px clamp(22px,5vw,80px);color:#fff}
.brand svg{width:clamp(132px,11vw,164px);fill:#fff;stroke:#fff;stroke-width:.6px}
.links{display:flex;gap:30px}
.links a{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;opacity:.86}
.links a:hover{opacity:1}
.tel{display:inline-flex;align-items:center;gap:12px;padding:13px 18px;background:var(--hivis);color:var(--ink);text-decoration:none;font-variation-settings:"wdth" 70;font-weight:900;font-size:21px;letter-spacing:.02em}
.tel small{font-variation-settings:"wdth" 100;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}

/* hero: ultramarine, his letters in white, the worker reaching up through them */
.hero{position:relative;min-height:max(108svh,960px);overflow:hidden;isolation:isolate;background:var(--blue);color:#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 60% at 70% 30%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),
  linear-gradient(180deg,rgba(8,8,12,0) 55%,rgba(8,8,12,.38))}
.stage{position:absolute;inset:0}
.stage .defs{position:absolute}
/* the sign: his letters as a solid, extruded object, turned a little in space, lit from the top left.
   The side faces are a stack of 1px drop shadows stepping darker; the last one is the cast shadow on the wall. */
.sign{top:max(10svh,92px);left:4vw;right:8vw;perspective:1800px}
.sign .tilt{transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-11deg));transform-origin:64% 60%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sign svg{fill:url(#faceg);filter:
  drop-shadow(1px 1px 0 #D6D9F3) drop-shadow(1px 1px 0 #CBCFEE) drop-shadow(1px 1px 0 #C0C5E9) drop-shadow(1px 1px 0 #B5BBE4)
  drop-shadow(1px 1px 0 #AAB1DF) drop-shadow(1px 1px 0 #9FA7DA) drop-shadow(1px 1px 0 #949DD5) drop-shadow(1px 1px 0 #8A93D0)
  drop-shadow(1px 1px 0 #7F89CA) drop-shadow(1px 1px 0 #747FC4) drop-shadow(1px 1px 0 #6A75BE) drop-shadow(1px 1px 0 #5F6BB8)
  drop-shadow(24px 34px 30px rgba(3,1,48,.55))}
/* the ground the sign stands on, so nothing floats */
.floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(3,1,48,.55),rgba(3,1,48,0));pointer-events:none}
/* the worker stands in front: his own shadow falls back and left onto the letters */
.worker{position:absolute;z-index:3;right:9vw;bottom:0;height:min(90svh,960px);aspect-ratio:797/1500;transition:translate .7s cubic-bezier(.2,.7,.2,1)}
.worker img{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:drop-shadow(-34px 26px 26px rgba(3,1,48,.5)) drop-shadow(-4px 4px 4px rgba(3,1,48,.35))}
/* a puff of dust where the drill bites the H */
.dust{position:absolute;left:66%;top:5.6%;width:0;height:0}
.dust i{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;animation:dust 1.8s cubic-bezier(.2,.7,.3,1) infinite}
.dust i:nth-child(1){--dx:-34px;--dy:-18px;animation-delay:0s}
.dust i:nth-child(2){--dx:-22px;--dy:16px;animation-delay:.3s;width:4px;height:4px}
.dust i:nth-child(3){--dx:-44px;--dy:2px;animation-delay:.6s;width:3px;height:3px}
.dust i:nth-child(4){--dx:-16px;--dy:-30px;animation-delay:.9s}
.dust i:nth-child(5){--dx:-38px;--dy:26px;animation-delay:1.2s;width:3px;height:3px}
.dust i:nth-child(6){--dx:-28px;--dy:-6px;animation-delay:1.5s;width:4px;height:4px}
@keyframes dust{0%{opacity:.95;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@media(prefers-reduced-motion:reduce){.dust{display:none}.sign .tilt,.worker{transition:none}}
.cap{position:absolute;z-index:4;left:clamp(22px,5vw,80px);bottom:clamp(36px,7svh,80px);max-width:min(640px,52vw)}
.cap .k{display:inline-block;padding:8px 12px;background:var(--ink);color:#fff}
.cap h1{margin-top:20px;font-size:clamp(54px,6.2vw,104px)}
.cap h1 span{color:var(--hivis)}
.cap p{margin-top:22px;font-size:17px;line-height:1.6;max-width:38ch;color:rgba(255,255,255,.86)}
.doorbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 24px;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s ease,color .3s ease}
.btn.or{background:var(--hivis);color:var(--ink)}
.btn.wh{background:#fff;color:var(--blue)}
.btn:hover{transform:translateY(-3px)}
.btn i{font-style:normal}

/* ticker: the trades, running like site tape */
.tape{background:var(--hivis);color:var(--ink);overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink)}
.tape .run{display:inline-flex;gap:40px;padding:16px 0;animation:run 38s linear infinite}
.tape span{font-variation-settings:"wdth" 66;font-weight:900;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.tape span::after{content:"✕";margin-left:40px;font-size:13px;vertical-align:3px}
@keyframes run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tape .run{animation:none}}

section{padding:clamp(86px,11vw,170px) 0}

/* trusted by */
.trusted{padding:clamp(54px,7vw,96px) 0;border-bottom:1px solid var(--line)}
.trusted .row{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.trusted .row p{max-width:36ch;font-size:15px;line-height:1.6;color:rgba(8,8,12,.6)}
.logos{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos li{display:flex;align-items:center;justify-content:center;height:120px;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s ease}
.logos img{max-height:40px;max-width:min(150px,100%);width:auto;filter:grayscale(1) brightness(.25);opacity:.75;transition:filter .3s ease,opacity .3s ease}
/* logos that only exist in white: the tile goes black on hover so the real logo shows */
.logos li.on-dark:hover{background:var(--ink)}
.logos li:hover{background:#fff}
.logos li:hover img{filter:none;opacity:1}
.logos .word{font-variation-settings:"wdth" 70;font-weight:900;font-size:18px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}

/* services as tiles */
.send .row{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(40px,5vw,64px)}
.send .row p{max-width:34ch;font-size:15px;line-height:1.6;color:rgba(8,8,12,.6)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.tile{position:relative;min-height:250px;padding:26px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);clip-path:inset(100% 0 0 0);transition:clip-path .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover{color:#fff}
.tile:hover::before{clip-path:inset(0)}
.tile .n{font-variation-settings:"wdth" 64;font-weight:900;font-size:46px;line-height:1;color:var(--hivis)}
.tile strong{font-variation-settings:"wdth" 70;font-weight:900;font-size:clamp(24px,2.2vw,32px);line-height:.95;text-transform:uppercase}
.tile small{display:block;margin-top:10px;font-size:13px;line-height:1.5;opacity:.66}

/* the number, on the forklift photo */
.call{position:relative;padding:0;color:#fff;overflow:hidden;background:var(--blue)}
.call img{width:100%;height:min(88svh,880px);object-fit:cover;object-position:30% 50%}
.call::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,6,159,.92) 0%,rgba(16,6,159,.55) 46%,rgba(16,6,159,0) 72%)}
.call .over{position:absolute;z-index:2;inset:0;display:flex;align-items:center}
.call .num{display:block;margin-top:18px;white-space:nowrap;font-size:min(18.5vw,184px);text-decoration:none;color:#fff}
.call p{margin-top:20px;max-width:34ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88)}

/* nothing to chase */
.arrive{background:var(--ink);color:#fff}
.arrive .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--wline);margin-top:clamp(46px,6vw,80px);border:2px solid var(--wline)}
.arrive .grid>div{background:var(--ink);padding:34px 30px 40px}
.arrive .tick{width:46px;height:46px;border-radius:50%;background:var(--hivis);display:grid;place-items:center}
.arrive .tick svg{width:22px;stroke:var(--ink);stroke-width:3;fill:none}
.arrive h3{margin:26px 0 12px;font-size:clamp(30px,3vw,44px)}
.arrive p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.68);max-width:30ch}

/* two doors */
.doors2{padding:0}
.doors2 .pair{display:grid;grid-template-columns:1fr 1fr}
.door{position:relative;display:block;padding:clamp(64px,8vw,124px) clamp(22px,5vw,80px);text-decoration:none;overflow:hidden}
.door.need{background:var(--blue);color:#fff}
.door.work{background:var(--hivis);color:var(--ink)}
.door .t{display:block;margin-top:20px;font-size:clamp(56px,7vw,116px)}
.door p{margin-top:22px;font-size:16px;line-height:1.6;max-width:34ch;opacity:.86}
.door .go2{display:inline-flex;gap:14px;margin-top:30px;padding:16px 20px;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.door.need .go2{background:#fff;color:var(--blue)}
.door.work .go2{background:var(--ink);color:#fff}
.door .go2 i{font-style:normal;transition:transform .3s ease}
.door:hover .go2 i{transform:translateX(5px)}
.door .ghost{position:absolute;right:-2vw;bottom:-4vw;font-size:clamp(150px,20vw,330px);opacity:.1;pointer-events:none}

/* lately */
.lately .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:clamp(46px,6vw,80px)}
.lately figure{position:relative}
.lately figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 40%}
.lately figure figcaption{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.lately ol{border-top:2px solid var(--ink)}
.lately li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:26px 0;border-bottom:1px solid var(--line)}
.lately li span{font-variation-settings:"wdth" 64;font-weight:900;font-size:28px;color:var(--hivis);line-height:1}
.lately li strong{font-variation-settings:"wdth" 74;font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1;text-transform:uppercase}
.lately li small{display:block;grid-column:2;font-size:14px;color:rgba(8,8,12,.6)}

/* towns */
.where{padding-top:0}
.towns{display:flex;flex-wrap:wrap;gap:0 .3em;font-size:clamp(66px,10.6vw,176px)}
.towns span{color:var(--blue)}
.towns span.o{-webkit-text-stroke:2px var(--ink);color:transparent}

/* start */
.start{background:var(--blue);color:#fff}
.start .two{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,110px);align-items:start}
.bigtel{display:block;margin-top:26px;font-size:clamp(56px,6.4vw,104px);color:var(--hivis);text-decoration:none;white-space:nowrap}
.also{margin-top:22px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.8)}
.also a{text-underline-offset:4px}
.forms .doors{display:flex;margin-bottom:34px;border:2px solid #fff}
.forms .doors button{flex:1;padding:18px 14px;background:transparent;border:0;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.forms .doors button[aria-selected=true]{background:#fff;color:var(--blue)}
.forms input,.forms select,.forms textarea,.chips span{border-color:rgba(255,255,255,.5)}
.forms select option{color:#111}
.chips input:checked+span{background:var(--hivis);border-color:var(--hivis);color:var(--ink)}
.go{justify-self:start;padding:19px 30px;border:0;background:var(--hivis);color:var(--ink);cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.go:hover{background:#fff}
.forms .note{color:#fff}

/* footer */
footer{background:var(--navy);color:#fff;padding:60px 0 56px}
footer .top{display:flex;justify-content:space-between;align-items:end;gap:30px;padding-bottom:46px;border-bottom:1px solid var(--wline)}
footer .top svg{width:min(640px,72vw);fill:#fff;stroke:#fff;stroke-width:1.5px}
footer .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 34px;padding-top:26px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .credit{color:rgba(255,255,255,.56);transition:color .3s ease}
footer .credit:hover{color:#fff}

@media(max-width:980px){
  .links{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .tel small{display:none}
  .hero{min-height:0;display:flex;flex-direction:column}
  .stage{position:relative;height:64svh;min-height:470px}
  .sign{top:15svh;left:5vw;right:5vw}
  .sign .tilt{--rx:6deg;--ry:-7deg}
  .worker{right:auto;left:74%;translate:-50% 0;height:44svh;min-height:330px}
  .cap{position:static;max-width:none;padding:8px clamp(22px,5vw,80px) 56px}
  .trusted .row,.send .row{display:block}
  .trusted .row p,.send .row p{margin-top:16px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos li{height:96px}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:170px}
  .call img{height:74svh}
  .call::after{background:linear-gradient(0deg,rgba(16,6,159,.94) 0%,rgba(16,6,159,.6) 50%,rgba(16,6,159,.1))}
  .call .over{align-items:end;padding-bottom:40px}
  .arrive .grid,.doors2 .pair,.lately .grid,.start .two{grid-template-columns:1fr}
  footer .top{display:block}
}

/* ===== the rest of the site (13 Oct): inner pages share the home page's nav, type and colour ===== */
.links a[aria-current=page]{opacity:1;box-shadow:inset 0 -2px 0 var(--hivis);padding-bottom:4px}

/* inner page hero: the blue, a big condensed title, his letters ghosted behind */
.phero{position:relative;overflow:hidden;isolation:isolate;background:var(--blue);color:#fff;padding:clamp(150px,18vw,230px) 0 clamp(64px,8vw,110px)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 80% 20%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%)}
.phero .ghost-letters{position:absolute;z-index:-1;left:-2vw;right:-2vw;bottom:-5vw;opacity:.09;pointer-events:none}
.phero .ghost-letters svg{width:100%;height:auto;fill:#fff}
.phero .k{display:inline-block;padding:8px 12px;background:var(--ink);color:#fff}
.phero h1{margin-top:0;font-size:clamp(64px,10vw,168px);max-width:12ch}
.phero h1 span{color:var(--hivis)}
.phero p{margin-top:24px;max-width:46ch;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88)}
.phero .doorbtns{margin-top:30px}
.phero .pcut{position:absolute;z-index:1;right:6vw;bottom:0;height:calc(100% - 70px);max-height:620px;width:auto;max-width:none}

/* services page: one row per trade */
.trades{border-top:2px solid var(--ink)}
.trade{display:grid;grid-template-columns:110px 1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start;padding:clamp(34px,4vw,54px) 0;border-bottom:1px solid var(--line)}
.trade .n{font-variation-settings:"wdth" 64;font-weight:900;font-size:clamp(56px,6vw,88px);line-height:.85;color:var(--hivis)}
.trade h2{font-size:clamp(36px,4vw,60px)}
.trade p{font-size:17px;line-height:1.65;color:rgba(8,8,12,.72);max-width:44ch}
.trade ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.trade li{padding:8px 12px;border:1.5px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* about page */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lead{font-variation-settings:"wdth" 80;font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.3;letter-spacing:-.01em}
.lead em{font-style:normal;color:var(--blue)}
.body{margin-top:24px;font-size:17px;line-height:1.7;color:rgba(8,8,12,.74);max-width:46ch}
.body+.body{margin-top:16px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:clamp(46px,6vw,80px)}
.values>div{background:var(--paper);padding:34px 30px 40px}
.values h3{font-size:clamp(28px,2.6vw,40px);margin-bottom:14px}
.values p{font-size:15px;line-height:1.65;color:rgba(8,8,12,.7)}

/* work with us */
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--wline);border:2px solid var(--wline);margin-top:clamp(40px,5vw,70px)}
.needs>div{background:var(--ink);padding:30px 28px 36px}
.needs .n{font-variation-settings:"wdth" 64;font-weight:900;font-size:46px;line-height:1;color:var(--hivis)}
.needs h3{margin:18px 0 10px;font-size:clamp(28px,2.6vw,40px)}
.needs p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.7)}

/* contact */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.ways a{display:block;background:var(--paper);padding:30px 28px 34px;text-decoration:none;transition:background .3s ease,color .3s ease}
.ways a:hover{background:var(--blue);color:#fff}
.ways .k{color:var(--hivis)}
.ways strong{display:block;margin-top:14px;font-size:clamp(34px,3.6vw,56px);white-space:nowrap}
.ways a:last-child strong{font-variation-settings:"wdth" 74;font-size:clamp(26px,2.6vw,40px);text-transform:none;letter-spacing:0}

/* legal pages */
.prose{max-width:72ch}
.prose h2{margin:44px 0 12px;font-size:clamp(28px,2.6vw,40px)}
.prose p,.prose li{font-size:16px;line-height:1.75;color:rgba(8,8,12,.78)}
.prose p+p{margin-top:12px}
.prose ul{list-style:disc;padding-left:22px;margin-top:10px}
.prose a{color:var(--blue)}
.prose .updated{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(8,8,12,.55)}

/* thank you and 404 */
.plain{min-height:100svh;display:flex;align-items:center;background:var(--blue);color:#fff;padding:140px 0 80px}
.plain h1{font-size:clamp(70px,11vw,180px)}
.plain h1 span{color:var(--hivis)}
.plain p{margin-top:24px;max-width:44ch;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88)}

/* the real form posts natively; these sit with the draft styles above */
.forms .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.forms .err{color:#FFD1C2}
.on-paper .forms .doors{border-color:var(--ink)}
.on-paper .forms .doors button{color:var(--ink)}
.on-paper .forms .doors button[aria-selected=true]{background:var(--ink);color:#fff}
.on-paper .forms input,.on-paper .forms select,.on-paper .forms textarea,.on-paper .chips span{border-color:rgba(8,8,12,.4)}
.on-paper .go:hover{background:var(--blue);color:#fff}

@media(max-width:760px){
  .phero{padding-top:130px}
  .phero .pcut{display:none}
  .trade{grid-template-columns:1fr;gap:14px}
  .split,.values,.needs,.ways{grid-template-columns:1fr}
}

/* footer page links */
.fnav{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-end}
.fnav a{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.fnav a:hover{opacity:1;color:var(--hivis)}
@media(max-width:760px){
  .fnav{justify-content:flex-start;margin-top:26px}
  .on-paper .wrap[style]{grid-template-columns:1fr!important}
}
.ruled{border-top:1px solid var(--line)}

/* ===== 13 Oct: the home hero in Darcy's own colours (his logo file: PMS 072C blue #000F9F, black #231F20).
   A white site wall, his logo built as a solid sign (blue faces, black outline, dark sides), black type,
   blue as the highlight. Darcy: "I do really like how the blue pops out." ===== */
.hero{background:#fff;color:var(--black)}
.hero::before{background:
  radial-gradient(70% 60% at 62% 28%,#FFFFFF 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#F7F7F8 0%,#ECEDF0 100%)}
.hero .nav{color:var(--black)}
.hero .links a{opacity:.82}
.hero .links a:hover{opacity:1;color:var(--blue)}
.hero .brand svg{stroke:none}
.hero .brand svg .e,.hero .brand svg .n{fill:var(--black)}
.hero .brand svg .f{fill:var(--blue)}
.sign svg .e{fill:var(--black)}
.sign svg .f{fill:url(#faceg)}
.hero .sign svg{filter:
  drop-shadow(1px 1px 0 #1d1b3c) drop-shadow(1px 1px 0 #1b1937) drop-shadow(1px 1px 0 #191732) drop-shadow(1px 1px 0 #17152d)
  drop-shadow(1px 1px 0 #151328) drop-shadow(1px 1px 0 #131124) drop-shadow(1px 1px 0 #110f20) drop-shadow(1px 1px 0 #0f0d1c)
  drop-shadow(1px 1px 0 #0d0b18) drop-shadow(1px 1px 0 #0b0914) drop-shadow(1px 1px 0 #090711) drop-shadow(1px 1px 0 #07050e)
  drop-shadow(26px 36px 34px rgba(20,18,40,.32))}
.hero .floor{background:linear-gradient(to top,rgba(35,31,32,.16),rgba(35,31,32,0))}
.hero .worker img{filter:drop-shadow(-34px 26px 30px rgba(20,18,40,.32)) drop-shadow(-4px 4px 5px rgba(20,18,40,.28))}
.hero .dust i{background:#9A9AA2}
.hero .cap p{color:rgba(35,31,32,.78)}
.hero .cap h1 span{color:var(--blue)}
.hero .btn.wh{background:transparent;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
.hero .btn.wh:hover{background:var(--black);color:#fff}
/* the trades tape under the hero runs in his blue */
.tape{background:var(--blue);color:#fff;border-color:var(--black)}
@media(max-width:760px){.hero .floor{display:none}}

/* 13 Oct, seagey: orange is for what you click (buttons, the call button, phone links, the join panel, the form).
   Everything else that is highlighted uses Darcy's blue; on dark or blue grounds a lighter tint of it. */
:root{--blue-lite:#8F9BFF}
.h2 em{color:var(--blue)}
.arrive .h2 em,.arrive h3 em{color:var(--blue-lite)}
.tile .n,.trade .n,.lately li span,.ways .k{color:var(--blue)}
.needs .n{color:var(--blue-lite)}
.arrive .tick{background:var(--blue)}
.arrive .tick svg{stroke:#fff}
.phero h1 span,.plain h1 span{color:var(--blue-lite)}

/* ===== 14 Oct: every inner page opens like home. White wall, one word as a solid sign in his blue,
   a crew member standing in front of it. The sign is live text with stacked shadows for its sides,
   so it works in Safari (no SVG filter on an image, which drew a grey box on iPhone). ===== */
.hero.inner{min-height:max(94svh,820px)}
.hero.inner .sign{top:max(14svh,128px);left:3vw;right:3vw;text-align:center}
.hero.inner .sign .tilt{--rx:6deg;--ry:-9deg}
.word{display:inline-block;white-space:nowrap;font-size:min(calc(92vw / (var(--n) * .5)),25vw,60svh);line-height:.8;color:var(--blue);
  -webkit-text-stroke:.012em var(--black);paint-order:stroke fill;
  text-shadow:.005em .005em 0 #1d1b3c,.01em .01em 0 #1b1937,.015em .015em 0 #191732,.02em .02em 0 #17152d,.025em .025em 0 #151328,
    .03em .03em 0 #131124,.035em .035em 0 #110f20,.04em .04em 0 #0f0d1c,.045em .045em 0 #0d0b18,.05em .05em 0 #0b0914,
    .055em .055em 0 #090711,.06em .06em 0 #07050e,.1em .14em .12em rgba(20,18,40,.28)}
.hero.inner .worker{right:7vw;height:min(80svh,820px)}
.hero.inner .worker.cut-pair{right:3vw;height:min(64svh,640px)}
.hero.inner .cap .k{background:var(--black)}
.hero.inner .cap .k a{color:inherit;text-decoration:none;opacity:.7}
.hero.inner .cap .k a:hover{opacity:1}
.hero.inner .cap h1{font-size:clamp(54px,5.6vw,96px)}

/* home tiles are links now */
a.tile{color:inherit;text-decoration:none}
.tile:hover .n{color:#fff}

/* services list: a link to each trade's own page */
.trade .more{display:inline-flex;gap:10px;margin-top:20px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);text-decoration:none;box-shadow:inset 0 -2px 0 var(--hivis);padding-bottom:4px}
.trade .more:hover{color:var(--hivis)}

/* service pages */
.lately.svc .grid{align-items:center}
.lately.svc figure img{aspect-ratio:4/3}
.proof{margin-top:40px}
.proof .k{color:var(--blue);margin-bottom:6px}
.proof ol{border-top:2px solid var(--ink)}
.how .step{font-size:46px;line-height:1;color:var(--blue);margin-bottom:16px}
.how .values{margin-top:clamp(36px,5vw,60px)}
.others{padding-bottom:0}
.olist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px);margin-top:clamp(30px,4vw,50px);border-top:2px solid var(--ink)}
.olist a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.olist span{font-size:clamp(26px,2.6vw,40px)}
.olist i{font-style:normal;font-size:22px;color:var(--hivis);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.olist a:hover span{color:var(--blue)}
.olist a:hover i{transform:translateX(6px)}

@media(max-width:760px){
  .hero.inner{min-height:0}
  .hero.inner .stage{height:54svh;min-height:400px}
  .hero.inner .sign{top:15svh}
  .word{font-size:min(calc(90vw / (var(--n) * .5)),38vw)}
  .hero.inner .worker{right:auto;left:70%;height:40svh;min-height:300px}
  .hero.inner .worker.cut-pair{left:62%;height:30svh;min-height:230px}
  .olist{grid-template-columns:1fr}
}
/* 14 Oct pass 2: keep the sign clear of the headline, and pin the two-person cut-out to the edge it was cut at */
.hero.inner{min-height:max(100svh,880px)}
.word{font-size:min(calc(92vw / (var(--n) * .5)),22vw,32svh)}
.hero.inner .worker.cut-pair{right:0;height:min(60svh,600px)}
@media(max-width:760px){
  .hero.inner{min-height:0}
  .word{font-size:min(calc(90vw / (var(--n) * .5)),38vw)}
  .hero.inner .worker.cut-pair{left:auto;right:0;translate:none;height:min(30svh,58vw);min-height:0}
}
/* pass 3: wide letters (W, K, M) need more room per character */
.word{font-size:min(calc(90vw / (var(--n) * .6)),22vw,32svh)}
@media(max-width:760px){.word{font-size:min(calc(88vw / (var(--n) * .6)),38vw)}}
/* pass 4, phones: the crew member stands under the word, not across it, so the word still reads */
@media(max-width:760px){
  .hero.inner .stage{height:60svh;min-height:440px}
  .hero.inner .sign{top:13svh}
  .hero.inner .worker{left:auto;right:5vw;translate:none;height:38svh;min-height:280px}
}

/* ===== 14 Oct: motion pass (motion.js). Everything here is either the start state the motion plays from,
   or the parts it needs. With reduce motion on, none of it shows. ===== */
body{overflow-x:clip}
html.pre .hero .tilt>*,html.pre .hero .worker img,html.pre .hero h1{opacity:0}
/* the sign's depth is a variable, so the word can grow its sides */
.word{--d:1;text-shadow:calc(var(--d)*.005em) calc(var(--d)*.005em) 0 #1d1b3c,calc(var(--d)*.01em) calc(var(--d)*.01em) 0 #1b1937,calc(var(--d)*.015em) calc(var(--d)*.015em) 0 #191732,
  calc(var(--d)*.02em) calc(var(--d)*.02em) 0 #17152d,calc(var(--d)*.025em) calc(var(--d)*.025em) 0 #151328,calc(var(--d)*.03em) calc(var(--d)*.03em) 0 #131124,
  calc(var(--d)*.035em) calc(var(--d)*.035em) 0 #110f20,calc(var(--d)*.04em) calc(var(--d)*.04em) 0 #0f0d1c,calc(var(--d)*.045em) calc(var(--d)*.045em) 0 #0d0b18,
  calc(var(--d)*.05em) calc(var(--d)*.05em) 0 #0b0914,calc(var(--d)*.055em) calc(var(--d)*.055em) 0 #090711,calc(var(--d)*.06em) calc(var(--d)*.06em) 0 #07050e,
  calc(var(--d)*.1em) calc(var(--d)*.14em) .12em rgba(20,18,40,.28)}
.word .lt1{display:inline-block}
/* the dust where the worker lands */
.puff{position:absolute;left:50%;bottom:3%;width:0;height:0;z-index:-1;pointer-events:none}
.puff i{position:absolute;left:0;top:0;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,rgba(150,150,160,.75),rgba(150,150,160,0) 70%)}
/* headings: each word rises out of a mask; blue words get a bar drawn under them */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .1em;margin:-.08em 0 -.1em}
.wi{display:inline-block}
.h2 em{--u:100%;background:linear-gradient(currentColor,currentColor) 0 100%/var(--u) .07em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em}
/* the counter: each digit is a column that rolls up to the real one */
.od{position:relative;display:inline-block;clip-path:inset(-.06em -.4em)}
.od .og{visibility:hidden}
.od .oc{position:absolute;left:50%;top:0;translate:-50% 0;display:flex;flex-direction:column;align-items:center}
.od .oc b{display:block;height:.86em;line-height:.86;font-weight:inherit}
/* home tiles: the job's photo slides up behind the name */
.tile .ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:translateY(101%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile::before{background:rgba(0,15,159,.62)}
.tile:hover .ph{transform:none}
/* site tape between sections, in his blue and black */
.stripe{height:16px;background:repeating-linear-gradient(-45deg,var(--blue) 0 20px,var(--black) 20px 40px);transform-origin:0 50%}
.call,.where,.doors2{overflow:hidden}
@media(prefers-reduced-motion:reduce){.tile .ph{transition:none}}
/* 14 Oct speed fix: everything that moves on scroll is its own layer, drawn once and then only moved.
   Without this the browser redrew the sign's 13 shadow layers on every frame and slower machines lagged. */
html.motion .hero .sign{will-change:transform}

/* 14 Oct: the sign is a flat picture of its shadowed face (13 live shadow layers made Chrome lag, even before the motion).
   The real letters stay in place, hidden, so every box keeps its size; the picture sits over them. */
.hero .sign .tilt{position:relative}
.hero .sign .tilt>svg{visibility:hidden;filter:none!important}
.hero .sign .bk img{position:absolute;max-width:none;height:auto;left:-1.705%;top:-8.296%;width:111.648%}
@media(max-width:760px){.hero .sign .bk img{left:-5.698%;top:-8.285%;width:146.724%}}
.word.bk{position:relative;color:transparent;-webkit-text-stroke:0;text-shadow:none!important}
.word.bk img{position:absolute;max-width:none;height:auto}
html.motion .hero .worker{will-change:transform}

/* 14 Oct: the hero buttons are solid blocks like the sign: a stepped dark side down and to the right.
   Hover lifts them a touch higher, a press pushes them into the wall. */
.hero .btn{--x:6px;box-shadow:calc(var(--x)*1/8) calc(var(--x)*1/8) 0 #231F20,calc(var(--x)*2/8) calc(var(--x)*2/8) 0 #231F20,calc(var(--x)*3/8) calc(var(--x)*3/8) 0 #231F20,calc(var(--x)*4/8) calc(var(--x)*4/8) 0 #231F20,calc(var(--x)*5/8) calc(var(--x)*5/8) 0 #231F20,calc(var(--x)*6/8) calc(var(--x)*6/8) 0 #231F20,calc(var(--x)*7/8) calc(var(--x)*7/8) 0 #231F20,calc(var(--x)*8/8) calc(var(--x)*8/8) 0 #231F20,calc(var(--x) + 8px) calc(var(--x) + 12px) 18px rgba(20,18,40,.28);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1),background .3s ease,color .3s ease}
.hero .btn:hover{--x:8px;transform:translate(-3px,-3px)}
.hero .btn:active{--x:1px;transform:translate(5px,5px);transition-duration:.06s}
.hero .btn.wh{background:#fff;box-shadow:inset 0 0 0 2px #231F20,calc(var(--x)*1/8) calc(var(--x)*1/8) 0 #231F20,calc(var(--x)*2/8) calc(var(--x)*2/8) 0 #231F20,calc(var(--x)*3/8) calc(var(--x)*3/8) 0 #231F20,calc(var(--x)*4/8) calc(var(--x)*4/8) 0 #231F20,calc(var(--x)*5/8) calc(var(--x)*5/8) 0 #231F20,calc(var(--x)*6/8) calc(var(--x)*6/8) 0 #231F20,calc(var(--x)*7/8) calc(var(--x)*7/8) 0 #231F20,calc(var(--x)*8/8) calc(var(--x)*8/8) 0 #231F20,calc(var(--x) + 8px) calc(var(--x) + 12px) 18px rgba(20,18,40,.28)}
.hero .btn.wh:hover{background:#231F20;color:#fff}
/* the word pieces the motion wraps around each heading word take their colour from the heading, never from the highlight rule */
.wm,.wi{color:inherit!important}