:root {
  --paper: #f5f2eb;
  --paper-2: #ece7dc;
  --ink: #1d1c1a;
  --graphite: #5b5852;
  --soft: #8f8a80;
  --line: #d8d2c5;
  --wine: #8e2a2e;
  --gold: #b08d57;
  --charcoal: #171615;
  --charcoal-2: #22201e;
  --radius: 14px;
  --font: "Vazirmatn", Tahoma, sans-serif;
  --nastaliq: "Noto Nastaliq Urdu", "Vazirmatn", serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper) var(--grain);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 300; line-height: 1.45; }
h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h1 em, h2 em { font-style: normal; font-family: var(--nastaliq); color: var(--wine); font-size: .95em; line-height: 1; }
.dark h2 em { color: #d7a3a5; }
.eyebrow { font-size: .8rem; letter-spacing: 2px; color: var(--gold); font-weight: 500; margin-bottom: .6rem; }
.muted { color: var(--soft); }
.center { text-align: center; }
section { padding: clamp(2.6rem, 5vw, 4.5rem) clamp(1rem, 5vw, 4rem); }
.section-head { max-width: 640px; margin: 0 auto 1.8rem; text-align: center; }
.section-head p:not(.eyebrow) { color: var(--graphite); margin-top: .6rem; }
.dark { background: var(--charcoal) var(--grain); color: #ece8e0; }
.dark .section-head p:not(.eyebrow), .dark .muted { color: #a29d93; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.8rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font: 500 .95rem var(--font); border: 1px solid var(--ink); cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); background: var(--wine); border-color: var(--wine); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { color: var(--paper); }
.btn-small { padding: .5rem 1.2rem; font-size: .85rem; }
.dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark .btn:hover { background: #d7a3a5; border-color: #d7a3a5; }
.link { color: var(--wine); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-color: var(--line); }
.brand { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.brand-mark { font-family: var(--nastaliq); font-size: 1.55rem; line-height: 1.6; }
.brand-sub { font-size: .75rem; color: var(--soft); }
.nav-links { display: flex; gap: 1.6rem; font-size: .9rem; }
.nav-links a { text-decoration: none; color: var(--graphite); }
.nav-links a:hover { color: var(--wine); }

/* hero: a 3D studio scene that moves with every scroll */
.hero { height: 230vh; padding: 0; position: relative; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 1rem;
  padding: 4.5rem clamp(1rem, 5vw, 4rem) 1rem;
}
.hero-text { position: relative; z-index: 2; will-change: transform, opacity; }
.lead { color: var(--graphite); font-size: 1.05rem; max-width: 30rem; margin: .9rem 0 1.4rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.narration { position: relative; height: 3.6em; margin-top: 1.4rem; perspective: 700px; max-width: 30rem; }
.narr {
  position: absolute; inset: 0; font-size: 1.02rem; color: var(--ink); padding-right: 1.4rem;
  opacity: 0; transform: rotateX(-75deg) translateY(12px); transform-origin: 50% 100%;
  transition: opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1);
}
.narr::before { content: ""; position: absolute; right: 0; top: .95em; width: .8rem; height: 1.5px; background: var(--wine); }
.narr.on { opacity: 1; transform: none; }
.narr.out { transform: rotateX(75deg) translateY(-12px); transform-origin: 50% 0; }
.stages-row { display: flex; align-items: flex-end; gap: 1.4rem; margin-top: .6rem; }
.stages { list-style: none; display: flex; gap: 1.4rem; font-size: .82rem; color: var(--soft); }
.stages li { position: relative; padding-top: .9rem; transition: color .4s; }
.stages li::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 2px; background: var(--line); }
.stages li::after { content: ""; position: absolute; top: 0; right: 0; height: 2px; width: var(--p, 0%); background: var(--ink); }
.stages li.on { color: var(--ink); }
.percent { font-size: 1.7rem; font-weight: 200; line-height: 1; min-width: 3.2ch; color: var(--wine); }

.scene {
  --ch: min(62vh, 620px); --cw: calc(var(--ch) * .7135); --mould: 10px; --matp: 14px; --d: 22px;
  --fw: calc(var(--cw) + 2 * (var(--mould) + var(--matp)));
  --fh: calc(var(--ch) + 2 * (var(--mould) + var(--matp)));
  position: relative; height: 100%; display: grid; place-items: center;
  perspective: 1400px; perspective-origin: 50% 42%;
}
.frame3d { position: relative; width: var(--fw); height: var(--fh); transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.front { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(135deg, #2a2826, #121110 60%, #262422); padding: var(--mould); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mat { position: relative; width: 100%; height: 100%; background: #fdfcf9; padding: var(--matp); box-shadow: inset 0 3px 8px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.1); }
.mat canvas { width: var(--cw); height: var(--ch); display: block; }
.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #8a6e52 repeating-linear-gradient(95deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px); }
.side { position: absolute; background: linear-gradient(90deg, #0d0c0b, #2b2926 50%, #0d0c0b); }
.s-r, .s-l { width: var(--d); height: 100%; top: 0; left: calc(50% - var(--d) / 2); }
.s-r { transform: rotateY(90deg) translateZ(calc(var(--fw) / 2)); }
.s-l { transform: rotateY(-90deg) translateZ(calc(var(--fw) / 2)); }
.s-t, .s-b { height: var(--d); width: 100%; left: 0; top: calc(50% - var(--d) / 2); background: linear-gradient(#0d0c0b, #2b2926 50%, #0d0c0b); }
.s-t { transform: rotateX(90deg) translateZ(calc(var(--fh) / 2)); }
.s-b { transform: rotateX(-90deg) translateZ(calc(var(--fh) / 2)); }
.glare { position: absolute; inset: var(--mould); pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 47%, rgba(255,255,255,.08) 52%, transparent 60%); background-size: 260% 100%; background-position: var(--g, 50%) 0; mix-blend-mode: screen; }
.pencil { position: absolute; width: 150px; left: 0; top: 0; pointer-events: none; transform-origin: 0 50%; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.floor-shadow { position: absolute; left: 50%; bottom: 3%; width: var(--fw); height: 46px; margin-left: calc(var(--fw) / -2); background: radial-gradient(closest-side, rgba(40,30,20,.32), transparent); filter: blur(4px); pointer-events: none; }

.float { position: absolute; left: 50%; top: 50%; will-change: transform; pointer-events: none; }
.obj { display: block; animation: bob 6s ease-in-out infinite alternate; filter: drop-shadow(0 18px 18px rgba(40,30,20,.22)); }
.float:nth-child(2n) .obj { animation-duration: 7.5s; animation-delay: -2s; }
.float:nth-child(3n) .obj { animation-duration: 5.2s; animation-delay: -4s; }
@keyframes bob { from { transform: translateY(-10px) rotate(-2deg); } to { transform: translateY(12px) rotate(3deg); } }
.pencil-obj { width: 230px; height: auto; }
.pencil-obj.small { width: 160px; }
.sheet { width: 130px; aspect-ratio: 792 / 1110; background: #fff; padding: 6px; }
.sheet img { width: 100%; height: 100%; object-fit: cover; }
.sheet.blank { background: #fbf9f4; padding: 10px; }
.eraser { width: 74px; height: 34px; border-radius: 6px; background: linear-gradient(90deg, #f3eee6 0 52%, #2f5585 52% 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.stump { width: 16px; height: 130px; background: linear-gradient(90deg, #cfc8bb, #efeae1 50%, #bdb5a6); clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); }
.stump::before { content: ""; display: block; height: 14%; background: #4a4743; }
.dust { position: absolute; inset: 0; pointer-events: none; }
.dust i { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(40,38,35,.55); will-change: transform; }
.scroll-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: .75rem; color: var(--soft); display: flex; flex-direction: column; align-items: center; gap: .4rem; transition: opacity .4s; }
.scroll-hint span { width: 1px; height: 34px; background: linear-gradient(var(--soft), transparent); animation: drip 1.8s infinite; }
@keyframes drip { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; opacity: 0; } }

/* strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.4rem clamp(1rem, 5vw, 4rem); border-block: 1px solid var(--line); background: var(--paper-2); }
.strip div { text-align: center; padding: .4rem; }
.strip div + div { border-right: 1px solid var(--line); }
.strip strong { display: block; font-weight: 500; font-size: 1.05rem; }
.strip span { font-size: .82rem; color: var(--graphite); }

/* loupe */
.detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; }
.detail-text p:not(.eyebrow) { color: #b9b3a8; margin-top: 1rem; max-width: 30rem; }
.detail-text .hint-touch { font-size: .82rem; color: var(--gold) !important; }
.loupe-wrap { position: relative; max-width: 470px; justify-self: center; cursor: none; touch-action: none; user-select: none; }
.loupe-wrap img { border-radius: 4px; box-shadow: 0 40px 80px -40px #000; }
.loupe {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); pointer-events: none;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3);
  background-repeat: no-repeat; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .25s, transform .25s;
}
.loupe.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* compare */
.compare-box { position: relative; max-width: 520px; margin: 0 auto; aspect-ratio: 792 / 1110; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 30px 60px -30px rgba(40,30,20,.35); }
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--paper); transform: translateX(-1px); box-shadow: 0 0 10px rgba(0,0,0,.3); pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); font-size: 1.1rem; }
.compare-label { position: absolute; top: 1rem; font-size: .75rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(245,242,235,.85); backdrop-filter: blur(4px); }
.l-start { right: 1rem; } .l-end { left: 1rem; }
.compare-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; direction: ltr; }

/* gallery */
.chips { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.chip { font: 400 .85rem var(--font); padding: .4rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--graphite); cursor: pointer; }
.chip.active, .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: .8rem; max-width: 1100px; margin: 0 auto 1.4rem; }
.card { position: relative; overflow: hidden; border-radius: 6px; background: #fff; transition: opacity .35s, transform .35s; }
.card.tall { grid-row: span 2; }
.card img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(var(--sc, 1.12)); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.card img.pos-top { object-position: top; filter: grayscale(.2); }
.card:hover img { --sc: 1.17; }
.card figcaption { position: absolute; inset: auto 0 0 0; padding: 2.4rem 1rem .9rem; color: #fff; font-size: .9rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transform: translateY(8px); transition: .35s; }
.card figcaption span { display: block; font-size: .72rem; opacity: .8; }
.card:hover figcaption { opacity: 1; transform: none; }
.card[data-pair] { cursor: pointer; }
.card .peek { position: absolute; inset: 0; opacity: 0; transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.2,1); }
.card:hover .peek { opacity: 1; }
.peek-tag { position: absolute; top: .7rem; right: .7rem; font-size: .7rem; padding: .15rem .65rem; border-radius: 999px; background: rgba(245,242,235,.9); opacity: 0; transition: opacity .35s; }
.card:hover .peek-tag { opacity: 1; }
.compare-box .compare-img { transition: opacity .35s; }
.compare-box.switching .compare-img { opacity: 0; }
.pair-picker { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.pair-picker button { width: 60px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; opacity: .55; transition: opacity .3s, transform .3s, border-color .3s; }
.pair-picker button img { width: 100%; height: 100%; object-fit: cover; }
.pair-picker button:hover { opacity: .9; }
.pair-picker button.active { opacity: 1; border-color: var(--ink); transform: translateY(-3px); }
.card.hide { display: none; }

/* living gift */
.living { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.living-text p { color: #b9b3a8; margin-top: 1rem; max-width: 32rem; }
.ticks { list-style: none; margin-top: 1.2rem; }
.ticks li { padding: .45rem 1.8rem .45rem 0; position: relative; }
.ticks li::before { content: "♡"; position: absolute; right: 0; color: #d7a3a5; }
.living-art { position: relative; height: 420px; }
.frame-back { position: absolute; right: 4%; top: 6%; width: 58%; aspect-ratio: 3/4; background: #6b5440; background-image: repeating-linear-gradient(95deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px); border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; transform: rotate(-4deg); }
.frame-back .tape { position: absolute; top: -10px; width: 90px; height: 24px; background: rgba(240,230,210,.6); transform: rotate(3deg); }
.qr { width: 46%; aspect-ratio: 1; background: #f5f2eb; padding: 8px; display: grid; grid-template-columns: repeat(21, 1fr); }
.qr i { background: #1d1c1a; }
.qr i.o { background: transparent; }
.frame-back p { font-family: var(--nastaliq); color: #f5f2eb; font-size: 1.1rem; }
.frame-back small { color: rgba(245,242,235,.5); font-size: .7rem; }
.phone { position: absolute; left: 4%; bottom: 0; width: 44%; aspect-ratio: 9/18.5; background: #0c0c0c; border-radius: 30px; padding: 10px; box-shadow: 0 40px 70px rgba(0,0,0,.6), 0 0 0 1px #333; transform: rotate(5deg); }
.phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 34%; height: 14px; background: #0c0c0c; border-radius: 10px; z-index: 2; }
.phone-screen { height: 100%; border-radius: 22px; background: var(--paper); color: var(--ink); padding: 2.2rem .8rem .8rem; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.ph-from { font-size: .72rem; color: var(--wine); text-align: center; font-weight: 500; }
.ph-thumb { flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; background: #fff; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ph-voice { display: flex; align-items: center; gap: .4rem; background: #fff; border-radius: 999px; padding: .35rem .5rem; font-size: .65rem; direction: ltr; }
.play { width: 22px; height: 22px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-size: .55rem; }
.wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 18px; }
.wave i { flex: 1; background: var(--graphite); border-radius: 2px; height: 30%; animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.4s; } .wave i:nth-child(3n+1) { animation-delay: -.8s; } .wave i:nth-child(4n) { animation-duration: .9s; }
@keyframes wave { 50% { height: 100%; } }
.ph-note { font-size: .68rem; color: var(--graphite); line-height: 1.7; text-align: center; }

/* packs */
.pack-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; align-items: stretch; }
.pack { position: relative; background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.pack h3 { font-size: 1.4rem; }
.pack-for { color: var(--soft); font-size: .88rem; margin-bottom: .8rem; }
.pack ul { list-style: none; flex: 1; margin-bottom: 1.3rem; }
.pack li { padding: .42rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.pack.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-10px); }
.pack.featured .pack-for { color: #a29d93; }
.pack.featured li { border-color: #3a3835; }
.pack.featured .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pack.featured .btn:hover { background: #d7a3a5; border-color: #d7a3a5; }
.badge { position: absolute; top: -12px; right: 1.8rem; background: var(--wine); color: #fff; font-size: .72rem; padding: .2rem .8rem; border-radius: 999px; }

/* occasion */
.occasion { padding-top: 0; }
.occ-card { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; align-items: center; padding: 2rem 2.4rem; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.occ-card h3 { font-size: 1.6rem; font-family: var(--nastaliq); color: var(--wine); line-height: 2.2; }
.occ-card p { font-size: .9rem; color: var(--graphite); }
.countdown { display: flex; gap: .8rem; justify-content: center; }
.countdown div { text-align: center; min-width: 64px; background: #fffdf8; border-radius: 10px; padding: .6rem .4rem; border: 1px solid var(--line); }
.countdown b { display: block; font-size: 1.6rem; font-weight: 500; line-height: 1.4; }
.countdown span { font-size: .72rem; color: var(--soft); }
.cap-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.cap-bar span { display: block; height: 100%; background: var(--wine); width: 0; transition: width 1.2s ease; }

/* process */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; counter-reset: s; }
.steps li { position: relative; }
.num { font-family: var(--nastaliq); font-size: 2.6rem; color: var(--gold); line-height: 1.6; display: block; }
.steps h4 { font-size: 1.1rem; font-weight: 500; margin-bottom: .3rem; }
.steps p { font-size: .9rem; color: var(--graphite); }

/* about */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.about-img { overflow: hidden; border-radius: 6px; }
.about-img img { transform: translateY(var(--py, 0)) scale(1.1); border-radius: 6px; aspect-ratio: 4/5; object-fit: cover; object-position: center 70%; box-shadow: 0 30px 60px -30px rgba(40,30,20,.45); }
.about-text p:not(.eyebrow) { color: var(--graphite); margin-top: 1rem; }
.about-text .signature-line { font-family: var(--nastaliq); font-size: 1.3rem; color: var(--ink) !important; }

/* faq */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.faq summary { cursor: pointer; font-weight: 400; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--graphite); margin-top: .7rem; font-size: .93rem; }

/* order */
.order-form, .order-done { max-width: 720px; margin: 0 auto; }
.order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.order-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: #b9b3a8; }
.order-form .full { grid-column: 1 / -1; }
.order-form input:not([type=checkbox]):not([type=file]), .order-form select, .order-form textarea {
  font: 400 .95rem var(--font); color: #ece8e0; background: var(--charcoal-2); border: 1px solid #36332f; border-radius: 10px; padding: .75rem .9rem; outline: none;
}
.order-form :focus { border-color: var(--gold) !important; }
.order-form .check { flex-direction: row; align-items: center; gap: .6rem; }
.drop { position: relative; border: 1.5px dashed #4a4640; border-radius: 12px; min-height: 130px; display: grid; place-items: center; text-align: center; transition: border-color .3s; }
.drop.over { border-color: var(--gold); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty b { display: block; color: #ece8e0; font-weight: 400; }
.drop-empty span { font-size: .8rem; }
.drop-preview { display: flex; align-items: center; gap: 1rem; padding: 1rem; width: 100%; text-align: right; }
.drop-preview img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; }
#photoCheck p { font-size: .82rem; margin: .15rem 0; }
.ok { color: #9fc79a; } .warn { color: #e2b26b; } .bad { color: #e48e8e; }
.order-done { text-align: center; }
.order-done pre { text-align: right; white-space: pre-wrap; font: 400 .9rem/1.9 var(--font); background: var(--charcoal-2); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.2rem 0; color: #ece8e0; }
.order-done p { color: #b9b3a8; margin-bottom: 1.2rem; }

/* footer */
.footer { text-align: center; padding: 2.2rem 1rem 1.8rem; color: var(--graphite); font-size: .88rem; }
.brand-mark.big { font-size: 2.6rem; color: var(--ink); cursor: default; user-select: none; display: inline-block; transition: transform .2s; }
.brand-mark.big.tap { transform: scale(1.08); }
.footer a { text-decoration: none; color: var(--wine); }
.footer small { display: block; margin-top: 1rem; color: var(--soft); }

/* love letter */
.love {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 90% at 50% 30%, #2a1d1e 0%, #141110 60%, #0b0a09 100%);
  color: #f3ece2; display: grid; place-items: center; padding: 2rem 16px;
  animation: fade .8s;
}
.love[hidden] { display: none; }
.love.leaving { animation: loveOut 1.1s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes loveOut { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
.love-sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.love-sky i { position: absolute; bottom: -40px; color: #c9545b; opacity: 0; animation: drift linear infinite; }
.love-sky i.spark { color: #f1d9a8; }
@keyframes drift {
  10% { opacity: var(--o, .6); }
  90% { opacity: var(--o, .6); }
  to { transform: translate(var(--dx, 0), -115vh) rotate(var(--rot, 40deg)); opacity: 0; }
}

.env-stage { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; transition: opacity .7s, transform .9s cubic-bezier(.2,.8,.2,1); }
.env-stage.gone { opacity: 0; transform: translateY(-40px) scale(.9); pointer-events: none; }
.env-eyebrow { font-family: var(--nastaliq); font-size: clamp(1.4rem, 5vw, 2rem); color: #f1d9a8; line-height: 2.4; }
.env-hint { font-size: .9rem; color: #b9ab9b; }
.env-hint span { display: block; font-size: .75rem; opacity: .7; }
.envelope { position: relative; width: min(320px, 78vw); aspect-ratio: 1.5; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; animation: envBob 3.2s ease-in-out infinite; }
@keyframes envBob { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.envelope > span { position: absolute; display: block; }
.env-back { inset: 0; background: #d9cab3; border-radius: 8px; box-shadow: 0 40px 70px rgba(0,0,0,.55); }
.env-paper { left: 7%; right: 7%; top: 8%; bottom: 10%; background: #fdfaf3 var(--grain); border-radius: 3px; transition: transform .9s .45s cubic-bezier(.2,.8,.2,1); }
.env-front { inset: 0; background: linear-gradient(160deg, #efe4d2, #e2d4bd); border-radius: 8px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.env-flap { left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(#e6d8c2, #d6c5ab); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .7s cubic-bezier(.6,0,.3,1), z-index 0s .35s; z-index: 3; }
.seal { left: 50%; top: 56%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; z-index: 4; display: grid !important; place-items: center; font-size: 1.5rem; color: #f6d5d7; background: radial-gradient(circle at 35% 30%, #c4474e, #7a1d23 70%); box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.12); animation: pulse 1.6s ease-in-out infinite; transition: opacity .35s, transform .35s; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.envelope.open { animation: none; }
.envelope.open .seal { opacity: 0; transform: scale(1.8); animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-paper { transform: translateY(-55%); }

.letter {
  position: relative; width: min(600px, 100%); margin: auto;
  background: #fbf7ef var(--grain); color: #2a2522; border-radius: 4px;
  padding: clamp(2rem, 6vw, 3.4rem) clamp(1.4rem, 5vw, 3rem) 2.4rem;
  box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05);
  animation: letterIn 1.1s cubic-bezier(.2,.8,.2,1);
  line-height: 2.1; font-size: clamp(.98rem, 3.6vw, 1.08rem); font-weight: 400;
}
.letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(142,42,46,.18); border-radius: 2px; pointer-events: none; }
@keyframes letterIn { from { opacity: 0; transform: translateY(70px) rotateX(18deg) scale(.95); } }
.pencil-heart { display: block; width: 64px; margin: 0 auto .4rem; overflow: visible; }
.pencil-heart path { fill: none; stroke: #8e2a2e; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 330; animation: drawHeart 2.4s .4s ease forwards; }
@keyframes drawHeart { 80% { fill: transparent; } to { stroke-dashoffset: 0; fill: rgba(142,42,46,.12); } }
.l-title { font-family: var(--nastaliq); color: #8e2a2e; font-size: clamp(1.7rem, 6vw, 2.3rem); text-align: center; line-height: 2.4; margin-bottom: .6rem; opacity: 0; animation: lineIn .9s .9s forwards; }
.l-line { opacity: 0; transform: translateY(14px); filter: blur(4px); margin-top: .9rem; }
.l-line.in { animation: lineIn 1s forwards; }
@keyframes lineIn { to { opacity: 1; transform: none; filter: none; } }
.l-days { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: 1.2rem 0 .2rem; }
.l-days b { font-size: clamp(3rem, 14vw, 4.6rem); font-weight: 200; color: #8e2a2e; line-height: 1; font-variant-numeric: tabular-nums; }
.l-days span { font-size: 1.1rem; color: #6d6259; }
.l-big { font-family: var(--nastaliq); font-size: clamp(1.25rem, 4.6vw, 1.6rem); color: #8e2a2e; text-align: center; line-height: 2.6; margin: 1.4rem 0; }
.l-enter { text-align: center; margin-top: 2rem; }
.l-enter .btn { padding: .95rem 2.4rem; font-size: 1rem; background: #8e2a2e; border-color: #8e2a2e; box-shadow: 0 12px 30px -10px rgba(142,42,46,.7); }
.l-enter .btn:hover { background: #2a2522; border-color: #2a2522; }
.music-toggle { position: fixed; top: 1rem; left: 1rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241,217,168,.4); background: rgba(20,17,16,.6); color: #f1d9a8; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px); }
.music-toggle.playing { animation: pulse 1.8s ease-in-out infinite; }
.music-toggle.muted { opacity: .5; text-decoration: line-through; }
.heart { position: fixed; z-index: 101; pointer-events: none; color: var(--wine); animation: float 2.4s ease-out forwards; }
@keyframes float { to { transform: translateY(-60vh) rotate(20deg); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: perspective(1000px) rotateX(16deg) translateY(50px) scale(.97); transform-origin: 50% 100%; transition: opacity 1s, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero { height: 210vh; }
  .hero-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding: 4.2rem 16px .5rem; text-align: center; }
  .hero-text .lead, .hero-cta, .scroll-hint { display: none; }
  h1 { font-size: 1.7rem; }
  .narration { margin: .5rem auto 0; height: 3.4em; font-size: .92rem; }
  .narr { padding: 0; }
  .narr::before { display: none; }
  .stages-row { justify-content: center; gap: 1rem; }
  .stages { gap: .9rem; font-size: .75rem; }
  .percent { font-size: 1.3rem; }
  .scene { --ch: min(calc(100svh - 330px), calc((100vw - 90px) * 1.4)); --mould: 7px; --matp: 9px; --d: 16px; perspective: 1000px; }
  .pencil { width: 100px; }
  .pencil-obj { width: 140px; } .pencil-obj.small { width: 100px; }
  .sheet { width: 78px; padding: 4px; }
  .eraser { width: 50px; height: 24px; }
  .stump { height: 90px; width: 12px; }
  .strip { grid-template-columns: 1fr 1fr; gap: 1rem 0; }
  .strip div:nth-child(3) { border-right: 0; }
  .detail, .living, .about { grid-template-columns: 1fr; gap: 1.6rem; }
  .detail-text, .living-text, .about-text { max-width: 560px; margin-inline: auto; }
  .about-img, .loupe-wrap { width: 100%; max-width: 360px; margin-inline: auto; }
  .compare-box { max-width: 380px; }
  .living-art { height: 360px; max-width: 420px; width: 100%; margin: 0 auto; }
  .grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .pack-list { grid-template-columns: 1fr; }
  .pack.featured { transform: none; }
  .occ-card { grid-template-columns: 1fr; text-align: center; padding: 1.6rem 1.2rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .order-form { grid-template-columns: 1fr; }
  section { padding-inline: 16px; }
}
@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .wave i, .scroll-hint span { animation: none; }
}