/* Joe Lauder. Warm paper ground, one olive ink, condensed serif display. */
:root{
  --paper:#f4f1e8; --ink:#3b4418; --ink-soft:rgba(59,68,24,.28); --line:rgba(59,68,24,.35);
  --card:#fbf9f3; --block:#e4e2c3; --pill-bg:#f8f6ee;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,6vw,116px); --radius:6px;
  /* type scale: 5 display, 3 text */
  --d1:clamp(46px,7vw,104px); --d2:clamp(38px,5vw,72px); --d3:clamp(27px,3vw,44px); --d4:clamp(23px,2.2vw,32px); --d5:clamp(19px,1.6vw,23px);
  --t1:18px; --t2:16px; --t3:14px;
}
:root{color-scheme:only light}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background-color:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t2);line-height:1.5;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
em{font-style:italic}
h1,h2,.hero .sub,.lead,.reveal{text-wrap:balance}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,2.8vw,40px);position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.skip{position:absolute;left:-9999px;top:10px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.nav .me{font-family:var(--serif);font-size:26px;line-height:1}
.pills{display:flex;gap:10px}
.pill{border:1px solid var(--ink);border-radius:999px;padding:0 20px;min-height:44px;font-size:15px;background:var(--pill-bg);transition:background .2s,color .2s;display:inline-flex;align-items:center}
.pill.solid{background:var(--ink);color:var(--paper)}
.pill.solid:hover{opacity:.85}
.pill:hover{background:var(--ink);color:var(--paper)}
@media (max-width:560px){.pill{padding:0 14px;font-size:14px}.pills{gap:6px}.pills .hide-sm{display:none}}

/* hero */
.hero{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;text-align:center;padding-block:60px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:var(--d1);line-height:1.02;letter-spacing:-.02em;max-width:18.5em;margin-inline:auto}
.chip{display:inline-block;width:1.36em;height:.72em;border-radius:5px;overflow:hidden;vertical-align:.02em;margin-inline:.06em}
.chip img{width:100%;height:100%;object-fit:cover}
.hero .sub{font-size:var(--t1);line-height:1.55;max-width:54ch;margin:28px auto 0}
.hero-cta{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.textlink{font-size:var(--t2);border-bottom:1px solid var(--line);padding-block:10px 2px}
.textlink:hover{border-color:var(--ink)}
.svc-more{margin-top:clamp(28px,4vw,48px)}
.hero .sub b{font-weight:500}

/* work grid, staggered */
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,3vw,48px);row-gap:clamp(40px,5vw,80px);padding-block:clamp(24px,4vw,56px) clamp(40px,6vw,80px)}
.work-lab{grid-column:1/-1;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--line)}
.proj{display:block}
.proj figure{overflow:hidden;border-radius:var(--radius)}
.proj img{object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.proj:hover img{transform:scale(1.03)}
.proj h3{font-family:var(--serif);font-weight:400;font-size:var(--d4);margin-top:12px;line-height:1.1}
.proj p{font-size:var(--t3);margin-top:4px}
.p1{grid-column:1 / span 4}.p1 img{aspect-ratio:3/4}
.p2{grid-column:7 / span 6;margin-top:80px}.p2 img{aspect-ratio:4/5}
.p3{grid-column:1 / span 6}.p3 img{aspect-ratio:4/3}
.p4{grid-column:9 / span 4;margin-top:80px}.p4 img{aspect-ratio:3/4}
.p5{grid-column:1 / span 5}.p5 img{aspect-ratio:4/5}
.p6{grid-column:7 / span 6;margin-top:80px}.p6 img{aspect-ratio:11/10}
.p7{grid-column:1 / span 5}.p7 img{aspect-ratio:4/5}
.p8{grid-column:7 / span 5;margin-top:80px}.p8 img{aspect-ratio:4/5}
@media (max-width:820px){.work>*{grid-column:1/-1!important;margin-top:0!important}}

/* section titles */
.h2{font-family:var(--serif);font-weight:400;font-size:var(--d2);line-height:1;letter-spacing:-.02em}
.section{padding-block:clamp(64px,9vw,140px)}

/* how it works: sticky heading, numbered list */
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.how-head{position:sticky;top:96px}
.how-head p{font-size:16px;line-height:1.5;margin:18px 0 26px;max-width:22em}
.how-steps{list-style:none;border-top:1px solid var(--line)}
.how-steps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px 24px;padding:30px 0 32px;border-bottom:1px solid var(--line);align-items:baseline}
.how-steps .n{font-family:var(--serif);font-size:var(--d3);line-height:.9;color:var(--ink-soft);transition:color .3s}
.how-steps li:hover .n{color:var(--ink)}
.how-steps h3{font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1;margin-bottom:10px}
.how-steps p{font-size:var(--t2);line-height:1.5;max-width:30em}
@media (max-width:860px){.how-grid{grid-template-columns:1fr}.how-head{position:static}.how-steps li{grid-template-columns:52px minmax(0,1fr)}}

/* about: sticky image, statement, facts, stockists */
.about-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:start}
.about-img{position:sticky;top:96px}
.about-img img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.about-img figcaption{font-size:var(--t3);margin-top:10px}
.about-body .lab{font-size:13px;margin-bottom:20px}
.reveal{font-family:var(--serif);font-size:var(--d3);line-height:1.04;letter-spacing:-.02em}
.reveal .w{color:var(--ink-soft);transition:color .25s}
.reveal .w.on{color:var(--ink)}
.about-text{font-size:var(--t1);line-height:1.55;max-width:34em;margin-top:32px}
.approach{margin-top:clamp(40px,5vw,72px)}
.principles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(20px,3vw,48px)}
.principles li{border-top:1px solid var(--line);padding-top:14px}
.principles h3{font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1.05;margin-bottom:8px}
.principles p{font-size:var(--t2);line-height:1.5}
@media (max-width:600px){.principles{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;border-top:1px solid var(--line)}
.facts div{padding:22px 16px 0 0}
.facts dt{font-family:var(--serif);font-size:var(--d3);line-height:.9;letter-spacing:-.02em}
.facts dd{font-size:var(--t3);line-height:1.4;margin-top:10px;max-width:12em}
.stocked{margin-top:clamp(56px,7vw,104px);padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 28px;font-size:13px}
.stocked b{font-family:var(--serif);font-weight:400;font-size:var(--d4)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-img{position:static;max-width:420px}.about-img img{aspect-ratio:4/3}.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}.stocked{justify-content:flex-start}}

/* services list */
.services{margin-left:auto;max-width:880px}
.services .h2{margin-bottom:12px}
.svc-lede{font-family:var(--serif);font-size:var(--d5);line-height:1.2;margin-bottom:12px}
.svc-group{font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-top:34px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding-block:22px;border-bottom:1px solid var(--line)}
.svc h3{font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1}
.svc h3 sup{font-family:var(--sans);font-size:12px;vertical-align:super;margin-left:6px}
.svc p{font-size:var(--t2);line-height:1.45}
@media (max-width:640px){.svc{grid-template-columns:1fr;gap:8px}}

/* ways to work: uses the how-grid layout */
.how-head .ways-lede{font-family:var(--serif);font-size:var(--d5);line-height:1.2;margin-top:18px;max-width:16em}
.how-steps h3 em{display:block;font-size:var(--d5);margin-top:8px;letter-spacing:0}
.how-head .ways-note{font-size:var(--t3);margin-top:18px}

/* footer block */
.foot{background:var(--block);margin-top:clamp(40px,6vw,96px)}
.foot .cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;padding-block:clamp(48px,6vw,80px)}
.foot .cta h2{font-family:var(--serif);font-weight:400;font-size:var(--d2);line-height:1.02;letter-spacing:-.02em;max-width:11em;margin-bottom:28px}
.foot .cta figure{border-radius:var(--radius);overflow:hidden;justify-self:end;width:min(100%,420px)}
.foot .cta img{aspect-ratio:9/10;object-fit:cover}
.foot .cols{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-block:32px 48px}
.foot .cols .lab{font-size:13px;margin-bottom:10px}
.foot .cols a,.foot .cols span.big{font-family:var(--serif);font-size:var(--d5);line-height:1.35;display:block}
.foot .cols a:hover{opacity:.6}
.foot .mail{font-size:var(--d4)!important}
@media (max-width:820px){.foot .cta{grid-template-columns:1fr}.foot .cta figure{justify-self:start}.foot .cols{grid-template-columns:1fr 1fr}}

/* project pages */
.phead{text-align:center;padding-block:clamp(60px,9vw,140px) clamp(32px,4vw,56px)}
.phead h1{font-family:var(--serif);font-weight:400;font-size:var(--d1);line-height:.95;letter-spacing:-.025em}
.phead .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;margin-top:22px;font-size:14px}
.phead .meta b{font-weight:500}
.lead{font-family:var(--serif);font-size:var(--d3);line-height:1.12;letter-spacing:-.01em;max-width:24em;margin:0 auto;text-align:center}
.pgal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);padding-block:clamp(40px,5vw,72px)}
.pgal figure{border-radius:var(--radius);overflow:hidden}
.pgal img{height:auto;object-fit:cover}
.pgal figcaption{font-size:var(--t3);padding-top:8px}
.pgal.mats{row-gap:clamp(28px,3.5vw,48px)}
.pgal .f{border-radius:0;overflow:visible}
.pgal .f img{border-radius:var(--radius)}
.g12{grid-column:span 12}.g8{grid-column:span 8}.g7{grid-column:span 7}.g6{grid-column:span 6}.g5{grid-column:span 5}.g4{grid-column:span 4}.g3{grid-column:span 3}
.off{margin-top:clamp(40px,8vw,120px)}
@media (max-width:760px){.pgal>*{grid-column:span 12}.pgal .g3,.pgal .g4{grid-column:span 6}.off{margin-top:0}}
.ptext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.ptext .lab{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-top:6px}
.ptext p{font-family:var(--serif);font-size:var(--d4);line-height:1.2;letter-spacing:-.01em}
.ptext p + p{margin-top:.7em}
@media (max-width:760px){.ptext{grid-template-columns:1fr}}
.flats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.flats img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
@media (max-width:760px){.flats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nextp{display:flex;justify-content:space-between;gap:16px;padding-block:40px;border-top:1px solid var(--line)}
.nextp a{font-family:var(--serif);font-size:var(--d3);line-height:1}
.nextp a:hover{opacity:.6}
.nextp .lab{display:block;font-family:var(--sans);font-size:13px;margin-bottom:6px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.proj img,.reveal .w{transition:none}}

/* enquiry form */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{display:none}
.enq-head{padding-top:clamp(40px,6vw,96px)}
.enq-head h1{font-family:var(--serif);font-weight:400;font-size:var(--d1);line-height:.95;letter-spacing:-.02em}
.enq-head p{max-width:34em;margin-top:20px;font-size:var(--t1)}
.enq{padding-block:clamp(40px,5vw,72px) clamp(24px,4vw,48px)}
.enq fieldset{border:0;border-top:1px solid var(--line);padding-block:28px 32px;min-width:0}
.enq .fs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px}
.enq .fs h2{font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1}
.enq .fs h2 sup{font-family:var(--sans);font-size:12px;vertical-align:super;margin-left:6px}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px}
.f.full{grid-column:1/-1}
.f label,.f .lab2{display:block;font-size:13px;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.f select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.f textarea{resize:vertical;min-height:140px}
.f ::placeholder{color:var(--ink-soft)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt,.scope{position:relative}
.opt input,.scope input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--pill-bg);cursor:pointer;transition:background .2s,color .2s}
.opt input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scopes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.scope span{display:block;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 16px;cursor:pointer}
.scope b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--d4);line-height:1.05;margin-bottom:6px}
.scope small{font-size:14px;line-height:1.4;display:block}
.scope input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible+span,.scope input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.enq-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;border-top:1px solid var(--line);padding-top:28px}
.enq-send .pill{font:inherit;font-size:17px;padding:12px 28px;color:inherit;cursor:pointer}
.enq-send .pill:disabled{opacity:.5;cursor:default}
.enq-send p,.enq-err{font-size:14px}
.enq-send a,.enq-err a{text-decoration:underline}
.enq-err{margin-top:16px}
.enq-done h2{font-family:var(--serif);font-weight:400;font-size:var(--d2);line-height:1}
.enq-done p{margin-top:12px;font-size:16px}
@media (max-width:820px){.enq .fs{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.fields,.scopes{grid-template-columns:1fr}.fields>.f:empty{display:none}}

/* approach: four pillars */
.lab-row{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
#services .svc-lede{max-width:28em;margin-top:18px}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(36px,5vw,64px)}
.pillar{border-top:1px solid var(--ink);padding-top:16px;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.pillar .n{font-size:13px}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:var(--d3);line-height:1}
.pillar p{font-size:var(--t2);line-height:1.45}
.pillar ul{list-style:none;align-self:start;padding-top:14px;border-top:1px solid var(--line);font-size:var(--t3);display:grid;gap:6px}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* development boards on project pages */
.boards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);padding-bottom:clamp(32px,4vw,56px)}
.board{display:block}
.board.b-wide{grid-column:span 3}
.board.b-third{grid-column:span 2}
.board img{aspect-ratio:1123/794;object-fit:cover;border:1px solid var(--line);border-radius:4px;background:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.board:hover img{transform:translateY(-3px)}
.board span{display:flex;gap:10px;align-items:baseline;font-size:var(--t3);margin-top:8px}
.board span b{font-weight:500;font-size:13px;letter-spacing:.08em}
@media (max-width:760px){.board.b-wide,.board.b-third{grid-column:1/-1}}

/* categories: big list on project pages */
.cats{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px)}
.cats .lab{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cats ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,3vw,48px)}
.cats li{font-family:var(--serif);font-size:clamp(36px,4.6vw,66px);line-height:1;letter-spacing:-.02em;padding-block:18px 16px;border-bottom:1px solid var(--line)}
.cats li sup{font-family:var(--sans);font-size:12px;letter-spacing:0;vertical-align:super;margin-left:8px}
@media (max-width:760px){.cats ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cats li{font-size:32px}}

.cat-link{border-bottom:1px solid var(--line)}
.cat-link:hover{border-color:var(--ink)}

/* audit fixes, 2026-09-27 */
.ptext h2.lab{font-weight:400;margin:0}
@media (max-width:760px){
  /* 2: lay mobile galleries out by count: pairs side by side, trios one full then two, 4+ two across */
  .pgal>:first-child:nth-last-child(2),.pgal>:first-child:nth-last-child(2)~*{grid-column:span 6}
  .pgal>:first-child:nth-last-child(3){grid-column:span 12}
  .pgal>:first-child:nth-last-child(3)~*{grid-column:span 6}
  .pgal>:first-child:nth-last-child(n+4),.pgal>:first-child:nth-last-child(n+4)~*{grid-column:span 6}
  /* 4: footer links big enough to tap */
  .foot .cols a{padding-block:9px}
}
@media (max-width:560px){
  /* 9: hero sizes to its content instead of filling the screen */
  .hero{min-height:0;padding-block:56px 40px}
  /* 10: headline chips a touch larger so they read as photos */
  .chip{width:1.6em;height:.86em}
}
@media (max-width:420px){
  /* 3: four nav pills fit at phone width */
  .nav .me{font-size:21px}
  .pills{gap:4px}
  .pill{padding:0 10px;font-size:13px}
}
.how-steps p + p{margin-top:10px}
.about-text + .about-text{margin-top:14px}
.ways-note b{font-weight:500}