:root{
  --stone:#F6F4EF; --stone-2:#EDEAE2; --surface:#FFFFFF;
  --ink:#161A17; --ink-2:#4A544D; --line:#DAD6C9;
  --green:#486654; --green-d:#2B3F34; --green-dd:#16211C; --green-l:#7E9A88;
  --sand:#C4BCA6;
  --on-dark:#F2F1EA; --on-dark-2:#B9C6BC;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --stone:#11150F; --stone-2:#171E19; --surface:#1A221D;
    --ink:#ECEFE9; --ink-2:#A9B5AC; --line:#2B352E;
    --green:#6E9280; --green-d:#22302A; --green-dd:#0E1512; --green-l:#8FB49B;
    --sand:#8C8672;
  }
}
:root[data-theme="dark"]{
  --stone:#11150F; --stone-2:#171E19; --surface:#1A221D;
  --ink:#ECEFE9; --ink-2:#A9B5AC; --line:#2B352E;
  --green:#6E9280; --green-d:#22302A; --green-dd:#0E1512; --green-l:#8FB49B;
  --sand:#8C8672;
}
*{box-sizing:border-box}
body{margin:0;background:var(--stone);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.015em;line-height:1.06}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin:0 0 18px}
.eyebrow.on-dark{color:var(--green-l)}
.lede{color:var(--ink-2);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:Archivo,Arial,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;transition:.18s ease}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-d);color:#fff}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ghost.on-light:hover{background:rgba(72,102,84,.08)}
:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}

/* ---------- top bar + header ---------- */
.topbar{background:var(--green-dd);color:var(--on-dark-2);font-size:13px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:9px;padding-bottom:9px;align-items:center}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .sep{flex:1}
.topbar .mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
.nav{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{height:54px;width:auto}
@media(max-width:600px){.brand img{height:44px}}
.brand .bt{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;line-height:1.1;white-space:nowrap}
.brand .bs{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--ink-2);text-transform:uppercase}
.menu{display:flex;gap:18px;font-size:14px;font-weight:500}
.menu a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--green);color:var(--green)}
@media(max-width:1060px){.menu{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--green-dd);color:var(--on-dark);overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(14,21,18,.94) 0%,rgba(14,21,18,.78) 44%,rgba(14,21,18,.35) 100%)}
.hero .wrap{position:relative;padding-top:104px;padding-bottom:96px}
.hero h1{font-size:clamp(38px,6.2vw,74px);font-weight:800;text-transform:uppercase;max-width:16ch}
.hero .sub{margin-top:22px;font-size:clamp(17px,2vw,21px);color:var(--on-dark-2);max-width:44ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.contours{position:absolute;right:-4%;bottom:-14%;width:min(62%,720px);opacity:.5;pointer-events:none}
.trust{border-top:1px solid rgba(242,241,234,.16);background:rgba(14,21,18,.55);position:relative}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(242,241,234,.14);padding:0}
.trust .cell{background:var(--green-dd);padding:22px 26px}
.trust .k{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:26px;color:var(--on-dark)}
.trust .v{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-top:6px}
@media(max-width:820px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- generic section ---------- */
.sec{padding:84px 0}
.sec h2{font-size:clamp(27px,3.5vw,40px);font-weight:700;text-transform:uppercase;max-width:20ch}
.sec-dark{background:var(--green-dd);color:var(--on-dark)}
.sec-dark h2{color:var(--on-dark)}
.sec-dark .lede{color:var(--on-dark-2)}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:40px}.sec{padding:60px 0}}
@media(max-width:600px){.sec{padding:50px 0}}
.ph{position:relative;background:linear-gradient(150deg,var(--green-d),var(--green-dd));overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;left:16px;bottom:14px;z-index:0;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,241,234,.6)}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph-tall{aspect-ratio:4/5}
.ph-wide{aspect-ratio:16/10}
.ticks{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.ticks svg{flex:none;margin-top:3px}

/* ---------- the three stages of a job ----------
   Was three columns of body copy, which stacked into three tall blocks on a
   phone. Same fold-away treatment as the four stages on the mountain page, in
   its light-ground colours. */
.flow{margin-top:46px;border-top:1px solid var(--line)}
.fstep{border-bottom:1px solid var(--line)}
.fhead{width:100%;display:flex;align-items:center;gap:18px;background:transparent;border:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;padding:21px 14px;position:relative;
  isolation:isolate;transition:color .25s ease}
.fhead::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(72,102,84,.09);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.9,.3,1)}
.fhead:hover::before,.fhead[aria-expanded="true"]::before{transform:scaleX(1)}
.fhead::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green);
  transform:scaleY(0);transition:transform .3s ease .06s}
.fhead[aria-expanded="true"]::after{transform:scaleY(1)}
/* fixed width so the three titles line up in a column rather than starting
   wherever "01 / Design", "02 / Council" and "03 / Build" happen to end */
.fhead .num{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--green);flex:none;opacity:.8;white-space:nowrap;min-width:104px}
.fhead .t{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;
  letter-spacing:.02em;flex:1;line-height:1.25}
.fhead .chev{flex:none;width:14px;height:14px;color:var(--ink-2);transition:transform .25s ease}
.fhead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fhead[aria-expanded="true"] .num{opacity:1}
.fhead:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.fpanel{padding:0 14px 24px}
.fpanel p{color:var(--ink-2);font-size:15.5px;max-width:70ch;margin:0}
.fstep .fpanel{animation:fpanelin .22s ease both}
@keyframes fpanelin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .fstep .fpanel{animation:none}
  .fhead .chev,.fhead::before,.fhead::after{transition:none}
}
@media(max-width:600px){
  .fhead{gap:12px;padding:18px 11px;flex-wrap:wrap}
  .fhead .num{order:1;flex-basis:100%;min-width:0;margin-bottom:6px}
  .fhead .t{order:2;font-size:15px}
  .fhead .chev{order:3}
  .fpanel{padding:0 11px 20px}
}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.svc article{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}
.svc .ph{aspect-ratio:3/2}
.svc .body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.svc h3{font-size:17px;font-weight:700;text-transform:uppercase}
.svc p{color:var(--ink-2);font-size:15px;flex:1}
.svc .more{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-decoration:none}
.svc .more:hover{text-decoration:underline}
@media(max-width:980px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(242,241,234,.2)}
.steps .s{padding:30px 26px 34px;border-right:1px solid rgba(242,241,234,.2);position:relative}
.steps .s:last-child{border-right:0}
.steps .n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;color:var(--green-l)}
.steps h3{font-size:17px;font-weight:700;text-transform:uppercase;margin:16px 0 12px;color:var(--on-dark)}
.steps p{font-size:15px;color:var(--on-dark-2)}
.steps .s::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--green-l)}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps .s{border-right:0;border-bottom:1px solid rgba(242,241,234,.2)}}

/* ---------- projects ---------- */
.grid5{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:52px}
.grid5 a{position:relative;text-decoration:none;color:#fff;display:block}
.grid5 a:nth-child(1),.grid5 a:nth-child(2),.grid5 a:nth-child(3){grid-column:span 2}
.grid5 a:nth-child(4),.grid5 a:nth-child(5){grid-column:span 3}
.grid5 .ph{aspect-ratio:4/3}
.grid5 a:nth-child(4) .ph,.grid5 a:nth-child(5) .ph{aspect-ratio:16/9}
.grid5 .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
  background:linear-gradient(transparent,rgba(14,21,18,.85))}
.grid5 h3{font-size:17px;font-weight:700;text-transform:uppercase}
.grid5 .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;color:rgba(242,241,234,.78);margin-top:5px}
.grid5 a:hover .ph img{transform:scale(1.04)}
.grid5 .ph img{transition:transform .5s ease}
@media(max-width:900px){.grid5{grid-template-columns:repeat(2,1fr)}
  .grid5 a:nth-child(n){grid-column:span 1}
  .grid5 a:nth-child(5){grid-column:span 2}}

/* ---------- enquiry ---------- */
.enq{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
@media(max-width:900px){.enq{grid-template-columns:1fr;gap:36px}}
.form{background:var(--surface);border:1px solid var(--line);padding:32px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--stone);border:1px solid var(--line);padding:12px 14px;width:100%}
.field textarea{min-height:104px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.form .note{font-size:13px;color:var(--ink-2);margin-top:14px}
.contact-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.contact-list li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);align-items:baseline}
.contact-list .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.contact-list a{text-decoration:none;font-weight:500}
.contact-list a:hover{color:var(--green)}

/* ---------- CTA band ---------- */
.band{position:relative;background:var(--green);color:#fff;overflow:hidden}
.band .wrap{position:relative;padding:66px 28px;display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:clamp(24px,3vw,36px);font-weight:800;text-transform:uppercase;color:#fff;max-width:18ch}
.band p{color:rgba(255,255,255,.86);max-width:52ch;margin-top:14px}
.band .btn-solid{background:#fff;color:var(--green-d)}
.band .btn-solid:hover{background:var(--stone-2);color:var(--green-d)}
.band .contours{opacity:.22;right:-6%;bottom:-30%}

/* ---------- footer ---------- */
/* the column text sits a size down from the page body, so the headings above it
   have room to read as headings rather than as more of the same */
footer{background:var(--green-dd);color:var(--on-dark-2);padding:66px 0 0;font-size:15px;line-height:1.72}
.fgrid{display:grid;grid-template-columns:1.15fr 1fr 1fr .9fr;gap:44px}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr;gap:34px}}
/* was 11px, which left the heading SMALLER than the text under it - the reason
   the whole footer read as one block. Bigger, brighter, and further off the
   content below it */
footer h4{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.19em;
  text-transform:uppercase;color:#fff;margin-bottom:22px;font-weight:500}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.ftag{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:#fff;letter-spacing:.02em}
.fbot{margin-top:52px;border-top:1px solid rgba(242,241,234,.16);padding:20px 0;font-size:13px;
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{width:38px;height:38px;border:1px solid rgba(242,241,234,.28);display:grid;place-items:center}
.socials a:hover{background:var(--green);border-color:var(--green)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* PRE-EXISTING BUG, fixed 3 Sept 2026: these rules only ever existed inside the
   homepage fragment's <style> block, but the only page that USES .filters is
   the portfolio. Its five filter buttons had been rendering as raw browser
   default buttons since the page was built. Shared CSS is where they belong. */
/* ---- project filter ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.filters button{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);padding:9px 15px;cursor:pointer;transition:.16s}
.filters button:hover{border-color:var(--green);color:var(--green)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--stone)}

/* ---- isometric build-up (mountain page) ---- */
.iso{margin-top:30px}
/* Capped hard. At 840px this filled a laptop screen on its own and pushed the
   four steps below the fold on a phone, so it stopped being a diagram and
   became a poster. 460px is a diagram. */
.isofig{background:#101A15;border:1px solid rgba(242,241,234,.14);padding:10px;
  max-width:460px;margin:0 auto}
.isofig svg{display:block;width:100%;height:auto}
.isol{opacity:0;transition:opacity .3s ease}
.isol.on{opacity:1}
/* each piece lands in its own time: the ground fades, the cut settles down into
   the hill, and everything structural drops into place from above, in the order
   it actually gets built */
.isol .p{opacity:0}
.isol.on .p{animation:isoin .6s cubic-bezier(.22,.9,.3,1) both;animation-delay:var(--d,0s)}
.isol.on .p.fade{animation-name:isofade}
.isol.on .p.dig{animation-name:isodig}
@keyframes isoin{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes isodig{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes isofade{from{opacity:0}to{opacity:1}}
/* the digger: it fades in, works the bank in three passes on the same beat as
   the ground coming away, then lifts out and goes */
.digger{opacity:0}
.isol.on .digger{animation:digin 3.2s ease both}
.isol.on .dboom{animation:dboom .72s ease-in-out .4s 3 both;transform-origin:0 0}
.isol.on .ddip{animation:ddip .72s ease-in-out .4s 3 both;transform-origin:0 0}
.isol.on .dbucket{animation:dbucket .72s ease-in-out .4s 3 both;transform-origin:0 0}
@keyframes digin{0%{opacity:0}6%{opacity:1}84%{opacity:1}100%{opacity:0}}
@keyframes dboom{0%{transform:rotate(-16deg)}38%{transform:rotate(9deg)}70%{transform:rotate(4deg)}100%{transform:rotate(-16deg)}}
@keyframes ddip{0%{transform:rotate(14deg)}38%{transform:rotate(-22deg)}70%{transform:rotate(-4deg)}100%{transform:rotate(14deg)}}
@keyframes dbucket{0%{transform:rotate(0deg)}38%{transform:rotate(-34deg)}62%{transform:rotate(-52deg)}100%{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){
  .isol.on .p{animation:none;opacity:1}
  .digger{display:none}
}
/* The four stages used to sit as four open panels of body copy, which on a
   phone ran for two screens under a drawing that was already a screen tall.
   Titles only now, opening on demand, so the whole thing is scannable. */
.isosteps{margin-top:30px;border-top:1px solid rgba(242,241,234,.2)}
.istep{border-bottom:1px solid rgba(242,241,234,.2)}
.ihead{width:100%;display:flex;align-items:center;gap:16px;background:transparent;border:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;padding:19px 14px;position:relative;
  isolation:isolate;transition:color .25s ease}
/* The pale wash that travels down the list as the drawing builds itself up, so
   you can see which stage you are watching without reading anything. It is a
   pseudo-element rather than a background colour so it can wipe in from the
   left on the same beat as the step it belongs to. */
.ihead::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(242,241,234,.12);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.ihead[aria-current="true"]::before{transform:scaleX(1)}
.ihead::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--on-dark);
  transform:scaleY(0);transition:transform .3s ease .1s}
.ihead[aria-current="true"]::after{transform:scaleY(1)}
.ihead[aria-current="true"] .t{color:#fff}
.ihead[aria-current="true"] .chev{color:var(--on-dark)}
.ihead .n{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--green-l);flex:none;opacity:.7;transition:opacity .2s ease}
.ihead .t{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.005em;flex:1;line-height:1.25}
.ihead .chev{flex:none;width:13px;height:13px;color:var(--on-dark-2);transition:transform .25s ease}
.ihead:hover .n,.ihead[aria-current="true"] .n{opacity:1}
.ihead:hover::before{transform:scaleX(1);background:rgba(242,241,234,.055)}
.ihead[aria-current="true"]:hover::before{background:rgba(242,241,234,.12)}
.ihead:hover .chev{color:var(--on-dark)}
.ihead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ihead:focus-visible{outline:2px solid var(--green-l);outline-offset:-2px}
.ipanel{padding:0 14px 22px}
.ipanel p{color:var(--on-dark-2);font-size:15.5px;max-width:70ch;margin:0}
.istep .ipanel{animation:ipanelin .22s ease both}
@keyframes ipanelin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .istep .ipanel{animation:none}
  .ihead .chev,.ihead::before,.ihead::after{transition:none}
}
.isohint{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-2);opacity:.75}
@media(max-width:600px){
  .ihead{gap:12px;padding:17px 11px}
  .ihead .t{font-size:14.5px}
  .ipanel{padding:0 11px 20px}
}

/* ---- x-ray: the same house, finished and as structure (mountain page) ---- */
.xray{margin-top:38px}
.xrayfig{position:relative;aspect-ratio:1240/698;background:var(--green-dd);overflow:hidden;border:1px solid var(--line)}
.xrayfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.xrayfig img.b{opacity:0}
.xray.on .xrayfig img.a{opacity:0}
.xray.on .xrayfig img.b{opacity:1}
.xpin{position:absolute;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity .3s ease .15s}
.xray.on .xpin{opacity:1;pointer-events:auto}
.xpin .dot{display:block;width:15px;height:15px;border-radius:50%;background:var(--green-l);
  box-shadow:0 0 0 4px rgba(126,154,136,.34);cursor:pointer}
.xpin .lab{position:absolute;left:26px;top:-11px;white-space:nowrap;background:rgba(22,33,28,.92);color:var(--on-dark);
  padding:8px 12px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.xpin.r .lab{left:auto;right:26px}
.xtoggle{display:flex;gap:0;margin-top:20px;border:1px solid var(--line);width:max-content;max-width:100%}
.xtoggle button{background:transparent;border:0;padding:13px 22px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);transition:.16s}
.xtoggle button+button{border-left:1px solid var(--line)}
.xtoggle button[aria-pressed="true"]{background:var(--green);color:#fff}
.xnote{margin-top:20px;color:var(--ink-2);max-width:64ch}
/* it sits in a dark band, so the toggle and the note need light-on-dark values */
.sec-dark .xnote{color:var(--on-dark-2)}
.sec-dark .xrayfig{border-color:rgba(242,241,234,.22)}
.sec-dark .xtoggle{border-color:rgba(242,241,234,.28)}
.sec-dark .xtoggle button{color:var(--on-dark-2)}
.sec-dark .xtoggle button+button{border-left-color:rgba(242,241,234,.28)}
.sec-dark .xtoggle button:hover{color:var(--on-dark)}
.sec-dark .xtoggle button[aria-pressed="true"]{background:var(--green);color:#fff}
.xlegend{display:none}
/* On a phone four labels pinned to a photo overlap each other and run off the
   edge, so the pins come off and the same four points become a plain list. */
@media(max-width:760px){
  .xpin{display:none}
  .xtoggle{width:100%}
  .xtoggle button{padding:12px 10px;font-size:10px;flex:1}
  .xray.on .xlegend{display:block}
  .xlegend{list-style:none;padding:0;margin:18px 0 0}
  .xlegend li{position:relative;padding:7px 0 7px 20px;font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
  .xlegend li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border-radius:50%;background:var(--green-l)}
  .sec-dark .xlegend li{color:var(--on-dark-2)}
}

/* ---- build-stage scrubber (mountain page) ---- */
.scrub{margin-top:40px}
/* The heading and the intro used to sit above a full width 16:10 figure, which
   made the section 1353px tall in a 900px viewport while the whole right hand
   side sat empty. Text beside the scrubber instead, so the thing you are meant
   to drag is on screen with the words that tell you to drag it. */
.scrubgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
@media(max-width:900px){.scrubgrid{grid-template-columns:1fr;gap:24px}
  .scrubgrid .scrub{max-width:620px}}
.scrubgrid .scrub{margin-top:0}
.scrubfig{position:relative;aspect-ratio:16/10;background:var(--green-dd);overflow:hidden;border:1px solid var(--line)}
.scrubfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s ease}
.scrubfig img.on{opacity:1}
.scrubstamp{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:baseline;gap:14px;
  background:rgba(22,33,28,.86);color:var(--on-dark);padding:14px 18px;max-width:min(560px,88%)}
.scrubstamp .when{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-l);flex:none}
.scrubstamp .what{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;line-height:1.15}
.scrubctl{margin-top:20px}
.scrubctl input[type=range]{width:100%;accent-color:var(--green);height:28px}
.scrubticks{display:flex;justify-content:space-between;gap:6px;margin-top:2px}
.scrubticks button{flex:1;background:transparent;border:0;border-top:2px solid var(--line);padding:10px 2px 0;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:left}
.scrubticks button[aria-current="true"]{border-top-color:var(--green);color:var(--green)}
.scrubnote{margin-top:22px;color:var(--ink-2);max-width:62ch}
@media(max-width:600px){
  .scrubstamp{flex-direction:column;gap:4px;padding:11px 13px;max-width:100%}
  .scrubstamp .what{font-size:14px}
  .scrubticks button{font-size:0;padding-top:8px}
}

/* ---- work out your own slope (mountain page) ---- */
.slopecalc{background:var(--surface);border:1px solid var(--line);padding:26px 26px 24px;margin-top:34px}
.slopecalc h3{font-size:19px;font-weight:700;text-transform:uppercase;margin:0 0 8px}
.slopecalc p.hint{color:var(--ink-2);font-size:15px;margin:0 0 20px;max-width:60ch}
.calcrow{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.calcfield{display:flex;flex-direction:column;gap:7px}
.calcfield label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.calcfield input{width:120px;font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:20px;padding:10px 12px;
  border:1px solid var(--line);background:var(--stone);color:var(--ink)}
.calcfield input:focus{outline:2px solid var(--green);outline-offset:1px}
.calcout{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline}
.calcout .big{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:34px;font-variant-numeric:tabular-nums}
.calcout .rat{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink-2)}
.calcout .band{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--green);color:#fff;padding:6px 12px}
.calcout .msg{color:var(--ink-2);font-size:15px;flex-basis:100%}
@media(max-width:600px){.calcfield input{width:100%}.calcfield{flex:1 1 100%}}

/* The slope tool travels between pages, so its CSS lives here with the markup
   rather than in the homepage fragment where it started. */
/* ---- slope tool ---- */
.slope{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start;margin-top:44px}
@media(max-width:960px){.slope{grid-template-columns:1fr;gap:28px}}
.slopefig{background:var(--surface);border:1px solid var(--line);padding:18px 18px 12px}
.slopefig svg{width:100%;height:auto;display:block}
.slopectl{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--ink-2);border:1px solid var(--line);padding:9px 14px;cursor:pointer;transition:.16s}
.presets button:hover{border-color:var(--green);color:var(--green)}
.presets button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.slider{display:flex;align-items:center;gap:16px}
.slider input[type=range]{flex:1;accent-color:var(--green);height:26px}
.slider .deg{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:30px;min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
.readout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:22px}
.readout > div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 18px}
.readout .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.readout .v{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:22px;margin-top:6px;font-variant-numeric:tabular-nums}
@media(max-width:560px){.readout{grid-template-columns:1fr}}
/* On a phone the three readout cells stack into 276px of table, which pushed
   the description a whole screen below the slider that changes it. The drawing
   and the description carry the point; the numbers are supporting detail, so
   below 700px they come out and the drawing is brought down a little. The JS
   still writes to them, so nothing needs to know they are hidden. */
@media(max-width:700px){
  .readout{display:none}
  .slopefig{padding:12px 12px 8px}
  .slopectl{margin-top:12px;gap:12px}
}
.slopenote h3{font-size:20px;font-weight:700;text-transform:uppercase;margin-bottom:12px}
.slopenote .badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--green);color:#fff;padding:6px 12px;margin-bottom:16px}
.slopenote p{color:var(--ink-2)}
.slopenote ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.slopenote li{display:flex;gap:12px;color:var(--ink-2);font-size:15.5px}
.slopenote li b{color:var(--ink);font-weight:600}
.dot{flex:none;width:7px;height:7px;background:var(--green);margin-top:8px}


/* a quietly alternating section band, so two light sections in a row on an
   area page do not read as one very long one */
.sec-alt{background:var(--surface)}

/* ---------- inner page hero ---------- */
.pagehero{position:relative;overflow:hidden;background:var(--green-dd);color:var(--on-dark);padding:82px 0 66px}
.pagehero .wrap{position:relative}
.pagehero h1{font-size:clamp(31px,5vw,58px);font-weight:800;text-transform:uppercase;max-width:18ch}
.pagehero .sub{margin-top:20px;font-size:18px;color:var(--on-dark-2);max-width:58ch}
.pagehero.small{padding:60px 0 50px}
@media(max-width:600px){
  .pagehero{padding:54px 0 42px}
  .pagehero.small{padding:44px 0 34px}
  .band .wrap{padding:46px 28px}   /* the 28px is the side gutter, not spare */
}
.pagehero .contours{right:-4%;bottom:-30%;width:min(58%,640px);opacity:.45}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:760px){.cols2{grid-template-columns:1fr;gap:8px}}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.areas span{border:1px solid rgba(242,241,234,.3);padding:9px 16px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.areas.light span{border-color:var(--line);color:var(--ink-2)}
/* a chip that has a real page behind it should look clickable; the ones that do
   not are plain, so the difference tells the visitor where there is more to read */
.areas a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.areas a:hover{color:var(--green-l)}
.areas.light a:hover{color:var(--green)}
/* ---------- services detail rows ---------- */
.svcrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:46px 0;border-bottom:1px solid var(--line)}
.svcrow:last-child{border-bottom:0}
.svcrow h2{font-size:clamp(21px,2.7vw,31px);font-weight:700;text-transform:uppercase}
.svcrow.flip .ph{order:2}
@media(max-width:900px){.svcrow{grid-template-columns:1fr;gap:26px;padding:34px 0}.svcrow.flip .ph{order:0}}
/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.faq .q{padding:28px 30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq h3{font-size:15.5px;font-weight:700;text-transform:uppercase;margin-bottom:12px}
.faq p{color:var(--ink-2);font-size:15.5px}
@media(max-width:820px){.faq{grid-template-columns:1fr}}
/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:19px;font-weight:700;text-transform:uppercase;margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);margin-bottom:14px}
.prose ul{color:var(--ink-2);margin:0 0 16px;padding-left:20px}
.prose a{color:var(--green)}
/* ---------- projects grid + detail ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pgrid article{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}
.pgrid .ph{aspect-ratio:4/3}
.pgrid .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pgrid h3{font-size:17px;font-weight:700;text-transform:uppercase}
/* The type-and-place line was 11px of quiet green and disappeared under the
   title. It is the first thing that tells you what a card is, so it leads. */
.pgrid .meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);font-weight:500;line-height:1.5}
/* NHBRC enrolment is the claim a careful client checks, so it gets said on the
   card rather than buried in the copy. New homes only. */
.nhbrc{display:inline-block;align-self:flex-start;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  background:var(--green);color:#fff;padding:5px 10px}
.nhbrcline{margin:0 0 18px}
.pagehero .nhbrc{background:var(--green-l);color:var(--green-dd)}
.pgrid p{color:var(--ink-2);font-size:15px;flex:1}
/* full contrast in both themes: near-black on the light card, near-white on
   the dark one, rather than a green that reads as disabled */
.pgrid a.more{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;font-weight:500}
.pgrid a.more:hover{text-decoration:underline}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pjmeta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:38px 0 40px}
.pjmeta .m{padding:20px 24px;border-right:1px solid var(--line)}
.pjmeta .m:last-child{border-right:0}
.pjmeta .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.pjmeta .v{font-weight:600;margin-top:6px}
@media(max-width:760px){.pjmeta{grid-template-columns:1fr 1fr}.pjmeta .m:nth-child(2n){border-right:0}}
.pjbody{max-width:68ch}
.pjbody p{color:var(--ink-2);margin-bottom:16px}
.pjnav{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;margin-top:52px;padding-top:22px;
  border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.pjnav a{color:var(--green);text-decoration:none}
.pjnav a:hover{text-decoration:underline}
/* ---------- before/after hover reveal on a card ---------- */
.pgrid .ph .rev, .grid5 .ph .rev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  opacity:0;transition:opacity .55s ease}
.pgrid article:hover .ph .rev, .grid5 a:hover .ph .rev{opacity:1}
.pgrid .ph .revtag, .grid5 .ph .revtag{position:absolute;left:12px;top:12px;z-index:3;opacity:0;transition:opacity .35s ease;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#F2F1EA;background:rgba(10,15,12,.72);padding:6px 10px}
.pgrid article:hover .ph .revtag, .grid5 a:hover .ph .revtag{opacity:1}
.pgrid .ph, .grid5 .ph{position:relative}
/* ---------- portfolio gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:14px;margin-top:38px}
.gal button{padding:0;border:0;background:var(--green-d);cursor:pointer;position:relative;overflow:hidden;aspect-ratio:4/3}
.gal button img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gal button:hover img{transform:scale(1.05)}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,15,12,.94);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:82vh;object-fit:contain}
.lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--on-dark-2);
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.lb button{position:absolute;background:transparent;border:1px solid rgba(242,241,234,.4);color:#F2F1EA;
  width:46px;height:46px;cursor:pointer;font-size:20px;line-height:1}
.lb .x{top:22px;right:22px}
.lb .prev{left:22px;top:50%;transform:translateY(-50%)}
.lb .next{right:22px;top:50%;transform:translateY(-50%)}
.lb button:hover{background:var(--green)}
/* ---------- before / after ---------- */
.ba{position:relative;overflow:hidden;margin-top:38px;aspect-ratio:16/9;background:var(--green-d);user-select:none;
  --split:50%;--p:50}
.ba.ba-hero{margin-top:-1px;aspect-ratio:16/10}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
.ba .before{transform:scale(calc(1 + (100 - var(--p)) * 0.0004))}
.ba .after{transform:scale(calc(1 + var(--p) * 0.0004));
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--split) - 2.5%),#000 calc(var(--split) + 1%));
  mask-image:linear-gradient(90deg,transparent calc(var(--split) - 2.5%),#000 calc(var(--split) + 1%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,241,234,.25),#F2F1EA 22%,#F2F1EA 78%,rgba(242,241,234,.25));
  box-shadow:0 0 22px rgba(242,241,234,.45)}
.ba .handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:52px;height:52px;transform:translate(-50%,-50%);
  border:2px solid #F2F1EA;border-radius:50%;background:rgba(10,15,12,.42);backdrop-filter:blur(3px);color:#F2F1EA;
  font-family:Archivo,Arial,sans-serif;font-size:18px;letter-spacing:3px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px rgba(10,15,12,.4)}
.ba.smooth .after,.ba.smooth .before{transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .8s ease,-webkit-mask-image .8s cubic-bezier(.4,0,.2,1),mask-image .8s cubic-bezier(.4,0,.2,1)}
.ba.smooth .handle{transition:left .8s cubic-bezier(.4,0,.2,1)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.ba input:focus-visible + .handle{box-shadow:0 0 0 3px var(--green-l)}
.ba .tag{position:absolute;bottom:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#F2F1EA;background:rgba(10,15,12,.6);padding:6px 10px;transition:opacity .3s ease;z-index:3}
.ba .tag.l{left:14px;opacity:calc(var(--p) * 0.01)}
.ba .tag.r{right:14px;opacity:calc(1 - var(--p) * 0.01)}
.ba .hintline{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:6;color:#F2F1EA;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(10,15,12,.78);border:1px solid rgba(242,241,234,.35);padding:10px 16px;
  box-shadow:0 6px 24px rgba(10,15,12,.35);backdrop-filter:blur(3px)}
.ba .hintline i{display:block;width:26px;height:1px;background:#F2F1EA;position:relative;animation:hintsweep 2.4s ease-in-out infinite}
.ba .hintline i::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1px solid #F2F1EA;
  border-right:1px solid #F2F1EA;transform:rotate(45deg)}
@keyframes hintsweep{0%,100%{transform:scaleX(.45);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}
@media(prefers-reduced-motion:reduce){.ba .hintline i{animation:none}}
@media(max-width:600px){.ba .hintline{font-size:11px;padding:8px 12px;letter-spacing:.08em}}
/* ---------- video on the homepage hero ---------- */
.hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.2s ease}
.hero .bg video.on{opacity:1}
.hero .bg img{transition:opacity .8s ease}
.hero .bg.playing img{opacity:0}
/* ---------- video on a project's opening photo ---------- */
.ph[data-video]{position:relative}
.pjhead{max-width:100%;margin:0 auto}
.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;
  transition:opacity 1.1s ease}
.ph video.on{opacity:1}
.ph[data-video] .vtag{position:absolute;right:16px;bottom:16px;z-index:3;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#F2F1EA;background:rgba(10,15,12,.6);padding:7px 12px;display:flex;align-items:center;gap:8px}
.ph[data-video] .vtag i{width:7px;height:7px;border-radius:50%;background:var(--green-l);
  animation:vpulse 2s ease-in-out infinite}
@keyframes vpulse{0%,100%{opacity:.35}50%{opacity:1}}
/* ---------- typed eyebrow ---------- */
/* every eyebrow on the site is set at the size the user settled on for the
   project line, and every one of them types itself out as it comes into view */
.eyebrow{font-size:clamp(13.5px,1.45vw,17px);letter-spacing:.15em;margin-bottom:22px}
@media(max-width:600px){.eyebrow{letter-spacing:.1em}}
/* hold the line's height before it is typed, so nothing below it jumps */
.eyebrow.totype{min-height:1.35em}
.type .caret{display:inline-block;width:8px;height:1em;margin-left:3px;background:var(--green-l);
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.type.done .caret{animation:none;opacity:0;transition:opacity .5s ease .4s}
/* ---------- what clients said ---------- */
.rvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.rvw{margin:0;background:var(--surface);border:1px solid var(--line);padding:28px 26px 24px;
  display:flex;flex-direction:column;gap:16px}
.rvw .stars{color:#C9A227;flex:none}
.rvw blockquote{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.66;flex:1}
.rvw blockquote::before{content:"\201C"}
.rvw blockquote::after{content:"\201D"}
.rvw figcaption{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.rvw figcaption span{color:var(--green);letter-spacing:.1em}
.rvw-solo{max-width:70ch;margin-top:22px}
@media(max-width:980px){.rvgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rvgrid{grid-template-columns:1fr}}
/* honeypot: off screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- back to top ---------- */
/* deliberately faint: it is a way out, not a thing to look at. It only appears
   once you are far enough down that reaching the top by scrolling is a chore */
.totop{position:fixed;right:26px;bottom:26px;z-index:70;width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(242,241,234,.26);background:rgba(22,33,28,.6);color:#F2F1EA;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .2s ease}
.totop.on{opacity:.48;visibility:visible;transform:none}
.totop.on:hover,.totop.on:focus-visible{opacity:1;background:var(--green)}
/* clear of the call/whatsapp bar that sits across the bottom on a phone */
@media(max-width:760px){.totop{right:16px;bottom:70px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}
@media print{.totop{display:none}}
/* ---------- header on small screens ---------- */
/* the bar was a fixed 76px, so the brand overflowed it and landed on the strip
   above; and under 900px the menu was simply hidden, which left a phone with no
   way to reach any page at all. The toggle is a checkbox so it works with no JS. */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* the quote button must never break onto two lines - it is what makes the whole
   bar taller than the 76px row and pushes the menu out of shape */
.nav .btn-solid{white-space:nowrap}
.burger{display:none}
@media(max-width:1060px){
  .nav .wrap{position:relative;flex-wrap:wrap;height:auto;min-height:68px;gap:14px;
    padding-top:12px;padding-bottom:12px}
  .brand{order:1}
  .burger{order:2;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:42px;padding:0 10px;border:1px solid var(--line);cursor:pointer}
  .burger span{display:block;height:2px;background:var(--ink);transition:opacity .2s ease}
  .nav .btn-solid{order:3;padding:12px 16px;font-size:12px}
  .menu{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;font-size:16px;
    border-top:1px solid var(--line);margin-top:2px;padding-top:4px}
  .menu a{padding:13px 2px;border-bottom:0}
  .menu a:hover,.menu a[aria-current]{border-bottom-color:transparent;color:var(--green)}
  .navtoggle:checked ~ .menu{display:flex}
  .navtoggle:focus-visible ~ .burger{outline:2px solid var(--green);outline-offset:2px}
}
@media(max-width:600px){
  /* the sticky call/whatsapp bar at the bottom of the screen is already the
     mobile call to action, so the header button only costs a whole extra row */
  .nav .btn-solid{display:none}
  .brand .bs{display:none}
  .brand .bt{font-size:12.5px}
  .topbar{font-size:12px}
}
/* ---------- Our 5 cents ---------- */
/* a post is a reading column, not a layout: the hero, the figures and the text
   all share one width so the eye never has to jump back to a new left edge */
.artcol{max-width:820px;margin:0 auto}
.artcol .pjbody{max-width:none}
.artcol .prose p,.artcol .prose ul{font-size:17px;line-height:1.72}
.artcol .prose h2{margin-top:46px;max-width:none;text-wrap:pretty}
.artcol .prose li{margin-bottom:9px}
.pfig{margin:34px 0}
.pfig figcaption{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.6;
  color:var(--ink-2);margin-top:12px;max-width:60ch}
.postmeta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green);border-top:1px solid var(--line);
  padding-top:18px;margin-bottom:30px}
.pgrid article .ph img{object-position:center}
/* ---------- hotspots on a photo ---------- */
.hotwrap{position:relative}
.hotwrap .hint{position:absolute;left:16px;top:16px;z-index:5;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#F2F1EA;background:rgba(10,15,12,.65);padding:7px 12px;
  transition:opacity .4s ease}
.hotwrap.used .hint{opacity:0}
/* when the opening photo carries a clip, the pins wait for it to finish, so a
   hotspot is only ever shown over the still frame it was positioned on */
.hotwrap.hasvid .hs,.hotwrap.hasvid .hint{opacity:0;pointer-events:none;transition:opacity .6s ease}
.hotwrap.hasvid.pins .hs{opacity:1;pointer-events:auto}
.hotwrap.hasvid.pins .hint{opacity:1}
.hotwrap.hasvid.pins.used .hint{opacity:0}
.ph[data-video] .vtag{transition:opacity .6s ease}
.hs{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  border:2px solid #F2F1EA;background:rgba(10,15,12,.5);color:#F2F1EA;cursor:pointer;z-index:4;padding:0;
  display:grid;place-items:center;font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:12px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(242,241,234,.6);
  animation:hspulse 2.8s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes hspulse{0%{transform:scale(.65);opacity:.85}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}
.hs[aria-expanded="true"]{background:var(--green);border-color:var(--green)}
.hs[aria-expanded="true"]::before{animation:none;opacity:0}
.hspop{position:absolute;z-index:5;width:min(290px,66%);background:rgba(10,15,12,.93);color:#F2F1EA;
  padding:16px 18px;opacity:0;pointer-events:none;transform:translate(14px,-50%) scale(.97);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(4px)}
.hspop.on{opacity:1;pointer-events:auto;transform:translate(18px,-50%) scale(1)}
.hspop.left{transform:translate(calc(-100% - 14px),-50%) scale(.97)}
.hspop.left.on{transform:translate(calc(-100% - 18px),-50%) scale(1)}
.hspop b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.08em;margin-bottom:8px}
.hspop p{font-size:14.5px;line-height:1.55;color:rgba(242,241,234,.86)}
/* On a phone there is no room to hang a 230px card off the side of a pin: near
   the right edge of the photo it simply ran off screen and got clipped. So below
   700px the popover stops chasing the pin and docks to the bottom of the image,
   full width. The inline left/top the pin writes has to be overridden. */
@media(max-width:700px){
  .hspop{width:auto;padding:13px 15px;left:12px!important;right:12px;
    top:auto!important;bottom:12px;transform:translateY(8px) scale(.98)}
  .hspop.left{transform:translateY(8px) scale(.98)}
  .hspop.on,.hspop.left.on{transform:none}
  .hspop p{font-size:13.5px}
  .hs{width:26px;height:26px;font-size:11px}}
/* ---------- feature list on a project ---------- */
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feat div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 24px;color:var(--ink-2);font-size:15.5px}
.feat div:last-child:nth-child(odd){grid-column:1 / -1}
.feat b{display:block;color:var(--ink);font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
@media(max-width:700px){.feat{grid-template-columns:1fr}}
/* ---------- preview shell (single-file demo only) ---------- */
.page{display:none}
.page.active{display:block}