:root {
  --ink:#231c18; --ink-2:#3a3029; --ink-3:#6b625a; --paper:#faf8f4; --sand:#efeae0; --line:#ded7ca; --white:#fff;
  --brass:#9c734e; --brass-lit:#c69a6d; --night:#1a1512; --on-dark:#fff; --on-dark-2:#d8d1c7; --ok:#3d6b4f;
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme:light;
}
* {box-sizing:border-box} [hidden] {display:none!important}
body {margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p {margin:0} h1,h2,h3 {text-wrap:balance}
.in {width:100%;max-width:1180px;margin:auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.eyebrow {font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--brass)}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;font:600 15px/1.2 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .2s;text-align:center}
.btn:hover {transform:translateY(-1px)} .btn-dark {background:var(--ink);color:var(--paper)} .btn-dark:hover {background:var(--ink-2)}
.btn-line {background:transparent;color:var(--ink);border-color:var(--ink)} .btn-line:hover {background:var(--sand)} .btn-paper {background:var(--paper);color:var(--ink)}
a:focus-visible,button:focus-visible {outline:2px solid var(--brass);outline-offset:3px}
button:disabled {opacity:.55;cursor:default} .message {padding-block:50px;color:var(--ink-2)}
.site-head {background:var(--ink);color:var(--on-dark)} .site-head .in {padding-block:18px;display:flex;align-items:center;gap:28px}
.logo {display:block;width:66px;height:31px;flex:none;background:var(--on-dark);-webkit-mask:url("/static/pkc-mark.png") left center/contain no-repeat;mask:url("/static/pkc-mark.png") left center/contain no-repeat}
.nav {display:flex;gap:26px;margin-left:auto;font-size:13.5px} .nav a {color:var(--on-dark-2);text-decoration:none} .nav a:hover {color:var(--on-dark)}
/* The way back to the project list sits by the logo, apart from the website menu. */
.head-link {color:var(--on-dark);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap} .head-link:hover {text-decoration:underline;text-underline-offset:3px}
.head-pill {padding:9px 18px;border-radius:999px;background:var(--ink-2);color:var(--on-dark);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-decoration:none;white-space:nowrap}
.site-foot {background:var(--night);color:var(--on-dark-2);font-size:13.5px} .site-foot .in {padding-block:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px} .site-foot .tag {font:19px var(--serif);color:var(--on-dark)}
.bad-link {min-height:100dvh;display:flex;flex-direction:column} .bad-link main {flex:1;padding-block:clamp(64px,12vw,140px)}
.bad-link h1 {font:400 clamp(32px,4.4vw,52px)/1.12 var(--serif);max-width:24ch} .bad-link main p {margin-top:22px;color:var(--ink-2);max-width:50ch}
.hero {position:relative;min-height:560px;display:flex;align-items:flex-end;background:var(--night) center 62%/cover no-repeat}
.hero::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,21,18,.38),rgba(26,21,18,.1) 34%,rgba(26,21,18,.86))}
.hero .in {position:relative;z-index:1;padding-block:140px 58px;color:var(--on-dark);display:grid;gap:18px} .hero .eyebrow {color:#e9d8c4}
.hero h1 {font:400 clamp(38px,6.2vw,72px)/1.03 var(--serif);letter-spacing:-.012em;max-width:15ch} .hero h1 em {color:var(--brass-lit)}
.hero p {max-width:50ch;font-size:clamp(16px,1.8vw,18.5px);color:rgba(255,255,255,.9)} .hero .meta {font-size:13.5px;color:rgba(255,255,255,.72)}
.price {padding-block:76px 72px} .price .in {display:grid;gap:28px} .price-grid {display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.price-grid.single {grid-template-columns:1fr} .plain-title {font:400 44px/1.12 var(--serif)} .client-detail {color:var(--ink-3)}
.amount {font:300 clamp(56px,7.4vw,92px)/.95 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums;margin-top:14px}
.amount-sub {margin-top:16px;color:var(--ink-2);max-width:36ch} .amount-fine {margin-top:8px;font-size:13.5px;color:var(--ink-3);max-width:40ch}
.lbl {display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:8px}
.areas {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:14px} .area {padding:20px 22px 8px 0;min-width:0} .area+.area {padding-left:22px;border-left:1px solid var(--line)}
.bul {list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.45} .bul li {display:grid;grid-template-columns:12px 1fr;gap:10px} .bul li::before {content:"";width:10px;height:1px;background:var(--brass);margin-top:11px}
.strip {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-block:1px solid var(--line)} .strip>div {padding:18px 22px 18px 0;min-width:0} .strip>div+div {padding-left:22px;border-left:1px solid var(--line)} .strip span:not(.lbl) {font-size:15px;color:var(--ink-2)}
.quote {background:var(--sand);padding-block:76px 84px} .quote .in {display:grid;gap:36px} .quote-top {display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 32px}
.quote-head {display:grid;gap:12px;max-width:660px} .quote-head h2 {font:400 clamp(30px,3.8vw,44px)/1.12 var(--serif);letter-spacing:-.01em} .quote-head p {color:var(--ink-2)}
.top-btns {display:flex;flex-wrap:wrap;gap:10px} .quote-body {display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:40px;align-items:start} .quote-body.sample {grid-template-columns:1fr} .doc {display:grid;gap:28px;min-width:0}
.toc {display:grid;border-top:1px solid var(--ink)} .toc-row {display:grid;grid-template-columns:26px minmax(0,1fr) 94px 52px 124px;grid-template-areas:"n t pp c s";gap:8px;align-items:center;width:100%;padding:12px 6px;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer}
.toc-row:hover {background:rgba(255,255,255,.55)} .toc-row .n {grid-area:n;color:var(--brass);font-size:13px;font-weight:700} .toc-row .t {grid-area:t;font-size:15.5px;font-weight:500} .toc-row .pp {grid-area:pp;font-size:13.5px;color:var(--ink-3)} .toc-row .c {grid-area:c;font-size:13.5px;text-align:right;font-weight:600} .toc-row .s {grid-area:s;justify-self:end;font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;text-align:right}
.s.open {color:var(--ok)} .s.locked {color:var(--brass)} .toc-total {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:12px 6px 0;font-size:13.5px;color:var(--ink-2)} .toc-total b {color:var(--ink)}
.pages {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 12px;min-width:0} .page-item {display:flex;flex-direction:column;gap:10px;min-width:0}
.sheet {display:block;width:100%;aspect-ratio:1/1.4142;position:relative;overflow:hidden;background:var(--white);border:0;padding:0;margin:0;color:inherit;cursor:zoom-in;border-radius:2px;box-shadow:0 1px 2px rgba(35,28,24,.08),0 14px 28px -18px rgba(35,28,24,.45);transition:transform .2s}
button.sheet:hover {transform:translateY(-3px)} .sheet img {width:100%;height:100%;object-fit:contain;display:block}
.lockchip {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(35,28,24,.84);color:#fff;display:grid;place-items:center;font-size:16px}
.lockchip svg {width:45%;height:45%}
.cap {display:flex;justify-content:center;gap:4px;font-size:12.5px;line-height:1.3;color:var(--ink-3);text-align:center} .cap b {color:var(--brass)} .redacted-note {font-size:11px;color:var(--ink-3);line-height:1.4;text-align:center}
.card {position:sticky;top:24px;background:var(--white);border:1px solid var(--line);border-radius:3px;padding:32px 30px;box-shadow:0 24px 48px -32px rgba(35,28,24,.4)} .card-state {display:grid;gap:20px}
.card h3 {font:400 36px/1.06 var(--serif);letter-spacing:-.01em} .card .lead {color:var(--ink-2)} .openlist {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:var(--paper);padding:16px;border-radius:3px}
.openlist small {display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:8px} .openlist .o small {color:var(--ok)} .openlist .l small {color:var(--brass)} .openlist ul {list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2);line-height:1.35}
.textlink {background:none;border:0;padding:0;font:600 14px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start} .btns {display:grid;gap:10px} .fine {font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:16px}
.method {display:grid;gap:10px} .method+.method {border-top:1px solid var(--line);padding-top:18px} .method h4 {font-size:15px;font-weight:600} .method p {font-size:13.5px;color:var(--ink-3)}
.bank {margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;font-size:14px;background:var(--paper);padding:12px 14px;border-radius:3px} .bank dt {color:var(--ink-3)} .bank dd {margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .back {font-size:13.5px;color:var(--ink-3)} .ok {font-size:13.5px;color:var(--ok)}
.paid-tag {display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ok)} .paid-tag::before {content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.ahead {background:var(--ink);color:var(--on-dark);padding-block:80px} .ahead .in {display:grid;gap:18px} .ahead .eyebrow {color:var(--brass-lit)} .ahead h2 {font:400 clamp(32px,4.4vw,52px)/1.06 var(--serif);max-width:18ch} .ahead p {color:var(--on-dark-2);max-width:54ch} .ahead .row {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:8px} .ahead .ok {color:#a9d3b9}
.viewer {position:fixed;inset:0;z-index:50;background:rgba(20,16,12,.9);display:grid;grid-template-rows:auto 1fr auto;gap:12px;color:var(--on-dark);padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.v-bar {width:100%;max-width:760px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.v-bar button,.v-nav>button {background:transparent;color:var(--on-dark);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 16px;font:600 13px var(--sans);cursor:pointer}
.v-stage {overflow:auto;display:grid;justify-items:center;align-content:start;min-height:0} .v-stage .sheet {width:min(700px,100%,calc((100dvh - 190px)/1.4142));min-width:260px;cursor:default}
.v-nav {width:100%;max-width:760px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} .v-mid {flex:1;display:flex;justify-content:center;min-width:0;text-align:center;font-size:14px} .v-lock,.v-sample {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}.v-sample {color:var(--on-dark-2)}
.front {min-height:100dvh;display:flex;flex-direction:column} .front .head-pill {margin-left:auto}
.front-main {flex:1;display:grid;align-content:start;gap:22px;padding-block:clamp(56px,10vw,120px)} .front-step {display:grid;gap:22px;max-width:620px}
.front h1 {font:400 clamp(34px,4.6vw,54px)/1.08 var(--serif);letter-spacing:-.01em;max-width:20ch} .front-lead {color:var(--ink-2);max-width:52ch}
.front-form {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:end;max-width:560px;margin-top:6px}
.front-form label {grid-column:1/-1;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}
.front-form input {width:100%;min-width:0;padding:14px 18px;border:1px solid var(--ink-3);border-radius:999px;background:var(--white);color:var(--ink);font:500 16px/1.2 var(--sans)}
.front-form input:focus-visible {outline:2px solid var(--brass);outline-offset:2px;border-color:var(--ink)} #code {letter-spacing:.3em;font-variant-numeric:tabular-nums}
.front .fine {max-width:560px} .front .fine a,.front-lead a {color:var(--ink)} .front-error {color:#9b3b2a;font-weight:500;max-width:560px}
.project-list {list-style:none;margin:8px 0 0;padding:0;display:grid;border-top:1px solid var(--ink);max-width:900px}
.project-row {display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t p g" "m s g";gap:4px 28px;align-items:center;padding:22px 6px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.project-row:hover {background:var(--sand)} .pr-title {grid-area:t;font:400 26px/1.15 var(--serif)} .pr-meta {grid-area:m;font-size:13.5px;color:var(--ink-3)}
.pr-price {grid-area:p;justify-self:end;font:300 26px/1.1 var(--serif);font-variant-numeric:lining-nums} .pr-state {grid-area:s;justify-self:end;font-size:10.5px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}
.pr-state.open {color:var(--ok)} .pr-state.locked {color:var(--brass)} .pr-go {grid-area:g;padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 14px/1.2 var(--sans)}
@media(max-width:680px) {.front-form {grid-template-columns:minmax(0,1fr)} .front-form .btn {width:100%} .project-row {grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t g" "m g" "p g" "s g";column-gap:16px} .pr-price,.pr-state {justify-self:start}}
@media(max-width:1040px) {.quote-body {grid-template-columns:minmax(0,1fr)} .card {position:static;max-width:600px}}
@media(max-width:900px) {.nav {display:none} .head-pill {margin-left:auto}}
@media(max-width:520px) {.site-head .in {gap:18px}}
@media(max-width:860px) {.price-grid {grid-template-columns:minmax(0,1fr);gap:36px}.areas,.strip {grid-template-columns:1fr}.area,.area+.area,.strip>div,.strip>div+div {padding:16px 0;border-left:0}.area+.area,.strip>div+div {border-top:1px solid var(--line)}}
@media(max-width:680px) {.toc-row {grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"n t s" ". pp c";row-gap:2px}.toc-row .s {max-width:115px}.pages {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:36%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px}.page-item {scroll-snap-align:start}.price,.quote {padding-block:48px}.card {padding:28px 24px}.hero {min-height:480px}.v-mid {flex-basis:100%;order:3}.v-stage .sheet {width:min(700px,100%,calc((100dvh - 245px)/1.4142))}}
@media(prefers-reduced-motion:reduce) {.btn,.sheet {transition:none}.btn:hover,button.sheet:hover {transform:none}}