/* Nova Coffee — bespoke. Warm linen, cocoa ink, kraft ribbon, tilted shelf. */
.nv-hero{padding:76px 0 48px}
.nv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.nv-tag{display:inline-block;border:1.5px dashed #b45309;background:#fffdf8;color:#6b4f3a;border-radius:999px;padding:5px 15px;font-size:.88rem;font-weight:600}
.nv-hero h1{font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.25;margin:16px 0 12px}
.nv-hero p{color:#5f4c40;font-size:1.1rem;max-width:46ch}
.nv-hero-ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.nv-photo{position:relative;padding:14px 14px 46px;background:#fffdf8;border:1.5px solid #e5d9cc;border-bottom:4px solid #e5d9cc;border-radius:6px;transform:rotate(2deg);box-shadow:0 18px 40px rgba(45,31,22,.16)}
.nv-photo img{aspect-ratio:1/1;object-fit:cover;border-radius:3px;width:100%}
.nv-photo::before{content:"";position:absolute;top:-13px;left:50%;width:58px;height:22px;transform:translateX(-50%);background:#2d1f16;border-radius:3px;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.nv-ribbon{overflow:hidden;border-top:2px dashed #e5d9cc;border-bottom:2px dashed #e5d9cc;margin:14px 0}
.nv-ribbon-track{display:flex;width:max-content;animation:nv-scroll 30s linear infinite}
.nv-ribbon-track span{white-space:nowrap;padding:10px 0;color:#6b4f3a;font-weight:600;font-size:.92rem}
@keyframes nv-scroll{to{transform:translateX(-50%)}}
.nv-stats{padding:36px 0}
.nv-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.nv-stats strong{display:block;font-size:1.7rem;color:#2d1f16}
.nv-stats span{color:#6b5a4e;font-size:.9rem}
.nv-shots{padding:44px 0}
.nv-shots h2{font-size:1.55rem;margin-bottom:22px}
.nv-shots-track{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:16px;overflow-x:auto;padding:10px 4px 14px;scroll-snap-type:x mandatory}
.nv-shots figure{margin:0;scroll-snap-align:start;background:#fffdf8;border:1px solid #e5d9cc;border-radius:8px;padding:10px 10px 12px}
.nv-shots img{aspect-ratio:4/3;object-fit:cover;border-radius:5px;width:100%}
.nv-shots figcaption{font-size:.84rem;color:#6b5a4e;margin-top:7px}
.nv-shelf{padding:52px 0}
.nv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.nv-head h2{font-size:1.55rem}
.nv-head a{color:var(--brand-deep,#8f4107);font-weight:700;font-size:.92rem}
.nv-shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nv-bag{display:flex;flex-direction:column;gap:10px;background:#fffdf8;border:1.5px solid #e5d9cc;border-radius:14px;padding:14px;transition:transform .18s ease,box-shadow .18s ease}
.nv-bag:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:0 14px 30px rgba(45,31,22,.14)}
.nv-bag-photo{aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:#f4ede1;display:flex;align-items:center;justify-content:center}
.nv-bag-photo img{width:100%;height:100%;object-fit:cover}
.nv-bag-photo b{font-size:2.4rem;color:#7d6a5e}
.nv-bag-name{font-weight:700}
.nv-bag-price{font-weight:800;color:#b45309}
.nv-bag-price i{font-style:normal;color:#6b5a4e;font-size:.82rem;margin-left:8px}
.nv-notes{padding:48px 0}
.nv-note{display:flex;gap:16px;align-items:center;background:#fffdf8;border:1.5px solid #e5d9cc;border-radius:12px;padding:18px 20px;margin-bottom:12px;position:relative}
.nv-note-pin{position:absolute;top:-6px;left:26px;width:12px;height:12px;border-radius:50%;background:#b45309;border:2px solid #fffdf8;box-shadow:0 2px 4px rgba(45,31,22,.25)}
.nv-note-main{display:flex;flex-direction:column;gap:2px}
.nv-note-main strong{font-size:1.06rem}
.nv-note-main span{color:#6b5a4e;font-size:.92rem}
.nv-cta{background-color:#2d1f16;background-size:cover;background-position:center;padding:70px 0;text-align:center;position:relative}
.nv-cta::before{content:"";position:absolute;inset:0;background:rgba(24,15,10,.68)}
.nv-cta .container{position:relative;max-width:620px}
.nv-cta h2{color:#f7f1e8;font-size:clamp(1.6rem,3vw,2.1rem)}
.nv-cta p{color:rgba(247,241,232,.85);margin:10px 0 24px}
@media(max-width:860px){.nv-hero-grid{grid-template-columns:1fr}.nv-stats-row{grid-template-columns:repeat(2,1fr)}.nv-shelf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.nv-shelf-grid{grid-template-columns:1fr}}

/* ── Motion — counter energy. Runtime: /assets/sites/sites.js ───────────── */
::view-transition-old(root){animation:nv-vt-out .26s ease both}
::view-transition-new(root){animation:nv-vt-in .3s cubic-bezier(.22,1,.36,1) both}
@keyframes nv-vt-out{to{opacity:0;transform:translateX(-18px)}}
@keyframes nv-vt-in{from{opacity:0;transform:translateX(26px)}}

/* hero polaroid is dropped onto the counter — springy settle, then drifts */
body.motion .nv-photo[data-rv]{translate:0 -38px;rotate:-8deg;transition:opacity .5s ease var(--d,0ms),translate .7s cubic-bezier(.2,1.35,.3,1) var(--d,0ms),rotate .7s cubic-bezier(.2,1.35,.3,1) var(--d,0ms),scale .7s ease var(--d,0ms)}
body.motion .nv-photo[data-rv].in{translate:0 0;rotate:0deg}
.nv-photo{transform:rotate(2deg) translateY(var(--py,0px))}

/* eyebrow stamps down */
body.motion .nv-tag[data-rv]{scale:1.4;rotate:-6deg;transition:opacity .4s ease var(--d,0ms),scale .45s cubic-bezier(.2,1.4,.3,1) var(--d,0ms),rotate .45s cubic-bezier(.2,1.4,.3,1) var(--d,0ms),translate .45s ease var(--d,0ms)}
body.motion .nv-tag[data-rv].in{scale:1;rotate:0deg;translate:0 0}

/* ribbon leans into your scroll like tape being pulled */
.nv-ribbon{transform:skewX(calc(var(--vel,0)*-5deg))}

/* gallery polaroids pin up one by one */
body.motion .nv-shots figure[data-rv]{translate:0 26px;scale:.96;rotate:-3deg}
body.motion .nv-shots figure[data-rv].in{translate:0 0;scale:1;rotate:0deg}

/* shelf bags settle after being placed */
body.motion .nv-bag[data-rv]{translate:0 26px;scale:.97}
body.motion .nv-bag[data-rv].in{translate:0 0;scale:1}

/* note pins pop in after the card lands */
body.motion .nv-note .nv-note-pin{scale:0;transition:scale .35s cubic-bezier(.2,1.6,.35,1) .25s}
body.motion .nv-note.in .nv-note-pin{scale:1}
@media(max-width:720px){
  body.motion .nv-photo[data-rv]{translate:0 -24px;rotate:-5deg}
  body.motion .nv-photo[data-rv].in{translate:0 0;rotate:0deg}
}