/* Structura — one ground (paper), one ink, one accent (moss). Archivo for everything, Syncopate for the wordmark only. */
:root{
  --paper:#efeee9;--stone:#dcdcd5;--ink:#0f1211;--moss:#24302a;--moss-2:#2f3e36;--soft:#3c4440;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;--mark:"Syncopate","Archivo",sans-serif;
  --m:clamp(18px,3vw,48px);--gap:clamp(120px,13vw,220px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px}.skip:focus{left:8px}
.wrap{padding-inline:var(--m);max-width:1680px;margin:0 auto}

/* type scale: display / heading / body */
.d1{font:500 clamp(52px,8.2vw,148px)/.9 var(--sans);font-stretch:88%;letter-spacing:-.045em;margin:0}
.h2{font:500 clamp(36px,4.6vw,80px)/.98 var(--sans);font-stretch:90%;letter-spacing:-.035em;margin:0 0 24px;max-width:16ch}
.h3{font:500 clamp(24px,2.1vw,34px)/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 12px}
.lead{font-size:clamp(19px,1.45vw,23px);line-height:1.45;max-width:44ch;margin:0}
p{margin:0 0 16px}

/* buttons + links */
.btn{display:inline-flex;align-items:center;gap:16px;padding:19px 28px;background:var(--moss);color:var(--paper);font:500 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--ink)}
.btn svg{width:17px;height:11px;transition:transform .2s}.btn:hover svg{transform:translateX(4px)}
.btn[disabled]{opacity:.6;cursor:wait}
.ul{font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ul:hover{text-decoration-thickness:2px}

/* nav */
.nav{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--m)}
.brand{display:inline-flex;align-items:center;gap:13px;font:700 17px/1 var(--mark);letter-spacing:.14em;text-decoration:none}
.brand i,.fmark i{display:block;width:18px;height:32px;background:currentColor;-webkit-mask:url(img/structura-mark-ink.svg) center/contain no-repeat;mask:url(img/structura-mark-ink.svg) center/contain no-repeat}
.links{display:flex;gap:clamp(22px,2.6vw,44px);font-size:16px}
.links a{text-decoration:none}.links a:hover{text-decoration:underline;text-underline-offset:5px}
.nav .btn{padding:14px 20px;font-size:15px}
@media (max-width:900px){.links{display:none}}
@media (max-width:420px){.nav .btn{display:none}}

/* hero: text on paper, one dominant photograph bleeding to the right edge */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100vh;min-height:100svh}
.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:150px var(--m) clamp(48px,6vw,96px)}
.hero-copy .lead{margin:clamp(28px,3vw,44px) 0 40px}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.hero-img{position:relative;margin:96px 0 0;background:var(--ink)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-top:120px;order:1}
  .hero-img{order:2;aspect-ratio:4/4.4;margin:0}
}

/* facts under the hero: plain numbers-free statements */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-block:clamp(56px,6vw,96px)}
.facts b{display:block;font:500 clamp(22px,1.9vw,30px)/1.15 var(--sans);letter-spacing:-.015em;margin-bottom:10px}
.facts span{display:block;max-width:34ch}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* services: stone field, alternating picture and text */
.services{background:var(--stone);padding-block:var(--gap)}
.services .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--m);align-items:end;margin-bottom:clamp(64px,7vw,120px)}
.services .top p{max-width:46ch;margin:0}
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--m);align-items:center}
.svc+.svc{margin-top:clamp(72px,8vw,140px)}
.svc figure{margin:0;grid-column:1/8}
.svc figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.svc .txt{grid-column:9/13}
.svc.flip figure{grid-column:6/13;order:2}
.svc.flip .txt{grid-column:1/5;order:1}
.svc.tall figure img{aspect-ratio:4/5}
.svc.tall figure{grid-column:2/7}
.svc.tall .txt{grid-column:8/12}
.svc.flip.tall figure{grid-column:7/12;order:2}
.svc.flip.tall .txt{grid-column:2/6;order:1}
.svc ul{list-style:none;padding:0;margin:20px 0 0}
.svc li{padding:6px 0}
.svc li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--moss);margin:0 14px 2px 0}
@media (max-width:900px){
  .services .top{grid-template-columns:1fr}
  .svc,.svc.flip,.svc.tall{grid-template-columns:1fr}
  .svc figure,.svc .txt,.svc.flip figure,.svc.flip .txt,.svc.tall figure,.svc.tall .txt{grid-column:1/-1;order:0}
}

/* statement band: photograph left, moss field right */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--moss);color:var(--paper)}
.band figure{margin:0;min-height:72vh;position:relative}
.band figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,120px) var(--m)}
.band .h2{max-width:13ch}
.band p{max-width:42ch;color:#dfe3dd}
@media (max-width:900px){.band{grid-template-columns:1fr}.band figure{min-height:0;aspect-ratio:4/3}}

/* story: text left, photograph + mark right (Domos layout) */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,128px);align-items:center;padding-block:var(--gap)}
.story .body{max-width:56ch}
.story .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:clamp(36px,4vw,56px)}
.story .three b{display:block;font:500 22px/1.15 var(--sans);letter-spacing:-.01em;margin-bottom:8px}
.dip{margin:0}
.dip .pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dip .cell{aspect-ratio:720/1290;background:var(--ink);overflow:hidden}
.dip .cell img{width:100%;height:100%;object-fit:cover}
.dip .cell.mk img{object-fit:contain}
.dip figcaption{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:14px;font-size:15px}
@media (max-width:900px){.story{grid-template-columns:1fr}.dip{max-width:560px}}
@media (max-width:560px){.story .three{grid-template-columns:1fr}}

/* process: ink field, steps as a large reading list */
.process{background:var(--ink);color:var(--paper);padding-block:var(--gap)}
.process .h2{max-width:none}
.steps{list-style:none;margin:clamp(56px,6vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.steps li{background:#1a1e1c;padding:28px 24px 32px;min-height:260px;display:flex;flex-direction:column}
.steps li:nth-child(2){background:#1f2421}.steps li:nth-child(3){background:#232a26}.steps li:nth-child(4){background:#28302b}.steps li:nth-child(5){background:var(--moss)}
.steps b{font:500 clamp(22px,1.7vw,28px)/1.1 var(--sans);letter-spacing:-.015em;margin-bottom:auto;padding-bottom:28px}
.steps span{color:#cfd4ce;font-size:16px}
@media (max-width:1100px){.steps{grid-template-columns:1fr 1fr}.steps li{min-height:0}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* request builder */
.req{padding-block:var(--gap)}
.req .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--m);align-items:end;margin-bottom:clamp(48px,5vw,80px)}
.req .top p{max-width:46ch;margin:0}
.builder{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,72px);align-items:start}
.q{border:0;margin:0 0 40px;padding:0}
.q legend,.q .lab{display:block;font:500 20px/1.2 var(--sans);margin-bottom:16px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:block;padding:14px 20px;background:var(--stone);font-size:16px;transition:background .15s,color .15s;user-select:none}
.opt input:hover+span{background:#d0d0c8}
.opt input:checked+span{background:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.fields .full{grid-column:1/-1}
.fields label{display:grid;gap:8px;font-size:16px;font-weight:500}
input[type=text],input[type=tel],input[type=email],input[type=number],textarea{font:400 18px/1.4 var(--sans);color:var(--ink);background:#fff;border:0;border-radius:0;padding:15px 16px;width:100%;min-width:0}
input:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0}
textarea{min-height:110px;resize:vertical}
.m2{display:flex;align-items:center;gap:18px}
.m2 input[type=range]{flex:1;accent-color:var(--moss)}
.m2 output{font:500 22px/1 var(--sans);min-width:92px;text-align:right}
.hp{position:absolute;left:-9999px}
.summary{position:sticky;top:24px;background:var(--moss);color:var(--paper);padding:clamp(28px,3vw,44px)}
.summary .h3{margin-bottom:6px}
.summary .sub{color:#d6dbd5;font-size:16px;margin-bottom:24px}
.summary ul{list-style:none;padding:0;margin:0 0 28px}
.summary li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;background:linear-gradient(var(--moss-2),var(--moss-2)) bottom/100% 1px no-repeat}
.summary li em{font-style:normal;color:#d6dbd5}
.summary .btn{background:var(--paper);color:var(--ink);width:100%;justify-content:space-between}
.summary .btn:hover{background:#fff}
.summary .small{font-size:14px;color:#cfd4ce;margin:16px 0 0}
.summary .small a{color:inherit}
.status{margin:18px 0 0;padding:14px 16px;background:var(--moss-2);font-size:16px}
.status.err{background:#5a2b25}
@media (max-width:1000px){.req .top,.builder{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:560px){.fields{grid-template-columns:1fr}}

/* faq */
.faq{background:var(--stone);padding-block:var(--gap)}
.faq .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--m)}
details{background:var(--paper);margin-bottom:8px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 26px;font:500 20px/1.3 var(--sans)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:26px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 26px 24px;max-width:62ch;margin:0}
@media (max-width:900px){.faq .grid{grid-template-columns:1fr}}

/* contact strip + footer */
.contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m);padding-block:clamp(64px,7vw,110px)}
.contact b{display:block;font-size:15px;font-weight:500;margin-bottom:8px;color:var(--soft)}
.contact a{text-decoration:none}.contact a:hover{text-decoration:underline}
@media (max-width:800px){.contact{grid-template-columns:1fr 1fr}}
footer{background:var(--ink);color:var(--paper);padding:clamp(56px,6vw,96px) 0 28px;overflow:hidden}
.fmark{display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,28px);text-decoration:none}
.fmark i{width:clamp(46px,7.4vw,134px);height:clamp(82px,13.2vw,240px)}
.fmark span{font:700 clamp(40px,10.6vw,196px)/.8 var(--mark);letter-spacing:.06em;white-space:nowrap}
.fline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(40px,5vw,72px);font-size:15px;color:#b9bfba}
.fline nav{display:flex;gap:24px}.fline a{text-decoration:none}.fline a:hover{text-decoration:underline}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:150px var(--m) 110px}
.legal .h2{max-width:none}
.legal h2{font:500 22px/1.3 var(--sans);margin:36px 0 10px}
.plain .nav{position:static}

/* entrance motion (only when JS is running) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---- v2.1: apartments, bathrooms, trades ---- */
.cols{columns:2;column-gap:32px}
.cols li{break-inside:avoid}
ul.cols{list-style:none;padding:0;margin:20px 0 0}
ul.cols li{padding:6px 0}
ul.cols li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--moss);margin:0 14px 2px 0}
.build{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--m);align-items:end}
.build figure{margin:0}.build img{width:100%;object-fit:cover}
.build .b1{grid-column:1/8}.build .b1 img{aspect-ratio:3/2}
.build .b2{grid-column:8/13}.build .b2 img{aspect-ratio:4/5}
.build .txt{grid-column:1/8;margin-top:clamp(12px,2vw,24px)}
@media (max-width:900px){.build{grid-template-columns:1fr 1fr}.build .b1{grid-column:1/-1}.build .b2{grid-column:1/-1}.build .txt{grid-column:1/-1}.build .b2 img{aspect-ratio:4/3}}

.baths{background:var(--ink);color:var(--paper);padding-block:var(--gap)}
.baths .bt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--m);align-items:start;margin-bottom:clamp(56px,6vw,96px)}
.baths .h2{max-width:12ch}
.baths p{max-width:50ch;color:#dfe3dd}
.baths ul.cols li::before{background:var(--paper)}
.bgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:clamp(8px,1vw,16px)}
.bgrid figure{margin:0;overflow:hidden}.bgrid img{width:100%;height:100%;object-fit:cover}
.bgrid .g1{grid-column:1/6;grid-row:1/3}
.bgrid .g2{grid-column:6/9}.bgrid .g2 img,.bgrid .g3 img{aspect-ratio:1}
.bgrid .g3{grid-column:9/13}
.bgrid .g4{grid-column:6/13}.bgrid .g4 img{aspect-ratio:2.1/1}
@media (max-width:900px){.baths .bt{grid-template-columns:1fr}.bgrid{grid-template-columns:1fr 1fr}.bgrid .g1,.bgrid .g4{grid-column:1/-1;grid-row:auto}.bgrid .g2,.bgrid .g3{grid-column:auto}.bgrid .g1 img{aspect-ratio:4/5}.bgrid .g4 img{aspect-ratio:3/2}}

.trades{padding-block:var(--gap)}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);margin-top:clamp(80px,9vw,150px);align-items:start}
.quad .col>article+article{margin-top:clamp(56px,6vw,96px)}
.quad .off{padding-top:clamp(80px,12vw,200px)}
.quad figure{margin:0 0 22px}.quad img{width:100%;object-fit:cover}
.quad .q1 img,.quad .q4 img{aspect-ratio:4/5}
.quad .q2 img,.quad .q3 img{aspect-ratio:5/4}
.quad p{max-width:44ch}
@media (max-width:760px){.quad{grid-template-columns:1fr}.quad .off{padding-top:0}.quad .col+.col{margin-top:56px}}
.baths .bt ul.cols{margin-bottom:28px}
@media (max-width:560px){.cols{columns:1}}