/* Casa Narrative · Phase 1 (03-11-26): header, Project tab, Contact, Trade sign-up, Home page.
   Brown #5A3B29, cream #EDE6DA. Hairlines, no shadows, no rounded buttons. */
:root{--cb:#5A3B29;--cc:#EDE6DA;--hair:rgba(42,32,24,.16)}
.spg{background:var(--cb)!important;height:1px}

/* ---- header ---- */
nav.top ul{display:flex}
nav.top ul a{position:relative;padding:6px 0}
nav.top ul a[aria-current="page"]::after,nav.top ul a:hover::after{content:"";position:absolute;left:0;right:.3em;bottom:0;height:1px;background:currentColor;opacity:.7}
.mnb{display:none;background:none;border:1px solid rgba(241,234,223,.45);color:#F1EADF;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:12px 12px;cursor:pointer;min-height:44px}
.mnp{position:fixed;inset:0;z-index:140;background:var(--cc);display:flex;flex-direction:column;justify-content:center;padding:96px 28px 40px;animation:mnin .4s ease-out}
.mnp[hidden]{display:none}
.mnp nav{display:flex;flex-direction:column;gap:6px}
.mnp nav a{font:300 40px/1.25 var(--serif);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding:8px 0}
.mnp-c{margin-top:28px;font-size:13px;color:var(--mut)}
.mnp-c a{color:var(--ink)}
html.mno{overflow:hidden}
html.mno nav.top{z-index:160}
@keyframes mnin{from{opacity:0}to{opacity:1}}
@media(max-width:1060px){nav.top ul{gap:22px}}
@media(max-width:960px){nav.top ul{display:none}.mnb{display:inline-flex;align-items:center}}
@media(max-width:560px){nav.top>a.btn{display:none!important}}

/* ---- Project tab ---- */
.pjb-btn{order:9;display:inline-flex;align-items:center;gap:10px;background:transparent!important;border:1px solid rgba(241,234,223,.45)!important;color:#F1EADF!important;font:500 10px/1 var(--sans)!important;letter-spacing:.24em;text-transform:uppercase;padding:13px 16px!important;margin:0 0 0 10px!important;cursor:pointer;min-height:44px;max-width:300px;transition:border-color .3s,opacity .3s}
.pjb-btn .pn{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.14em;opacity:.8;text-transform:none;font-size:12px}
.pjb-btn b{margin:0!important;color:#F1EADF!important;font-weight:500;min-width:1.2em;text-align:center}
.pjb-btn.has{border-color:#F1EADF!important}
.pjb-btn.quiet:not(:hover):not(:focus-visible){opacity:.72}
.pjb-btn.bump b{animation:bump .5s ease-out}
@keyframes bump{0%{transform:none}40%{transform:translateY(-4px)}100%{transform:none}}
nav.top .mnb{order:10;margin-left:8px}
@media(max-width:960px){.pjb-btn .pn{display:none}}
@media(max-width:560px){.pjb-btn{padding:12px 11px!important;gap:7px;margin-left:auto!important}}

/* ---- Project panel ---- */
#pjbd{position:fixed;inset:0;z-index:149;background:rgba(42,32,24,.22);opacity:0;pointer-events:none;transition:opacity .4s ease}
#pjbd.o{opacity:1;pointer-events:auto}
#pj{width:min(420px,100vw)!important;background:var(--cc)!important;color:var(--ink);border-left:1px solid var(--hair)!important;transition:transform .4s cubic-bezier(.22,.61,.36,1)!important;box-shadow:none}
#pj .lbl{color:var(--mut)}
.pjh{padding:22px 24px!important;border-bottom:1px solid var(--hair)!important;gap:14px}
.pjn{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.pjs{font:400 22px/1.15 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:2px 22px 4px 0;max-width:100%;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.pjx{font:500 10px/1 var(--sans)!important;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--hair)!important;padding:12px 14px!important;min-height:44px;color:var(--ink)!important}
.pjnew{padding:16px 24px;border-bottom:1px solid var(--hair)}
.pjnew div{display:flex;gap:10px;margin-top:8px}
.pjnew input{flex:1;border:0;border-bottom:1px solid var(--ink);background:transparent;font:16px var(--sans);padding:8px 0;color:var(--ink)}
.pjnew .btn{padding:12px 16px}
.pjb{padding:4px 24px!important}
.pje{padding:28px 0 14px;font-size:15px;line-height:1.6}
.pjr{font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin:22px 0 4px}
.pji{grid-template-columns:56px 1fr auto auto!important;gap:12px!important;padding:14px 0!important;border-bottom:1px solid var(--hair)!important}
.pjim{width:56px;aspect-ratio:4/5;background:var(--bg2);overflow:hidden;display:block}
.pjim img{width:100%;height:100%;object-fit:cover;display:block}
.pji h4{font:400 18px/1.15 var(--serif)!important}
.pjq button{min-width:32px;height:32px;border:1px solid var(--hair)!important}
.pjd{font:500 9.5px/1 var(--sans)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)!important;border:0;padding:8px 0;min-height:32px;background:none;cursor:pointer}
.pjf{padding:18px 24px 24px!important;border-top:1px solid var(--hair)!important;background:var(--cc)}
.pjf .btn{width:100%;justify-content:center}
.pjo{font:500 10px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-align:center;padding:8px 0}
.pjf p{margin:0}
@media(max-width:560px){#pj{width:100vw!important}}

/* ---- footer ---- */
.fc{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-size:13px}
.fc a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(237,230,218,.3);padding-bottom:2px}
.fc a:hover{border-color:currentColor}

/* ---- home: hero ---- */
.hx{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#2a2018;color:#F1EADF}
.hx picture,.hx-img{position:absolute;inset:0;width:100%;height:100%}
.hx-img{object-fit:cover;object-position:50% 60%;transform-origin:50% 55%;animation:drift 20s ease-out forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.03)}}
.hx-sc{position:absolute;inset:0;background:rgba(20,14,10,.28)}
.hx-t{position:absolute;left:max(24px,calc((100vw - 1180px)/2));right:24px;bottom:clamp(56px,11vh,120px);max-width:760px}
.hx-t .lbl{color:#E8DCCB}
.hx-t h1{font:300 clamp(46px,7.2vw,104px)/.98 var(--serif);letter-spacing:-.01em;margin:18px 0 18px;color:#F6F0E6}
.hx-t p{font-size:clamp(15px,1.3vw,18px);max-width:520px;color:#EFE6D8;margin:0}
.hx-t .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hx-t .btn2{border:1px solid rgba(241,234,223,.7);color:#F6F0E6;background:transparent;padding:17px 28px;font:500 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;text-decoration:none}
.hx-t .btn2.hx-a{background:#F1EADF;color:var(--cb);border-color:#F1EADF}
.hx-t .btn2:hover{background:var(--cb);border-color:var(--cb);color:#F6F0E6}
.hx-s{margin-top:20px!important;font-size:12px!important;letter-spacing:.06em;color:#E3D8C6!important}
.hx-vz{position:absolute;right:20px;bottom:18px}
@media(prefers-reduced-motion:reduce){.hx-img{animation:none}}
@media(max-width:560px){.hx-t .cta{flex-direction:column;align-items:stretch}.hx-t .btn2{text-align:center}}

/* ---- trust strip ---- */
.ts{background:var(--cc);border-bottom:1px solid var(--hair)}
.ts ul{list-style:none;margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ts li{font:500 10px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);text-align:center}
.ts li+li{border-left:1px solid var(--hair)}
@media(max-width:860px){.ts ul{grid-template-columns:1fr 1fr;row-gap:18px}.ts li:nth-child(3){border-left:0}}

/* ---- rooms strip ---- */
.rx-g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.rx-c{text-decoration:none;color:var(--ink);display:block}
.rx-i{aspect-ratio:3/2;background:var(--bg2);overflow:hidden;margin-bottom:16px}
.rx-i img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;transition:opacity .8s ease,transform 1.2s ease}
.rx-i img.ld{opacity:1}
.rx-c:hover .rx-i img{transform:scale(1.02)}
.rx-c h3{font:400 24px/1.15 var(--serif);margin:8px 0 6px}
.rx-c p{font-size:13.5px;color:var(--body);margin:0}
@media(max-width:1000px){.rx-g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rx-g{grid-template-columns:1fr;gap:40px}}

/* ---- made for hospitality ---- */
.hp2-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.hp2-i{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg2)}
.hp2-i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.hp2-i:hover img{transform:scale(1.02)}
.hp2-l{margin:30px 0 28px;border-top:1px solid var(--hair)}
.hp2-l div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.hp2-l dt{font:500 10px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.hp2-l dd{margin:0;font-size:14.5px}
@media(max-width:860px){.hp2-g{grid-template-columns:1fr}.hp2-l div{grid-template-columns:1fr;gap:4px}}

/* ---- how it works ---- */
.hw-l{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.hw-l li{border-top:1px solid var(--hair);padding-top:22px}
.hw-l h3{font:400 30px/1.1 var(--serif);margin:14px 0 10px}
.hw-l p{font-size:14.5px;color:var(--body);margin:0 0 16px}
@media(max-width:860px){.hw-l{grid-template-columns:1fr;gap:28px}}

/* ---- trade accounts (home) ---- */
.ac-g{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px 0 36px}
.ac-c{display:block;border:1px solid var(--hair);padding:clamp(26px,4vw,48px);text-decoration:none;color:var(--ink);transition:border-color .3s}
.ac-c:hover{border-color:var(--cb)}
.ac-c h3{font:300 clamp(34px,4vw,52px)/1 var(--serif);margin:16px 0 12px}
.ac-c p{font-size:14.5px;color:var(--body);margin:0 0 18px;max-width:420px}
@media(max-width:700px){.ac-g{grid-template-columns:1fr}}

/* ---- forms (contact, trade) ---- */
.lf{display:flex;flex-direction:column;gap:22px;margin-top:40px}
.lf-2{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.lf-r{display:flex;flex-direction:column;gap:8px}
.lf-r>label,.lf legend{font:500 10px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.lf input:not([type=radio]):not([type=checkbox]),.lf select,.lf textarea{font:16px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(42,32,24,.45);border-radius:0;padding:10px 0;width:100%}
.lf textarea{border:1px solid rgba(42,32,24,.3);padding:12px}
.lf input:focus,.lf select:focus,.lf textarea:focus{outline:none;border-color:var(--cb);box-shadow:0 1px 0 var(--cb)}
.lf [aria-invalid="true"]{border-color:#8a2e1c!important}
.lf-ch{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.lf-ch legend{margin-bottom:12px}
.lf-ch label{cursor:pointer}
.lf-ch input{position:absolute;opacity:0;width:1px;height:1px}
.lf-ch span{display:inline-block;border:1px solid var(--hair);padding:12px 16px;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;min-height:40px}
.lf-ch input:checked+span{border-color:var(--cb);background:var(--cb);color:#F6F0E6}
.lf-ch input:focus-visible+span{outline:2px solid var(--cb);outline-offset:2px}
.lf-cb label{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body);text-transform:none;letter-spacing:0;cursor:pointer}
.lf-cb input{width:18px;height:18px;margin-top:2px;accent-color:var(--cb)}
.lf-h{font-size:12.5px;color:var(--mut)}
.lf-e{color:#8a2e1c;font-size:14px;margin:0}
.lf .btn{align-self:flex-start}
.lf-ok{margin-top:40px;border-top:1px solid var(--hair);padding-top:30px}
.lf-ok:focus{outline:none}
.lf-ok h2,.lf-ok h3{font:300 clamp(30px,3.6vw,44px)/1.05 var(--serif);margin:14px 0 14px}
.lf-s{white-space:pre-wrap;font:13px/1.6 var(--sans);background:rgba(255,255,255,.45);border:1px solid var(--hair);padding:18px;margin:16px 0 22px;color:var(--ink)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){.lf-2{grid-template-columns:1fr}.lf .btn{align-self:stretch;justify-content:center}}

/* ---- contact ---- */
.ct{padding-top:150px}
.ct-g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,110px);align-items:start}
.ct-m h1{font:300 clamp(48px,6.4vw,92px)/.98 var(--serif);margin:20px 0 18px}
.ct-l{font-size:17px;max-width:520px}
.ct-i{position:relative;margin:0 0 34px;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.ct-i img{width:100%;height:100%;object-fit:cover}
.ct-d{margin:0;border-top:1px solid var(--hair)}
.ct-d div{padding:14px 0;border-bottom:1px solid var(--hair)}
.ct-d dt{margin-bottom:6px}
.ct-d dd{margin:0;font-size:15px}
.ct-d a{color:var(--ink)}
.ct-s{display:flex;gap:18px}
@media(max-width:860px){.ct{padding-top:120px}.ct-g{grid-template-columns:1fr}.ct-i{display:none}}

/* ---- trade: join ---- */
.jn{margin:90px 0 40px;border-top:1px solid var(--hair);padding-top:56px}
.jn-h{font:300 clamp(38px,5vw,72px)/1 var(--serif);margin:18px 0 36px}
.jn-c{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.jn-p{text-align:left;background:transparent;border:1px solid var(--hair);padding:clamp(24px,3.5vw,44px);cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,background .3s;font:inherit}
.jn-p b{font:300 clamp(30px,3.4vw,46px)/1 var(--serif)}
.jn-p span:last-child{font-size:14.5px;color:var(--body)}
.jn-p:hover,.jn-p.on{border-color:var(--cb)}
.jn-p.on{background:rgba(90,59,41,.06)}
.jn-f{border-top:1px solid var(--hair);padding-top:30px}
.jn-f h3{font:400 30px/1.1 var(--serif);margin:0}
.jn-b{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:70px;border-top:1px solid var(--hair)}
.jn-b div{padding:24px 24px 24px 0;border-bottom:1px solid var(--hair)}
.jn-b h4{font:400 24px/1.15 var(--serif);margin:10px 0 6px}
.jn-b p{font-size:14px;color:var(--body);margin:0}
.jn-s{margin-top:60px}
.jn-s ol{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:s}
.jn-s li{border-top:1px solid var(--hair);padding-top:18px;font-size:14.5px;color:var(--body);counter-increment:s}
.jn-s li::before{content:"0" counter(s);display:block;font:500 10px/1 var(--sans);letter-spacing:.24em;color:var(--mut);margin-bottom:12px}
.jn-s b{display:block;font:400 26px/1.1 var(--serif);color:var(--ink);margin-bottom:8px;font-weight:400}
.jn-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:70px}
.jn-2 h3{font:300 clamp(30px,3.4vw,44px)/1.05 var(--serif);margin:14px 0 14px}
.jn-2 p{font-size:15px;color:var(--body)}
.jn-q{margin-top:70px;max-width:760px}
.jn-q details{border-bottom:1px solid var(--hair);padding:16px 0}
.jn-q details:first-of-type{border-top:1px solid var(--hair);margin-top:18px}
.jn-q summary{cursor:pointer;font:400 22px/1.2 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:20px}
.jn-q summary::-webkit-details-marker{display:none}
.jn-q summary::after{content:"+";font:300 22px/1 var(--sans);color:var(--mut)}
.jn-q details[open] summary::after{content:"–"}
.jn-q p{margin:12px 0 4px;font-size:15px;color:var(--body)}
@media(max-width:860px){.jn-c,.jn-2{grid-template-columns:1fr}.jn-b{grid-template-columns:1fr 1fr}.jn-s ol{grid-template-columns:1fr}}
@media(max-width:520px){.jn-b{grid-template-columns:1fr}}
.hx .hx-vz{left:auto!important;top:auto!important;right:20px;bottom:18px;width:auto!important}
.lf[hidden],.lf-ok[hidden],.jn-f[hidden]{display:none!important}
.pji .pjo2{display:block;margin-top:5px;font-size:12px;color:var(--mut)}

nav.top .logo{display:inline-flex;align-items:center;gap:14px}nav.top .logo img.nsym{height:64px;width:auto;max-width:none;flex:none;margin:-12px 0}@media (max-width:600px){nav.top .logo img.nsym{height:42px;margin:-6px 0}nav.top .logo{gap:10px}}
nav.top .btn.b{white-space:nowrap}@media (min-width:861px){nav.top .logo{margin-right:28px}}@media (min-width:861px) and (max-width:1240px){nav.top .logo{margin-right:12px}nav.top .logo img.nsym{display:none}}
@media (min-width:861px) and (max-width:1120px){nav.top ul{gap:16px}nav.top ul a{letter-spacing:.12em;font-size:10px}nav.top .btn.b{padding:11px 14px!important;letter-spacing:.16em}.pjb-btn .pn{display:none}}
@media (min-width:1241px){nav.top .logo{margin-right:44px}}
/* hero readability (13-11) */
.hx-sc{background:linear-gradient(180deg,rgba(20,14,10,.55) 0%,rgba(20,14,10,0) 22%,rgba(20,14,10,0) 42%,rgba(20,14,10,.55) 72%,rgba(20,14,10,.86) 100%),linear-gradient(90deg,rgba(20,14,10,.5) 0%,rgba(20,14,10,.15) 45%,rgba(20,14,10,0) 70%)}
.hx-t h1{font-weight:400;text-shadow:0 2px 28px rgba(10,7,5,.35)}
.hx-t p{font-weight:400;text-shadow:0 1px 14px rgba(10,7,5,.5)}
@media(max-aspect-ratio:4/5){.hx-sc{background:linear-gradient(180deg,rgba(20,14,10,.55) 0%,rgba(20,14,10,0) 18%,rgba(20,14,10,.1) 40%,rgba(20,14,10,.72) 62%,rgba(20,14,10,.9) 100%)}}
/* social icons in the top bar (13-11) */
nav.top .nsoc{display:inline-flex;align-items:center;gap:14px;margin:0 18px 0 6px}
nav.top .nsoc a{display:inline-flex;color:inherit;opacity:.82;transition:opacity .2s}
nav.top .nsoc a:hover,nav.top .nsoc a:focus-visible{opacity:1}
nav.top .nsoc svg,.nsoc-m svg{width:17px;height:17px;display:block}
@media (max-width:1240px){nav.top .nsoc{display:none}}
.nsoc-m{display:flex;gap:22px;margin-top:22px}
.nsoc-m a{color:inherit;display:inline-flex}
.nsoc-m svg{width:22px;height:22px}

/* header layout (14-11): logo hard left, menu centred, then Get a price, Project, socials hard right */
nav.top .nsoc a{color:#F1EADF!important}
@media (min-width:1101px){
nav.top{padding-left:clamp(24px,3vw,56px)!important;padding-right:clamp(24px,3vw,56px)!important;justify-content:flex-start!important;gap:0!important}
nav.top .logo{margin-right:0!important}
nav.top ul{margin:0 auto!important;padding:0 28px!important;gap:clamp(18px,2.5vw,44px)!important}
nav.top ul a{letter-spacing:.24em!important;font-size:10.5px!important}
nav.top .btn.b{order:2}
nav.top .pjb-btn{order:3;margin-left:12px!important}
nav.top .nsoc{order:11;display:inline-flex!important;margin:0 0 0 22px!important;gap:14px}
}
@media (min-width:1201px){nav.top .logo img.nsym{display:block!important}}
@media (min-width:1101px) and (max-width:1560px){.pjb-btn .pn{display:none}}
@media (min-width:1101px) and (max-width:1380px){nav.top ul a{letter-spacing:.16em!important}nav.top ul{padding:0 20px!important;gap:clamp(16px,1.7vw,24px)!important}nav.top .nsoc{margin-left:16px!important;gap:12px}nav.top .btn.b{padding:12px 16px!important;letter-spacing:.18em}}
@media (min-width:861px) and (max-width:1100px){nav.top{padding-left:24px!important;padding-right:24px!important}}

/* Growth Rewards list on Trade page (14-11) */
.jn-2 ul.grw{list-style:none;padding:0;margin:16px 0 18px}
.jn-2 ul.grw li{border-top:1px solid var(--hair);padding:11px 0;font-size:15px;color:var(--body)}
.jn-2 ul.grw li:last-child{border-bottom:1px solid var(--hair)}
.jn-2 ul.grw b{font-weight:500;color:var(--ink)}
.jn-2 p+p{margin-top:12px}
.jn-2 p.grw-n{font-size:13px;color:var(--mut)}