/* Briksart Projects — site design system */

:root{
  --paper:#F4F4F1;
  --paper-2:#ECEBE5;
  --paper-3:#E3E2DB;
  --ink:#1A1A17;
  --ink-2:#3C3C36;
  --mute:#6C6C63;
  --brass:#B8914A;
  --brass-ink:#7A5A1F;
  --rule:#D3D2CA;
  --rule-soft:#E0DFD8;
  --measure:72ch;
  --maxw:1060px;
  --radius:10px;
  --radius-sm:7px;
  --gutter:32px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(min-width:720px){:root{--gutter:52px}}
@media(min-width:1100px){:root{--gutter:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(60px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.fig,.lbl,.btn,.brand,.sitenav,.crumb,.n,.k,.tagline{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
h1{font-size:clamp(1.95rem,6vw,3rem);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(1.4rem,4vw,1.95rem);font-weight:700;line-height:1.14;letter-spacing:-.02em;margin:0}
h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em;margin:0}
h4{font-size:.9rem;font-weight:600;margin:0}
p{margin:0 0 1.1rem;max-width:var(--measure)}
strong{font-weight:600;color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.lbl{font-size:.74rem;font-weight:600;color:var(--brass-ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(244,244,241,.95);backdrop-filter:blur(8px);border-bottom:2px solid var(--brass);padding-top:env(safe-area-inset-top,0px)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;letter-spacing:.15em;text-decoration:none;line-height:1;color:var(--ink)}
.brand .mark{width:28px;height:28px;flex:0 0 auto;color:var(--brass)}
.brand .wm{display:block}
.ft .brand .mark{width:36px;height:36px}
.brand i{display:block;font-style:normal;font-size:.5rem;letter-spacing:.4em;color:var(--brass-ink);font-weight:600;margin-top:3px}
.sitenav{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px;font-size:.86rem;font-weight:500}
.sitenav::-webkit-scrollbar{display:none}
.sitenav a{color:var(--mute);text-decoration:none;white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--brass-ink);border-bottom-color:var(--brass)}
@media(min-width:940px){
  .hdr-in{display:flex;align-items:center;gap:32px;min-height:60px;padding:0 var(--gutter)}
  .hdr-top{min-height:0;flex:0 0 auto}
  .sitenav{padding:0;flex:1}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:9px 16px;font-size:.84rem;font-weight:600;text-decoration:none;border:1px solid var(--brass);background:var(--brass);color:#1A1407;min-height:34px;line-height:1.25}
.btn:hover{background:#A98241;border-color:#A98241}
.btn-line,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-line:hover,.btn-ghost:hover{background:var(--paper-2);border-color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}

/* ---------- page top ---------- */
.top{padding-top:40px;padding-bottom:30px}
.crumb{font-size:.82rem;color:var(--mute);margin-bottom:14px}
.crumb a{text-decoration:none}
.top .lede,.top p{color:var(--ink-2);margin-top:16px;max-width:56ch}
.top .lede{font-size:1.08rem}
.meta{font-size:.82rem;color:var(--mute);margin-top:14px;font-family:Archivo}

/* ---------- sections ---------- */
/* Longhand, not `padding:44px 0`. The shorthand also sets left and right to
   zero, and on faq.html and blog.html these classes sit on the SAME element
   as .wrap — so the shorthand was wiping out the page gutter and running the
   text into the edge of the screen. */
.sec,.grp,.stage{padding-top:44px;padding-bottom:44px;border-top:2px solid var(--brass)}
.sec.alt{background:var(--paper-2)}
.sec-head{background:var(--paper-3);border-left:5px solid var(--brass);border-radius:var(--radius-sm);padding:20px 24px;margin-bottom:26px}
.sec.alt .sec-head{background:var(--paper)}
.sec-head h2{max-width:22ch}
.sec-head p,.sec-sub{color:var(--ink-2);margin:9px 0 0;font-size:1rem;max-width:58ch}
.sec p,.grp p{color:var(--ink-2)}
.sec h2,.grp h2{margin-bottom:14px}

/* ---------- lists ---------- */
.bul,.rate-blk ul,.consult ul,.fit-col ul,.ask ul,.ft-grid ul,.tier ul,.pk ul{list-style:none;margin:14px 0 0;padding:0}
.bul li,.rate-blk li,.consult li,.fit-col li,.ask li,.tier li{position:relative;padding:7px 0 7px 20px;font-size:.96rem;color:var(--ink-2);border-bottom:1px solid var(--rule-soft)}
.bul li:last-child,.rate-blk li:last-child,.consult li:last-child,.fit-col li:last-child,.ask li:last-child{border-bottom:0}
.bul li::before,.rate-blk li::before,.consult li::before,.fit-col li::before,.ask li::before{content:"";position:absolute;left:0;top:1em;width:11px;height:2px;background:var(--brass)}
.bul li strong{color:var(--ink)}

/* ---------- title block (home hero) ---------- */
.hero{padding-top:44px}
.hero h1{max-width:17ch}
.hero .lede{font-size:1.1rem;color:var(--ink-2);max-width:54ch;margin-top:18px}
/* the one photograph above the fold: a finished structural shell, so the page
   shows a house before it starts making claims about how one gets built */
.hero-shot{margin-top:32px;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
/* The banner shape lives in the FILE, not in this rule. At full 16:9 the
   photograph pushed the published-rate block clean off the first screen, and
   that block is what the page is actually arguing with. Cropping the file
   instead of capping it here means the hero is the right shape even when a
   browser is still holding an older copy of this stylesheet. */
.hero-shot img{width:100%;height:auto;display:block}
.hero-shot figcaption{padding:10px 16px;font-size:.84rem;color:var(--mute);font-family:Archivo;border-top:1px solid var(--rule)}
.tblock{margin-top:28px;border:1.5px solid var(--brass);background:var(--paper-2);border-radius:var(--radius);overflow:hidden}
.tblock-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;padding:13px 20px;background:rgba(184,145,74,.16);border-bottom:1.5px solid var(--brass)}
.tblock-head b{font-family:Archivo;font-size:.84rem;font-weight:700;letter-spacing:.06em}
.tblock-head span{font-size:.78rem;color:var(--mute);font-family:Archivo}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.cell{background:var(--paper-2);padding:16px 20px;min-height:78px}
.cell .k{font-size:.7rem;font-weight:600;color:var(--mute);margin-bottom:5px}
.cell .v{font-family:Archivo;font-size:1rem;font-weight:600;line-height:1.25}
.cell .v small{font-family:"Source Serif 4",serif;font-weight:400;font-size:.82rem;color:var(--mute)}
.cell.wide{grid-column:1 / -1}
.cell .rate{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--brass-ink)}
@media(min-width:720px){.tgrid{grid-template-columns:repeat(4,1fr)}.cell.wide{grid-column:span 2}}

/* ---------- numbered schedule (process stages, steps) ---------- */
.sched,.steps,.stages{border-top:2px solid var(--brass);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);background:var(--paper);border-radius:var(--radius);padding:4px 22px}
.sec.alt .sched,.sec.alt .steps{background:var(--paper)}
.row,.step{display:grid;grid-template-columns:2.4rem 1fr;column-gap:12px;row-gap:3px;padding:16px 0;border-bottom:1px solid var(--rule-soft);align-items:start}
.row:last-child,.step:last-child{border-bottom:0}
.row .n{grid-column:1;grid-row:1;font-size:.76rem;font-weight:700;color:var(--brass-ink);padding-top:4px}
.row h3{grid-column:2;grid-row:1}
.row p{grid-column:2;grid-row:2;margin:3px 0 0;font-size:.97rem;max-width:64ch}
@media(min-width:800px){
  .row{grid-template-columns:2.6rem 13rem 1fr;column-gap:22px;align-items:baseline}
  .row p{grid-column:3;grid-row:1;margin:0}
}
/* A sample of the document a step produces, shown inline against that step.
   Deliberately not a link: the full-size, openable copies live in the block
   below the list, and these are here as a glance, not a second viewer. */
.row-doc{grid-column:2;grid-row:3;margin-top:10px;width:132px;border:1px solid var(--rule);
  border-top:3px solid var(--brass);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.row-doc img{width:100%;height:auto;display:block}
@media(min-width:800px){.row-doc{grid-column:3;grid-row:2;margin-top:12px}}

.steps{counter-reset:s}
.step{grid-template-columns:2.4rem 1fr}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:Archivo;font-size:.76rem;font-weight:700;color:var(--brass-ink);padding-top:4px}
.step>div{min-width:0}
.step p{margin:5px 0 0;font-size:.96rem;color:var(--ink-2);max-width:64ch}

/* process page: per-stage sections */
.stage{padding:34px 0;border-top:1px solid var(--rule-soft)}
.stage .num{display:block;font-family:Archivo;font-size:.76rem;font-weight:700;color:var(--brass-ink);margin-bottom:7px}
.stage .body{color:var(--ink-2);margin-top:12px;max-width:64ch}
.out{margin-top:18px;border:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius-sm);padding:16px 20px}
.out b{display:block;font-family:Archivo;font-size:.74rem;font-weight:700;color:var(--brass-ink);margin-bottom:5px}
.out p{margin:0;font-size:.94rem;color:var(--ink-2)}
.stops{margin-top:14px;font-size:.94rem;color:var(--ink-2);border-left:4px solid var(--brass);background:var(--paper-3);border-radius:var(--radius-sm);padding:13px 18px;max-width:64ch}
.stops b{color:var(--ink);font-weight:600}

/* ---------- rates ---------- */
.rates,.tiers{display:grid;gap:26px;margin-top:4px}
@media(min-width:720px){.rates,.tiers{grid-template-columns:1fr 1fr;gap:30px}}
.rate-blk,.tier,.pk{border-top:3px solid var(--brass);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);padding:24px 26px}
.sec.alt .rate-blk,.sec.alt .tier{background:var(--paper)}
.tier.lead,.pk.lead{border-color:var(--ink);border-width:1.5px}
.rate-blk h3,.tier h3,.pk h3{margin-bottom:12px}
.dim{position:relative;padding:0 0 12px}
.dim .fig,.pk-rate,.tier .rate,.price{font-family:Archivo;font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--brass-ink)}
.dim .fig small,.pk-rate small,.tier .rate small{font-family:Archivo;font-size:.76rem;font-weight:500;color:var(--mute);letter-spacing:0}
.dimline{position:relative;height:11px;margin-top:9px;border-bottom:2px solid var(--brass)}
.dimline::before,.dimline::after{content:"";position:absolute;bottom:0;width:2px;height:11px;background:var(--brass)}
.dimline::before{left:0}
.dimline::after{right:0}
.tagline,.tag{display:inline-block;font-family:Archivo;font-size:.74rem;font-weight:600;color:var(--brass-ink);margin-bottom:8px}
.pk-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sum{color:var(--ink-2);margin:16px 0 0;max-width:62ch}
.spec{margin:20px 0 0}
.spec h4{font-family:Archivo;font-size:.76rem;font-weight:700;color:var(--brass-ink);margin-bottom:10px}
.spec dl{display:grid;grid-template-columns:1fr;margin:0;font-size:.94rem}
.spec dt{font-family:Archivo;font-size:.82rem;font-weight:600;color:var(--ink);padding-top:11px;border-top:1px solid var(--rule-soft)}
.spec dd{margin:2px 0 11px;color:var(--ink-2)}
@media(min-width:680px){
  .spec dl{grid-template-columns:150px 1fr;column-gap:20px}
  .spec dd{margin:0;padding:11px 0;border-top:1px solid var(--rule-soft)}
}
.excl{margin-top:18px;border-left:4px solid var(--brass);background:var(--paper-3);border-radius:var(--radius-sm);padding:14px 18px;font-size:.94rem;color:var(--ink-2)}

/* ---------- notes ---------- */
.note{font-size:.94rem;color:var(--ink-2);background:var(--paper-3);border-left:4px solid var(--brass);border-radius:var(--radius-sm);padding:16px 22px;margin-top:24px;max-width:64ch}
.sec.alt .note{background:var(--paper)}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl-scroll table{min-width:680px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{font-family:Archivo;font-size:.82rem;font-weight:600;border-bottom:2px solid var(--brass);background:rgba(184,145,74,.14)}
thead th.us{color:var(--brass-ink)}
tbody th{font-family:Archivo;font-weight:500;font-size:.88rem;color:var(--mute);width:26%}
td{color:var(--ink-2)}
td.us{background:rgba(184,145,74,.16);color:var(--ink)}
.pay,.tbl{max-width:460px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.pay td:last-child,.tbl td:last-child,.pay th:last-child,.tbl th:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-family:Archivo;font-weight:600}
.cols{display:grid;gap:34px}
@media(min-width:780px){.cols{grid-template-columns:1fr 1fr}}

/* ---------- FAQ ---------- */
.qa,.q{border-top:1px solid var(--rule-soft);padding:22px 0}
.qa:first-of-type,.q:first-of-type{border-top:0;padding-top:0}
.qa h3,.q h3{margin-bottom:8px;font-size:1.05rem}
.qa p,.q p{color:var(--ink-2);margin:0 0 10px;max-width:66ch;font-size:.97rem}
.qa p:last-child,.q p:last-child{margin-bottom:0}
.faq{border-top:2px solid var(--brass);margin-top:36px;padding-top:28px}

/* ---------- about / stats ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin-top:30px}
.fact{background:var(--paper-2);padding:18px 20px}
.fact b{display:block;font-family:Archivo;font-size:1.6rem;font-weight:700;color:var(--brass-ink);line-height:1}
.fact span{display:block;font-size:.84rem;color:var(--mute);margin-top:7px;line-height:1.45}
@media(min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}
.pts{display:grid;gap:18px;margin-top:24px}
@media(min-width:720px){.pts{grid-template-columns:1fr 1fr}}
.pt{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px}
.pt p{margin:7px 0 0;font-size:.95rem;color:var(--ink-2)}

/* ---------- consultation ---------- */
.consult{border:1.5px solid var(--brass);background:var(--paper);padding:28px 26px;border-radius:var(--radius)}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:28px;padding:24px 26px;border:1.5px solid var(--brass);background:var(--paper-2);border-radius:var(--radius)}
.price-row span{color:var(--ink-2);font-size:.96rem;max-width:36ch}
.fit{display:grid;gap:20px;margin-top:4px}
@media(min-width:720px){.fit{grid-template-columns:1fr 1fr}}
.fit-col{border:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);padding:22px 24px}
.fit-col h3{margin-bottom:10px}

/* ---------- contact ---------- */
.ways{display:grid;gap:14px;margin-top:30px}
@media(min-width:720px){.ways{grid-template-columns:1fr 1fr}}
.way{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px;text-decoration:none;display:block}
.way:hover{border-color:var(--ink)}
.way b{display:block;font-family:Archivo;font-size:.72rem;font-weight:700;color:var(--brass-ink);margin-bottom:7px}
.way .val{font-family:Archivo;font-size:1.08rem;font-weight:600}
.way .sub{font-size:.88rem;color:var(--mute);margin-top:6px}
.ask,.addr{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 24px;margin-top:20px}
.addr p{margin:0 0 6px}
.addr .m{color:var(--ink-2);font-size:.95rem}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.areas span{font-family:Archivo;font-size:.85rem;font-weight:500;color:var(--ink-2);border:1px solid var(--rule);background:var(--paper-2);padding:7px 13px;border-radius:999px}
.areas span.home{color:var(--brass-ink);border-color:var(--brass)}

/* ---------- projects ---------- */
.projs{display:grid;gap:22px}
@media(min-width:720px){.projs{grid-template-columns:1fr 1fr}}
.proj{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);overflow:hidden}
a.proj:hover{border-color:var(--brass)}
a.proj:hover h3{color:var(--brass-ink)}
.proj figure{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper-3)}
.proj figure img{width:100%;height:100%;object-fit:cover;display:block}
.proj-go{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-soft);font-family:Archivo;font-size:.8rem;font-weight:600;color:var(--brass-ink)}
.proj.is-soon{opacity:.6;border-style:dashed}
.ph{aspect-ratio:4/3;background:var(--paper-3);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--mute);font-size:.84rem;padding:20px;border-bottom:1px solid var(--rule)}
.proj-b{padding:20px 22px}
.proj dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:12px 0 0;font-size:.9rem}
.proj dt{font-family:Archivo;font-size:.78rem;font-weight:600;color:var(--mute);padding-top:2px}
.proj dd{margin:0;color:var(--ink-2)}
.slot{border:1px dashed var(--brass);background:rgba(184,145,74,.09);color:var(--brass-ink);padding:15px 20px;font-size:.88rem;margin-top:18px;border-radius:var(--radius-sm)}

/* ---------- blog ---------- */
.post{display:block;text-decoration:none;padding:20px 0;border-top:1px solid var(--rule-soft)}
.post:first-of-type{border-top:0;padding-top:0}
.post h2{font-size:1.14rem;margin-bottom:0}
.post:hover h2{color:var(--brass-ink)}
.post p{color:var(--ink-2);font-size:.95rem;margin:8px 0 0;max-width:64ch}
.post .read{font-family:Archivo;font-size:.82rem;font-weight:600;color:var(--brass-ink);margin-top:9px;display:block}
.grp>h3{font-family:Archivo;font-size:.78rem;font-weight:700;color:var(--brass-ink);margin-bottom:18px}
article h2{margin:36px 0 12px}
article h3{margin:24px 0 8px}
article p{color:var(--ink-2)}
.ours{border:1.5px solid var(--brass);background:var(--paper-2);border-radius:var(--radius);padding:24px 26px;margin:30px 0}
.ours h3{margin:0 0 6px}
.ours .rr{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;margin:16px 0}
.ours .rr div{background:var(--paper);padding:16px 18px}
.ours .rr b{display:block;font-family:Archivo;font-size:1.4rem;font-weight:700;line-height:1}
.ours .rr b small{font-family:Archivo;font-size:.68rem;font-weight:500;color:var(--mute)}
.ours .rr span{display:block;font-size:.84rem;color:var(--mute);margin-top:7px}
.ours p{margin:0 0 .9rem;font-size:.96rem}
.ours p:last-child{margin-bottom:0}

/* ---------- cta ---------- */
.cta{border-top:2px solid var(--brass);padding-top:40px;padding-bottom:48px}
.cta h2{margin-top:0;margin-bottom:12px}
.cta p{color:var(--ink-2);max-width:54ch}

/* ---------- footer ---------- */
.ft{background:var(--paper-2);border-top:3px solid var(--brass);padding:44px 0 28px;font-size:.92rem;color:var(--ink-2)}
.ft-grid{display:grid;gap:26px;margin-bottom:26px}
@media(min-width:760px){.ft-grid{grid-template-columns:1.5fr 1fr 1.3fr}}
.ft h4{font-family:Archivo;font-size:.76rem;font-weight:700;color:var(--brass-ink);margin:0 0 11px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{padding:4px 0}
.ft a{text-decoration:none}
.ft a:hover{color:var(--brass-ink)}
.ft p{max-width:38ch;margin:12px 0 0}
.ft-legal,.legal{border-top:1px solid var(--rule);padding-top:18px;font-size:.82rem;color:var(--mute)}

/* ---------- lead form ---------- */
.lead{border:1.5px solid var(--brass);background:var(--paper-2);border-radius:var(--radius);padding:26px 24px;margin-top:26px}
.lead h3{margin-bottom:6px}
.lead > p{color:var(--ink-2);font-size:.96rem;margin-bottom:20px}
.fgrid{display:grid;gap:16px}
@media(min-width:680px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1 / -1}}
.field label{display:block;font-family:Archivo;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field label .opt{color:var(--mute);font-weight:500}
.field input,.field select,.field textarea{
  width:100%;font-family:"Source Serif 4",Georgia,serif;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:12px 14px;min-height:48px;
}
.field textarea{min-height:104px;resize:vertical}
.field select{font-family:Archivo;font-size:.95rem;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass-ink);outline-offset:1px;border-color:var(--brass)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead .btn{margin-top:18px;width:100%}
/* After a successful send the form is replaced by a short message; give it
   room so it does not read as a collapsed box. */
.lead.is-done,.lead-mini.is-done{padding:40px 24px}
.lead.is-done h3{margin-bottom:10px}
.lead.is-done > p{margin-bottom:0}
.lead.is-done h3:focus{outline:none}
.lead.is-done h3:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
@media(min-width:680px){.lead .btn{width:auto;min-width:180px}}
.form-note{font-size:.86rem;color:var(--mute);margin:14px 0 0}
.form-status{font-size:.92rem;margin:14px 0 0;min-height:1.2em}
.form-status.is-error{color:#8E2F1C;font-weight:600}

/* ---------- floating contact ---------- */
.float{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.float a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  box-shadow:0 2px 10px rgba(26,26,23,.22);border:1px solid rgba(26,26,23,.12);text-decoration:none}
.float a:hover{transform:translateY(-1px)}
.float .wa{background:#25D366}
.float .tel{background:var(--ink)}
.float svg{width:25px;height:25px;display:block}
.float .wa svg{fill:#fff}
.float .tel svg{fill:var(--paper)}
.float a:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px}
@media(min-width:720px){.float{right:24px;bottom:24px}}
@media print{.float{display:none}}
body{padding-bottom:84px}
@media(min-width:720px){body{padding-bottom:0}}

/* ---------- compact form ---------- */
.lead-mini{border:1.5px solid var(--brass);background:var(--paper-2);border-radius:var(--radius);padding:22px 24px}
.sec.alt .lead-mini{background:var(--paper)}
.mini-head{margin-bottom:16px}
.mini-head h3{font-size:1.1rem;margin-bottom:5px}
.mini-head p{color:var(--ink-2);font-size:.95rem;margin:0;max-width:58ch}
.fgrid-mini{display:grid;gap:14px}
@media(min-width:600px){.fgrid-mini{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.fgrid-mini{grid-template-columns:repeat(4,1fr)}}
.lead-mini .btn{margin-top:15px}
.lead-mini .form-status{margin-top:12px}

/* ---------- project index ---------- */
.pgrid{display:grid;gap:22px}
@media(min-width:680px){.pgrid{grid-template-columns:1fr 1fr}}
.pcard{display:block;text-decoration:none;border:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);overflow:hidden}
.pcard:hover{border-color:var(--brass)}
a.pcard:hover h3{color:var(--brass-ink)}
.pcard.is-soon{opacity:.6;border-style:dashed}
.pcard .ph{aspect-ratio:4/3;margin:0;border-radius:0;border:0;border-bottom:1px solid var(--rule)}
.pcard-b{padding:18px 20px}
.pcard .kind{font-family:Archivo;font-size:.72rem;font-weight:700;color:var(--brass-ink);margin-bottom:6px}
.pcard h3{font-size:1.08rem;margin-bottom:4px}
.pcard .where{font-size:.9rem;color:var(--mute)}
.pcard .facts-line{font-family:Archivo;font-size:.82rem;color:var(--ink-2);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-soft)}

/* ---------- project detail ---------- */
.specbar{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1.5px solid var(--brass);border-radius:var(--radius);overflow:hidden;margin-top:28px}
.specbar div{background:var(--paper-2);padding:15px 18px}
.specbar dt{font-family:Archivo;font-size:.7rem;font-weight:600;color:var(--mute);margin-bottom:5px}
.specbar dd{margin:0;font-family:Archivo;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.3}
.specbar dd small{font-family:"Source Serif 4",serif;font-weight:400;font-size:.82rem;color:var(--mute);display:block;margin-top:3px}
@media(min-width:760px){.specbar{grid-template-columns:repeat(4,1fr)}}
.ontime dd{color:var(--brass-ink)}

.story{max-width:68ch}
.story p{color:var(--ink-2)}
.story p:first-of-type{font-size:1.06rem;color:var(--ink)}

/* stage-wise photo record */
.stagelog{border-top:2px solid var(--brass);margin-top:8px}
.slog{padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.slog:last-child{border-bottom:0}
.slog-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.slog-head .n{font-family:Archivo;font-size:.76rem;font-weight:700;color:var(--brass-ink)}
.slog-head h3{font-size:1.06rem}
.slog > p{color:var(--ink-2);font-size:.97rem;max-width:66ch;margin:0 0 16px}
.shots{display:grid;gap:14px}
/* A photo row that follows another block sat flush against it: both are
   bordered cards, so they read as one broken box. Sibling margins collapse,
   so where a paragraph already provides the space this adds nothing. */
* + .shots{margin-top:22px}
@media(min-width:620px){.shots{grid-template-columns:1fr 1fr}}
.shot{border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2)}
.shot img{width:100%;height:auto;display:block}
.shot .ph{aspect-ratio:4/3;margin:0;border:0;border-radius:0;border-bottom:1px solid var(--rule)}
.shot figcaption{padding:10px 14px;font-size:.84rem;color:var(--mute);font-family:Archivo}
/* a stage with a single photograph takes the full width rather than half */
@media(min-width:620px){.shots.one{grid-template-columns:1fr}.shots.one .shot{max-width:72%}}
/* three photographs sit two-up on a tablet and three-up on a desktop, so the
   row never leaves a single orphan stretched across half the page */
@media(min-width:960px){.shots.three{grid-template-columns:repeat(3,1fr)}}
figure{margin:0}

/* ---------- proof documents ---------- */
.docs{display:grid;gap:18px;margin:22px 0 10px}
@media(min-width:720px){.docs{grid-template-columns:repeat(3,1fr)}
  /* A single document shouldn't stretch to a third of the row and shouldn't
     fill it either — give it one column's width, left-aligned. */
  .docs.one{grid-template-columns:minmax(0,1fr) 2fr}
  .docs.one .doc:only-child{grid-column:1}}
.doc{border:1px solid var(--rule);border-top:3px solid var(--brass);border-radius:var(--radius);overflow:hidden;background:#fff}
.doc > a{display:block;aspect-ratio:1/1.12;overflow:hidden;border-bottom:1px solid var(--rule);background:#fff}
.doc img{width:100%;height:auto;display:block;transition:transform .35s ease}
.doc:hover{border-color:var(--brass)}
.doc:hover img{transform:scale(1.03)}
.doc figcaption{padding:14px 16px;font-family:Archivo}
.doc figcaption b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:5px}
.doc figcaption span{display:block;font-size:.82rem;color:var(--mute);line-height:1.5}
.docs-note{font-family:Archivo;font-size:.8rem;color:var(--mute);margin:0 0 20px}

/* full-size document viewer */
.lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:none;overflow:hidden;background:rgba(18,18,15,.92)}
.lb-scroll{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 14px 60px}
.lb.is-open{display:block}
.lb-on .float{opacity:0;pointer-events:none}
.lb-img{display:block;margin:0 auto;width:100%;max-width:min(960px,96vw);height:auto;background:#fff;border-radius:6px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.lb-cap{max-width:min(960px,96vw);margin:14px auto 0;font-family:Archivo;font-size:.86rem;font-weight:600;color:#F0EFE9;text-align:center}
.lb-close{position:fixed;top:12px;right:12px;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.5);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(0,0,0,.75)}

/* lead photograph at the head of a project page */
.leadshot{margin-top:30px;border:1px solid var(--rule);border-top:3px solid var(--brass);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.leadshot img{width:100%;height:auto;display:block}
.leadshot figcaption{padding:12px 18px;font-size:.86rem;color:var(--mute);font-family:Archivo}

/* photograph inside a project card */
.pcard figure{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper-3)}
.pcard figure img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- reviews ---------- */
.revs{display:grid;gap:20px}
@media(min-width:760px){.revs{grid-template-columns:1fr 1fr}}
.rev{border-top:3px solid var(--brass);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);padding:24px 26px}
.sec.alt .rev{background:var(--paper)}
.rev .stars{font-family:Archivo;font-size:.9rem;color:var(--brass-ink);letter-spacing:.14em;margin-bottom:12px}
.rev blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.rev figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-soft);font-family:Archivo;font-size:.84rem;color:var(--mute)}
.rev figcaption b{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:2px}