/* One committed look: street-sign red, paper white, ink, and a stone-warm finish. */
/* Work Sans (variable, 300 to 900) and Barlow Semi Condensed for the street sign, served from /fonts (SIL Open Font License) */
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-semi-condensed-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-semi-condensed-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/work-sans-300-900-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/work-sans-300-900-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  color-scheme:light;
  --red:#C8102E; --red-deep:#8E0A20; --red-hot:#E3203F;
  --ink:#111111; --grey:#6E6A64; --line:#E3DED6;
  --paper:#FFFFFF; --mist:#F4F1EC; --stone:#E6DED1;
  --font:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sign:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --gut:clamp(16px,2.2vw,32px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
.cap{font:600 .78rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:#fff;transition:color .3s,background .3s}
.nav.on-light{color:var(--ink);background:#fff;box-shadow:0 1px 0 var(--line)}
.nav .row{display:flex;justify-content:space-between;align-items:center;height:64px;padding-inline:var(--gut);gap:20px}
.nav .mark{font:800 1.05rem/1 var(--font);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.nav.show-mark .mark{opacity:1;transform:none}
.nav ul{display:flex;gap:clamp(8px,1.6vw,20px);list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{font:500 .95rem var(--font);text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:.55em;font:500 1rem/1 var(--font);text-decoration:none;border-radius:999px;padding:.8em 1.35em;border:0;cursor:pointer;transition:transform .2s,background .2s,color .2s;white-space:nowrap}
.pill:hover{transform:translateY(-2px)}
.pill.white{background:#fff;color:var(--red)}
.pill.red{background:var(--red);color:#fff}
.pill.ink{background:var(--ink);color:#fff}
.pill.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.nav .pill{font:600 .95rem/1 var(--font);letter-spacing:-.01em;padding:.62em 1.1em}
.nav:not(.on-light) .pill{background:#fff;color:var(--red)}
.nav.on-light .pill{background:var(--red);color:#fff}
@media (max-width:640px){.nav .opt{display:none}}

/* ---------- red world ---------- */
.red{background:var(--red);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.hero{min-height:min(100svh,980px);display:grid;grid-template-rows:1fr auto auto;padding-top:64px}
.word{padding-inline:var(--gut);align-self:end;line-height:.8}
.word > span{display:inline-block;font:800 16vw/.8 var(--font);letter-spacing:-.055em;white-space:nowrap}
.word .l{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(24%);opacity:0}to{transform:none;opacity:1}}
.hero-foot{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:clamp(20px,3vw,36px) var(--gut) clamp(22px,3vw,34px);flex-wrap:wrap}
.hero-foot p{font:400 clamp(1.05rem,1.6vw,1.35rem)/1.35 var(--font);max-width:30ch}
.hero-foot .cap{opacity:.8}
@media (max-width:700px){.word .l{display:block}.word > span{line-height:.84}}

.big{padding:clamp(90px,12vw,170px) var(--gut) clamp(40px,5vw,60px);text-align:center}
.big h1{font:800 clamp(2.7rem,9.4vw,9.6rem)/.9 var(--font);letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}
.big h1 .fade{display:block;color:#EAA4B0} /* solid: the same tint as 62% white over the red, without doubling up where letters overlap */
.big h1 .hl-done{color:#3A0009;white-space:nowrap} /* deep dark red, to contrast with the white lines above; always one line */
@media (max-width:480px){.big h1{font-size:min(2.7rem,11vw)}} /* small phones: small enough that "DONE PROPERLY." fits the column */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 var(--gut) clamp(80px,10vw,130px)}
/* flat white cards on the flat red: no shadow, the white is separation enough */
.tile{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.t-img{aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.t-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
/* title and text run full width; the tags (left) and the arrow (right) share the last row, at the foot of the card */
.t-body{position:relative;padding:clamp(20px,2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;gap:12px 14px;flex:1}
.t-body > h3,.t-body > p{grid-column:1/-1}
.tile h3{position:relative}
.tile h3{font:800 clamp(2rem,3vw,3.2rem)/.9 var(--font);letter-spacing:-.035em}
.tile p{font-size:1rem;line-height:1.45;color:var(--grey)}
.t-tags{list-style:none;margin:2px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-self:end} /* 8px lifts the last row of chips level with the arrow's centre */
.t-tags li{font:600 clamp(.78rem,.85vw,.88rem)/1 var(--font);letter-spacing:0;text-transform:none;border-radius:999px;padding:.62em .95em;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.t-go{align-self:end;padding-top:10px;display:flex;justify-content:flex-end;align-items:center}
.t-arr{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background .3s}
.t-arr svg{width:18px;height:18px;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tile:hover,.tile:focus-visible{transform:translateY(-6px)}
.tile:hover .t-img img,.tile:focus-visible .t-img img{transform:scale(1.04)}
.tile:hover .t-arr,.tile:focus-visible .t-arr{background:var(--red)}
.tile:hover .t-arr svg,.tile:focus-visible .t-arr svg{transform:translateX(3px)}
@media (max-width:1100px){.aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.aud{grid-template-columns:1fr}}

/* ---------- statement ---------- */
.say{padding:clamp(100px,13vw,190px) var(--gut) clamp(56px,7vw,100px)}
.say p{font:800 clamp(2.4rem,7.4vw,7.6rem)/.9 var(--font);letter-spacing:-.05em;text-transform:uppercase;max-width:15ch;margin-inline:auto;text-align:center;text-wrap:balance}
.say p .w{transition:color .25s}
.js .say p .w{color:#E4DFD7}
.js .say p .w.lit{color:var(--ink)}
.say p em{font-style:normal}
@media (min-width:390px){.say p em{white-space:nowrap}} /* "get deals done." as one solid red last line, wherever it fits */
.js .say p em .w.lit,.say p em{color:var(--red)}
.center{display:flex;justify-content:center;margin-top:clamp(34px,4vw,50px);gap:10px;flex-wrap:wrap}

/* ---------- work ---------- */
.work{padding:0 var(--gut) clamp(90px,11vw,160px)}
.work-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-bottom:clamp(18px,2vw,26px)}
.work-head .cap{color:var(--ink)}
/* cards grow to full size as they scroll in */
.card{transform:scale(var(--s,1));border-radius:calc(clamp(14px,1.6vw,22px) + (1 - var(--s,1)) * 240px);transform-origin:50% 0;will-change:transform}
.card{overflow:hidden;position:relative}
.meta{margin-top:clamp(18px,2vw,26px);display:grid;gap:8px;justify-items:start}
.meta .client{font:500 1rem var(--font);color:var(--red)}
.meta .title{font:800 clamp(1.7rem,3.2vw,3.1rem)/.95 var(--font);letter-spacing:-.045em;max-width:26ch;text-wrap:balance}
.meta .tags{color:var(--grey);font-size:.92rem}
.proj + .proj{margin-top:clamp(80px,10vw,140px)}
.stage{aspect-ratio:16/8.4;display:grid;place-items:center;position:relative;overflow:hidden}
.jl .stage{background:#23264F}
.mp .stage{background:#111}
.browser{width:min(74%,980px);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.browser .bar{height:clamp(20px,2.4vw,30px);background:#ECEAE6;display:flex;align-items:center;gap:6px;padding-inline:12px}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#CFCBC4}
.screen{aspect-ratio:16/9.2;overflow:hidden;position:relative;background:#fff}
.screen img{width:100%;animation:scroll var(--dur,20s) ease-in-out infinite alternate}
@keyframes scroll{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(var(--end))}}
.phone{position:absolute;right:9%;bottom:-6%;width:min(17%,210px);border-radius:clamp(16px,2.4vw,32px);padding:clamp(4px,.55vw,7px);background:#0B0B0C;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.phone .screen{aspect-ratio:390/844;border-radius:clamp(12px,1.9vw,26px)}
.mp .door{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.mp .browser{position:relative;z-index:1;width:min(58%,820px)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(40px,5vw,64px);text-align:left}
.nums b{display:block;font:800 clamp(3rem,8.6vw,8.4rem)/.9 var(--font);letter-spacing:-.06em;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.nums span{display:block;margin-top:12px;color:var(--grey);font-size:.95rem;line-height:1.35;max-width:24ch}
.src{color:var(--grey);font-size:.8rem;margin-top:22px}
.deck .stage{container-type:inline-size;display:block;overflow:hidden;justify-items:start} /* (start: newer browsers centre a block's children under .stage's place-items, and the strip would begin mid-way) */
.strip{display:flex;gap:2.4cqw;width:max-content;height:100%;align-items:center;animation:film var(--dur,40s) linear infinite}
.strip img{width:58cqw;aspect-ratio:16/9;object-fit:cover;border-radius:1.1cqw;box-shadow:0 2cqw 5cqw -1.6cqw rgba(0,0,0,.45)}
.a-pages .strip img{aspect-ratio:2400/1696} /* A-size pages (the Market Place landlord pack), not 16:9 */
@keyframes film{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 1.2cqw))}}
@media (max-width:700px){.deck .stage{aspect-ratio:16/12}.strip img{width:84cqw}}
@media (max-width:700px){.nums{grid-template-columns:1fr;gap:34px}.stage{aspect-ratio:4/3.4}.browser{width:86%}.phone{width:26%;right:5%}.mp .browser{width:86%}}

/* ---------- quote: a scroll-driven ticker of the key phrase, then the full words ---------- */
.proof{background:var(--ink);color:#fff;padding-block:clamp(90px,11vw,150px);overflow:hidden}
.tick{overflow:hidden;margin-bottom:clamp(44px,5.6vw,80px)}
.tick-track{display:flex;width:max-content;will-change:transform}
.tk{display:inline-flex;align-items:center;padding-block:.04em .2em;font:800 clamp(4.2rem,13vw,13.5rem)/.9 var(--font);letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap}
.tk i{font-style:normal;color:var(--red-hot)}
.tk::after{content:"";flex:none;width:.16em;height:.16em;border-radius:50%;background:var(--red-hot);margin-inline:.45em}
.pq{margin:0;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(24px,5vw,90px);align-items:start}
.pq figcaption{display:grid;gap:6px}
.pq figcaption .cap{color:rgba(255,255,255,.55);margin-bottom:10px}
.pq figcaption b{font:800 clamp(1.3rem,1.8vw,1.7rem)/1.1 var(--font);letter-spacing:-.03em}
.pq figcaption span:last-child{color:rgba(255,255,255,.7)}
.pq blockquote{margin:0}
.pq blockquote p{position:relative;font:500 clamp(1.5rem,2.9vw,2.9rem)/1.2 var(--font);letter-spacing:-.03em;max-width:30ch;text-wrap:pretty}
/* quote marks in the ticker's red; the opening one hangs in the margin so the text keeps its straight left edge */
.pq blockquote p::before,.pq blockquote p::after{font-weight:800;color:var(--red-hot)}
.pq blockquote p::before{content:"\201C";position:absolute;right:100%;top:0;padding-right:.04em}
.pq blockquote p::after{content:"\201D"}
.pq em{font-style:normal;font-weight:800;color:var(--red-hot)}
@media (max-width:760px){.pq{grid-template-columns:1fr}.pq figcaption{order:2}}
.draft{display:inline-block;margin-bottom:30px;border:1.5px dashed var(--red);color:var(--red);font:600 .72rem var(--font);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px}

/* ---------- what we do (the home page and the Services page share these rows, blocks/wwd.html): three huge words, each
   over the work it names. On the home page the work is a row that drifts sideways on its own, one row one way and the
   next the other (site.js); point at a row to stop it, drag or swipe it either way. On the Services page (.wwd-grid) it is
   a grid, every job at once, with the list of what the service includes. Every job is one 16:9 picture frame; a job with
   several pictures plays them in turn, its little bars filling as each one shows. Without the script (or with less
   motion) each home row is scrolled by hand. ---------- */
.wwd{padding-top:0;overflow:hidden} /* (the drifting rows run to the screen's edges) */
/* the three rows are told apart by soft grey bands (white, grey, white), edge to edge, not by rules */
.wwd-row{margin-inline:calc(-1 * var(--gut));padding:clamp(56px,7.4vw,120px) var(--gut)}
.sec-head + .wwd-row{padding-top:clamp(6px,1vw,14px)}
.wwd-row:nth-child(even of .wwd-row){background:var(--mist)}
.wwd-row:last-child{padding-bottom:0}
.wwd-k{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);color:var(--ink);text-decoration:none}
.wwd-n{align-self:flex-start;font:700 clamp(.8rem,1vw,1rem)/1 var(--font);letter-spacing:.04em;color:var(--red);padding-top:.5em}
.wwd-k h2{font:800 clamp(2.5rem,min(13vw,calc((100vw - 102px) / 5.83)),15rem)/.8 var(--font);letter-spacing:-.065em;text-transform:uppercase;margin:0 0 0 -.04em;transition:color .3s}
.wwd-go{margin-left:auto;flex:none;width:clamp(46px,5.4vw,84px);height:clamp(46px,5.4vw,84px);border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font:700 clamp(1.3rem,2.2vw,2.2rem)/1 var(--font);transition:background .3s,transform .3s}
.wwd-k:focus-visible h2{color:var(--red)}
.wwd-k:focus-visible .wwd-go{background:var(--red);transform:translateX(6px)}
@media (hover:hover){.wwd-k:hover h2{color:var(--red)}.wwd-k:hover .wwd-go{background:var(--red);transform:translateX(6px)}}
.wwd-p{max-width:44ch;font:500 clamp(1.1rem,1.6vw,1.45rem)/1.35 var(--font);letter-spacing:-.015em;margin:clamp(16px,2vw,26px) 0 clamp(26px,3.2vw,44px)}
.wwd-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:calc(-1 * clamp(8px,1.4vw,22px)) 0 clamp(30px,3.6vw,52px);padding:0}
.wwd-tags li{font:600 clamp(.82rem,.9vw,.92rem)/1 var(--font);padding:.65em 1em;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.wwd:not(.wwd-grid) .wwd-tags{display:none}
@media (max-width:600px){.wwd-n{display:none}}
@media (max-width:359px){.wwd-k h2{font-size:12.2vw}.wwd-go{width:40px;height:40px}}
.wwd-track{list-style:none;margin:0;padding:0}
.wwd-k,.wwd-track a,.wwd-strip{scroll-margin:84px 0 20px}
.wwd-track a{display:grid;gap:12px;color:var(--ink);text-decoration:none}
.wwd-pics{position:relative;display:block;aspect-ratio:16/9;border-radius:clamp(10px,1.2vw,18px);overflow:hidden;background:var(--mist);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wwd-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);
  transition:opacity .5s ease,transform 1.4s cubic-bezier(.2,.8,.2,1);-webkit-user-drag:none}
.wwd-pics img.on{opacity:1;transform:none}
/* the bars (made by the script, and only shown while the pictures can play), over a soft shade so they read on light pictures */
.wwd-bars{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:none;gap:5px}
.wwd-bars i{position:relative;flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.4)}
.wwd-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.js .wwd:not(.still) .wwd-pics.many .wwd-bars{display:flex}
.js .wwd:not(.still) .wwd-pics.many::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.34));pointer-events:none}
.wwd-ls span:not(.on){display:none}
.wwd-c{font:500 clamp(.88rem,1vw,1rem)/1.3 var(--font);color:var(--grey)}
.wwd-c b{color:var(--ink);font-weight:700}

/* the row of frames. The padding gives the focus ring and the lift room. */
.wwd-strip{margin:-10px calc(-1 * var(--gut));padding-block:10px;overflow-x:auto}
.wwd-strip::-webkit-scrollbar{height:6px}
.wwd-strip::-webkit-scrollbar-track{background:rgba(17,17,17,.08);border-radius:3px;margin-inline:var(--gut)}
.wwd-strip::-webkit-scrollbar-thumb{background:rgba(17,17,17,.45);border-radius:3px}
@supports not selector(::-webkit-scrollbar){.wwd-strip{scrollbar-width:thin}}
.wwd-track{display:flex;gap:clamp(10px,1.2vw,18px);padding:0 var(--gut);width:max-content}
.wwd-track li{width:clamp(270px,36vw,640px)}
.wwd-track a:focus-visible .wwd-pics{transform:translateY(-6px)}
@media (hover:hover){.wwd-track a:hover .wwd-pics{transform:translateY(-6px)}}
.wwd-strip.drift{overflow:hidden;scrollbar-width:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.wwd-strip.drift::-webkit-scrollbar{display:none}
.wwd-strip.drift .wwd-track{will-change:transform}
.wwd-strip.drift.held{cursor:grabbing}

/* the Services page: every job at once, the first one big (rows of three or five), or two by two (four) */
.wwd-grid .wwd-strip{margin:0;padding:0;overflow:visible}
.wwd-grid .wwd-track{display:grid;width:auto;padding:0;gap:clamp(22px,2.4vw,36px) clamp(10px,1.2vw,18px);grid-template-columns:repeat(3,minmax(0,1fr))}
.wwd-grid .wwd-track li{width:auto}
.wwd-grid .wwd-track li:first-child{grid-column:span 2;grid-row:span 2;align-self:start}
.wwd-grid .wwd-track[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.wwd-grid .wwd-track[data-n="4"] li:first-child{grid-column:auto;grid-row:auto}
.wwd-grid .wwd-track[data-n="5"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.wwd-grid .wwd-track a:focus-visible .wwd-pics{transform:none}
@media (hover:hover){.wwd-grid .wwd-track a:hover .wwd-pics{transform:none}}
.js .wwd-grid.rise .wwd-track li{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .wwd-grid.rise .wwd-track li.in{opacity:1;transform:none}
@media (max-width:900px){
  .wwd-grid .wwd-track,.wwd-grid .wwd-track[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wwd-grid .wwd-track li:first-child{grid-row:auto}
  .wwd-grid .wwd-track[data-n="4"] li:first-child,.wwd-grid .wwd-track[data-n="4"] li:last-child{grid-column:span 2}
}
@media (max-width:520px){.wwd-grid .wwd-track li:not(:first-child) .wwd-c{font-size:.8rem}}

/* ---------- case study (home): Jenkins Law on one card in its own navy, the story and the link beside the website on a
   laptop and a phone, then the numbers. The card grows to full size as it rises into view, like the work cards. ---------- */
.case{padding-top:0}
.cs{background:#23264F;color:#fff;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4vw,64px) clamp(28px,4.4vw,80px);
  padding:clamp(24px,4.2vw,72px);align-items:center}
.cs-txt{display:grid;gap:clamp(14px,1.6vw,22px);align-content:start}
.cs-k{font:600 clamp(.85rem,1vw,1rem)/1.2 var(--font);color:rgba(255,255,255,.65)}
.cs h2{font:800 clamp(2.1rem,4.3vw,4.8rem)/.92 var(--font);letter-spacing:-.05em;margin:0;text-wrap:balance}
.cs p{font:500 clamp(1rem,1.25vw,1.2rem)/1.45 var(--font);color:rgba(255,255,255,.82);max-width:40ch;margin:0}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cs-tags li{font:600 .82rem/1 var(--font);padding:.62em .95em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.cs-go{justify-self:start;display:inline-flex;align-items:center;gap:.5em;margin-top:4px;padding:.95em 1.45em;border-radius:999px;background:#fff;color:#23264F;
  font:700 1rem/1 var(--font);text-decoration:none;transition:background .25s,color .25s}
.cs-go .see-arr{transition:transform .25s}
.cs-go:focus-visible{background:var(--red);color:#fff;outline-color:#fff}
@media (hover:hover){.cs-go:hover{background:var(--red);color:#fff}.cs-go:hover .see-arr{transform:translateX(4px)}}
.cs-stage{position:relative;padding-bottom:7%}
.cs-stage .browser{width:88%}
.cs-stage .phone{right:0;bottom:0;width:23%}
.cs-nums{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);padding-top:clamp(6px,1vw,14px)}
.cs-nums b{display:block;font:800 clamp(2.6rem,6.2vw,6.6rem)/.9 var(--font);letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-nums span{display:block;margin-top:12px;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.35;max-width:26ch}
.cs .src{grid-column:1/-1;text-align:left;font:500 .8rem/1.4 var(--font);color:rgba(255,255,255,.5);max-width:none;margin:calc(-1 * clamp(14px,2vw,34px)) 0 0}
@media (max-width:900px){.cs{grid-template-columns:minmax(0,1fr)}.cs-stage{order:-1}}
@media (max-width:600px){
  .cs-nums{grid-template-columns:auto minmax(0,1fr);gap:20px 16px;align-items:center}
  .cs-nums div{display:contents}
  .cs-nums b{font-size:clamp(2rem,10vw,2.6rem)}
  .cs-nums span{margin:0;font-size:.88rem}
}

/* ---------- services ---------- */
.services{padding:clamp(100px,12vw,170px) var(--gut)}
.services h2{font:800 clamp(2.6rem,8vw,8rem)/.9 var(--font);letter-spacing:-.055em;text-transform:uppercase;text-align:center}
.services .lede{text-align:center;color:var(--grey);max-width:46ch;margin:22px auto 0;font-size:1.08rem}
.bento{text-align:left;margin-top:clamp(50px,7vw,90px);display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(220px,21vw,320px);
  grid-template-areas:"part part deck deck" "part part pitch web" "brand brand sign camp" "print print print print"}
.b-card{position:relative;overflow:hidden;border-radius:18px;color:#fff;isolation:isolate;background:#222;outline-offset:3px}
.b-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.b-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,12,.15) 0%,rgba(15,12,12,.45) 45%,rgba(15,12,12,.92) 100%)}
.b-card.solid::after{display:none}
.b-body{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,28px);display:grid;gap:10px}
.b-card h3{font:800 clamp(1.8rem,2.9vw,3rem)/.92 var(--font);letter-spacing:-.05em}
.b-card.wide h3{font-size:clamp(2.6rem,5.6vw,5.6rem)}
.b-card p{font-size:.98rem;line-height:1.4;opacity:.9;max-width:36ch}
.red-card{background:var(--red)}
.red-card h3{font-size:clamp(2.2rem,3.6vw,3.8rem)}
.ink-card{background:var(--ink)}
.ink-card .b-body{right:auto;max-width:560px}
.ink-card h3{font-size:clamp(2.2rem,4.4vw,4.4rem)}
.cards-mock{position:absolute;right:clamp(20px,6vw,90px);top:50%;width:min(40%,420px);aspect-ratio:85/55;transform:translateY(-50%)}
.bc{position:absolute;inset:0;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bc-back{background:var(--red);transform:rotate(-9deg) translate(-12%,-6%);display:grid;place-items:center}
.bc-back span{font:800 clamp(2.5rem,6vw,5rem)/1 var(--font);letter-spacing:-.05em;color:#fff}
.bc-front{background:#fff;color:var(--ink);transform:rotate(4deg);padding:7% 8%;display:flex;flex-direction:column;justify-content:space-between}
.bc-front b{font:800 clamp(1rem,2vw,1.7rem)/1 var(--font);letter-spacing:-.03em}
.bc-front b em{font-style:normal;color:var(--red)}
.bc-front small{font:500 clamp(.55rem,.9vw,.8rem)/1.4 var(--font);color:var(--grey)}
.ink-card:hover .bc-back{transform:rotate(-14deg) translate(-20%,-10%)}
.ink-card:hover .bc-front{transform:rotate(1deg) translateY(-4%)}
.b-card:hover img,.b-card:focus-visible img{transform:scale(1.06)}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:260px;
  grid-template-areas:"part part" "deck deck" "pitch web" "brand brand" "sign camp" "print print"}}
@media (max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:280px;grid-template-areas:"part" "deck" "pitch" "web" "brand" "sign" "camp" "print"}
  .ink-card{grid-row:span 1}.cards-mock{top:28%;width:58%}.ink-card .b-body{max-width:none}}
.pk-head{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:14px;margin-top:clamp(80px,10vw,130px)}
.pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(18px,2vw,26px)}
.pk article{background:var(--mist);border-radius:18px;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px}
.pk .feat{background:var(--red);color:#fff}
.pk h3{font:800 clamp(2rem,3.4vw,3.2rem)/.95 var(--font);letter-spacing:-.05em}
.pk .for{color:var(--grey)}
.pk .feat .for{color:rgba(255,255,255,.85)}
.pk ul{list-style:none;margin:6px 0 0;padding:0;display:grid;flex:1;align-content:start}
.pk li{padding-block:10px;border-top:1px solid rgba(17,17,17,.12)}
.pk .feat li{border-color:rgba(255,255,255,.25)}
.pk .pill{align-self:flex-start;margin-top:8px}
@media (max-width:900px){.pk{grid-template-columns:1fr}}
.terms{color:var(--grey);font-size:.9rem;margin-top:22px;text-align:center}

/* ---------- curtain reveal: two layers of curtain. The page slides up off the closing "Got a unit to let?" section,
   which waits underneath, pinned; once fully uncovered it slides up in turn off the footer, which waits pinned
   beneath it ---------- */
main{position:relative;z-index:2;background:var(--paper)}
/* --rv-h (set by site.js) is each layer's height: up to a screen tall it waits pinned to the bottom of the screen;
   taller (a phone on its side) it waits with its top at the top. site.js switches the pinning on (.rv-on) only as the
   end of the page approaches, and only while <main> still fills the screen, so the switch is never seen and find-in-
   page can still scroll to the footer's text. On screen only: printed, everything runs in order. Without the script,
   or with reduced motion, everything simply scrolls. */
.reveal{position:relative;z-index:0}
.end.reveal{z-index:1}
@media screen{.rv-on .reveal{position:sticky;bottom:min(0px,calc(100vh - var(--rv-h,0px)))}}
@media (prefers-reduced-motion:reduce){.rv-on .reveal{position:relative}}
/* the footer tucks 1px under the section above, so no hairline of page shows between them at fractional scales */
.end + footer{margin-top:-1px}

/* ---------- closing call to action ---------- */
.end{background:var(--red);color:#fff;text-align:center;padding:clamp(110px,14vw,190px) var(--gut) clamp(60px,7vw,90px)}
.end h2{font:800 clamp(2.6rem,8.6vw,8.8rem)/.9 var(--font);letter-spacing:-.055em;text-transform:uppercase}
.end h2 .kern{letter-spacing:-.03em} /* at this tracking E and T exactly touch, leaving a hairline: open a gap like L–E's */
.end p{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:36ch;margin:24px auto 0;opacity:.92}
.end .email{display:inline-block;margin-top:clamp(40px,5vw,60px);font:500 clamp(1.4rem,3.6vw,3rem)/1 var(--font);letter-spacing:-.03em;text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:6px}
.end .center{margin-top:34px}
.end .pill.line{color:#fff}
/* after a red section, red would slide off red with no edge to see: there the panel turns white, with red type */
.end.on-red{background:#fff;color:var(--red)}
.end.on-red .pill.white{background:var(--red);color:#fff}
.end.on-red .pill.line{color:var(--red)}
/* a phone on its side: tighter spacing so the whole panel fits the screen while it waits pinned */
@media (max-height:520px) and (orientation:landscape){
  .end{padding-top:88px;padding-bottom:28px}
  .end h2{font-size:clamp(2.2rem,min(8.6vw,15svh),8.8rem)}
  .end p{max-width:54ch;margin-top:14px}
  .end .center{margin-top:22px}
}
#copied{display:block;min-height:1.4em;margin-top:12px;font-size:.9rem}

/* flat street sign emblem: wider than tall, closer to a real Westminster sign, lettering sized as before */
.sign{--w:min(470px,86vw);width:var(--w);container-type:inline-size;margin:clamp(80px,10vw,130px) auto 0;background:#fff;border-radius:calc(var(--w) * .023);color:#141414;font-family:var(--sign);font-weight:600;text-transform:uppercase;text-align:left}
.sign .top{padding:7.2cqw 7cqw 0 7.8cqw;font-size:9.9cqw;line-height:1.08;display:grid;grid-template-columns:auto auto;column-gap:4.6cqw;justify-content:space-between;align-items:baseline}
.sign .l1{grid-area:1/1}.sign .l2{grid-area:2/1}.sign .w1{grid-area:2/2;color:var(--red)}
.sign .rule{height:.35cqw;background:#141414;margin-top:3.5cqw}
.sign .borough{color:var(--red);font-size:3.6cqw;letter-spacing:.03em;white-space:nowrap;padding:4.3cqw 0 4.4cqw 7.8cqw;line-height:1}

footer{background:var(--ink);color:#fff;padding:0 var(--gut) calc(26px + env(safe-area-inset-bottom,0px))}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.7);padding-top:24px}

/* ---------- multi-page additions ---------- */
.nav .has-menu{position:relative}
.nav .has-menu{position:static}
.nav .menu-pop{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:var(--gut);right:var(--gut);background:var(--ink);color:#fff;border-radius:22px;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(10px);z-index:1;list-style:none;margin:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;align-items:stretch;
  transition:opacity .25s .15s,transform .3s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s .4s}
.nav .menu-pop::before{content:"";position:absolute;inset:-20px 0 auto;height:20px}
/* a menu opens once the pointer has been on its link for a tenth of a second, so passing over the other link on the way
   down does not snatch the pointer; on leaving, the panel waits a moment (still there to catch the pointer) before it
   fades, so a diagonal move from the link to a card on the far side does not lose it. The open one sits on top */
.nav .has-menu:hover .menu-pop,.nav .has-menu:focus-within .menu-pop{opacity:1;visibility:visible;transform:none;z-index:2;
  transition:opacity .25s .1s,transform .3s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s .1s}
.nav .menu-pop > li{display:flex;min-width:0}
.nav .menu-pop a{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:10px;border-radius:14px;color:#fff;text-decoration:none!important;transition:background .25s}
.nav .menu-pop a:hover{background:rgba(255,255,255,.08)}
.nav .menu-pop img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#333;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.nav .menu-pop a:hover img{transform:scale(1.03)}
.nav .menu-pop b{display:block;font:800 clamp(1.3rem,1.9vw,1.9rem)/1 var(--font);letter-spacing:-.04em}
.nav .menu-pop small{display:block;font:400 .88rem/1.35 var(--font);color:rgba(255,255,255,.62);margin-top:4px}
.nav .menu-pop .all{background:var(--red);justify-content:space-between;padding:20px}
.nav .menu-pop .all:hover{background:var(--red-hot)}
.nav .menu-pop .all b{font-size:clamp(1.6rem,2.4vw,2.4rem)}
.nav .menu-pop .all .arr{font:800 clamp(2.2rem,3.4vw,3.4rem)/1 var(--font);transition:transform .3s}
.nav .menu-pop .all:hover .arr{transform:translateX(8px)}
@media (max-width:900px){.nav .menu-pop{display:none}}
.nav ul{gap:4px}
.nav .nl{display:inline-flex;align-items:center;gap:6px;padding:.62em 1em;border-radius:999px;font:600 .95rem/1 var(--font);letter-spacing:-.01em;transition:background .25s,color .25s}
.nav .nl:hover,.nav .has-menu:hover > .nl,.nav .has-menu:focus-within > .nl{background:rgba(255,255,255,.16)}
.nav .nl[aria-current]{background:rgba(255,255,255,.22)}
.nav.on-light .nl:hover,.nav.on-light .has-menu:hover > .nl,.nav.on-light .has-menu:focus-within > .nl{background:rgba(17,17,17,.07)}
.nav.on-light .nl[aria-current]{background:rgba(17,17,17,.1)}
.nav .chev{width:12px;height:12px;opacity:.75;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav .has-menu:hover .chev,.nav .has-menu:focus-within .chev{transform:rotate(180deg)}
.nav .pill{margin-left:6px}
.nav .nl,.nav .pill{position:relative}
@media (max-width:900px){.nav .nl::after,.nav .pill::after{content:"";position:absolute;inset:-8px -2px}}
@media (max-width:640px){.nav .chev{display:none}.nav .nl{padding:.6em .7em;font-size:.9rem}.nav .pill{padding:.6em 1em;font-size:.9rem}}
/* phones: Work takes Home's place (the W1 DIGITAL mark links home), so the row is no wider than before; all five
   need about 520px at the phone sizes */
@media (max-width:560px){.nav .nav-home{display:none}}
@media (max-width:480px){.nav .row{gap:8px}.nav ul{gap:0}.nav .mark{font-size:.92rem}.nav .nl{padding:.55em .5em;font-size:.84rem}.nav .pill{margin-left:2px;padding:.55em .8em;font-size:.84rem}}
@media (max-width:389px){.nav .nl{padding:.55em .4em}}
@media (max-width:374px){.nav .row{gap:6px}.nav .mark{font-size:.82rem}.nav .nl{padding:.5em .4em;font-size:.78rem}.nav .pill{padding:.5em .65em;font-size:.78rem}}
@media (max-width:359px){.nav .mark{font-size:.76rem}.nav .nl{padding:.5em .3em;font-size:.75rem}.nav .pill{margin-left:3px;padding:.5em .6em;font-size:.75rem}}

.page-hero{padding:clamp(130px,16vw,200px) var(--gut) clamp(50px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,34px);min-height:min(78svh,760px);align-content:end}
.crumb{font:600 .78rem var(--font);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.page-hero h1{font:800 clamp(3.4rem,15.5vw,16rem)/.82 var(--font);letter-spacing:-.06em;text-transform:uppercase;margin-left:-.04em;
  animation:pt-hold .3s 1.2s backwards} /* held back until site.js starts the entrance (or 1.2s, if it never does) */
@keyframes pt-hold{from{opacity:0}}
.page-hero h1 .pt-w{display:inline-block;white-space:nowrap}
.page-hero h1 .pt-c{display:inline-flex;justify-content:center}
.page-hero .intro{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.page-hero .intro p{font:500 clamp(1.15rem,2vw,1.7rem)/1.3 var(--font);letter-spacing:-.015em;max-width:34ch}

.sec{padding:clamp(90px,11vw,150px) var(--gut)}
.sec-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-bottom:clamp(30px,4vw,50px)}
.sec-head .cap{color:var(--ink)}
.h-xl{font:800 clamp(2.6rem,8vw,8rem)/.9 var(--font);letter-spacing:-.055em;text-transform:uppercase}

/* included: big two-column list, all visible */
.incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,3.6vw,56px) clamp(22px,3vw,52px)}
.incl div{display:grid;gap:10px;align-content:start}
.incl h3{font:800 clamp(1.5rem,2.4vw,2.3rem)/1 var(--font);letter-spacing:-.04em}
.incl p{color:var(--grey);font-size:1rem;line-height:1.45}
@media (max-width:900px){.incl{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.incl{grid-template-columns:1fr}}

/* process: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:st}
.steps div{background:var(--mist);border-radius:18px;padding:clamp(22px,2.4vw,32px);display:grid;gap:12px;align-content:start;min-height:260px}
.steps b{font:800 clamp(3rem,5vw,5rem)/.8 var(--font);letter-spacing:-.06em;color:var(--red)}
.steps h3{font:800 1.6rem/1 var(--font);letter-spacing:-.04em;margin-top:auto}
.steps p{color:var(--grey);font-size:.98rem;line-height:1.45}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps div{min-height:0}}

/* service panels (overview + home) */
.panels{display:grid;gap:12px}
.panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:22px;overflow:hidden;background:var(--mist);text-decoration:none;color:var(--ink);min-height:clamp(380px,40vw,560px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.panel:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.panel:nth-child(even) .p-img{order:2}
.panel .p-img{position:relative;overflow:hidden}
.panel .p-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.panel:hover .p-img img{transform:scale(1.05)}
.panel .p-body{padding:clamp(26px,3.4vw,54px);display:flex;flex-direction:column;gap:18px;container-type:inline-size}
.panel h2{font:800 min(7rem,13.5cqi)/.85 var(--font);letter-spacing:-.06em;text-transform:uppercase}
.panel p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.4;max-width:36ch}
.panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.panel li{font:600 clamp(.78rem,.85vw,.88rem)/1 var(--font);letter-spacing:0;text-transform:none;border-radius:999px;padding:.62em .95em;box-shadow:inset 0 0 0 1.5px currentColor}
.panel .go{margin-top:auto;font:800 clamp(1.3rem,2vw,1.8rem)/1 var(--font);letter-spacing:-.03em;display:flex;align-items:center;gap:.4em}
.panel .go span{transition:transform .3s}
.panel:hover .go span{transform:translateX(8px)}
.panel.red-p{background:var(--red);color:#fff}
.panel.ink-p{background:var(--ink);color:#fff}
@media (max-width:860px){.panel,.panel:nth-child(even){grid-template-columns:1fr}.panel:nth-child(even) .p-img{order:0}.panel .p-img{aspect-ratio:16/10}}


/* contact */
.contact-hero .big-mail{display:inline-block;font:800 clamp(1.8rem,6vw,6rem)/1 var(--font);letter-spacing:-.05em;text-decoration:none;border-bottom:clamp(3px,.5vw,7px) solid #fff;padding-bottom:.08em;word-break:break-word}
.contact-hero .row-c{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.contact-hero .sign{margin:0}
/* ---------- contact: the four-step brief (ask.js) ---------- */
/* the question runs huge on the left, the answers stack on the right as big full-width rows */
.ask{padding:clamp(80px,10vw,140px) var(--gut) clamp(70px,8vw,110px)}
.ask-f{scroll-margin-top:84px}
.ask-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ask-top > .cap{font:800 clamp(1.1rem,1.5vw,1.4rem)/1 var(--font);letter-spacing:-.02em;text-transform:none}
.ask-n{font:800 clamp(1.1rem,1.5vw,1.4rem)/1 var(--font);letter-spacing:-.02em}
.ask-n b{color:var(--red)}
.ask-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:16px 0 clamp(40px,5.5vw,80px)}
.ask-bar i{display:block;height:100%;width:25%;background:var(--red);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.step,.ask-done,.ask-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,90px);align-items:start}
.step + .step{margin-top:clamp(60px,8vw,110px)}
.ask .q,.brief .q{font:800 clamp(2.9rem,6.6vw,7.4rem)/.86 var(--font);letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance;outline:none}
.opts{display:grid;gap:8px}
.opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,28px);padding:clamp(16px,1.9vw,26px) clamp(16px,1.8vw,26px);border-radius:clamp(12px,1.4vw,18px);background:var(--mist);cursor:pointer;transition:background .25s,color .25s}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.o-n{font:700 .8rem/1 var(--font);letter-spacing:.08em;color:var(--red);transition:color .25s}
.o-t{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.o-t b{display:block;font:800 clamp(1.7rem,3vw,3rem)/.95 var(--font);letter-spacing:-.045em;text-transform:uppercase}
.o-t small{display:block;margin-top:7px;font-size:.98rem;line-height:1.35;color:var(--grey);transition:color .25s}
.ask-go{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background .25s,color .25s}
.ask-go svg{width:18px;height:18px;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.opt:hover,.opt:has(input:checked){background:var(--red);color:#fff}
.opt:hover .o-t{transform:translateX(8px)}
.opt:hover .o-n,.opt:has(input:checked) .o-n{color:#fff}
.opt:hover small,.opt:has(input:checked) small{color:rgba(255,255,255,.85)}
.opt:hover .ask-go,.opt:has(input:checked) .ask-go{background:#fff;color:var(--red)}
.opt:hover .ask-go svg{transform:translateX(3px)}
.opt:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px;z-index:1}
/* last step: the answers so far as chips (each one jumps back to its question), then big underlined fields */
.send{display:grid;gap:clamp(22px,2.6vw,34px)}
.ask-sum{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ask-sum:empty{display:none}
.ask-sum button{font:600 .9rem/1 var(--font);letter-spacing:0;color:var(--red);background:rgba(200,16,46,.09);border:0;border-radius:999px;padding:.7em 1em;cursor:pointer}
.ask-sum button:hover{background:var(--red);color:#fff}
.fld{display:grid;gap:8px}
.fld .cap{color:var(--grey)}
.fld i{font-style:normal;text-transform:none;letter-spacing:0}
/* the fields: soft filled boxes, like the choices above them; the one being typed in turns white with a black ring */
.fld input,.fld textarea{width:100%;border:0;border-radius:clamp(12px,1.4vw,18px);background:var(--mist);color:var(--ink);padding:.62em .8em;
  font:700 clamp(1.25rem,2vw,1.8rem)/1.2 var(--font);letter-spacing:-.02em;box-shadow:inset 0 0 0 2px transparent;transition:background .2s,box-shadow .2s}
.fld textarea{font:500 clamp(1.05rem,1.3vw,1.2rem)/1.45 var(--font);letter-spacing:0;padding:.9em 1.05em;resize:vertical;min-height:6.4em}
.fld textarea::placeholder{color:#8F877C}
@media (hover:hover){.fld input:hover,.fld textarea:hover{background:#EEE8E0}}
.fld input:focus,.fld textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.fld input:user-invalid{box-shadow:inset 0 0 0 2px var(--red)}
.fld input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 100px var(--mist);-webkit-text-fill-color:var(--ink)}
.ask-nav{margin-top:clamp(28px,3vw,40px)}
.ask-msg{font-weight:600;color:var(--red);min-height:1.2em}
.ask-btns{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ask-back{font:600 1rem/1 var(--font);background:none;border:0;padding:.8em 0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ask-next{font-size:clamp(1.05rem,1.3vw,1.25rem);font-weight:700;padding:.95em 1.7em;margin-left:auto}
.ask-done .lede{font:800 clamp(1.6rem,2.8vw,2.6rem)/1.05 var(--font);letter-spacing:-.04em}
.ask-done p{max-width:40ch}
.ask-done[hidden]{display:none}
.ask-done:not(.sent) .if-sent,.ask-done.sent .if-mail{display:none}
.ask:has(.ask-done.sent) > .terms{display:none} /* the sent message already says it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* a field only bots fill in */
.ask .terms{margin-top:clamp(40px,5vw,70px)}
@media (max-width:900px){.step,.ask-done,.ask-nav{grid-template-columns:1fr}.ask-nav > .ask-msg:empty{display:none}}
/* with the script: one question at a time, each arriving with its answers stepping in after it */
.ask-js .step:not(.on){display:none}
.ask-js .step + .step{margin-top:0}
.ask-js .ask-f.done .step,.ask-js .ask-f.done .ask-nav{display:none}
.ask-js .step.on .q{animation:ask-in .7s cubic-bezier(.2,.8,.2,1) both}
.ask-js .step.on .opt,.ask-js .step.on .send > *{animation:ask-in .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--k,0) * .06s)}
.ask-js .step.on :is(.opt,.send > *):nth-child(2){--k:1}.ask-js .step.on :is(.opt,.send > *):nth-child(3){--k:2}.ask-js .step.on :is(.opt,.send > *):nth-child(4){--k:3}
@keyframes ask-in{from{opacity:0;transform:translateY(28px)}}
html:not(.ask-js) .ask .ask-n,html:not(.ask-js) .ask .ask-bar,html:not(.ask-js) .ask .ask-back{display:none} /* the contact form without its script */

/* ---------- the brief's next question, asked on service and client pages (build.mjs brief()); each answer opens
   the contact brief with what the page already knows filled in. The contact page's rows, on black. ---------- */
.brief{background:var(--ink);color:#fff;padding:clamp(80px,10vw,140px) var(--gut)}
.brief .ask-bar{background:rgba(255,255,255,.14)}
.brief .ask-n b{color:var(--red-hot)}
.brief .bq{display:grid;align-content:start}
.bq-got{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,34px)}
.bq-got .cap{font:600 1rem/1.2 var(--font);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.7)}
.bq-got .chip{font:700 .9rem/1 var(--font);letter-spacing:0;background:var(--red);color:#fff;border-radius:999px;padding:.72em 1.05em}
.bq-note{margin-top:18px;max-width:34ch;color:rgba(255,255,255,.7);line-height:1.45}
.brief .opt{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.brief .o-n{color:var(--red-hot)}
.brief .o-t small{color:rgba(255,255,255,.62)}
.brief .ask-go{background:#fff;color:var(--ink)}
.brief .opt:hover .o-n{color:#fff}
.brief .opt:focus-visible{outline:3px solid #fff;outline-offset:3px;z-index:1}

footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px;padding-block:clamp(50px,6vw,80px) clamp(30px,4vw,50px)}
footer .cols b{display:block;font:800 clamp(2rem,4vw,3.6rem)/.9 var(--font);letter-spacing:-.05em}
footer .cols .f-h{margin:0 0 12px;font:700 .95rem var(--font);color:rgba(255,255,255,.55)}
/* the portfolio, at the top of every footer: its cover (drawn from the PDF by the build) and the download */
footer .f-pdf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4.6vw,72px);align-items:center;padding-top:clamp(56px,7vw,100px);color:#fff;text-decoration:none}
footer .f-pdf img{display:block;width:100%;height:auto;border-radius:clamp(10px,1.2vw,16px);background:var(--red);box-shadow:0 30px 70px -30px rgba(0,0,0,.85);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
footer .f-t{display:grid;gap:16px;justify-items:start}
footer .f-pdf h2{font:800 clamp(2.4rem,5.4vw,5rem)/.9 var(--font);letter-spacing:-.05em}
footer .f-p{color:rgba(255,255,255,.72);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.45;max-width:34ch}
footer .pill-w{display:inline-flex;align-items:center;gap:.5em;margin-top:6px;padding:.95em 1.4em;border-radius:999px;background:#fff;color:var(--ink);font:700 clamp(.95rem,1.1vw,1.05rem)/1 var(--font);transition:background .25s,color .25s}
footer .f-pdf:focus-visible .pill-w{background:var(--red);color:#fff}
@media (hover:hover){footer .f-pdf:hover img{transform:translateY(-6px)}footer .f-pdf:hover .pill-w{background:var(--red);color:#fff}}
@media (max-width:760px){footer .f-pdf{grid-template-columns:minmax(0,1fr)}}
footer .cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer .cols a{text-decoration:none;color:#fff;font-weight:500}
footer .cols a:hover{text-decoration:underline}
footer .row a{color:inherit;text-decoration:none}footer .row a:hover{text-decoration:underline;color:#fff}
footer .legal-links{display:flex;gap:20px}
footer .legal{margin:14px 0 0;font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.5);max-width:92ch}
footer .legal a{color:inherit}footer .legal a:hover{color:#fff}
/* missing-page screen: the way back, as the brief's big rows */
.lost .opt{color:var(--ink);text-decoration:none}
/* ---------- privacy and terms: a short red header, then readable prose ---------- */
.page-hero.slim{min-height:min(56svh,560px)}
/* headings in a left column, each beside its first paragraph; the text runs in the right */
.prose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(30px,5vw,90px);align-items:start}
.prose > *{grid-column:2;max-width:68ch}
.prose > h2{grid-column:1;font:800 clamp(1.7rem,2.8vw,2.6rem)/.95 var(--font);letter-spacing:-.045em;margin:0}
.prose > h2 ~ h2,.prose > h2 ~ h2 + *{margin-top:clamp(48px,5.5vw,72px)}
@media (max-width:760px){.prose{display:block}.prose > h2{margin-bottom:14px}.prose > h2 ~ h2 + *{margin-top:0}}
.prose p,.prose li{font-size:1.08rem;line-height:1.62;color:#2b2926}
.prose p + p{margin-top:14px}
.prose ul{margin:12px 0 0;padding-left:1.2em;display:grid;gap:10px}
.prose b{color:var(--ink)}
.prose a{color:var(--red);text-underline-offset:3px}
.count-switch{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px}
.toggle{display:inline-flex;align-items:center;gap:12px;font:600 1rem/1 var(--font);background:none;border:0;padding:4px 0;color:var(--ink);cursor:pointer}
.toggle .knob{position:relative;width:52px;height:30px;border-radius:999px;background:var(--line);transition:background .2s}
.toggle .knob::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle[aria-pressed="true"] .knob{background:var(--red)}
.toggle[aria-pressed="true"] .knob::after{transform:translateX(22px)}
.toggle:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#count-state{color:var(--grey)}
.prose .upd{margin-top:clamp(44px,5vw,64px);color:var(--grey);font-size:.92rem}
/* phones: two equal columns (the address may break after the @, so it never squeezes the Work list or runs off the edge) */
@media (max-width:760px){footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer .cols > div:first-child{grid-column:1/-1}}
@media (max-width:400px){footer .cols{column-gap:18px}}

/* client pages: what we make for them */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.offer{background:var(--mist);border-radius:18px;padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);min-height:clamp(220px,20vw,290px);transition:background .35s,color .35s,transform .35s}
.offer h3{font:800 clamp(2rem,3.6vw,3.6rem)/.92 var(--font);letter-spacing:-.05em}
.offer p{color:var(--grey);font-size:1.02rem;line-height:1.45;max-width:44ch;transition:color .35s}
.o-go{margin-top:auto;font:700 1rem/1.25 var(--font);letter-spacing:-.01em;color:var(--red);display:flex;gap:.5em;transition:color .35s}
.o-go span{transition:transform .3s}
.offer:hover{background:var(--red);color:#fff;transform:translateY(-4px)}
.offer:hover p,.offer:hover .o-go{color:#fff}
.offer:hover .o-go span{transform:translateX(6px)}
@media (max-width:760px){.offers{grid-template-columns:1fr}}
/* five footer columns get tight on a tablet: the name runs across the top, the four lists share the row below */
@media (min-width:761px) and (max-width:1000px){footer .cols{grid-template-columns:repeat(4,minmax(0,1fr))}footer .cols > div:first-child{grid-column:1/-1}}

/* ---------- work: one page per project under /work/, and the index ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* read out, not shown */
/* under each project block, wherever it appears: a link to the project's own page (build.mjs drops it on that page) */
.meta .see{display:inline-flex;align-items:center;gap:.5em;margin-top:10px;padding:.95em 1.4em;border-radius:999px;background:var(--ink);
  color:#fff;font:700 clamp(.9rem,1.15vw,1.05rem)/1 var(--font);letter-spacing:-.01em;text-decoration:none;transition:background .25s}
.see-arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.meta .see:hover,.meta .see:focus-visible{background:var(--red)}
.meta .see:hover .see-arr{transform:translateX(4px)}
/* a project page: the block straight under the header, then what was made, the pages up close, and the result */
.work.lead{padding-top:clamp(64px,8vw,120px)}
.sec.story,.sec.flush{padding-top:0}
.gal + .sec.story{padding-top:clamp(90px,11vw,150px)}
.story{display:grid;gap:clamp(56px,7vw,100px)}
.st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,90px)}
.st h2{font:800 clamp(2.6rem,5.8vw,6.4rem)/.86 var(--font);letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance}
.st-body > p{font:500 clamp(1.3rem,2.1vw,1.9rem)/1.28 var(--font);letter-spacing:-.02em;max-width:34ch;text-wrap:pretty}
.st-body > p + p{margin-top:.8em}
@media (max-width:860px){.st{grid-template-columns:1fr}}
/* the pages up close: still, flat and large, on the project's own colour (the block's stage), one or two to a row,
   each with a one-line caption */
.gal{background:var(--gal,var(--ink));color:#fff;padding:clamp(70px,8vw,120px) var(--gut)}
.gal.light{color:var(--ink)}
.gal-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-bottom:clamp(30px,4vw,50px)}
/* section labels (the line over a section): its name in heavy type with a full stop, like the site's other headings, and
   at the other end a count or a link as a solid button */
.sec-head>.cap:first-child,.work-head>.cap:first-child,.gal-head>.cap:first-child{font:800 clamp(1.9rem,4.2vw,4.4rem)/.95 var(--font);letter-spacing:-.045em;text-transform:none;color:inherit}
.sec-head>.cap:first-child::after,.work-head>.cap:first-child::after,.gal-head>.cap:first-child::after{content:"."}
.sec-head>span.cap:not(:first-child),.work-head>span.cap:not(:first-child),.gal-head>span.cap:not(:first-child){font:800 clamp(1rem,1.5vw,1.5rem)/1 var(--font);letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}
.sec-head>a.cap,.work-head>a.cap,.gal-head>a.cap{font:700 clamp(.9rem,1.15vw,1.2rem)/1 var(--font);letter-spacing:-.01em;text-transform:none;text-decoration:none;white-space:nowrap;
  padding:.95em 1.4em;border-radius:999px;background:var(--ink);color:#fff;transition:background .25s}
.sec-head>a.cap:focus-visible,.work-head>a.cap:focus-visible,.gal-head>a.cap:focus-visible{background:var(--red)}
@media (hover:hover){.sec-head>a.cap:hover,.work-head>a.cap:hover,.gal-head>a.cap:hover{background:var(--red)}}
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.4vw,70px) clamp(12px,1.6vw,24px);align-items:start}
.gal figure{margin:0;display:grid;gap:14px}
.gal .wide{grid-column:1/-1}
.gal img{width:100%;border-radius:clamp(8px,.9vw,14px)}
.gal.light img{outline:1px solid rgba(17,17,17,.1);outline-offset:-1px} /* a hairline where a pale page meets a pale ground */
.gal figcaption{font:500 1rem/1.4 var(--font);letter-spacing:-.005em;opacity:.75;max-width:52ch;text-wrap:pretty}
/* part of a long screenshot, framed at a set shape */
.gal .crop img{aspect-ratio:16/10;object-fit:cover;object-position:50% var(--y,0%)}
/* a phone screen: a crop of the long page, shown at about its own size, centred in its half */
.gal .ph{justify-items:center}
.gal .ph img{width:min(100%,360px);aspect-ratio:390/844;object-fit:cover;object-position:50% var(--y,0%);border-radius:clamp(14px,1.8vw,24px)}
.gal .ph figcaption{width:min(100%,360px)}
@media (max-width:760px){.gal figcaption{font-size:.9rem}.gal-grid{grid-template-columns:1fr}.gal-grid:has(.ph){grid-template-columns:1fr 1fr}.gal-grid:has(.ph) > :not(.ph){grid-column:1/-1}}
/* where it fits (the service and client pages, and the client's other projects) */
.offers.rel{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rel .offer h3{font-size:clamp(2rem,3vw,3rem)}
.rel .o-go{display:block}.rel .o-go span{display:inline-block}
.o-k{font:600 .9rem/1.2 var(--font);letter-spacing:0;color:var(--grey);transition:color .35s}
.offer:hover .o-k{color:rgba(255,255,255,.8)}
.sec.rel-sec{padding-bottom:clamp(60px,7vw,110px)}
/* the next project: its own section, one big red panel leading on to the start-a-project block */
/* the image column is a 16:9 frame, so a deck cover shows whole; the panel is as tall as the taller of the two */
.next .panel{min-height:0}
@media (min-width:861px){.next .panel{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.next .panel .p-img{order:0;aspect-ratio:16/9;align-self:stretch;background:var(--plate,transparent)} /* image first, whatever its place in the section */
.next .p-img img{object-position:0 50%} /* deck covers and screenshots carry their title on the left */
.next .p-img.plate img{--pad:clamp(20px,3.4vw,48px);top:var(--pad);left:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - var(--pad));object-position:50% 0;border-radius:clamp(6px,.7vw,10px) clamp(6px,.7vw,10px) 0 0;transform-origin:50% 100%}
/* the index: every project as a big image and its name; the lead project takes a whole row, its name beside it */
.pj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(60px,7vw,110px) clamp(12px,1.6vw,24px)}
.pj{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);color:var(--ink);text-decoration:none}
.pj.feat{grid-column:1/-1}
/* the covers are 16:9, so the tiles are too: nothing on a cover is cut off */
.pj-img{aspect-ratio:16/9;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:var(--mist)}
.pj-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
/* a screenshot with white edges sits on its own flat colour, rising from the bottom edge */
.pj-img.plate{padding:clamp(20px,5%,64px) clamp(20px,5%,64px) 0}
.pj-img.plate img{object-position:50% 0;border-radius:clamp(6px,.7vw,10px) clamp(6px,.7vw,10px) 0 0;transform-origin:50% 100%}
.pj-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:end}
.pj-body > :not(.ask-go){grid-column:1}
.pj-body > .ask-go{grid-column:2;grid-row:2}
.pj-k{font:500 1rem/1.3 var(--font);color:var(--red)}
.pj h2{font:800 clamp(2.6rem,5.4vw,6rem)/.86 var(--font);letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance}
@media (min-width:861px){.pj.feat{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:end}
  .pj.feat h2{font-size:clamp(3.4rem,6.6vw,7.6rem)}}
.pj p{font:500 clamp(1.1rem,1.5vw,1.35rem)/1.3 var(--font);letter-spacing:-.015em;text-wrap:pretty}
.pj-tags{color:var(--grey);font-size:.92rem} /* the plain tag line the project blocks use */
/* More work: smaller pieces, without pages of their own */
.more-sec{padding-top:0}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,60px) clamp(12px,1.6vw,24px)}
.more figure{margin:0;display:grid;gap:14px;align-content:start}
.more img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(10px,1.2vw,18px);background:var(--mist)}
.more figcaption{display:grid;gap:6px;font:500 clamp(1.1rem,1.4vw,1.3rem)/1.3 var(--font);letter-spacing:-.015em}
@media (max-width:760px){.more{grid-template-columns:1fr}}
.pj:hover .pj-img img,.pj:focus-visible .pj-img img{transform:scale(1.04)}
.pj:hover .ask-go,.pj:focus-visible .ask-go{background:var(--red)}
.pj:hover .ask-go svg,.pj:focus-visible .ask-go svg{transform:translateX(3px)}
@media (max-width:760px){.pj-grid{grid-template-columns:1fr}}
@media (max-width:400px){.pj h2{font-size:10.4vw}} /* a long one-word name (KINGSLAND) still fits beside its arrow on the smallest phones */