/* reels */
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.reel{margin:0;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.reel .v{border-radius:4px;overflow:hidden;background:var(--night-2);aspect-ratio:9/16}
.reel video{width:100%;height:100%;object-fit:cover}
.reel b{font-family:var(--f-display);font-weight:500;font-size:1.5rem;line-height:1.1;color:var(--night-ink)}
.reel span{font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2)}
.reel:hover b{color:var(--night-accent)}
@media (max-width: 760px){
  .reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .reel{scroll-snap-align:start}
}

/* project cards */
.pgrid-home{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,36px)}
.pgrid-home .col{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.card .ph{overflow:hidden;border-radius:4px;background:var(--paper-2);position:relative}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.025)}
.card h3{transition:color .2s}
.card:hover h3{color:var(--olive)}
.card .meta{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.card .t{display:flex;flex-direction:column;gap:6px}
.card .badge{position:absolute;left:12px;top:12px;font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--paper-2);color:var(--ink);padding:.4em .6em;border-radius:2px}
.pgrid-home .big .ph{aspect-ratio:4/5}
.pgrid-home .col .ph{aspect-ratio:3/2}
.more-row{display:flex;justify-content:flex-end;margin-top:36px}
@media (max-width: 760px){ .pgrid-home{grid-template-columns:1fr} .pgrid-home .big .ph{aspect-ratio:1/1.1} }
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.chip{font:600 .9rem var(--f-body);background:transparent;color:var(--ink-2);border:1.5px solid var(--rule);border-radius:999px;padding:.5em 1.1em;cursor:pointer}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--solid);border-color:var(--solid);color:var(--paper)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px clamp(20px,3vw,36px)}
.pgrid .ph{aspect-ratio:4/3}
.pgrid .card p{font-size:.95rem;color:var(--ink-2)}
@media (max-width: 960px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .pgrid{grid-template-columns:1fr} }

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.review{margin:0;display:flex;flex-direction:column;gap:18px;padding-top:26px;border-top:1px solid var(--ink)}
.review .q{font-family:var(--f-display);font-size:4rem;line-height:.5;color:var(--sage);height:26px}
.review p{font-family:var(--f-display);font-size:1.45rem;line-height:1.3;color:var(--ink-2);font-style:italic}
.review footer{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ph-chip{display:inline-block;font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--ink-2);color:var(--ink-2);padding:.35em .6em;border-radius:2px;width:max-content}
@media (max-width: 860px){ .reviews{grid-template-columns:1fr} }

/* project detail */
.crumbs{font:500 .75rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:clamp(28px,4vw,48px)}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--sage)}
.pd-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 64px;align-items:end;padding-block:24px clamp(32px,4vw,48px)}
.pd-head p{color:var(--ink-2);font-size:var(--s-lg)}
.pd-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
.pd-main .lead img{border-radius:4px;width:100%}
.pd-facts{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.facts div:first-child{border-top:1px solid var(--rule)}
.facts dt{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:.25em}
.facts dd{margin:0}
.pd-block{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,64px);align-items:center}
.pd-block p{color:var(--ink-2)}
.pd-video{display:flex;gap:clamp(16px,3vw,32px);align-items:flex-end;flex-wrap:wrap}
.pd-video .phone{margin:0}
.pd-video .plain{max-width:300px;border-radius:4px;overflow:hidden;aspect-ratio:9/16;background:var(--paper-2)}
.pd-video .plain video{width:100%;height:100%;object-fit:cover}
.dim{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
.dim span{position:relative;display:flex;justify-content:center;font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);height:18px;align-items:center}
.dim span::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--ink-2);opacity:.6}
.dim span::after{content:"";position:absolute;top:2px;bottom:2px;left:0;right:0;border-left:1px solid var(--ink-2);border-right:1px solid var(--ink-2);opacity:.6}
.dim span:first-child::after{border-right:0}
.dim i{position:relative;z-index:1;font-style:normal;background:var(--paper);padding:0 .7em}
.proof-img{border-radius:4px;width:100%}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);margin-top:clamp(40px,5vw,64px)}
.gallery figure{margin:0}
.gallery img{border-radius:4px;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.gallery img.contain{object-fit:contain;background:#fff}
.pd-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid var(--rule)}
.pd-next a{text-decoration:none}
.pd-next a h3{margin-top:6px}
.pd-next a:hover h3{color:var(--olive)}
@media (max-width: 860px){ .pd-head,.pd-main,.pd-block{grid-template-columns:1fr} .pd-facts{position:static} .gallery{grid-template-columns:1fr} }

/* ---------- v3: mobile action bar + WhatsApp ---------- */
.vh{position:absolute;clip-path:inset(50%);overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;grid-template-columns:1fr 1fr 1.5fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -8px 24px rgba(24,27,21,.10)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;text-decoration:none;font:600 .8rem var(--f-body);color:var(--ink);border:1.5px solid var(--rule);background:var(--paper-2)}
.mbar a.primary{background:var(--clay);color:var(--clay-ink);border-color:transparent;flex-direction:row;gap:8px;font-size:.95rem}
.mbar svg,.wa-float svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wa-float{position:fixed;right:24px;bottom:24px;z-index:30;display:inline-flex;align-items:center;gap:10px;padding:.85em 1.25em .85em 1.05em;border-radius:999px;background:var(--solid);color:var(--paper);text-decoration:none;font-weight:600;font-size:.92rem;box-shadow:0 10px 28px rgba(24,27,21,.25);border:1.5px solid color-mix(in srgb,var(--paper) 45%,transparent);transition:transform .25s}
.wa-float:hover{transform:translateY(-2px)}
@media (max-width: 760px){ .mbar{display:grid} body{padding-bottom:calc(84px + env(safe-area-inset-bottom))} .wa-float{display:none} }

/* ---------- v3: planner ---------- */
.planner{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,72px);align-items:start;padding-bottom:var(--sec)}
.progress{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 36px}
.progress li{flex:1;display:flex;flex-direction:column;gap:10px;font:500 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);min-width:0}
.progress li::before{content:"";height:3px;border-radius:2px;background:var(--rule);transition:background-color .3s}
.progress li.done::before,.progress li[aria-current="step"]::before{background:var(--olive)}
.progress li[aria-current="step"]{color:var(--ink)}
@media (max-width: 560px){ .progress li span{display:none} .progress li[aria-current="step"] span{display:inline} }
.pstep{border:0;padding:0;margin:0;min-width:0}
.pstep[hidden]{display:none!important}
.pstep > legend{padding:0;margin:0 0 8px;font-family:var(--f-display);font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:400;line-height:1.08;letter-spacing:-.01em;float:left;width:100%}
.pstep > legend + *{clear:both}
.opt,.space,.day,.drop{font-family:var(--f-body);text-transform:none;letter-spacing:0;color:var(--ink)}
.group > legend.glabel{float:none;margin-bottom:2px}
.pstep .intro{color:var(--ink-2);margin-bottom:28px;max-width:36rem}
.pbody{display:flex;flex-direction:column;gap:30px}
.group{display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0;min-width:0}
.glabel{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:0}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:.6em 1.15em;border:1.5px solid var(--rule);border-radius:999px;cursor:pointer;font-weight:600;font-size:.98rem;background:var(--field);transition:background-color .2s,border-color .2s,color .2s}
.opt:hover{border-color:var(--ink-2)}
.opt:has(input:checked){background:var(--solid);border-color:var(--solid);color:var(--paper)}
.opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.opt small{font-weight:400;opacity:.75;font-size:.85rem}
.drop{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px;border:1.5px dashed var(--ink-2);border-radius:8px;background:var(--field);cursor:pointer}
.drop:hover{border-color:var(--olive)}
.drop:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.drop b{font-family:var(--f-display);font-size:1.4rem;font-weight:500}
.drop span{color:var(--ink-2);font-size:.95rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.thumbs img{aspect-ratio:1;object-fit:cover;border-radius:4px;width:100%}
.err{display:none;color:var(--rust);font-size:.92rem;font-weight:600}
.field:has(:user-invalid) .err{display:block}
input:user-invalid,textarea:user-invalid{border-color:var(--rust);background:color-mix(in srgb,var(--rust) 7%, var(--field))}
.step-error{color:var(--rust);font-weight:600;min-height:1.4em}
.days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity}
.day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1.5px solid var(--rule);border-radius:10px;cursor:pointer;background:var(--field);scroll-snap-align:start;min-height:76px}
.day small{font:500 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.day b{font-family:var(--f-display);font-size:1.7rem;font-weight:500;line-height:1}
.day:has(input:checked){background:var(--solid);border-color:var(--solid);color:var(--paper)}
.day:has(input:checked) small{color:var(--paper);opacity:.8}
.day:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.slot{justify-content:center;border-radius:8px}
.slot:has(input:disabled){opacity:.4;cursor:not-allowed;text-decoration:line-through}
.tz{font-size:.88rem;color:var(--ink-2)}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.btn-back{background:none;border:0;font:600 1rem var(--f-body);color:var(--ink);cursor:pointer;padding:.9em 0;min-height:48px;text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:5px}
.btn-back[hidden]{visibility:hidden;display:inline-block!important}
.psum{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px;padding:26px;background:var(--paper-2);border-radius:8px}
.psum h3{font-size:1.5rem}
.psum dl{margin:0}
.psum dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.psum dt{font:500 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:.25em}
.psum dd{margin:0}
.psum dd.empty{color:var(--ink-2);opacity:.7}
.psum .direct{font-size:.95rem;color:var(--ink-2)}
.psum .direct a{font-weight:600;color:var(--ink)}
.done-panel{display:flex;flex-direction:column;gap:22px}
.done-panel .ok{width:56px;height:56px;border-radius:50%;background:var(--olive);color:var(--paper);display:grid;place-items:center;font-size:1.6rem}
.done-panel ol{margin:0;padding-left:1.2em;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
@media (max-width: 900px){ .planner{grid-template-columns:1fr} .psum{position:static} }

/* ---------- v3: project stages ---------- */
.journey{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,64px);align-items:center}
.journey p{color:var(--ink-2)}
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:999px;margin-bottom:14px}
.tabs button{border:0;background:transparent;font:600 .92rem var(--f-body);padding:.55em 1.15em;border-radius:999px;color:var(--ink-2);cursor:pointer;min-height:44px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--solid);color:var(--paper)}
.stage-frame{position:relative;aspect-ratio:4/3;background:var(--paper-2);border-radius:4px;overflow:hidden}
.stage-frame [role="tabpanel"]{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.stage-frame [role="tabpanel"].on{opacity:1}
.stage-frame img{width:100%;height:100%;object-fit:cover}
.stage-frame img.contain{object-fit:contain;background:#fff}
.stage-cap{margin-top:12px;font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width: 860px){ .journey{grid-template-columns:1fr} }
.pstep.validate input:invalid,.pstep.validate textarea:invalid{border-color:var(--rust);background:color-mix(in srgb,var(--rust) 7%, var(--field))}
.pstep.validate .field:has(:invalid) .err{display:block}

/* ---------- v5: reviews ---------- */
.rv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:18px}
.rv-head .sec-head{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex:1 1 22rem}
.rv-head .sec-head h2{margin:0}
.rv-score{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 12px 12px 26px;background:var(--field);border:1px solid var(--rule);border-radius:999px;box-shadow:0 18px 36px -28px rgba(39,42,33,.45)}
.rv-num{font:500 2.5rem/1 var(--f-display);color:var(--ink)}
.rv-meta{display:flex;flex-direction:column;gap:2px}
.rv-meta small{font:500 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.stars{color:var(--clay);letter-spacing:.14em;font-size:.95rem;line-height:1}
.rv-note{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:.92rem;color:var(--ink-2);margin:0 0 clamp(32px,4vw,52px)}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.rv{margin:0;display:flex;flex-direction:column;padding:12px;background:var(--field);color:var(--ink);border:1px solid var(--rule);border-radius:22px;box-shadow:0 1px 0 rgba(39,42,33,.04),0 26px 50px -32px rgba(39,42,33,.5);transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rv:hover{translate:0 -4px;box-shadow:0 1px 0 rgba(39,42,33,.04),0 34px 60px -32px rgba(39,42,33,.55)}
.rv-grid .rv:nth-child(odd){margin-top:clamp(0px,3vw,44px)}
.rv-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border-radius:50% 50% 12px 12px / 36% 36% 12px 12px}
.rv-ph img{width:100%;height:100%;object-fit:cover}
.rv-tag{position:absolute;left:50%;bottom:12px;translate:-50% 0;white-space:nowrap;font:500 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--paper-2);color:var(--ink);padding:.5em .85em;border-radius:999px}
.rv-body{display:flex;flex-direction:column;gap:14px;padding:22px 14px 10px}
.rv blockquote{margin:0}
.rv blockquote p{font-family:var(--f-display);font-size:1.38rem;line-height:1.3;color:inherit}
.rv figcaption{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--rule)}
.rv figcaption b{display:block;font-weight:600;font-size:1rem;line-height:1.2}
.rv figcaption small{font:500 .64rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rv-av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:600 .8rem var(--f-body);letter-spacing:.04em;background:#525B43;color:#F5F0E7}
.rv:nth-child(3) .rv-av{background:#A96D4E}
.rv.is-night{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.rv.is-night .stars{color:var(--night-clay)}
.rv.is-night figcaption{border-color:var(--night-rule)}
.rv.is-night figcaption small{color:var(--night-ink-2)}
.rv.is-night .rv-av{background:#9DA28B;color:#181B15}
.rv.is-night .rv-ph{background:var(--night-2)}
@media (max-width: 900px){ .rv-grid{grid-template-columns:1fr;max-width:32rem} .rv-grid .rv:nth-child(odd){margin-top:0} .rv-score{border-radius:18px} }

/* ---------- v5: projects index ---------- */
.pj-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,6vw,96px);align-items:center;padding-block:clamp(40px,6vw,80px) clamp(32px,4vw,48px)}
.pj-copy{display:flex;flex-direction:column;gap:22px}
.pj-copy h1{margin:0}
.pj-lede{color:var(--ink-2);font-size:var(--s-lg);max-width:32rem}
.pj-count{font:500 .74rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.pj-count b{font:500 1.5rem var(--f-display);letter-spacing:0;color:var(--ink)}
.pj-count i{font-style:normal;color:var(--clay)}
.env2{margin:0;justify-self:center;width:min(100%,380px);display:flex;flex-direction:column;align-items:center;gap:6px}
.env2-box{position:relative;width:100%;aspect-ratio:846/1065}
.env2-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.env2-front{filter:drop-shadow(0 -2px 3px rgba(39,42,33,.12))}
.env2-photos{position:absolute;inset:0}
.ep{position:absolute;translate:-50% -50%;rotate:var(--r);border:3px solid #FBF7F0;border-radius:6px;overflow:hidden;background:#E6DCCD;box-shadow:0 8px 18px -8px rgba(24,27,21,.45);transition:translate .45s cubic-bezier(.2,.7,.2,1)}
.ep img{width:100%;height:100%;object-fit:cover}
.env2:hover .ep{translate:-50% calc(-50% - 6px)}
.env2:hover .ep:nth-child(odd){translate:-50% calc(-50% - 10px)}
.env2 .hand-cap{text-align:center;margin-top:0;white-space:nowrap;font-size:1rem}
.chip .cnt{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin-left:4px;padding:0 .35em;border-radius:999px;font:500 .72rem var(--f-mono);background:var(--paper-2);color:var(--ink-2)}
.chip[aria-pressed="true"] .cnt{background:color-mix(in srgb,var(--paper) 22%,transparent);color:var(--paper)}
.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid var(--rule)}
.feat-copy{display:flex;flex-direction:column;gap:16px}
.feat-copy h2{margin:0}
.feat-copy p{color:var(--ink-2)}
.feat-hint,.pd-hint{font-family:var(--f-hand);color:var(--olive);font-size:1.05rem;line-height:1.3}
.feat-hint span,.pd-hint span{font-family:var(--f-body);margin-right:4px}
/* compare slider */
.cmp{--pos:50%;position:relative;overflow:hidden;border-radius:6px;background:var(--paper-2);aspect-ratio:16/11;isolation:isolate;user-select:none}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cmp-a{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;translate:-1px 0;background:#FBF7F0;box-shadow:0 0 0 1px rgba(24,27,21,.15);pointer-events:none;z-index:2}
.cmp-handle i{position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;background:#FBF7F0;box-shadow:0 6px 18px rgba(24,27,21,.3);display:grid;place-items:center}
.cmp-handle i::before{content:"‹  ›";font:600 1.05rem var(--f-body);color:#272A21;letter-spacing:.1em;white-space:pre}
.cmp-l{position:absolute;bottom:14px;z-index:2;font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:.5em .8em;border-radius:999px;background:rgba(251,247,240,.92);color:#272A21;pointer-events:none}
.cmp-la{left:14px}.cmp-lb{right:14px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.cmp:has(.cmp-range:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
/* hover video on cards */
.card .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.card.hv-on .hv{opacity:1}
.card[data-hv] .badge::before{content:"▶ ";font-size:.8em}
@media (max-width: 900px){ .pj-hero,.feat{grid-template-columns:1fr} .env2{width:min(78%,300px)} }

/* ---------- v5: project detail ---------- */
.crumbs2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:clamp(28px,4vw,48px);font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.crumbs2 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage)}
.crumbs2 a:hover{border-color:var(--clay)}
.pd-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,6vw,88px);align-items:start;padding-block:clamp(18px,2.5vw,28px) clamp(32px,4vw,48px)}
.pd-intro{display:flex;flex-direction:column;gap:20px}
.pd-intro h1{margin:0}
.pd-intro .lede{color:var(--ink-2);font-size:var(--s-lg);max-width:34rem}
.pd-intro .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.pd-facts3{margin-top:6px}
.pd-facts3 div{grid-template-columns:6.5rem minmax(0,1fr);padding:11px 0;font-size:.97rem}
.ph-val{color:var(--ink-2);opacity:.7;font-family:var(--f-mono);font-size:.85rem}
.pd-hero{margin:0}
.pd-cmp{aspect-ratio:3/2;width:100%}
.pd-cmp .cmp-img{object-position:50% 30%}
.pd-hint{margin-top:12px}
.zoom{display:block;width:100%;height:100%;padding:0;border:0;background:var(--paper-2);border-radius:6px;overflow:hidden;cursor:zoom-in;position:relative}
.zoom img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.02)}
.zoom:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.zoom.contain img{object-fit:contain;background:#fff}
.pd-single .zoom{aspect-ratio:16/9;max-height:78vh}
.pd-single.is-portrait .zoom{aspect-ratio:auto;height:min(78vh,760px)}
.pd-single.is-portrait .zoom img{object-fit:contain}
.pd-mosaic{display:grid;gap:clamp(12px,1.6vw,20px);height:clamp(420px,62vh,640px)}
.pd-mosaic.n2{grid-template-columns:5fr 7fr}
.pd-mosaic.n3{grid-template-columns:5fr 4fr;grid-template-rows:1fr 1fr}
.pd-mosaic.n3 .t0{grid-row:span 2}
.pd-duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,6vw,88px);margin-top:clamp(48px,6vw,88px);align-items:start}
.story{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.story li{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--ink)}
.st-n{font:500 .72rem var(--f-mono);color:var(--clay);letter-spacing:.08em}
.story b{font-family:var(--f-display);font-weight:500;font-size:1.45rem;line-height:1.1}
.story p{color:var(--ink-2);font-size:.97rem}
.palette{list-style:none;margin:14px 0 0;padding:20px;display:flex;flex-wrap:wrap;gap:18px 22px;background:var(--paper-2);border-radius:18px}
.palette li{display:flex;flex-direction:column;align-items:center;gap:10px;width:84px;text-align:center;font-size:.85rem;line-height:1.25;color:var(--ink-2)}
.sw{width:58px;height:74px;border-radius:999px 999px 8px 8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(39,42,33,.14),0 8px 16px -10px rgba(39,42,33,.45)}
.sw.stone{background:linear-gradient(118deg,transparent 38%,rgba(120,118,112,.55) 40%,transparent 43%),linear-gradient(135deg,transparent 62%,rgba(120,118,112,.35) 63.5%,transparent 66%),linear-gradient(100deg,transparent 18%,rgba(120,118,112,.3) 19.5%,transparent 21%),#EFECE6}
.pd-sec{margin-top:clamp(56px,7vw,96px)}
.pd-sec .gallery{margin-top:16px}
.gallery .zoom{aspect-ratio:4/3}
.pd-review{margin-top:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:14px;max-width:44rem}
.pd-rv-card{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,32px);background:var(--field);border:1px solid var(--rule);border-radius:22px;box-shadow:0 22px 44px -32px rgba(39,42,33,.5)}
.pd-rv-card p{font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.3}
.pd-rv-card footer{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.pd-rv-card footer b{display:block;font-weight:600}
.pd-rv-card footer small{font:500 .64rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pd-review .rv-note{margin:0}
.pd-next2{margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.nx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:center;width:100%;text-decoration:none;color:inherit}
.nx-ph{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--paper-2)}
.nx-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.nx:hover .nx-ph img{transform:scale(1.03)}
.nx-t{display:flex;flex-direction:column;gap:10px}
.nx-t h2{margin:0;transition:color .2s}
.nx:hover h2{color:var(--olive)}
.nx-t .meta{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.nx-arr{font-size:1.8rem;color:var(--clay);transition:translate .3s}
.nx:hover .nx-arr{translate:8px 0}
@media (max-width: 900px){ .pd-top,.pd-duo{grid-template-columns:1fr} .story{grid-template-columns:1fr} .pd-mosaic{height:auto;grid-template-columns:1fr 1fr!important;grid-template-rows:auto!important} .pd-mosaic .zoom{aspect-ratio:3/4} .pd-mosaic.n3 .t0{grid-row:auto;grid-column:1/-1;aspect-ratio:4/5} .nx{grid-template-columns:1fr} .pd-cmp{aspect-ratio:4/3} }
/* lightbox */
.lb{width:min(100vw - 32px,1200px);max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:14px;background:#181B15;color:#EDE6D8;overflow:visible}
.lb::backdrop{background:rgba(12,13,10,.82)}
.lb figure{margin:0;display:flex;flex-direction:column}
.lb img{width:100%;max-height:calc(100dvh - 110px);object-fit:contain;border-radius:14px 14px 0 0;background:#0F110D}
.lb figcaption{padding:12px 18px;font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#B7B9A6}
.lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:#FBF7F0;color:#181B15;font:600 1.2rem var(--f-body);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.lb button:focus-visible{outline:2px solid #D38D69;outline-offset:3px}
.lb-x{top:-14px;right:-14px}
.lb-p{left:12px;top:50%;translate:0 -50%}
.lb-n{right:12px;top:50%;translate:0 -50%}
.lb button[hidden]{display:none}
@media (max-width: 560px){ .lb-x{top:8px;right:8px} }

@media (max-width: 900px){ #projectDetail{display:flex;flex-direction:column} #projectDetail > *{order:4} .pd-top{display:contents} #projectDetail > .crumbs2{order:0} .pd-intro{order:1;padding-top:18px} #projectDetail > .pd-hero{order:2;margin-top:28px} .pd-facts3{order:3;margin-top:28px!important} }
@media (max-width: 560px){ .env2 .hand-cap{white-space:normal} .palette{gap:14px 10px;padding:16px} .palette li{width:66px;font-size:.8rem} .sw{width:50px;height:64px} }

/* ---------- D’Panim Core additions ---------- */
.dp-editor-note{padding:18px 20px;border:1.5px dashed var(--rule,#ccc);border-radius:10px;font:500 .9rem var(--f-body,system-ui);color:var(--ink-2,#555);background:var(--field,#fff)}
.dp-reviews .rv-ph{display:block}
.dp-reviews blockquote{margin:0}
.pd-proof{margin:0}
.pd-rv-card blockquote{margin:0}
.planner .form-error{color:var(--rust);font-weight:600}
.planner .p-submit.is-busy{opacity:.6;pointer-events:none}
.planner .p-submit.is-busy .arr{display:none}
.mbar.no-wa{grid-template-columns:1fr 1.6fr}
.pj-hero .pj-count{margin:0}
.card[hidden],.feat[hidden]{display:none!important}
.pgrid-empty{color:var(--ink-2);padding:24px 0}
.env2 .ep img{display:block}
.reel video{display:block}
.pd .lede{margin:0}
.pd h1{margin:0}