/* One-page site layout. Placement rules only apply >=900px; below that everything stacks. */
:root{--section-y:var(--s-10)}
@media(max-width:899px){:root{--section-y:var(--s-9)}}
@media(max-width:599px){:root{--section-y:var(--s-8)}}

.sec{padding-block:var(--section-y)}
.sec.band{background:var(--paper-2)}
.sec-rule{border-top:2px solid var(--ink);padding-top:var(--s-5)}
.sec-head{display:grid;gap:var(--s-4);align-content:start}
.sec-head h2{max-width:20ch}
.sec-intro{margin-top:var(--s-4);max-width:var(--measure)}
.sec-body{margin-top:var(--s-8)}
.sec .g>.sec-body{margin-top:var(--s-8)}
@media(min-width:900px){
  .split>.sec-head{grid-column:1/5;align-self:start;position:sticky;top:var(--s-9)}
  .split>.sec-body{grid-column:5/13;margin-top:0}
  .head-wide{max-width:none}
}

/* hero */
.hero{padding-top:var(--s-9);padding-bottom:var(--s-10)}
@media(max-width:899px){.hero{padding-bottom:var(--s-9)}}
@media(max-width:599px){.hero{padding-top:var(--s-7);padding-bottom:var(--s-8)}}
.hero .g>*{min-width:0}
.hero h1{margin-top:var(--s-5)}
.hero .lead{margin-top:var(--s-5)}
.hero .btn-row{margin-top:var(--s-6)}
.hero .aside-note{margin-top:var(--s-5);font:400 var(--t-small)/1.5 var(--font-mono);color:var(--ink-2)}
.hero-art{margin-top:calc(var(--s-7) + var(--s-2))}
@media(min-width:900px){
  .hero .g>.hero-label,.hero .g>h1,.hero .g>.lead,.hero .g>.btn-row,.hero .g>.aside-note{grid-column:1/8}
  .hero .g>.hero-label{grid-row:1}.hero .g>h1{grid-row:2}.hero .g>.lead{grid-row:3}.hero .g>.btn-row{grid-row:4}.hero .g>.aside-note{grid-row:5}
  /* artefact top = cap-height of the first H1 line (Fraunces: cap top sits 0.1715em below the line box top) */
  .hero-art{grid-column:8/13;grid-row:2/span 4;align-self:start;margin-top:calc(var(--s-5) + var(--t-display) * .1715)}
}
.typed-caret::after{content:"";display:inline-block;width:1px;height:1em;background:var(--ink);margin-left:2px;vertical-align:text-bottom}

/* ledger rows */
.ledger{border-top:2px solid var(--ink)}
.ledger-row{position:relative;display:grid;grid-template-columns:var(--s-7) minmax(0,1fr);column-gap:var(--s-3);padding:var(--s-6) var(--s-3);border-bottom:var(--hair);transition:background-color 120ms}
.ledger-row:hover{background:var(--paper-2)}
.ledger-row .num{font:500 var(--t-small)/1.6 var(--font-mono);color:var(--ink-2)}
.ledger-row h3{margin-bottom:var(--s-3)}
.ledger-row p+p{margin-top:var(--s-3)}
.ledger-row .typical{font-size:var(--t-small);color:var(--ink-2)}
.ledger-row .go{display:inline-block;margin-top:var(--s-4);font:500 13px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.ledger-row .go::after{content:"";position:absolute;inset:0}
.ledger-row .arrow{display:inline-block;transition:transform 120ms}
.ledger-row:hover .arrow{transform:translateX(4px)}

/* demos rows */
.demo-rows{display:grid;gap:var(--s-9)}
.demo-row{display:grid;gap:var(--s-5);align-items:center}
.demo-row img{width:100%;border:1px solid var(--ink);background:var(--paper)}
@media(min-width:600px){.demo-row img{height:auto;max-height:460px;object-fit:cover;object-position:top}}
@media(min-width:600px) and (max-width:899px){.demo-row .preview{max-width:600px}}
.demo-row .preview{display:block;line-height:0}
.demo-row h3{margin:var(--s-3) 0}
.demo-row p+p{margin-top:var(--s-3)}
.demo-row .try{font-size:var(--t-small);color:var(--ink-2);border-top:var(--hair);padding-top:var(--s-3);margin-top:var(--s-4)}
.demo-row .go{display:inline-block;margin-top:var(--s-4);font-weight:600}
@media(min-width:900px){
  .demo-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .demo-row .preview{grid-column:1/8}
  .demo-row .copy{grid-column:8/13}
  .demo-row.flip .preview{grid-column:6/13;grid-row:1}
  .demo-row.flip .copy{grid-column:1/6;grid-row:1}
}

/* pricing tables */
.price-wrap+.price-wrap{margin-top:var(--s-8)}
.ptable caption{text-align:left;padding-bottom:var(--s-3)}
.ptable th{font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);text-align:left;padding:var(--s-3) var(--s-4);border-bottom:2px solid var(--ink)}
.ptable td{padding:var(--s-5) var(--s-4);vertical-align:baseline;border-bottom:var(--hair)}
.ptable tbody tr:nth-child(even){background:var(--paper-2)}
.ptable .offer{font:500 var(--t-h3)/1.25 var(--font-display);font-variation-settings:"SOFT" 0}
.ptable .flag{display:block;margin-top:var(--s-2);font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.ptable .flag.start{color:var(--ink)}
.ptable .flag.start::before{content:"";display:inline-block;width:8px;height:8px;background:var(--signal);margin-right:var(--s-2)}
.ptable .time{font:400 var(--t-small)/1.5 var(--font-mono);white-space:nowrap;padding-right:var(--s-6)}
.ptable .price{font:400 2.5rem/1 var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;letter-spacing:-.005em;white-space:nowrap}
.ptable .price small{font:400 var(--t-small)/1 var(--font-mono);letter-spacing:0;color:var(--ink-2)}
.ptable th.r,.ptable td.r{text-align:right}
/* first-client offer note (under the project table) */
.offer-note{display:grid;gap:var(--s-3);padding:var(--s-5) 0;border-bottom:var(--hair)}
.offer-note .offer-price{display:flex;align-items:baseline;gap:var(--s-3)}
.offer-note .price{font:400 2.5rem/1 var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;letter-spacing:-.005em}
.offer-note .was{font:400 var(--t-small)/1 var(--font-mono);color:var(--ink-2)}
.terms{margin-top:var(--s-6);font:400 var(--t-small)/1.6 var(--font-mono);display:grid;gap:var(--s-2)}
@media(max-width:899px){
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ptable tr,.ptable td,.ptable th.name{display:block}
  .ptable tr{padding:var(--s-5) 0;border-bottom:var(--hair)}
  .ptable tbody tr:nth-child(even){background:transparent}
  .ptable td,.ptable th.name{border:0;padding:var(--s-2) 0;text-align:left!important}
  .ptable tbody th.name{padding:var(--s-2) 0;width:auto}
  .ptable td[data-label]::before{content:attr(data-label);display:block;font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:var(--s-1)}
  .ptable td.name::before{display:none}
}

/* process timeline */
.timeline{display:grid;gap:var(--s-7)}
.timeline li{position:relative;padding-left:var(--s-6);border-left:2px solid var(--ink)}
.timeline li::before{content:"";position:absolute;left:-7px;top:0;width:12px;height:12px;background:var(--signal)}
.timeline h3{margin:var(--s-2) 0 var(--s-3)}
.timeline p{color:var(--ink-2);font-size:var(--t-small)}
@media(min-width:900px){
  .timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .timeline li{padding:var(--s-5) var(--s-5) 0 0;border-left:0;border-top:2px solid var(--ink)}
  .timeline li::before{left:0;top:-7px}
}

/* fit */
.fit{display:grid;gap:var(--s-7)}
.fit h3{margin-bottom:var(--s-5)}
.fit li{padding:var(--s-3) 0 var(--s-3) var(--s-5);position:relative;border-top:var(--hair)}
.fit .yes li::before{content:"";position:absolute;left:0;top:var(--s-5);width:8px;height:8px;background:var(--signal)}
.fit .no li::before{content:"\2014";position:absolute;left:0;top:var(--s-3);font-family:var(--font-mono);color:var(--ink-2)}
@media(min-width:900px){
  .fit{grid-template-columns:1fr 1fr;gap:0}
  .fit>div:first-child{padding-right:var(--s-7)}
  .fit>div:last-child{padding-left:var(--s-7);border-left:var(--hair)}
}

/* about + faq */
.about-portrait img{border:1px solid var(--ink);aspect-ratio:3/4;object-fit:cover}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-5) 0;font:500 var(--t-h3)/1.25 var(--font-display);font-variation-settings:"SOFT" 0;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--font-mono);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--signal)}
.faq .answer{padding:0 0 var(--s-6);max-width:var(--measure);color:var(--ink-2)}

/* contact: the single inverted band */
.inverse{background:var(--inverse-bg);color:var(--inverse-fg)}
.inverse .label{color:var(--paper-3)}
.inverse a{color:var(--inverse-fg)}
.inverse a:hover{color:var(--paper-3)}
.inverse .sec-rule{border-top-color:var(--inverse-fg)}
.contact-email{display:inline-block;margin-top:var(--s-5);font:400 1.5rem/1.2 var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;overflow-wrap:anywhere}
.contact-note{margin-top:var(--s-5);font:400 var(--t-small)/1.5 var(--font-mono);color:var(--paper-3)}
.contact-form{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
.inverse .field label{color:var(--inverse-fg)}
.inverse .field .err{color:var(--inverse-fg);border-left:2px solid var(--inverse-fg);padding-left:var(--s-3)}
.inverse .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);justify-self:start}
.inverse .btn:hover{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.inverse .btn.secondary{background:transparent;color:var(--inverse-fg);border-color:var(--inverse-fg)}
.inverse .btn.secondary:hover{background:var(--inverse-fg);color:var(--ink)}
.contact-actions{margin-top:var(--s-5)}
.form-status{min-height:var(--s-6);font:400 var(--t-small)/1.5 var(--font-mono)}
@media(min-width:900px){
  .contact-copy{grid-column:1/6}
  .contact-form{grid-column:7/13;margin-top:0}
}

/* footer */
.site-footer{border-top:var(--hair);padding-block:var(--s-7)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);align-items:baseline;justify-content:space-between}
.site-footer .links{display:flex;gap:var(--s-5);flex-wrap:wrap}
.site-footer .meta{font:400 var(--t-small)/1.5 var(--font-mono);color:var(--ink-2)}

/* row headers inside tables: look like cells, not header labels */
.ptable tbody th.name{font:inherit;text-transform:none;letter-spacing:0;color:var(--ink)}
@media(min-width:900px){.ptable tbody th.name{padding:var(--s-5) var(--s-4);vertical-align:baseline;border-bottom:var(--hair);width:22%}}
.contact-note.booking-hours{margin-top:var(--s-3)}