/* Upsell + JV pages v13: one system, tonal paper surfaces, hierarchy from type and space (no gilt, no glow). */
body.up{background:#F4EBDA;color:var(--ink);font-size:17px}
body.up::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(assets/in/plaster.webp) 0 0/520px auto;opacity:.35;mix-blend-mode:multiply}
.up main,.up .foot{position:relative;z-index:1}
.w2{max-width:1180px;margin:auto;padding-inline:var(--gut)}
.w3{max-width:860px;margin:auto;padding-inline:var(--gut)}

/* top bar: brand + where you are in the order */
.ubar{position:sticky;top:0;z-index:50;background:rgba(247,240,226,.82);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--line)}
.ubar__in{display:flex;align-items:center;gap:1rem;min-height:60px}
.ubar .brand{font-size:1.12rem}
.usteps{display:flex;align-items:center;gap:.2rem;margin:0 0 0 auto;padding:0;list-style:none;font-size:.86rem;color:var(--ink-3)}
.usteps li{display:flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:8px;white-space:nowrap}
.usteps li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 .7rem/1 var(--f-text);font-style:normal;box-shadow:inset 0 0 0 1px currentColor}
.usteps li.done{color:#2E6B52}.usteps li.done i{background:#2E6B52;color:#F4EBDA;box-shadow:none}
.usteps li.on{color:var(--ink);background:rgba(30,58,49,.08);font-weight:600}.usteps li.on i{background:var(--cta);color:var(--cta-ink);box-shadow:none}
.usteps li+li::before{content:"";width:14px;height:1px;background:var(--line);margin-right:.2rem}
@media (max-width:820px){.usteps li:not(.on) span{display:none}.usteps li{padding:.3rem}}
@media (max-width:420px){.ubar .brand b{display:none}}

/* hero: a painted room, the copy on its quiet wall */
.uhero{position:relative;overflow:hidden;min-height:min(820px,calc(100svh - 60px));display:grid;align-items:center;padding:clamp(2.5rem,6vw,5rem) 0}
.uhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;object-position:var(--op,50% 50%);transform:scale(1.04);transform-origin:60% 40%}
.uhero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(247,240,226,.97) 0%,rgba(247,240,226,.93) 38%,rgba(247,240,226,.55) 60%,rgba(247,240,226,.05) 85%)}
.uhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;background:linear-gradient(180deg,transparent,#F4EBDA)}
.uhero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.uhero__copy{display:grid;gap:1.2rem;justify-items:start}
.ukick{margin:0;font:500 .98rem/1.3 var(--f-text);color:var(--rose);display:flex;gap:.6rem;align-items:center}
.ukick::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.uh1{font:600 clamp(2.3rem,4.6vw,4.1rem)/1.03 var(--f-display);letter-spacing:-.015em;margin:0;text-wrap:balance}
.uh1 em,.uh2 em{font-style:italic;font-weight:500;color:var(--rose)}
.ulead{margin:0;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--ink-2);max-width:54ch;text-wrap:pretty}

/* offer card */
.uoffer{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.4rem;align-items:center;width:min(100%,560px);padding:1.2rem 1.3rem 1.1rem;border-radius:8px;background:rgba(251,246,236,.94);box-shadow:var(--sh-2)}
.uoffer__px{display:grid;justify-items:start;line-height:1}
.uoffer__px b{font:600 3.4rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.uoffer__px b sup{font-size:.45em;vertical-align:.9em;margin-right:.05em}
.uoffer__px small{margin-top:.35rem;font-size:.82rem;color:var(--ink-3)}
.uoffer__px s{font:500 .95rem/1 var(--f-text);color:var(--ink-3);margin-bottom:.3rem}
.uoffer ul{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.93rem;color:var(--ink-2)}
.uoffer li{display:flex;gap:.5rem;align-items:flex-start}
.uoffer li svg{flex:none;width:1.05em;height:1.05em;margin-top:.22em;color:#2E6B52}
.uoffer .btn{grid-column:1/-1;width:100%}
.uno{grid-column:1/-1;justify-self:center;font-size:.9rem;color:var(--ink-3);text-underline-offset:3px;padding:.35rem .5rem;min-height:44px;display:inline-flex;align-items:center}
.uno:hover{color:var(--ink)}
@media (max-width:460px){.uoffer{grid-template-columns:1fr}.uoffer__px{grid-auto-flow:column;align-items:baseline;gap:.6rem;justify-content:start}}

/* hero art: real pictures pinned to the wall */
.uart{position:relative;aspect-ratio:1/1.22;width:min(100%,520px);justify-self:center}
.uart figure{position:absolute;margin:0;width:var(--w,46%);left:var(--x);top:var(--y);rotate:var(--r,0deg);padding:8px 8px 0;background:#FFFDF8;border-radius:3px;
  box-shadow:0 1px 2px rgba(40,30,10,.12),0 24px 40px -22px rgba(40,30,10,.55);transition:rotate .5s var(--ease),translate .5s var(--ease)}
.uart figure:hover{rotate:0deg;translate:0 -6px;z-index:5}
.uart img{width:100%;aspect-ratio:var(--ar,3/4);object-fit:cover;border-radius:1px}
.uart figcaption{padding:.45rem .2rem .55rem;font:italic 500 .86rem/1.2 var(--f-display);color:var(--ink-2);text-align:center}
.uart .pin{position:absolute;z-index:2;top:-9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E7B9C3,#A84D62 60%,#6D2B3B);box-shadow:0 2px 3px rgba(0,0,0,.3)}

/* sections */
.usec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.usec--paper{background:rgba(251,246,236,.75)}
.usec--ink{background:#1F2A25;color:#EDE4D3}
.usec--ink .uh2,.usec--ink .uhead p{color:inherit}.usec--ink .uhead p{opacity:.78}
.usec--walnut{background:#2B2018 url(assets/o2/prov-hero-plate.webp) center/cover;color:#EFE4CF;position:relative;isolation:isolate}
.usec--walnut::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(32,23,16,.94),rgba(32,23,16,.86) 40%,rgba(32,23,16,.95))}
.uhead{display:grid;gap:.9rem;max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.uhead--c{margin-inline:auto;text-align:center;justify-items:center}
.uh2{font:600 clamp(1.9rem,3.4vw,2.9rem)/1.08 var(--f-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.uh3{font:600 1.35rem/1.2 var(--f-display);margin:0}
.uhead p{margin:0;font-size:1.08rem;color:var(--ink-2);text-wrap:pretty}
.muted{color:var(--ink-3)}

/* three short reasons */
.ureasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);margin:0;padding:0;list-style:none;counter-reset:r}
.ureasons li{display:grid;gap:.5rem;align-content:start;padding-top:1rem;border-top:1px solid var(--line)}
.ureasons li::before{counter-increment:r;content:"0" counter(r);font:500 1rem/1 var(--f-display);color:var(--rose)}
.ureasons p{margin:0;color:var(--ink-2)}
@media (max-width:820px){.ureasons{grid-template-columns:1fr}}

/* room by room */
.urooms{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.uroom{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.uroom:nth-child(even) .uroom__txt{order:2}
.uroom__txt{display:grid;gap:.8rem;align-content:start}
.uroom__n{font:500 .95rem/1 var(--f-text);color:var(--rose)}
.uroom__txt p{margin:0;color:var(--ink-2)}
.uroom__vis{min-width:0}
@media (max-width:860px){.uroom{grid-template-columns:1fr}.uroom:nth-child(even) .uroom__txt{order:0}}
.shot{margin:0;border-radius:8px;overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.shot img{width:100%}
.shot figcaption,.cap{padding:.65rem 1rem;font-size:.86rem;color:var(--ink-3);background:#FBF6EC}
.cap{background:none;padding:.6rem 0 0}

/* index card (kit / set spec), drawn in HTML from the app's data */
.icard{position:relative;margin:0;padding:1.3rem 1.4rem 1.2rem;border-radius:4px;background:#FFFDF8;box-shadow:var(--sh-1),0 0 0 1px rgba(120,96,52,.12)}
.icard h4{margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid rgba(168,77,98,.35);font:600 1.15rem/1.2 var(--f-display)}
.icard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;font-size:.93rem}
.icard dt{color:var(--ink-3)}.icard dd{margin:0;color:var(--ink)}
.combo{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:1rem;align-items:center}
.combo .ph{margin:0;padding:7px 7px 0;background:#FFFDF8;border-radius:3px;box-shadow:var(--sh-2);rotate:-1.5deg}
.combo .ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.combo .ph figcaption{padding:.4rem;font:italic 500 .82rem/1.2 var(--f-display);text-align:center;color:var(--ink-2)}
@media (max-width:520px){.combo{grid-template-columns:1fr}.combo .ph{max-width:240px}}
.items{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0;padding:0;list-style:none}
.items li{padding:.3rem .65rem;border-radius:6px;background:rgba(30,58,49,.07);font-size:.86rem;color:var(--ink-2)}

/* word strips + tags */
.strips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.strips li{padding:.45rem .9rem;background:#FFFDF8;font:500 1.02rem/1.2 var(--f-display);color:var(--ink);box-shadow:0 1px 2px rgba(40,30,10,.12);rotate:var(--r,0deg)}
.strips li:nth-child(3n){--r:-1.2deg;background:#F1E4CB}.strips li:nth-child(4n){--r:1deg}.strips li:nth-child(5n){background:#EEDDE0}
.listing{padding:1.2rem;border-radius:8px;background:#FFFDF8;box-shadow:var(--sh-1),0 0 0 1px rgba(120,96,52,.12)}
.listing .lt{margin:0 0 .9rem;font:500 1.02rem/1.4 var(--f-text);color:var(--ink)}
.listing .lt span{color:var(--ink-3)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tags li{display:flex;gap:.4rem;align-items:baseline;padding:.3rem .65rem;border-radius:999px;background:#F4EBDA;font-size:.86rem;color:var(--ink)}
.tags li small{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 12 kits */
.kits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem);margin:0;padding:0;list-style:none}
@media (max-width:1000px){.kits{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.kits{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kit{display:grid;grid-template-rows:auto 1fr;border-radius:8px;overflow:hidden;background:#FFFDF8;box-shadow:var(--sh-1),0 0 0 1px rgba(120,96,52,.1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kit:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.kit__pics{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#E9DFCB}
.kit__pics.one{grid-template-columns:1fr}
.kit__pics img{width:100%;aspect-ratio:3/4;object-fit:cover}
.kit__pics.one img{aspect-ratio:3/2}
.kit__body{display:grid;gap:.3rem;align-content:start;padding:.85rem .95rem 1rem}
.kit__body h3{margin:0;font:600 1.12rem/1.15 var(--f-display)}
.kit__body p{margin:0;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.kit__body .w{font:italic 500 .9rem/1.35 var(--f-display);color:var(--rose)}
.note{margin:1.4rem 0 0;font-size:.9rem;color:var(--ink-3);display:flex;gap:.5rem;align-items:flex-start}
.note svg{flex:none;width:1.1em;height:1.1em;margin-top:.2em;color:#2E6B52}

/* layering formula */
.formula{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin:0 0 2rem;font:600 clamp(2.2rem,5vw,3.8rem)/1 var(--f-display)}
.formula span{display:grid;justify-items:center;gap:.4rem}
.formula small{font:500 .85rem/1.2 var(--f-text);color:inherit;opacity:.7}
.formula i{font-style:normal;opacity:.5;font-weight:400}
.formula .eq{color:#E7B9C3}
.pairs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0;padding:0;list-style:none}
.pairs li{padding:.55rem 1rem;border-radius:999px;background:rgba(237,228,211,.08);box-shadow:inset 0 0 0 1px rgba(237,228,211,.22);font-size:.95rem}
.pairs b{font-family:var(--f-display);font-weight:600}

/* compare */
.cmp{width:100%;border-collapse:collapse;font-size:.98rem;background:#FFFDF8;border-radius:8px;overflow:hidden;box-shadow:var(--sh-1)}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(120,96,52,.14)}
.cmp thead th{font:600 1.05rem/1.2 var(--f-display);background:#F7F0E2}
.cmp thead th:last-child{background:var(--cta);color:var(--cta-ink)}
.cmp td:first-child{color:var(--ink-3);width:22%}
.cmp td:last-child{color:var(--ink);font-weight:500;background:rgba(46,107,82,.05)}
.cmp tr:last-child td{border-bottom:0}
@media (max-width:640px){.cmp td:first-child{display:none}.cmp thead th:first-child{display:none}.cmp th,.cmp td{padding:.75rem .7rem;font-size:.92rem}}

/* final close */
.uclose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.uclose .uoffer{box-shadow:var(--sh-2)}
@media (max-width:860px){.uclose{grid-template-columns:1fr}}
.promise2{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;margin-top:1.5rem;padding:1.1rem 1.2rem;border-radius:8px;background:rgba(46,107,82,.07)}
.promise2 svg{width:30px;height:30px;color:#2E6B52}
.promise2 p{margin:0;font-size:.95rem;color:var(--ink-2)}.promise2 b{color:var(--ink)}

/* FAQ */
.ufaq{display:grid;gap:.6rem}
.ufaq details{border-radius:8px;background:#FFFDF8;box-shadow:0 0 0 1px rgba(120,96,52,.14)}
.ufaq summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:56px;padding:.8rem 1.1rem;cursor:pointer;list-style:none;font:600 1.08rem/1.3 var(--f-display)}
.ufaq summary::-webkit-details-marker{display:none}
.ufaq summary::after{content:"+";font:400 1.4rem/1 var(--f-text);color:var(--rose);transition:rotate .25s var(--ease)}
.ufaq details[open] summary::after{rotate:45deg}
.ufaq details p{margin:0;padding:0 1.1rem 1.1rem;color:var(--ink-2)}

/* OTO2: the three studios */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem);margin:0;padding:0;list-style:none}
.trio li{display:grid;grid-template-rows:auto 1fr;border-radius:8px;overflow:hidden;background:#FFFDF8;box-shadow:var(--sh-1),0 0 0 1px rgba(120,96,52,.1)}
.trio img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trio div{display:grid;gap:.45rem;align-content:start;padding:1rem 1.1rem 1.2rem}
.trio .utag{justify-self:start;padding:.2rem .6rem;border-radius:6px;font-size:.8rem;font-weight:500;background:rgba(30,58,49,.08);color:var(--ink-2)}
.trio .utag--new{background:rgba(168,77,98,.12);color:#8A3A4E}
.trio h3{margin:0;font:600 1.3rem/1.15 var(--f-display)}.trio p{margin:0;color:var(--ink-2);font-size:.95rem}
@media (max-width:860px){.trio{grid-template-columns:1fr}.trio img{aspect-ratio:16/9}}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.feature--flip .feature__txt{order:2}
@media (max-width:900px){.feature{grid-template-columns:1fr}.feature--flip .feature__txt{order:0}}
.feature__txt{display:grid;gap:1rem;align-content:start}
.feature__txt>p{margin:0;color:var(--ink-2)}
.usec--walnut .feature__txt>p,.usec--walnut .uhead p{color:#D9CCB4}
.usec--walnut .uh2,.usec--walnut .uh3{color:#F3E9D6}
.usec--walnut .uh2 em{color:#E2A4B1}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:.4rem 0 0;padding:0;list-style:none}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats li{display:grid;gap:.25rem;padding:.8rem .8rem .7rem;border-radius:6px;background:rgba(30,58,49,.06)}
.stats b{font:600 1.7rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats span{font-size:.8rem;line-height:1.3;color:var(--ink-3)}
.usec--walnut .stats li{background:rgba(239,228,207,.07);box-shadow:inset 0 0 0 1px rgba(239,228,207,.14)}
.usec--walnut .stats span{color:#BFB096}
.strip6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.strip6 img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:var(--sh-1)}
@media (max-width:700px){.strip6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.addon{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:8px;background:#FFFDF8;box-shadow:var(--sh-1),0 0 0 1px rgba(120,96,52,.1)}
.addon img{width:84px;height:84px;object-fit:cover;border-radius:4px}
.addon h4{margin:0 0 .2rem;font:600 1.1rem/1.2 var(--f-display)}.addon p{margin:0;font-size:.9rem;color:var(--ink-2)}
.addon .v{font:600 1.1rem/1 var(--f-display);color:var(--ink-3);white-space:nowrap}
.usec--walnut .addon{background:rgba(239,228,207,.06);box-shadow:inset 0 0 0 1px rgba(239,228,207,.16)}
.usec--walnut .addon h4{color:#F3E9D6}.usec--walnut .addon p{color:#CDBFA6}.usec--walnut .addon .v{color:#BFB096}
.addons{display:grid;gap:.7rem}
@media (max-width:520px){.addon{grid-template-columns:64px 1fr}.addon img{width:64px;height:64px}.addon .v{grid-column:2}}
.pieces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin-top:clamp(1.5rem,3vw,2.5rem);align-items:end}
.pieces img{width:100%;height:auto;border-radius:3px;box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}
@media (max-width:700px){.pieces{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wideimg{margin:0;border-radius:8px;overflow:hidden;box-shadow:var(--sh-2)}
.wideimg img{width:100%}

/* value stack */
.stack{width:100%;border-collapse:collapse;background:#FFFDF8;border-radius:8px;overflow:hidden;box-shadow:var(--sh-1)}
.stack td{padding:.95rem 1.1rem;border-bottom:1px solid rgba(120,96,52,.14);vertical-align:top}
.stack td:first-child{font:600 1.08rem/1.25 var(--f-display)}
.stack td:first-child small{display:block;margin-top:.2rem;font:400 .86rem/1.4 var(--f-text);color:var(--ink-3)}
.stack td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.stack tfoot td{border:0;background:#F7F0E2;font:600 1.1rem/1.2 var(--f-display)}
.stack tfoot tr:last-child td{background:var(--cta);color:var(--cta-ink)}
.stack tfoot tr:last-child td:last-child{color:var(--cta-ink);font-size:1.5rem}

.up .foot{background:#1F2A25;color:#CFC6B4;padding:2.6rem 0 2.2rem;font-size:.88rem;line-height:1.6}
.up .foot nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-bottom:1rem}.up .foot a{color:#EDE4D3}.up .foot p{margin:.25rem 0;max-width:none}
/* reveal on scroll (motion only when allowed) */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;translate:0 18px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
  .js .rv.in{opacity:1;translate:0 0}
}
@media (max-width:900px){
  .uhero{min-height:0;padding-top:0;align-items:start}
  .uhero__bg{position:relative;inset:auto;height:clamp(220px,48vw,380px);transform:none}
  .uhero::before{background:linear-gradient(180deg,transparent 0,transparent clamp(140px,34vw,280px),#F4EBDA clamp(220px,48vw,380px))}
  .uhero::after{display:none}
  .uhero__in{grid-template-columns:1fr;margin-top:-2rem}
  .uart{display:none}
  .uhero__copy{padding:1.3rem;border-radius:10px;background:rgba(247,240,226,.96);box-shadow:var(--sh-1)}
}