/* ──────────── Preloader ──────────── */
#pre {
  position: fixed; inset: 0; background: var(--ink); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; transition: opacity .9s ease, visibility .9s ease;
}
#pre.out { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo {
  font-family: 'Cormorant', serif; font-size: 3.5rem; font-weight: 300;
  color: #F9F6F1; letter-spacing: .15em;
  opacity: 0; animation: fadeUp .8s ease .4s both;
}
.pre-logo span { color: var(--gold2); }
.pre-line { width: 180px; height: 1px; background: rgba(249, 246, 241, .12); overflow: hidden; }
.pre-fill { height: 100%; background: var(--gold2); transform: translateX(-100%); animation: fillBar 1.6s cubic-bezier(.4, 0, .2, 1) .8s both; }

/* ──────────── Custom cursor (desktop only) ──────────── */
@media (hover: hover) and (pointer: fine) {
  .cur { position: fixed; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 1000; transform: translate(-50%, -50%); transition: width .3s, height .3s, opacity .3s; mix-blend-mode: multiply; }
  .cur-ring { position: fixed; width: 36px; height: 36px; border: 1.5px solid rgba(184, 118, 42, .5); border-radius: 50%; pointer-events: none; z-index: 999; transform: translate(-50%, -50%); transition: transform .14s ease-out, width .35s, height .35s, opacity .3s; }
  .cur.hov { width: 52px; height: 52px; opacity: .15; }
  .cur-ring.hov { width: 0; height: 0; opacity: 0; }
}
@media (hover: none), (pointer: coarse) {
  .cur, .cur-ring { display: none; }
}

/* ──────────── Navigation ──────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1.6rem 4rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: all .5s var(--ease-soft);
}
nav.solid {
  background: rgba(249, 246, 241, .96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 1rem 4rem;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 30px rgba(24, 21, 15, .06);
}
.nav-logo { font-family: 'Cormorant', serif; font-size: 1.55rem; font-weight: 400; color: var(--ink); text-decoration: none; letter-spacing: .08em; }
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; font-weight: 500; transition: color .2s; cursor: pointer; }
.nav-links a:hover { color: var(--gold); }
.nav-r { display: flex; align-items: center; gap: .9rem; }
.btn-tr { font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--border); padding: .52rem 1.1rem; background: transparent; font-family: inherit; font-weight: 600; color: var(--muted); transition: all .25s; }
.btn-tr:hover { border-color: var(--gold); color: var(--gold); }
.btn-nc { background: var(--ink); color: var(--bg); padding: .6rem 1.5rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border: none; font-family: inherit; transition: background .25s; text-decoration: none; display: inline-block; }
.btn-nc:hover { background: var(--gold); }

/* Mobile menu trigger */
.nav-burger { display: none; background: none; border: 0; padding: .5rem; color: var(--ink); }
.nav-burger svg { width: 22px; height: 22px; }

/* ──────────── Hero ──────────── */
.hero { height: 100vh; min-height: 600px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.h-bg { position: absolute; inset: 0; background: linear-gradient(150deg, #1A160E 0%, #251E13 60%, #12100A 100%); }
.h-media {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 2.5s ease, transform 10s ease;
}
.h-media.on { opacity: .42; transform: scale(1); }
.h-media .h-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.h-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 60%, transparent 0%, rgba(18, 16, 10, .75) 100%); }
.h-vig2 { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgba(18, 16, 10, .92), transparent); }

.h-content {
  position: relative; z-index: 2; width: 100%;
  padding: 0 4rem 5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: flex-end;
}
.h-eye { font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold2); font-weight: 600; margin-bottom: 1.8rem; display: flex; align-items: center; gap: .7rem; opacity: 0; transform: translateY(16px); }
.h-eye::before { content: ''; width: 22px; height: 1px; background: var(--gold2); }
.h-eye.in { animation: fadeUp .7s ease both; }

.h-h1 {
  font-family: 'Cormorant', serif;
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 300; line-height: .93;
  color: #F9F6F1; margin-bottom: 1.8rem; overflow: hidden;
}
.h-line { display: block; transform: translateY(110%); opacity: 0; }
.h-line.in { animation: lineIn .9s var(--ease-luxe) both; }
.h-line:nth-child(2) { animation-delay: .12s; }
.h-line:nth-child(3) { animation-delay: .22s; }
.h-line em { font-style: italic; color: var(--gold3); }

.h-desc { font-size: .95rem; line-height: 1.78; color: rgba(249, 246, 241, .58); max-width: 460px; font-weight: 300; opacity: 0; transform: translateY(14px); }
.h-desc.in { animation: fadeUp .8s ease both; }

.h-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2rem; }
.h-ctas { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; opacity: 0; transform: translateY(16px); }
.h-ctas.in { animation: fadeUp .8s ease both; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; padding: 1.05rem 2.2rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border: none; border-radius: 999px; font-family: inherit; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; box-shadow: 0 12px 30px -8px rgba(184, 118, 42, .5); }
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 38px -8px rgba(184, 118, 42, .6); }
.btn-ghost-h { font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(249, 246, 241, .6); display: flex; align-items: center; gap: .5rem; transition: all .25s; font-weight: 500; border: none; background: none; font-family: inherit; }
.btn-ghost-h:hover { color: var(--gold3); gap: .9rem; }

.h-stats { display: flex; gap: 2.5rem; opacity: 0; transform: translateY(14px); }
.h-stats.in { animation: fadeUp .8s ease both; }
.hst-n { font-family: 'Cormorant', serif; font-size: 2.6rem; font-weight: 300; color: var(--gold3); display: block; line-height: 1; }
.hst-l { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(249, 246, 241, .42); margin-top: .2rem; }

.scroll-ind { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; z-index: 2; opacity: 0; }
.scroll-ind.in { animation: fadeUp .8s ease both; }
.sc-txt { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(249, 246, 241, .35); }
.sc-line { width: 1px; height: 40px; background: rgba(249, 246, 241, .15); position: relative; overflow: hidden; }
.sc-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--gold2); animation: scDown 2s ease-in-out 3.2s infinite; }

/* ──────────── Marquee ──────────── */
.mq-wrap { overflow: hidden; background: var(--gold); padding: .82rem 0; }
.mq-track { display: flex; gap: 3rem; animation: mqAnim 26s linear infinite; white-space: nowrap; }
.mq-item { font-size: .67rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); font-weight: 700; flex-shrink: 0; display: flex; align-items: center; gap: 2rem; }
.mq-dot { width: 4px; height: 4px; background: rgba(24, 21, 15, .25); border-radius: 50%; }

/* ──────────── Vacuum packaging video section ──────────── */
.vacuum-vid {
  padding: 7rem 4rem;
  background: linear-gradient(160deg, #15110A 0%, #1F1A11 55%, #120E07 100%);
  position: relative;
  overflow: hidden;
}
.vacuum-vid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 22%, rgba(184, 118, 42, .12) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(240, 192, 122, .05) 0%, transparent 60%);
  pointer-events: none;
}
.vacuum-vid::after {
  content: 'VACUUM';
  position: absolute;
  right: -3vw; top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant', serif;
  font-size: 22vw; font-weight: 300;
  color: rgba(249, 246, 241, .02);
  letter-spacing: -.04em;
  line-height: 1; white-space: nowrap;
  pointer-events: none;
}
.vv-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}
.vv-head {
  max-width: 720px;
  margin-bottom: 3rem;
}
.vv-eye {
  color: var(--gold3) !important;
}
.vv-eye::before {
  background: var(--gold3) !important;
}
.vv-h2 {
  font-family: 'Cormorant', serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  color: #F9F6F1;
  margin-bottom: 1.4rem;
}
.vv-h2 em {
  font-style: italic;
  color: var(--gold3);
}
.vv-desc {
  font-size: 1rem;
  line-height: 1.78;
  color: rgba(249, 246, 241, .58);
  font-weight: 300;
  max-width: 620px;
}

.vv-card {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #000;
  overflow: hidden;
  font-family: inherit;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    0 8px 28px rgba(184, 118, 42, .14);
  transition:
    transform .6s var(--ease-luxe),
    box-shadow .6s var(--ease-luxe);
}
.vv-card:focus-visible {
  outline: 2px solid var(--gold3);
  outline-offset: 6px;
}
.vv-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .65),
    0 14px 38px rgba(184, 118, 42, .26);
}
.vv-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.vv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(.92) brightness(.82);
  transition:
    transform 1.1s var(--ease-soft),
    filter .55s ease;
}
.vv-card:hover .vv-thumb img {
  transform: scale(1.07);
  filter: saturate(1.05) brightness(.92);
}
.vv-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(18, 16, 10, .45) 70%, rgba(18, 16, 10, .8) 100%),
    linear-gradient(to bottom, rgba(18, 16, 10, .15) 0%, rgba(18, 16, 10, .45) 100%);
  transition: background .5s ease;
}
.vv-card:hover .vv-overlay {
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(18, 16, 10, .35) 70%, rgba(18, 16, 10, .7) 100%),
    linear-gradient(to bottom, rgba(18, 16, 10, .1) 0%, rgba(18, 16, 10, .35) 100%);
}

.vv-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  border-radius: 50%;
  background: rgba(249, 246, 241, .06);
  border: 1.5px solid rgba(240, 192, 122, .55);
  color: var(--gold3);
  display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform .45s var(--ease-luxe),
    background .45s ease,
    border-color .45s ease,
    color .45s ease;
}
.vv-play::before,
.vv-play::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(240, 192, 122, .22);
  transition: inset .55s var(--ease-luxe), border-color .45s, opacity .45s;
  pointer-events: none;
}
.vv-play::before { inset: -12px; }
.vv-play::after  { inset: -24px; border-color: rgba(240, 192, 122, .1); }
.vv-play svg {
  width: 40px;
  height: 40px;
  margin-left: 6px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
  transition: transform .35s var(--ease-luxe);
}
.vv-card:hover .vv-play {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.06);
}
.vv-card:hover .vv-play::before { inset: -18px; border-color: rgba(184, 118, 42, .4); }
.vv-card:hover .vv-play::after  { inset: -32px; border-color: rgba(184, 118, 42, .18); }
.vv-card:hover .vv-play svg { transform: scale(1.05); }

.vv-card-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.8rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.vv-tag {
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F9F6F1;
  transition: color .3s;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.vv-tag::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--gold3);
  transition: width .3s, background .3s;
}
.vv-card:hover .vv-tag { color: var(--gold3); }
.vv-card:hover .vv-tag::before { width: 32px; }
.vv-runtime {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(249, 246, 241, .42);
  font-weight: 600;
}

.vv-note {
  margin-top: 1.9rem;
  font-size: .85rem;
  line-height: 1.7;
  color: rgba(249, 246, 241, .38);
  font-weight: 300;
  max-width: 660px;
}

/* ──────────── Video lightbox ──────────── */
.vlb {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.vlb.open {
  display: flex;
  animation: fadeUp .35s ease both;
}
.vlb-frame {
  position: relative;
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  animation: modalPop .5s var(--ease-luxe);
}
.vlb-player {
  position: absolute;
  inset: 0;
}
.vlb-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vlb-close {
  position: absolute;
  top: -3.4rem;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(249, 246, 241, .08);
  border: 1px solid rgba(249, 246, 241, .2);
  color: #F9F6F1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s;
}
.vlb-close svg { width: 14px; height: 14px; pointer-events: none; }
.vv-play svg, .vv-play::before, .vv-play::after { pointer-events: none; }
.vlb-close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: rotate(90deg);
}

/* ──────────── About ──────────── */
.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; overflow: hidden; }
.ab-img { position: relative; overflow: hidden; background: var(--bg3); }
.ab-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.3s var(--ease-soft); }
.ab-img.vis img { transform: scale(1); }
.ab-img-ov { position: absolute; inset: 0; background: linear-gradient(to right, transparent 65%, var(--bg) 100%); }
.ab-cont { padding: 6rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.ab-txt { font-size: .9rem; line-height: 1.82; color: var(--muted); font-weight: 300; max-width: 450px; margin-bottom: 2.4rem; }
.ab-feats { display: flex; flex-direction: column; gap: .75rem; }
.afeat { display: flex; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid transparent; transition: all .35s; }
.afeat:hover { border-color: var(--border); background: #fff; box-shadow: 0 4px 24px rgba(24, 21, 15, .06); }
.af-ic { font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.af-t { font-size: .87rem; font-weight: 600; color: var(--ink); margin-bottom: .18rem; }
.af-d { font-size: .77rem; color: var(--muted); line-height: 1.55; font-weight: 300; }

/* ──────────── Numbers strip ──────────── */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); position: relative; overflow: hidden; }
.nums::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 130%, rgba(184, 118, 42, .06) 0%, transparent 55%); pointer-events: none; }
.num-item { padding: 3.5rem 2rem; border-right: 1px solid rgba(249, 246, 241, .06); text-align: center; transition: background .3s; }
.num-item:last-child { border-right: none; }
.num-item:hover { background: rgba(249, 246, 241, .025); }
.n-big { font-family: 'Cormorant', serif; font-size: 4.2rem; font-weight: 300; color: var(--gold3); display: block; line-height: 1; margin-bottom: .4rem; }
.n-big sup { font-size: 2rem; vertical-align: top; margin-top: .5rem; display: inline-block; }
.n-lbl { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(249, 246, 241, .42); font-weight: 500; }

/* ──────────── Catalogue ──────────── */
.cat { padding: 7rem 4rem; background: var(--bg); }
.cat-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.4rem; }
.cat-filt { display: flex; gap: .35rem; flex-wrap: wrap; }
.fb { padding: .52rem 1.35rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--border); background: transparent; font-family: inherit; color: var(--muted); font-weight: 600; transition: all .25s; }
.fb.on, .fb:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.pcard { background: var(--bg); overflow: hidden; cursor: pointer; position: relative; transition: background .3s; display: flex; flex-direction: column; }
.pcard:hover { background: #fff; box-shadow: var(--shadow-card); }
.pcard.gone { display: none; }
.pc-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg2); position: relative; }
.pc-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease-soft); filter: brightness(.99); padding: .8rem; }
.pcard:hover .pc-img img { transform: scale(1.05); }
.pc-b1 { position: absolute; top: .9rem; left: .9rem; background: rgba(249, 246, 241, .94); font-size: .57rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: .26rem .65rem; color: var(--ink); border-radius: 20px; }
.pc-b2 { position: absolute; top: .9rem; right: .9rem; background: var(--green); color: #fff; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .24rem .55rem; }
.pc-info { padding: 1.4rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.pc-ref { font-size: .57rem; letter-spacing: .2em; color: var(--muted); margin-bottom: .35rem; text-transform: uppercase; }
.pc-name { font-family: 'Cormorant', serif; font-size: 1.3rem; font-weight: 400; color: var(--ink); margin-bottom: .35rem; line-height: 1.2; }
.pc-desc { font-size: .75rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; font-weight: 300; flex: 1; }
.pc-bot { display: flex; justify-content: space-between; align-items: center; padding-top: .9rem; border-top: 1px solid var(--border); }
.pc-price { font-family: 'Cormorant', serif; font-size: 1.18rem; color: var(--gold); }
.pc-sz { font-size: .6rem; color: var(--muted); }
.pc-cta { width: 100%; margin-top: .85rem; padding: .68rem; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-weight: 600; transition: all .25s; }
.pc-cta:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ──────────── Catalogue note ──────────── */
.cat-note {
  margin-top: 3rem;
  padding: 1.6rem 2rem;
  background: var(--bg2);
  border-left: 2px solid var(--gold);
  font-size: .82rem; line-height: 1.78;
  color: var(--ink2); font-weight: 300;
  max-width: 880px;
}
.cat-note strong { color: var(--ink); font-weight: 500; }
.cat-note p + p { margin-top: .7rem; }

/* ──────────── Video section ──────────── */
.vsec { padding: 7rem 4rem; background: var(--ink2); position: relative; overflow: hidden; }
.vsec::after { content: 'UNBOX'; font-family: 'Cormorant', serif; font-size: 22vw; font-weight: 300; color: rgba(249, 246, 241, .018); position: absolute; right: -3vw; top: 50%; transform: translateY(-50%); pointer-events: none; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.v-top { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-bottom: 4rem; }
.v-h2 { font-family: 'Cormorant', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; color: #F9F6F1; line-height: 1.1; }
.v-h2 em { font-style: italic; color: var(--gold3); }
.v-desc { font-size: .88rem; color: rgba(249, 246, 241, .5); line-height: 1.8; font-weight: 300; }
.vgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; background: rgba(249, 246, 241, .05); }
.vp { position: relative; cursor: pointer; overflow: hidden; }
.vp-main { aspect-ratio: 16 / 9; }
.vp-side { display: flex; flex-direction: column; gap: 1px; }
.vp-sm { aspect-ratio: 4 / 3; }
.vp-in { width: 100%; height: 100%; background: linear-gradient(135deg, #1E1A12 0%, #120E08 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: background .4s; }
.vp:hover .vp-in { background: linear-gradient(135deg, #2A2210 0%, #1C1608 100%); }
.play-r { width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid rgba(249, 246, 241, .25); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #F9F6F1; transition: all .4s; position: relative; }
.play-r::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(184, 118, 42, 0); transition: all .4s; }
.vp:hover .play-r { border-color: var(--gold); background: rgba(184, 118, 42, .1); }
.vp:hover .play-r::before { border-color: rgba(184, 118, 42, .25); inset: -14px; }
.vp-lbl { text-align: center; }
.vp-lbl strong { display: block; font-size: .79rem; color: rgba(249, 246, 241, .82); margin-bottom: .18rem; }
.vp-lbl span { font-size: .67rem; color: rgba(249, 246, 241, .42); letter-spacing: .07em; }
.v-note { margin-top: 2rem; font-size: .73rem; color: rgba(249, 246, 241, .35); display: flex; align-items: center; gap: .6rem; }

/* ──────────── Process ──────────── */
.proc { padding: 7rem 4rem; background: var(--bg2); }
.proc-in { max-width: 1100px; margin: 0 auto; }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); margin-top: 4rem; }
.pst { padding: 2.4rem 1.9rem; border-right: 1px solid var(--border); position: relative; transition: background .35s; overflow: hidden; }
.pst:last-child { border-right: none; }
.pst:hover { background: #fff; }
.pst-arr { position: absolute; top: 2.8rem; right: -.65rem; width: 13px; height: 13px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); transform: rotate(45deg); background: var(--bg2); z-index: 2; transition: background .35s; }
.pst:last-child .pst-arr { display: none; }
.pst:hover .pst-arr { background: #fff; }
.pst-n { font-size: .6rem; letter-spacing: .22em; color: var(--gold); margin-bottom: 1.2rem; font-weight: 700; }
.pst-ic { font-size: 1.9rem; margin-bottom: .85rem; display: block; }
.pst-t { font-family: 'Cormorant', serif; font-size: 1.12rem; font-weight: 400; color: var(--ink); margin-bottom: .45rem; }
.pst-d { font-size: .77rem; color: var(--muted); line-height: 1.65; font-weight: 300; }
.pst-bg { position: absolute; bottom: -15px; right: -5px; font-family: 'Cormorant', serif; font-size: 5.5rem; font-weight: 300; color: rgba(24, 21, 15, .035); line-height: 1; pointer-events: none; }

/* ──────────── Comparison ──────────── */
.comp { padding: 7rem 4rem; background: var(--bg); }
.comp-in { max-width: 840px; margin: 0 auto; }
.ctbl { margin-top: 3rem; border: 1px solid var(--border); overflow: hidden; }
.crow { display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid var(--border); }
.crow:last-child { border-bottom: none; }
.crow.hdr { background: var(--ink); }
.cc { padding: 1.05rem 1.4rem; font-size: .79rem; color: var(--muted); display: flex; align-items: center; }
.cc.hl { color: var(--ink); font-weight: 500; }
.crow.hdr .cc { font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(249, 246, 241, .55); font-weight: 700; }
.crow.hdr .cc.us { color: var(--gold3); }
.cc:not(:first-child) { justify-content: center; border-left: 1px solid var(--border); }
.crow.hdr .cc:not(:first-child) { border-left-color: rgba(249, 246, 241, .07); }
.cy { color: var(--green); font-size: 1.05rem; }
.cn { color: var(--danger); font-size: 1.05rem; }
.crow:nth-child(even):not(.hdr) { background: var(--bg2); }

/* ──────────── Reviews ──────────── */
.revs { padding: 7rem 4rem; background: var(--bg2); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.rcard { background: #fff; padding: 2.1rem; border: 1px solid var(--border); transition: all .4s; position: relative; overflow: hidden; }
.rcard::before { content: '\201C'; font-family: 'Cormorant', serif; font-size: 5rem; line-height: 1; color: var(--gold3); opacity: .22; position: absolute; top: .7rem; right: 1.3rem; pointer-events: none; }
.rcard:hover { box-shadow: var(--shadow-card); border-color: transparent; transform: translateY(-4px); }
.r-stars { color: var(--gold); font-size: .79rem; letter-spacing: .08em; margin-bottom: .85rem; }
.r-txt { font-size: .83rem; line-height: 1.78; color: var(--ink2); font-weight: 300; margin-bottom: 1.35rem; font-style: italic; }
.r-auth { display: flex; align-items: center; gap: .75rem; }
.r-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bg2); background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant', serif; color: var(--muted); font-size: 1.1rem; }
.r-nm { font-size: .81rem; font-weight: 600; color: var(--ink); }
.r-rl { font-size: .67rem; color: var(--muted); }

/* ──────────── Contact ──────────── */
.contact-s { display: grid; grid-template-columns: 1fr 1fr; }
.cl { padding: 7rem 4rem; background: var(--ink); position: relative; overflow: hidden; }
.cl::after { content: ''; position: absolute; bottom: -140px; left: -140px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(184, 118, 42, .065) 0%, transparent 65%); pointer-events: none; }
.cl-h2 { font-family: 'Cormorant', serif; font-size: clamp(1.9rem, 3.2vw, 3.2rem); font-weight: 300; color: #F9F6F1; line-height: 1.1; margin-bottom: 1.2rem; }
.cl-h2 em { font-style: italic; color: var(--gold3); }
.cl-sub { font-size: .87rem; color: rgba(249, 246, 241, .5); line-height: 1.8; font-weight: 300; max-width: 400px; margin-bottom: 2.8rem; }
.c-infos { display: flex; flex-direction: column; gap: .9rem; }
.c-info { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.15rem; border: 1px solid rgba(249, 246, 241, .08); transition: border-color .3s; }
.c-info:hover { border-color: rgba(184, 118, 42, .35); }
.ci-ic { font-size: 1.05rem; flex-shrink: 0; width: 1.2em; text-align: center; }
.ci-lbl { font-size: .57rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(249, 246, 241, .35); }
.ci-val { font-size: .87rem; color: #F9F6F1; font-weight: 500; }
.ci-val a { color: #F9F6F1; text-decoration: none; transition: color .2s; }
.ci-val a:hover { color: var(--gold3); }
.cr { padding: 7rem 4rem; background: var(--bg); }
.cr-h3 { font-family: 'Cormorant', serif; font-size: 1.85rem; font-weight: 300; color: var(--ink); margin-bottom: .5rem; }
.cr-sub { font-size: .79rem; color: var(--muted); margin-bottom: 1.9rem; font-weight: 300; }

/* ──────────── Form styles (shared by contact + modal) ──────────── */
.cform { display: flex; flex-direction: column; gap: .85rem; }
.crow-f { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.cfg { display: flex; flex-direction: column; gap: .28rem; }
.cfl { font-size: .57rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cfl span { color: var(--gold); }
.cfi, .cfsel, .cfta {
  background: #fff; border: 1px solid rgba(138, 127, 114, .28); color: var(--ink);
  padding: .95rem 1.1rem;
  font-family: inherit; font-size: .92rem;
  outline: none; transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  width: 100%; border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(24, 21, 15, .04);
  -webkit-appearance: none; appearance: none;
}
.cfi:focus, .cfsel:focus, .cfta:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 118, 42, .14); }
.cfi::placeholder, .cfta::placeholder { color: var(--muted); }
.cfi.err, .cfsel.err, .cfta.err { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(193, 60, 60, .12); }
.cfsel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7F72' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.4rem;
}
.cfta { min-height: 92px; resize: vertical; }
.cfsub { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; border: none; border-radius: 13px;
  padding: 1.05rem 2rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: inherit; font-weight: 700;
  box-shadow: 0 8px 22px rgba(184, 118, 42, .26); transition: transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft), filter .25s; }
.cfsub:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(184, 118, 42, .34); }
.cfsub[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.cfnote { font-size: .67rem; color: var(--muted); margin-top: .25rem; line-height: 1.5; }
.cfnote a { color: var(--gold); text-decoration: none; }
.cf-error { font-size: .67rem; color: var(--danger); margin-top: .15rem; display: none; }
.cfg.err .cf-error { display: block; }

/* ──────────── Footer ──────────── */
footer { background: var(--ink2); padding: 4rem 4rem 2rem; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 3rem; }
.fl-lg { font-family: 'Cormorant', serif; font-size: 1.55rem; font-weight: 400; color: #F9F6F1; margin-bottom: .55rem; }
.fl-lg span { color: var(--gold3); }
.fl-tag { font-size: .77rem; color: rgba(249, 246, 241, .42); line-height: 1.7; font-weight: 300; margin-bottom: 1.4rem; }
.fl-contacts { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.4rem; }
.fl-contacts a { font-size: .79rem; color: rgba(249, 246, 241, .55); text-decoration: none; font-weight: 300; transition: color .2s; }
.fl-contacts a:hover { color: var(--gold3); }
.fl-socs { display: flex; gap: .55rem; }
.fl-s { width: 38px; height: 38px; border: 1px solid rgba(249, 246, 241, .12); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: .82rem; transition: all .25s; color: rgba(249, 246, 241, .8); }
.fl-s:hover { border-color: var(--gold2); color: var(--gold2); transform: translateY(-2px); }
.fct { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(249, 246, 241, .42); margin-bottom: 1rem; font-weight: 700; }
.fcls { list-style: none; display: flex; flex-direction: column; gap: .58rem; }
.fcls a { font-size: .79rem; color: rgba(249, 246, 241, .48); text-decoration: none; font-weight: 300; transition: color .2s; cursor: pointer; }
.fcls a:hover { color: var(--gold3); }
.fbot { background: var(--ink2); border-top: 1px solid rgba(249, 246, 241, .06); padding: 1.15rem 4rem; display: flex; justify-content: space-between; align-items: center; }
.fcp { font-size: .67rem; color: rgba(249, 246, 241, .3); }

/* ──────────── Room visualizer: upload zone (modal) ──────────── */
.vz-drop {
  display: block; position: relative;
  border: 1.5px dashed rgba(184, 118, 42, .45);
  border-radius: 10px;
  background: rgba(184, 118, 42, .04);
  cursor: pointer;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft);
  overflow: hidden;
}
.vz-drop:hover, .vz-drop:focus-visible, .vz-drop--over {
  border-color: var(--gold);
  background: rgba(184, 118, 42, .08);
  outline: none;
}
.vz-drop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .35rem; padding: 1.9rem 1rem;
}
.vz-drop-icon { font-size: 1.7rem; line-height: 1; opacity: .9; }
.vz-drop-text { font-size: .92rem; color: var(--ink2); font-weight: 500; }
.vz-drop-hint { font-size: .74rem; color: var(--muted); }
.vz-preview { position: relative; }
.vz-preview-img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.vz-preview-clear {
  position: absolute; top: .55rem; right: .55rem;
  width: 30px; height: 30px; border-radius: 999px; border: none;
  background: rgba(24, 21, 15, .72); color: #fff; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.vz-preview-clear:hover { background: rgba(24, 21, 15, .9); }

/* ──────────── Room visualizer: on-page CTA section ──────────── */
.lp-vz { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--bg2); }
.lp-vz-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.lp-vz-media { position: relative; }
.lp-vz-after {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card); aspect-ratio: 1376 / 768; background: var(--bg3);
}
.lp-vz-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-vz-tag {
  position: absolute; left: .9rem; bottom: .9rem;
  background: rgba(24, 21, 15, .68); color: #fff; backdrop-filter: blur(6px);
  font-size: .7rem; letter-spacing: .04em; padding: .35rem .7rem; border-radius: 999px;
}
.lp-vz-before {
  position: absolute; top: -14px; right: -14px;
  width: 38%; max-width: 190px; border-radius: 9px; overflow: hidden;
  border: 3px solid var(--bg); box-shadow: 0 10px 30px rgba(24, 21, 15, .22);
  aspect-ratio: 1376 / 768; background: var(--bg3);
}
.lp-vz-before img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-vz-before-tag {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(24, 21, 15, .6); color: #fff; font-size: .58rem; text-align: center;
  padding: .22rem; letter-spacing: .03em;
}
.lp-vz-body { max-width: 30em; }
.lp-vz-cta {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem;
  background: var(--gold); color: #fff; border: none;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  padding: 1rem 1.8rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button); cursor: pointer;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.lp-vz-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(184, 118, 42, .42); }
.lp-vz-sub { margin-top: .85rem; font-size: .78rem; color: var(--muted); }
@media (max-width: 760px) {
  .lp-vz-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .lp-vz-before { width: 34%; top: -10px; right: -8px; }
  .lp-vz-cta { width: 100%; justify-content: center; }
}

/* ──────────── Image lightbox (product gallery) ──────────── */
.ilb {
  position: fixed; inset: 0; z-index: 650;
  background: rgba(16, 12, 8, .93);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ilb.open { display: flex; }
.ilb-stage {
  margin: 0; max-width: 92vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  animation: modalPop .35s var(--ease-luxe);
}
.ilb-img {
  max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: var(--bg2);
}
.ilb-cap { color: rgba(255, 255, 255, .7); font-size: .8rem; letter-spacing: .03em; }
.ilb-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 44px; height: 44px; border-radius: 999px; border: none;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s;
}
.ilb-close svg { width: 18px; height: 18px; }
.ilb-close:hover { background: rgba(255, 255, 255, .22); }
.ilb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 999px; border: none;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s;
}
.ilb-nav:hover { background: rgba(255, 255, 255, .22); }
.ilb-nav svg { width: 24px; height: 24px; }
.ilb-prev { left: 1.2rem; }
.ilb-next { right: 1.2rem; }
@media (max-width: 600px) {
  .ilb-nav { width: 42px; height: 42px; }
  .ilb-prev { left: .5rem; }
  .ilb-next { right: .5rem; }
  .ilb-img { max-height: 76vh; }
}

/* ──────────── Room visualizer: floating action button ──────────── */
.vz-fab {
  position: fixed;
  /* bottom-right, clearing the iOS Safari bottom bar via safe-area inset. */
  right: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: calc(clamp(.9rem, 2.5vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--gold);
  padding: .72rem 1.15rem .72rem .9rem; border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif; font-size: .9rem; font-weight: 600; line-height: 1;
  box-shadow: 0 14px 36px rgba(24, 21, 15, .22);
  cursor: pointer;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft);
  animation: vzFabIn .5s var(--ease-luxe) both .8s;
}
.vz-fab:hover { transform: translateY(-2px); background: var(--gold); color: #fff; box-shadow: 0 18px 44px rgba(184, 118, 42, .4); }
/* On the homepage the messenger fab-stack (2 circles) sits bottom-right —
   raise the visualizer pill above it so the corner reads as one tidy column. */
.vz-fab--stacked { bottom: calc(clamp(.9rem, 2.5vw, 1.6rem) + env(safe-area-inset-bottom, 0px) + 8.6rem); }
.vz-fab-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; flex: 0 0 auto;
  background: rgba(184, 118, 42, .14); font-size: .95rem;
}
.vz-fab:hover .vz-fab-ico { background: rgba(255, 255, 255, .2); }
.vz-fab-txt { white-space: nowrap; }
/* one-time attention pulse ring */
.vz-fab::after {
  content: ''; position: absolute; inset: -2px; border-radius: var(--radius-pill);
  border: 2px solid var(--gold); opacity: 0; pointer-events: none;
  animation: vzFabPulse 2.4s var(--ease-soft) 1.6s 3;
}
@keyframes vzFabIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vzFabPulse {
  0% { opacity: .7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.18); }
}
@media (max-width: 520px) {
  .vz-fab { font-size: .82rem; padding: .62rem .95rem .62rem .72rem; }
  .vz-fab-ico { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-fab { animation: none; }
  .vz-fab::after { animation: none; display: none; }
}

/* ──────────── Order/product modal ──────────── */
.mov {
  position: fixed; inset: 0;
  background: rgba(24, 21, 15, .78);
  z-index: 600;
  display: none;
  align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem;
}
.mov.open { display: flex; }
.mbox {
  background: var(--bg);
  max-width: 560px;
  width: 100%;
  position: relative;
  animation: modalPop .4s var(--ease-luxe);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Gallery */
.m-gallery { background: var(--bg2); }
.m-gal-main {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--bg2);
  touch-action: pan-y;
  user-select: none;
}
.m-gal-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: opacity .25s; }
.m-gal-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(249, 246, 241, .94);
  border: none;
  font-size: 1.2rem; line-height: 1; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 2; font-family: inherit; font-weight: 400;
  padding: 0;
}
.m-gal-arr:hover { background: #fff; }
.m-gal-arr.prev { left: .85rem; }
.m-gal-arr.next { right: .85rem; }
.m-gal-thumbs {
  display: flex; gap: .45rem; padding: .6rem;
  background: var(--bg2);
  overflow-x: auto; border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.m-gal-thumbs::-webkit-scrollbar { height: 4px; }
.m-gal-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.m-gal-th {
  flex: 0 0 68px; height: 50px;
  border: 2px solid transparent;
  background: none; padding: 0; overflow: hidden;
  transition: border-color .2s, opacity .2s; opacity: .7;
}
.m-gal-th img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.m-gal-th:hover { opacity: 1; }
.m-gal-th.on { border-color: var(--gold); opacity: 1; }
.m-gallery.single .m-gal-arr,
.m-gallery.single .m-gal-thumbs { display: none; }

.m-body { padding: 1.9rem; }
.m-cat { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .32rem; font-weight: 700; }
.m-nm { font-family: 'Cormorant', serif; font-size: 1.75rem; font-weight: 300; color: var(--ink); margin-bottom: .75rem; }
.m-desc { font-size: .85rem; color: var(--ink2); line-height: 1.78; margin-bottom: 1.25rem; font-weight: 300; }
.m-specs { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; margin-bottom: 1.25rem; }
.msp { background: var(--bg2); padding: .62rem .88rem; }
.msp-l { font-size: .56rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.msp-v { font-size: .83rem; color: var(--ink); margin-top: .1rem; font-weight: 500; }
.m-price { font-family: 'Cormorant', serif; font-size: 2rem; color: var(--gold); margin-bottom: .35rem; line-height: 1; }
.m-price-note { font-size: .7rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; }
.m-cl {
  position: absolute; top: .9rem; right: .9rem;
  background: rgba(249, 246, 241, .94);
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: .85rem; color: var(--ink);
  transition: background .2s; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.m-cl:hover { background: #fff; }
.m-cta { width: 100%; padding: .95rem; background: var(--gold); color: var(--ink); border: none; font-family: inherit; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; transition: background .2s; }
.m-cta:hover { background: var(--gold2); }

/* Order modal */
.om-head { padding: 1.9rem 1.9rem 0; }
.om-cat { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; font-weight: 700; }
.om-title { font-family: 'Cormorant', serif; font-size: 1.85rem; font-weight: 300; color: var(--ink); margin-bottom: .35rem; line-height: 1.1; }
.om-title em { font-style: italic; color: var(--gold); }
.om-sub { font-size: .82rem; color: var(--muted); line-height: 1.6; font-weight: 300; margin-bottom: 1.4rem; }
.om-body { padding: 0 1.9rem 1.9rem; }

/* Error banner inside form */
.om-error,
.cform .om-error {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .8rem 1rem;
  background: rgba(176, 48, 48, .07);
  border-left: 3px solid var(--danger);
  color: #6F2222;
  font-size: .82rem; line-height: 1.5;
  margin: .2rem 0 .2rem;
}
.om-error > span:first-child {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-weight: 700; font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
}

/* Success state */
.om-success { padding: 3rem 1.9rem; text-align: center; }
.om-success-ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(61, 92, 52, .12); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 1.2rem; }
.om-success h3 { font-family: 'Cormorant', serif; font-size: 1.6rem; font-weight: 300; color: var(--ink); margin-bottom: .55rem; }
.om-success p { font-size: .87rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.4rem; }
.om-success-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.om-success-actions a {
  text-decoration: none;
  padding: .65rem 1.2rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--border); color: var(--ink);
  transition: all .2s;
}
.om-success-actions a:hover { border-color: var(--gold); color: var(--gold); }
.om-success-fallback {
  font-size: .76rem !important;
  color: var(--muted) !important;
  margin: 1.3rem 0 0 !important;
  font-style: italic;
  line-height: 1.6;
}
/* Soft "subscribe to channel" CTA shared by the order-success + tracking screens. */
.om-channel, .ot-channel {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  margin: 1.4rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(184, 118, 42, .05);
  text-decoration: none;
  font-size: .82rem; line-height: 1.45; color: var(--ink);
  transition: border-color .2s, background .2s;
}
.om-channel:hover, .ot-channel:hover { border-color: var(--gold); background: rgba(184, 118, 42, .1); }
.om-channel-ic, .ot-channel-ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff;
}
.ot-channel { margin-top: 1.1rem; }

/* ──────────── Order tracking modal ──────────── */
.ot-mbox { max-width: 620px; }
.ot-head { padding: 1.9rem 1.9rem 0; }
.ot-body { padding: 1.4rem 1.9rem 1.9rem; }

.ot-search {
  display: flex; gap: .6rem;
  margin-bottom: 1.4rem;
}
.ot-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Outfit', monospace;
}
.ot-go { flex-shrink: 0; padding-left: 1.4rem; padding-right: 1.4rem; }

.ot-result { min-height: 60px; }

.ot-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
}
.ot-empty-ic { font-size: 2.2rem; margin-bottom: .9rem; opacity: .75; }
.ot-empty h3 {
  font-family: 'Cormorant', serif;
  font-size: 1.45rem; font-weight: 300;
  color: var(--ink); margin-bottom: .5rem;
}
.ot-empty p {
  font-size: .85rem; color: var(--muted);
  line-height: 1.65; margin-bottom: .6rem;
}
.ot-empty p a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184, 118, 42, .35); }
.ot-empty-q { font-size: .72rem !important; color: rgba(138, 127, 114, .7) !important; margin-bottom: 0 !important; }
.ot-empty-q code { font-family: 'Outfit', monospace; padding: .12rem .4rem; background: #fff; }

.ot-card {
  background: #fff;
  border: 1px solid var(--border);
}
.ot-card-head {
  padding: 1.3rem 1.6rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem;
}
.ot-card-num {
  font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 700;
  margin-bottom: .25rem;
  font-family: 'Outfit', monospace;
}
.ot-card-client {
  font-family: 'Cormorant', serif;
  font-size: 1.35rem; font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
}
.ot-badge {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; padding: .38rem .85rem;
  border-radius: 2px;
}
.ot-badge-new        { background: rgba(138, 127, 114, .14); color: var(--muted); }
.ot-badge-production { background: rgba(184, 118, 42, .14);  color: var(--gold); }
.ot-badge-shipped    { background: rgba(80, 60, 180, .14);   color: #5040A0; }
.ot-badge-customs    { background: rgba(30, 110, 200, .14);  color: #1E6EB4; }
.ot-badge-delivery   { background: rgba(217, 127, 23, .14);  color: #C26A0E; }
.ot-badge-done       { background: rgba(61, 92, 52, .16);    color: var(--green); }

.ot-card-product {
  padding: 1.1rem 1.6rem;
  border-bottom: 1px solid var(--border);
}
.ot-card-product-name {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem; font-weight: 400; color: var(--ink);
  margin-bottom: .35rem;
}
.ot-card-track,
.ot-card-updated {
  font-size: .76rem; color: var(--muted);
  margin-top: .25rem;
}
.ot-card-track code {
  font-family: 'Outfit', monospace;
  background: var(--bg2);
  padding: .1rem .4rem;
}

.ot-timeline {
  list-style: none;
  padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column;
  gap: 0;
}
.ot-step {
  display: flex; gap: 1rem;
  padding-bottom: 1.1rem;
  position: relative;
}
.ot-step:last-child { padding-bottom: 0; }
.ot-step::before {
  content: '';
  position: absolute;
  left: 17px; top: 36px; bottom: -2px;
  width: 2px;
  background: var(--border);
}
.ot-step:last-child::before { display: none; }
.ot-step-done::before { background: var(--green); }

.ot-step-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  position: relative; z-index: 1;
}
.ot-step-done .ot-step-dot {
  background: var(--green); border-color: var(--green);
  color: #fff;
}
.ot-step-active .ot-step-dot {
  background: var(--gold); border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(184, 118, 42, .15);
}
.ot-step-body {
  padding-top: .35rem;
}
.ot-step-label {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.ot-step-pending .ot-step-label { color: var(--muted); font-weight: 400; }
.ot-step-note {
  font-size: .78rem; color: var(--muted);
  margin-top: .3rem; line-height: 1.55;
  font-weight: 300;
}
.ot-step-done-note,
.ot-step-done > .ot-step-body > .ot-step-done {
  font-size: .7rem; color: var(--green);
  margin-top: .25rem;
  font-weight: 500;
}

.ot-17 {
  display: flex; align-items: center; justify-content: center;
  margin: 0 1.6rem 1.6rem;
  padding: .95rem;
  background: linear-gradient(135deg, #1565C0, #0D47A1);
  color: #fff !important;
  text-decoration: none;
  font-size: .78rem; letter-spacing: .08em; font-weight: 600;
  transition: transform .25s, box-shadow .25s;
}
.ot-17:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21, 101, 192, .35); }

/* Tracking trigger button in header */
.btn-track {
  font-size: .69rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--border);
  padding: .55rem 1rem;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  color: var(--muted);
  transition: all .25s;
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none;
}
.btn-track svg { width: 14px; height: 14px; }
.btn-track:hover { border-color: var(--gold); color: var(--gold); }

/* ──────────── Notification toast ──────────── */
.ntf {
  position: fixed; top: 1.4rem; right: 1.4rem; z-index: 700;
  background: var(--green); color: #fff;
  padding: .8rem 1.35rem; font-size: .79rem; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
  opacity: 0; transform: translateY(-10px);
  transition: all .3s; pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.ntf.show { opacity: 1; transform: translateY(0); }

/* ──────────── Floating chat buttons ──────────── */
.fab-stack {
  position: fixed; right: 1.2rem; bottom: 1.2rem;
  z-index: 400;
  display: flex; flex-direction: column-reverse; gap: .75rem;
  pointer-events: none;
}
.fab-stack > * { pointer-events: auto; }
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 28px rgba(24, 21, 15, .22);
  text-decoration: none;
  transition: all .25s var(--ease-soft);
  position: relative;
}
.fab svg { width: 26px; height: 26px; display: block; }
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(24, 21, 15, .3); }
.fab-tg { background: #229ED9; }
.fab-wa { background: #25D366; }
.fab-call { background: var(--gold); }
.fab-tip {
  position: absolute; right: calc(100% + .65rem); top: 50%;
  transform: translateY(-50%);
  background: var(--ink); color: #F9F6F1;
  padding: .35rem .65rem; font-size: .65rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.fab:hover .fab-tip { opacity: 1; }

/* ──────────── Legal pages ──────────── */
.legal-page { background: var(--bg); padding: 7rem 2rem 4rem; }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; font-weight: 600;
  margin-bottom: 2rem; transition: color .2s;
}
.legal-back:hover { color: var(--gold); }
.legal-h1 {
  font-family: 'Cormorant', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300; color: var(--ink);
  margin-bottom: .5rem; line-height: 1.1;
}
.legal-h1 em { font-style: italic; color: var(--gold); }
.legal-meta { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2.4rem; }
.legal-content { font-size: .92rem; line-height: 1.78; color: var(--ink2); font-weight: 300; }
.legal-content h2 {
  font-family: 'Cormorant', serif;
  font-size: 1.55rem; font-weight: 400; color: var(--ink);
  margin: 2.2rem 0 .8rem;
}
.legal-content h3 {
  font-family: 'Outfit', sans-serif;
  font-size: .92rem; font-weight: 600; color: var(--ink);
  margin: 1.4rem 0 .5rem;
}
.legal-content p { margin-bottom: .85rem; }
.legal-content ul, .legal-content ol { margin: .4rem 0 .9rem 1.4rem; }
.legal-content li { margin-bottom: .35rem; }
.legal-content strong { color: var(--ink); font-weight: 500; }
.legal-content a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184, 118, 42, .3); }
.legal-content a:hover { border-bottom-color: var(--gold); }

/* ─── Form trust block (Sprint 2 CRO quick win) ─── */
.cf-trust {
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  font-size: .8rem; color: var(--muted); font-weight: 400;
  margin: 8px 0 16px;
  letter-spacing: .01em;
}
.cf-trust-item { white-space: nowrap; }
@media (max-width: 480px) {
  .cf-trust { gap: 8px 14px; font-size: .75rem; margin: 6px 0 14px; }
}

/* ─── Form fallback channels (Sprint 3.6) — visible TG/WA/Phone for users
       who don't want to fill form. Catches conversion that would otherwise
       leak. Placed BELOW form, above "next steps". ─── */
.lp-form-fallback {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.lp-form-fallback-lead {
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 .8rem;
  font-weight: 500;
  text-align: center;
}
.lp-form-fallback-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}
.lp-form-fallback-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .85rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  gap: .2rem;
  transition: border-color .2s, background .2s, transform .2s;
}
.lp-form-fallback-btn:hover {
  border-color: var(--gold);
  background: var(--bg2);
  transform: translateY(-1px);
}
.lp-form-fallback-handle {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

/* ─── "Что произойдёт дальше" — explicit next-steps after form
       (Sprint 3.6 trust upgrade). ─── */
.lp-form-next-steps {
  margin-top: 2rem;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--bg2);
  border-radius: 6px;
}
.lp-form-next-steps .lp-eye {
  margin-bottom: 1rem;
  display: block;
}
.lp-form-next-steps-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink2);
  font-weight: 300;
}
.lp-form-next-steps-list li {
  padding-left: .4rem;
  margin-bottom: .8rem;
}
.lp-form-next-steps-list li:last-child { margin-bottom: 0; }
.lp-form-next-steps-list li b { color: var(--ink); font-weight: 500; }

@media (max-width: 600px) {
  .lp-form-fallback-channels { grid-template-columns: 1fr; }
  .lp-form-fallback-btn { flex-direction: row; justify-content: space-between; padding: .9rem 1rem; }
  .lp-form-next-steps { padding: 1.2rem 1.3rem; }
}

/* ─── FAQ section (Sprint 2.5 — buyer-first, native <details>) ─── */
.faq {
  padding: 6rem 6vw 5rem;
  background: var(--bg);
}
.faq-in {
  max-width: 880px;
  margin: 0 auto;
}
.faq-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.faq-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item[open] {
  border-color: rgba(184, 118, 42, .25);
  background: var(--bg);
}
.faq-q {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 1.5rem;
  font-family: 'Cormorant', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
  transition: color .2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }
.faq-q:hover { color: var(--gold); }
.faq-ic {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}
.faq-ic::before, .faq-ic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink2);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .25s;
}
.faq-ic::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-ic::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item[open] .faq-ic::before { background: var(--gold); }
.faq-a {
  padding: 0 1.5rem 1.35rem;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--ink2);
  font-weight: 300;
}
.faq-a p { margin: 0; }

@media (max-width: 720px) {
  .faq { padding: 4.5rem 5vw 4rem; }
  .faq-q { padding: 1.1rem 1.2rem; font-size: 1.1rem; }
  .faq-a { padding: 0 1.2rem 1.15rem; font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING PAGES (Sprint 3) — .lp-* prefix, isolated from homepage styles.
   Each landing is composed from these primitives with unique section
   ordering + hero layout variant. Visual differentiation is driven by:
     (a) .lp-hero--{layout} classes (8 distinct hero compositions)
     (b) section ordering chosen per landing in landing-copy.js
     (c) per-landing accent blocks (.lp-counter, .lp-howto, .lp-editorial,
         .lp-fabric-grid, .lp-ecosystem, .lp-usecases)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Landing page wrapper + section base ─────────────────────────────── */
.lp { background: var(--bg); color: var(--ink); }
.lp section { padding: 5rem 6vw; }
.lp section.lp-tight { padding: 3rem 6vw; }
.lp .lp-inner { max-width: 1200px; margin: 0 auto; }
.lp .lp-inner-narrow { max-width: 880px; margin: 0 auto; }

/* Breadcrumb */
.lp-crumb {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1.5rem 6vw .5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-crumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.lp-crumb a:hover { color: var(--gold); }
.lp-crumb-sep { margin: 0 .5em; opacity: .5; }

/* Eyebrow text (small labels above headings) — shared with homepage .s-eye */
.lp-eye {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-block;
}

/* Generic headline */
.lp-h2 {
  font-family: 'Cormorant', serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.lp-h2 em { font-style: italic; color: var(--gold); font-weight: 300; }
.lp-h3 {
  font-family: 'Cormorant', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .6rem;
  line-height: 1.2;
}
.lp-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink2);
  font-weight: 300;
  max-width: 62ch;
}
.lp-body p + p { margin-top: 1rem; }

/* ─── HERO — base ───────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  padding: 8rem 6vw 5rem;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--bg);
  overflow: hidden;
}
.lp-hero-inner {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  z-index: 2;
}
.lp-hero-eye {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1.2rem;
  display: inline-block;
}
.lp-hero-h1 {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.lp-hero-h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
  display: block;
}
.lp-hero-h1 span.h1-line { display: block; }
.lp-hero-desc {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink2);
  font-weight: 300;
  max-width: 56ch;
  margin: 0 0 2rem;
}
.lp-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.lp-cta-gold, .lp-cta-ghost {
  display: inline-flex;
  align-items: center;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .25s ease;
  background: transparent;
}
.lp-cta-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  color: #fff;
  border-color: var(--gold);
}
.lp-cta-gold:hover {
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%);
  transform: translateY(-1px);
}
.lp-cta-ghost {
  border-color: rgba(24, 21, 15, .2);
  color: var(--ink);
}
.lp-cta-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.lp-hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.lp-stat { line-height: 1.2; }
.lp-stat-n {
  font-family: 'Cormorant', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--gold);
  display: block;
}
.lp-stat-l {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: .2rem;
}

/* Hero LAYOUT variants — visual differentiation per landing */

/* wide-split: text left 55%, atmospheric column right (used by /chairs/) */
.lp-hero--wide-split {
  background:
    linear-gradient(135deg, rgba(232, 224, 211, 0) 0%, rgba(232, 224, 211, .45) 100%),
    var(--bg);
}
.lp-hero--wide-split .lp-hero-h1 { font-size: clamp(3rem, 6.5vw, 5.2rem); }
.lp-hero--wide-split .lp-hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.lp-hero--wide-split .lp-hero-decor {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
  border-radius: 4px;
  overflow: hidden;
}
.lp-hero--wide-split .lp-hero-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* split-vertical: text top, large dominant image below (used by /sofas/).
   Sprint 4.3 fix: was aspect-ratio 16/9 which read as "thin banner strip"
   below the tall text block. Changed to 3/2 + max-width container expansion
   so the hero image has clear visual dominance, not a cropped strip. */
.lp-hero--split-vertical { padding: 9rem 6vw 4rem; }
.lp-hero--split-vertical .lp-hero-h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.lp-hero--split-vertical .lp-hero-inner { max-width: 1280px; }
.lp-hero--split-vertical .lp-hero-text { max-width: 760px; }
.lp-hero--split-vertical .lp-hero-decor {
  margin-top: 3.5rem;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  position: relative;
  box-shadow: 0 30px 80px -40px rgba(24, 21, 15, .25);
}
.lp-hero--split-vertical .lp-hero-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle gold accent line preserved above the image */
.lp-hero--split-vertical .lp-hero-decor::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--gold3) 50%, transparent 100%);
  opacity: .5;
}

/* editorial-center: tight centered framing (used by /bean-bag-chairs/).
   Sprint 3.9: optional --hero-bg-image variable injects subtle product
   reference behind the text (with strong overlay for readability). */
.lp-hero--editorial-center {
  padding: 9rem 6vw 6rem;
  text-align: center;
  background:
    radial-gradient(ellipse at center top, rgba(241, 237, 228, .6) 0%, var(--bg) 70%),
    var(--bg);
  position: relative;
  overflow: hidden;
}
.lp-hero--editorial-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image, none);
  background-size: 38%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: saturate(0.7);
  z-index: 0;
  pointer-events: none;
}
.lp-hero--editorial-center .lp-hero-inner { position: relative; z-index: 1; }
.lp-hero--editorial-center .lp-hero-inner { max-width: 820px; }
.lp-hero--editorial-center .lp-hero-h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.4rem);
  line-height: 1.05;
}
.lp-hero--editorial-center .lp-hero-desc { margin: 0 auto 2rem; }
.lp-hero--editorial-center .lp-hero-ctas { justify-content: center; }
.lp-hero--editorial-center .lp-hero-stats { justify-content: center; }

/* modular-diagram: shows construction logic (used by /modular-sofas/) */
.lp-hero--modular-diagram { padding: 9rem 6vw 5rem; }
.lp-hero--modular-diagram .lp-hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.lp-hero--modular-diagram .lp-hero-h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
.lp-hero--modular-diagram .lp-hero-decor {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .5rem;
  aspect-ratio: 5 / 4;
}
.lp-hero--modular-diagram .lp-hero-decor > span {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.lp-hero--modular-diagram .lp-hero-decor > span:first-child { grid-row: 1 / 3; }
.lp-hero--modular-diagram .lp-hero-decor > span > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* editorial-fullbleed: luxury inspiration vibe (used by /soft-lounge/).
   Sprint 3.9: --hero-bg-image injects real interior photo as base layer.
   Dark gradient overlay ensures bottom-aligned text remains readable. */
.lp-hero--editorial-fullbleed {
  padding: 0;
  min-height: 82vh;
  background:
    linear-gradient(180deg, rgba(24, 21, 15, 0) 30%, rgba(24, 21, 15, .55) 100%),
    var(--hero-bg-image, linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 60%, var(--bg) 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}
.lp-hero--editorial-fullbleed .lp-hero-text {
  color: #fff;
  text-shadow: 0 1px 12px rgba(24, 21, 15, .35);
}
.lp-hero--editorial-fullbleed .lp-hero-h1 { color: #fff; }
.lp-hero--editorial-fullbleed .lp-hero-h1 em { color: var(--gold3); }
.lp-hero--editorial-fullbleed .lp-hero-eye { color: var(--gold3); }
.lp-hero--editorial-fullbleed .lp-hero-desc { color: rgba(255, 255, 255, .92); }
.lp-hero--editorial-fullbleed .lp-stat-n { color: var(--gold3); }
.lp-hero--editorial-fullbleed .lp-stat-l { color: rgba(255, 255, 255, .78); }
.lp-hero--editorial-fullbleed .lp-cta-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.lp-hero--editorial-fullbleed .lp-cta-ghost:hover { border-color: var(--gold3); color: var(--gold3); }
.lp-hero--editorial-fullbleed .lp-hero-inner {
  padding: 6rem 6vw 5rem;
  max-width: 1200px;
}
.lp-hero--editorial-fullbleed .lp-hero-h1 {
  font-size: clamp(3.2rem, 7.5vw, 6rem);
  font-style: italic;
}
.lp-hero--editorial-fullbleed .lp-hero-h1 em {
  font-style: italic;
  display: block;
}
.lp-hero--editorial-fullbleed .lp-hero-desc {
  font-size: 1.15rem;
  max-width: 50ch;
}

/* texture-grid: array of swatch tiles as hero (used by /fabrics/) */
.lp-hero--texture-grid {
  padding: 6rem 6vw 4rem;
  background: var(--bg);
}
.lp-hero--texture-grid .lp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.lp-hero--texture-grid .lp-hero-h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.lp-hero--texture-grid .lp-hero-decor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  aspect-ratio: 1;
}
.lp-hero--texture-grid .lp-hero-decor > span {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.lp-hero--texture-grid .lp-hero-decor > span > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Color fallbacks remain — visible only if image fails to load.
   When real fabric image is present (Sprint 3.9), it covers the color. */
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(1)  { background: #C9BDA8; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(2)  { background: #B7AEA1; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(3)  { background: #9C907E; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(4)  { background: #6D6356; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(5)  { background: #D9CFBE; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(6)  { background: #E4DCCB; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(7)  { background: #B89D7F; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(8)  { background: #3A342B; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(9)  { background: #2A2724; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(10) { background: #847564; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(11) { background: #A89A82; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(12) { background: #F2EDE5; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(13) { background: #5D5346; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(14) { background: #C2A98A; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(15) { background: #918474; }
.lp-hero--texture-grid .lp-hero-decor > span:nth-child(16) { background: #DAC8AC; }

/* ecosystem-focus: compact-living vibe (used by /mattresses/) */
.lp-hero--ecosystem-focus { padding: 9rem 6vw 4rem; }
.lp-hero--ecosystem-focus .lp-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}
.lp-hero--ecosystem-focus .lp-hero-h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.lp-hero--ecosystem-focus .lp-hero-decor {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border-radius: 4px;
  overflow: hidden;
}
.lp-hero--ecosystem-focus .lp-hero-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Concentric rectangles only when no image present (fallback) */
.lp-hero--ecosystem-focus .lp-hero-decor:not(:has(img))::before,
.lp-hero--ecosystem-focus .lp-hero-decor:not(:has(img))::after {
  content: '';
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 4px;
  opacity: .25;
}
.lp-hero--ecosystem-focus .lp-hero-decor:not(:has(img))::before {
  inset: 15% 18% 15% 18%;
  opacity: .4;
}
.lp-hero--ecosystem-focus .lp-hero-decor:not(:has(img))::after {
  inset: 28% 32% 28% 32%;
  opacity: .6;
}

/* ─── Trust strip (4-item horizontal band) ─────────────────────────── */
.lp-trust {
  padding: 2.5rem 6vw;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.lp-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.lp-trust-item {
  font-size: .92rem;
  color: var(--ink2);
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.lp-trust-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  margin-top: .5rem;
  flex: 0 0 8px;
}

/* ─── Intro block (eyebrow + h2 + body) ────────────────────────────── */
.lp-intro { padding: 5rem 6vw; }
.lp-intro-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* ─── Product grid (reuse .pgrid + .pcard for cards) ───────────────── */
.lp-products {
  padding: 5rem 6vw;
}
.lp-products-head {
  max-width: 1200px;
  margin: 0 auto 3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.lp-products-head .lp-h2 { margin: 0; }
.lp-products .pgrid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}
/* .pcard styles already exist from main catalogue — reused as-is */

/* ─── Counter-positioning block (bean-bag-chairs) ──────────────────── */
.lp-counter {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-counter-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.lp-counter .lp-body { margin: 0 auto; text-align: left; }

/* ─── How-it-works block (modular-sofas) — 3 numbered items ─────── */
.lp-howto {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-howto-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-howto-head { text-align: center; margin-bottom: 3rem; }
.lp-howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.lp-howto-item {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 1.8rem 0 0;
  position: relative;
}
.lp-howto-n {
  font-family: 'Cormorant', serif;
  font-size: 2.4rem;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 1rem;
}

/* ─── Use cases block (3-col items) ──────────────────────────────── */
.lp-usecases {
  padding: 5rem 6vw;
}
.lp-usecases-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-usecases-head { text-align: center; margin-bottom: 3rem; }
.lp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
.lp-usecases-item {
  padding: 1.5rem 0;
}

/* ─── Modular callout (link strip) ───────────────────────────────── */
.lp-callout {
  padding: 4rem 6vw;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
}
.lp-callout-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
}
.lp-callout-text { font-size: .94rem; color: var(--ink2); line-height: 1.6; }
.lp-callout-text .lp-h3 { margin-bottom: .4rem; }
.lp-callout-link {
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid rgba(184, 118, 42, .3);
  padding-bottom: 2px;
  transition: border-color .2s;
  white-space: nowrap;
}
.lp-callout-link:hover { border-bottom-color: var(--gold); }

/* ─── Ecosystem callout (mattresses → cross-cat) ─────────────────── */
.lp-ecosystem {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-ecosystem-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.lp-ecosystem-head { margin-bottom: 2.5rem; max-width: 720px; }
.lp-ecosystem-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.lp-ecosystem-link {
  display: block;
  padding: 1.5rem 1.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s, transform .2s;
}
.lp-ecosystem-link:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.lp-ecosystem-link-label {
  font-family: 'Cormorant', serif;
  font-size: 1.25rem;
  margin-bottom: .25rem;
}
.lp-ecosystem-link-sub {
  font-size: .85rem;
  color: var(--muted);
}

/* ─── Editorial blocks (soft-lounge atmosphere) ──────────────────── */
.lp-editorial {
  padding: 6rem 6vw;
}
.lp-editorial--alt { background: var(--bg2); }
.lp-editorial-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.lp-editorial--depth .lp-editorial-inner {
  grid-template-columns: 1.1fr 1fr;
}
.lp-editorial--fabric .lp-editorial-inner {
  grid-template-columns: 1fr 1.2fr;
}
.lp-editorial--scenarios .lp-editorial-inner {
  grid-template-columns: 1fr;
}
.lp-editorial--scenarios .lp-editorial-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin-top: 2.5rem;
}
.lp-editorial--scenarios .lp-editorial-text { text-align: center; max-width: 720px; margin: 0 auto; }
.lp-editorial--scenarios .lp-body { max-width: none; }
.lp-editorial-decor {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
  overflow: hidden;
  position: relative;
}
/* Sprint 4.2: editorial blocks can have real imagery via block.image. */
.lp-editorial-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-editorial--fabric .lp-editorial-decor {
  background: repeating-linear-gradient(
    45deg, var(--bg3) 0px, var(--bg3) 12px,
    var(--bg2) 12px, var(--bg2) 24px
  );
  opacity: .9;
}
.lp-editorial--depth .lp-editorial-decor {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(184, 118, 42, .15) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
}
.lp-editorial-cta {
  margin-top: 1.5rem;
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(184, 118, 42, .3);
  padding-bottom: 2px;
}
.lp-editorial-cta:hover { border-bottom-color: var(--gold); }

/* ─── Mini-form (fabrics samples request) ────────────────────────── */
.lp-miniform {
  padding: 5rem 6vw;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
}
.lp-miniform-inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  padding: 3rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(24, 21, 15, .06);
}
.lp-miniform-head { margin-bottom: 2rem; }
.lp-miniform-form { display: flex; flex-direction: column; gap: 1.2rem; }
.lp-miniform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-miniform-field { display: flex; flex-direction: column; gap: .4rem; }
.lp-miniform-field label {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 500;
}
.lp-miniform-field input,
.lp-miniform-field textarea {
  font-family: 'Outfit', sans-serif;
  font-size: .96rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .2s;
}
.lp-miniform-field input:focus,
.lp-miniform-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.lp-miniform-field textarea {
  min-height: 80px;
  resize: vertical;
}
.lp-miniform-trust {
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: .5rem 0;
}
.lp-miniform-submit {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  color: #fff;
  padding: 1rem 1.4rem;
  border: none;
  border-radius: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .02em;
  transition: transform .2s;
}
.lp-miniform-submit:hover { transform: translateY(-1px); }
.lp-miniform-note {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .8rem;
  line-height: 1.5;
}

/* ─── Fabric groups (texture grid of 6 material families) ────────── */
.lp-fabric-groups {
  padding: 5rem 6vw;
}
.lp-fabric-groups-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-fabric-groups-head { text-align: center; margin-bottom: 3.5rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.lp-fabric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.lp-fabric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.8rem 1.6rem;
  transition: border-color .2s;
}
.lp-fabric-card:hover { border-color: var(--gold); }
.lp-fabric-card-eye {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: .6rem;
}
.lp-fabric-card-name {
  font-family: 'Cormorant', serif;
  font-size: 1.6rem;
  margin: 0 0 .8rem;
  color: var(--ink);
}
.lp-fabric-card-body {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink2);
  font-weight: 300;
  margin: 0 0 1rem;
}
.lp-fabric-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}
.lp-fabric-card-usecase { font-style: italic; }

/* ─── Comparison table (fabrics) ─────────────────────────────────── */
.lp-comparison {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-comparison-inner { max-width: 1100px; margin: 0 auto; }
.lp-comparison-head { text-align: center; margin-bottom: 2.5rem; }
.lp-comparison-table {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.lp-comparison-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr 1.4fr;
  border-bottom: 1px solid var(--border);
}
.lp-comparison-row:last-child { border-bottom: none; }
.lp-comparison-row.lp-comparison-head-row {
  background: var(--bg2);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.lp-comparison-cell {
  padding: 1rem 1.2rem;
  font-size: .92rem;
  color: var(--ink2);
}
.lp-comparison-cell:first-child {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 400;
}

/* ─── Cross-link block (footer-of-landing related links) ─────────── */
.lp-cross {
  padding: 5rem 6vw;
}
.lp-cross-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.lp-cross-head { text-align: center; margin-bottom: 2.5rem; }
.lp-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.lp-cross-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.6rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s, transform .2s;
  display: block;
}
.lp-cross-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.lp-cross-card-label {
  font-family: 'Cormorant', serif;
  font-size: 1.2rem;
  margin-bottom: .35rem;
}
.lp-cross-card-sub {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── Contact form section on landings ───────────────────────────── */
.lp-form-section {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-form-inner {
  max-width: 880px;
  margin: 0 auto;
}
.lp-form-head { text-align: center; margin-bottom: 2.5rem; }

/* ─── SKU page specifics ─────────────────────────────────────────── */
.lp-sku-hero {
  padding: 5.5rem 6vw 3.5rem;
}
.lp-sku-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}
.lp-sku-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-content: start;
}
.lp-sku-img {
  width: 100%;
  border-radius: 4px;
  background: var(--bg2);
  display: block;
  cursor: zoom-in;
}
/* Desktop: hero image capped, extras as thumbnail row */
@media (min-width: 981px) {
  .lp-sku-hero-inner {
    align-items: center;
  }
  .lp-sku-gallery {
    max-height: 760px;
  }
  .lp-sku-img:first-child {
    grid-column: 1 / -1;
    width: 100%;
    height: clamp(300px, 38vw, 720px);
    max-height: 720px;
    object-fit: cover;
    object-position: center;
  }
  .lp-sku-img:not(:first-child) {
    aspect-ratio: 4 / 3;
    max-height: 132px;
    object-fit: cover;
    object-position: center;
  }
  .lp-sku-img:nth-child(2):last-child {
    grid-column: 1 / -1;
    max-height: 160px;
  }
  .lp-sku-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0.5rem;
  }
  .lp-sku-desc {
    margin-bottom: 1.5rem;
  }
  .lp-sku-specs {
    margin: 1.25rem 0;
    padding-top: 1.25rem;
  }
}
.lp-sku-side .lp-h1 {
  font-family: 'Cormorant', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  margin: 0 0 1rem;
  color: var(--ink);
}
.lp-sku-cat {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: .8rem;
  display: block;
}
.lp-sku-price {
  font-family: 'Cormorant', serif;
  font-size: 2.4rem;
  color: var(--ink);
  font-weight: 400;
  margin: 1.2rem 0;
}
.lp-sku-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 2rem;
  font-weight: 300;
}
.lp-sku-specs {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1.5rem;
}
.lp-sku-spec-label {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lp-sku-spec-value {
  font-size: .95rem;
  color: var(--ink);
}
.lp-sku-related {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-sku-related-inner { max-width: 1200px; margin: 0 auto; }

/* ─── Responsive — mobile breakpoints ────────────────────────────── */
@media (max-width: 980px) {
  .lp-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .lp-howto-grid,
  .lp-usecases-grid,
  .lp-cross-grid,
  .lp-editorial--scenarios .lp-editorial-items { grid-template-columns: 1fr; }
  .lp-hero--wide-split .lp-hero-inner,
  .lp-hero--modular-diagram .lp-hero-inner,
  .lp-hero--ecosystem-focus .lp-hero-inner,
  .lp-hero--texture-grid .lp-hero-inner,
  .lp-editorial-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-callout-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .lp-ecosystem-links { grid-template-columns: 1fr; }
  .lp-fabric-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-sku-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  .lp-sku-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    max-height: none;
  }
  .lp-sku-img:first-child {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 70vw;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  .lp-sku-img:not(:first-child) {
    aspect-ratio: 1 / 1;
    max-height: 96px;
    object-fit: cover;
    object-position: center;
  }
  .lp-sku-img:nth-child(2):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
    max-height: 120px;
  }
  .lp-sku-side { display: block; padding-block: 0; }
  .lp-sku-specs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lp section { padding: 4rem 5vw; }
  .lp-hero { padding: 6rem 5vw 3.5rem; min-height: auto; }
  .lp-hero--editorial-fullbleed { min-height: 70vh; }
  .lp-hero--editorial-fullbleed .lp-hero-inner { padding: 4rem 5vw 3.5rem; }
  .lp-trust-inner { grid-template-columns: 1fr; }
  .lp-fabric-grid { grid-template-columns: 1fr; }
  .lp-comparison-row {
    grid-template-columns: 1fr;
    padding: 1rem 0;
  }
  .lp-comparison-cell { padding: .4rem 1.2rem; }
  .lp-comparison-cell:first-child {
    font-weight: 600;
    padding-top: 1rem;
    background: var(--bg2);
  }
  .lp-comparison-head-row { display: none; }
  .lp-miniform-row { grid-template-columns: 1fr; }
  .lp-miniform-inner { padding: 2rem 1.5rem; }
  .lp-hero-stats { gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REVIEW ENGINE — editorial UGC cards (Sprint 3.5 Section C+E)
   .lp-reviews / .lp-review — used by landings + SKU pages.
   Graceful image-optional: missing image → palette gradient placeholder.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-reviews {
  padding: 5rem 6vw;
}
.lp-reviews--alt {
  background: var(--bg2);
}
.lp-reviews-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-reviews-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
.lp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.lp-reviews-grid--two   { grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; }
.lp-reviews-grid--three { grid-template-columns: repeat(3, 1fr); }

.lp-review {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s, transform .25s ease;
}
.lp-review:hover {
  border-color: rgba(184, 118, 42, .25);
}
.lp-review-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
  position: relative;
  overflow: hidden;
}
.lp-review-media--wide { aspect-ratio: 16 / 9; }
.lp-review-media--square { aspect-ratio: 1 / 1; }
.lp-review-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Placeholder atmosphere when image missing — subtle texture, not "broken image" feel */
.lp-review-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(184, 118, 42, .08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgba(24, 21, 15, .04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.lp-review-media img { position: relative; z-index: 1; }

.lp-review-body {
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  flex: 1;
}
.lp-review-scenario {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0;
}
.lp-review-title {
  font-family: 'Cormorant', serif;
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.lp-review-excerpt {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink2);
  font-weight: 300;
  font-style: italic;
  margin: 0;
}
.lp-review-body-text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink2);
  font-weight: 300;
  margin: 0;
}
.lp-review-meta {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  font-size: .8rem;
  color: var(--muted);
}
.lp-review-meta a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 118, 42, .25);
  padding-bottom: 1px;
}
.lp-review-meta a:hover { border-bottom-color: var(--gold); }

/* ─── SKU page: single review as editorial insert ─── */
.lp-sku-review {
  padding: 5rem 6vw;
  background: var(--bg2);
}
.lp-sku-review-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.lp-sku-review-media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.lp-sku-review-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lp-sku-review-text { padding: 0; }
.lp-sku-review-text .lp-h3 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  line-height: 1.2;
}
.lp-sku-review-text .lp-body { margin-bottom: 1.2rem; }
.lp-sku-review-attribution {
  margin-top: 1.5rem;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 900px) {
  .lp-reviews-grid--three { grid-template-columns: 1fr 1fr; }
  .lp-sku-review-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 720px) {
  .lp-reviews-grid,
  .lp-reviews-grid--two,
  .lp-reviews-grid--three { grid-template-columns: 1fr; }
  .lp-review-body { padding: 1.3rem 1.3rem 1.5rem; }
  .lp-review-title { font-size: 1.2rem; }
}

/* ─── Cinematic video hero (vacuum-sofas, sofa-beds) ─────────────────── */
.lp-hero--cinematic {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.lp-hero--cinematic .lp-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lp-hero--cinematic .lp-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-hero--cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* strong directional scrim so white text stays legible even over a BRIGHT
     sofa video (e.g. cream Cloud Max). Darkest on the left where text sits. */
  background:
    linear-gradient(93deg, rgba(16,12,8,0.92) 0%, rgba(16,12,8,0.80) 30%, rgba(16,12,8,0.42) 58%, rgba(16,12,8,0.06) 88%),
    linear-gradient(180deg, rgba(16,12,8,0.30) 0%, rgba(16,12,8,0) 35%, rgba(16,12,8,0.34) 100%);
}
.lp-hero--cinematic .lp-hero-inner { position: relative; z-index: 2; }
.lp-hero--cinematic .lp-hero-text {
  max-width: 620px;
  text-shadow: 0 1px 32px rgba(0,0,0,0.40);
}
.lp-hero--cinematic .lp-hero-eye,
.lp-hero--cinematic .lp-hero-h1,
.lp-hero--cinematic .lp-hero-desc,
.lp-hero--cinematic .lp-hero-stat-n { color: #fff; }
.lp-hero--cinematic .lp-hero-h1 em { color: #ecc18a; }
.lp-hero--cinematic .lp-hero-eye { color: rgba(255,255,255,0.86); }
.lp-hero--cinematic .lp-hero-desc { color: rgba(255,255,255,0.92); }
.lp-hero--cinematic .lp-hero-stat-l { color: rgba(255,255,255,0.78); }

/* Day↔night: two real photos crossfading (sofa ⇄ bed). Used in the
   sofa-beds hero AND on SKU galleries of convertible products. */
[data-daynight] .lp-dn-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity 1.1s var(--ease-soft);
}
[data-daynight] .lp-dn-night { opacity: 0; pointer-events: none; }
[data-daynight] .lp-dn-day { opacity: 1; }
[data-daynight].is-night .lp-dn-night { opacity: 1; pointer-events: auto; }
[data-daynight].is-night .lp-dn-day { opacity: 0; pointer-events: none; }

/* SKU gallery convertible: main image is the day↔night block */
.lp-sku-dn {
  position: relative; grid-column: 1 / -1;
  border-radius: 4px; overflow: hidden; background: var(--bg2);
  aspect-ratio: 4 / 3;
}
.lp-sku-dn .lp-dn-img { cursor: zoom-in; border-radius: 4px; }
.lp-dn-toggle--sku { bottom: clamp(.8rem, 2vw, 1.2rem); }
@media (min-width: 981px) {
  .lp-sku-dn { height: clamp(300px, 38vw, 720px); aspect-ratio: auto; }
}
.lp-dn-toggle {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.1rem, 3vw, 2.1rem);
  display: inline-flex; gap: .35rem; padding: .32rem;
  background: rgba(16, 12, 8, .42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
}
.lp-dn-btn {
  border: none; background: transparent; color: rgba(255, 255, 255, .82);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .82rem;
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft);
}
.lp-dn-btn.is-active { background: #fff; color: var(--ink); }
.lp-dn-btn:not(.is-active):hover { color: #fff; }
@media (max-width: 520px) {
  .lp-dn-toggle { left: 1rem; right: 1rem; transform: none; justify-content: center; }
  .lp-dn-btn { font-size: .74rem; padding: .46rem .8rem; }
}
@media (max-width: 760px) {
  .lp-hero--cinematic { min-height: 72vh; }
  .lp-hero--cinematic::after {
    background: linear-gradient(180deg, rgba(16,12,8,0.66) 0%, rgba(16,12,8,0.50) 42%, rgba(16,12,8,0.78) 100%);
  }
}

/* ─── How-it-works: icons + stat + reveal ───────────────────────────── */
.lp-howto-item { text-align: left; }
.lp-howto-icon {
  width: 42px; height: 42px;
  color: var(--gold);
  display: block;
  margin-bottom: 1.1rem;
}
.lp-howto-stat {
  font-family: 'Cormorant', serif;
  font-size: 2.7rem;
  line-height: 1;
  color: #23201a;
  font-weight: 500;
  margin-bottom: .55rem;
  letter-spacing: -0.01em;
}
.lp-howto-item .lp-h3 { margin-bottom: .5rem; }

/* lightweight entrance animation — pure CSS, no JS dependency (never leaves
   content invisible if JS fails). Plays once on load with a per-item stagger. */
@keyframes lp-reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
[data-reveal] {
  animation: lp-reveal-up .6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: var(--rd, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none; }
}

/* ─── Box → sofa visual (vacuum-sofas) ──────────────────────────────── */
.lp-b2s { padding: 5rem 6vw; background: var(--bg); }
.lp-b2s-inner { max-width: 1080px; margin: 0 auto; }
.lp-b2s-head { text-align: center; margin-bottom: 2.6rem; }
.lp-b2s-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.8rem;
  align-items: center;
}
.lp-b2s-cell { margin: 0; text-align: center; }
.lp-b2s-cell figcaption { margin-top: 1rem; }
.lp-b2s-cell figcaption span {
  display: block; font-family: 'Cormorant', serif; font-size: 1.4rem; color: #23201a;
}
.lp-b2s-cell figcaption em {
  display: block; font-style: normal; font-size: .82rem; color: var(--muted);
  letter-spacing: .03em; margin-top: .25rem;
}
.lp-b2s-box {
  width: 100%; max-width: 420px; height: 248px;
  padding: 2.4rem; box-sizing: border-box;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--gold);
}
.lp-b2s-pack img,
.lp-b2s-sofa img {
  width: 100%; max-width: 420px; height: 248px;
  object-fit: cover; border-radius: 10px; display: block; margin: 0 auto;
}
.lp-b2s-mid { text-align: center; padding: 0 .4rem; }
.lp-b2s-stat {
  font-family: 'Cormorant', serif; font-size: 3rem; line-height: 1;
  color: var(--gold); font-weight: 500;
}
.lp-b2s-statl {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-top: .35rem;
}
.lp-b2s-arrow { width: 46px; height: 16px; color: var(--gold); margin-top: 1.1rem; }
@media (max-width: 760px) {
  .lp-b2s-flow { grid-template-columns: 1fr; gap: 1.2rem; }
  .lp-b2s-box, .lp-b2s-sofa img { height: 200px; max-width: 100%; }
  .lp-b2s-arrow { transform: rotate(90deg); margin-top: .4rem; }
}

/* ─── Vacuum reveal: scroll-driven box → sofa (vacuum-reveal.js) ─────── */
.vr-scroll{height:280vh;position:relative}
.vr-sticky{position:sticky;top:0;height:100vh;height:100svh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)}
.vr-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vr-reveal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);width:min(72vw,840px);max-width:94vw;opacity:0;will-change:opacity,transform;pointer-events:none}
.vr-sofa{display:block;width:100%}
.vr-reveal::after{content:'';position:absolute;left:10%;right:10%;bottom:1%;height:26px;background:radial-gradient(ellipse at center,rgba(24,21,15,.20),rgba(24,21,15,0) 72%);filter:blur(7px);z-index:-1}
.vr-cap{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + min(15vw,180px)));text-align:center;font-family:'Cormorant',serif;font-size:clamp(18px,2.2vw,26px);color:var(--ink);opacity:0;pointer-events:none;white-space:nowrap}
.vr-cap em{font-style:normal;color:var(--muted);font-family:'Outfit',sans-serif;font-size:.62em;letter-spacing:.04em;display:block;margin-top:4px}
.vr-eyebrow{position:absolute;top:9%;left:50%;transform:translateX(-50%);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;opacity:.75;z-index:3}
.vr-headline{position:absolute;top:13%;left:50%;transform:translateX(-50%);text-align:center;font-family:'Cormorant',serif;font-weight:300;font-size:clamp(24px,3.4vw,42px);color:var(--ink);pointer-events:none;z-index:3;white-space:nowrap;padding:0 4vw}
.vr-headline em{font-style:italic;color:var(--gold)}
.vr-volume{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;z-index:3}
.vr-vlabel{font-family:'Cormorant',serif;font-weight:300;font-style:italic;font-size:clamp(30px,4.4vw,52px);color:var(--gold);opacity:0}
.vr-vtrack{width:clamp(130px,20vw,210px);height:2px;background:rgba(24,21,15,.10);border-radius:1px;overflow:hidden}
.vr-vfill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
/* static fallback (no WebGL / reduced-motion): not pinned, sofa shown */
.vr-static .vr-scroll{height:auto}
.vr-static .vr-sticky{position:relative;height:auto;min-height:78vh;padding:7rem 5vw 5rem}
.vr-static .vr-canvas{display:none}
.vr-static .vr-reveal{position:relative;top:auto;left:auto;transform:none!important;margin:2.5rem auto 0}
.vr-static .vr-cap{position:relative;top:auto;left:auto;transform:none;margin:1.4rem auto 0}
.vr-static .vr-eyebrow,.vr-static .vr-headline{position:relative;top:auto;left:auto;transform:none}
.vr-static .vr-volume{position:relative;bottom:auto;left:auto;transform:none;margin:2rem auto 0}
@media (max-width:760px){
  .vr-scroll{height:240vh}
  .vr-headline{font-size:clamp(19px,5vw,28px);white-space:normal;width:92%}
  .vr-cap{white-space:normal;width:90%}
}

/* ─── AI sales consultant widget (chat-widget.js) ─────────────────────── */
/* Anchored bottom-LEFT — the bottom-right is taken by the visualizer FAB +
   messenger stack. Deliberately understated so it's discoverable, not pushy. */
.cvc-chat { position: fixed; left: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 590; font-family: 'Outfit', sans-serif; }

.cvc-chat-launch {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem .55rem .72rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #fff; font-size: .85rem; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 6px 22px rgba(24, 21, 15, .26); transition: transform .25s ease, box-shadow .25s ease;
}
.cvc-chat-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(24, 21, 15, .34); }
.cvc-chat-launch-ico { display: inline-flex; color: var(--gold3); }
/* One gentle attention ring shortly after load, then it rests. */
.cvc-chat-launch::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(184, 118, 42, .55);
  animation: cvcLaunchPulse 2.4s ease-out 1.8s 3;
}
@keyframes cvcLaunchPulse { 0% { box-shadow: 0 0 0 0 rgba(184, 118, 42, .5); } 70% { box-shadow: 0 0 0 12px rgba(184, 118, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 118, 42, 0); } }
.cvc-chat--open .cvc-chat-launch { display: none; }
@media (max-width: 380px) { .cvc-chat-launch-txt { display: none; } .cvc-chat-launch { padding: .62rem; } }

/* Floating "subscribe to channel" pill — bottom-right, opposite the chat launcher. */
.cvc-cpill {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 580;
  display: inline-flex; align-items: center; font-family: 'Outfit', sans-serif;
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff;
  box-shadow: 0 6px 22px rgba(184, 118, 42, .3);
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
}
.cvc-cpill--in { opacity: 1; transform: translateY(0); }
.cvc-cpill--out { opacity: 0; transform: translateY(14px); }
.cvc-cpill-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .55rem .55rem .85rem; text-decoration: none; color: #fff;
  font-size: .85rem; font-weight: 500;
}
.cvc-cpill-ic { display: inline-flex; }
.cvc-cpill-x {
  background: none; border: none; color: rgba(255, 255, 255, .8); cursor: pointer;
  font-size: .72rem; line-height: 1; padding: .55rem .7rem .55rem .35rem;
}
.cvc-cpill-x:hover { color: #fff; }
@media (max-width: 600px) { .cvc-cpill-txt { display: none; } .cvc-cpill-link { padding: .6rem .5rem .6rem .7rem; } }
@media (prefers-reduced-motion: reduce) { .cvc-cpill { transition: opacity .2s; transform: none; } }

/* Proactive product teaser (product pages only) — a small speech bubble above
   the launcher referencing the exact model. Click opens chat; ✕ dismisses. */
.cvc-chat-teaser {
  position: absolute; left: 0; bottom: 56px;
  width: min(286px, calc(100vw - 32px));
  background: var(--bg); border: 1px solid var(--bg3);
  border-radius: 14px; border-bottom-left-radius: 4px;
  padding: .7rem .85rem; box-shadow: 0 14px 34px rgba(24, 21, 15, .2);
  cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
.cvc-chat-teaser--in { opacity: 1; transform: none; }
.cvc-chat-teaser-txt { margin: 0; padding-right: .9rem; font-size: .85rem; line-height: 1.45; color: var(--ink2); }
.cvc-chat-teaser-x { position: absolute; top: .3rem; right: .4rem; background: none; border: none; color: var(--muted); font-size: .78rem; line-height: 1; cursor: pointer; padding: .2rem; }
.cvc-chat-teaser-x:hover { color: var(--ink); }
.cvc-chat-teaser-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cvc-chat-teaser-btn { flex: 1 1 auto; font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; padding: .5rem .7rem; border-radius: 10px; white-space: nowrap;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--bg3); transition: background .2s, border-color .2s, transform .15s; }
.cvc-chat-teaser-btn:hover { transform: translateY(-1px); border-color: var(--gold2); }
.cvc-chat-teaser-btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; border-color: transparent; }
.cvc-chat-teaser-btn--gold:hover { border-color: transparent; }

/* Panel visibility is gated by the .cvc-chat--open class so it reliably closes.
   (Author display:flex would otherwise override the [hidden] attribute.) */
.cvc-chat-panel {
  position: absolute; left: 0; bottom: 0;
  width: min(370px, calc(100vw - 28px)); height: min(540px, calc(100vh - 104px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(24, 21, 15, .26);
}
.cvc-chat--open .cvc-chat-panel { display: flex; animation: cvcChatIn .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes cvcChatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Mobile: full-screen sheet so the keyboard never breaks the layout —
   head pinned top (below notch), log scrolls, input sits above the keyboard. */
@media (max-width: 600px) {
  .cvc-chat-panel {
    position: fixed; inset: 0; left: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100dvh; max-width: none;
    border: none; border-radius: 0;
  }
  .cvc-chat-head { padding-top: calc(.85rem + env(safe-area-inset-top, 0px)); }
  .cvc-chat-form { padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
  .cvc-chat--open .cvc-chat-launch { display: none; }
}

.cvc-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; background: var(--ink); color: #fff;
}
.cvc-chat-head-title { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 500; }
.cvc-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd07a; box-shadow: 0 0 0 0 rgba(95, 208, 122, .6); animation: cvcPulse 2s infinite; }
@keyframes cvcPulse { 0% { box-shadow: 0 0 0 0 rgba(95, 208, 122, .55); } 70% { box-shadow: 0 0 0 7px rgba(95, 208, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 208, 122, 0); } }
.cvc-chat-close { background: none; border: none; color: rgba(255, 255, 255, .8); font-size: 1.05rem; cursor: pointer; line-height: 1; padding: .2rem .35rem; border-radius: 6px; transition: background .2s, color .2s; }
.cvc-chat-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Host avatar (portrait or monogram) + name/status */
.cvc-chat-ava { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: visible; }
.cvc-chat-ava img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.cvc-chat-ava-mono { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #fff; font-family: 'Cormorant', serif; font-size: 1.15rem; font-weight: 600; }
.cvc-chat-ava-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #5fd07a; border: 2px solid var(--ink); }
.cvc-chat-head-name { display: flex; flex-direction: column; line-height: 1.15; font-size: .92rem; font-weight: 600; }
.cvc-chat-head-role { font-size: .68rem; font-weight: 400; opacity: .7; letter-spacing: .01em; }

/* Product cards inside the chat — the agent "shows / walks you to" models */
.cvc-chat-cards { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: .5rem; margin: .1rem 0 .2rem; }
.cvc-chat-card { display: flex; gap: .65rem; align-items: stretch; width: 100%; text-align: left; padding: .45rem; cursor: pointer;
  background: #fff; border: 1px solid var(--bg3); border-radius: 13px; transition: border-color .2s, transform .15s, box-shadow .2s; }
.cvc-chat-card:hover { border-color: var(--gold2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(24, 21, 15, .1); }
.cvc-chat-card-img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 9px; background: var(--bg2) center/cover no-repeat; }
.cvc-chat-card-body { display: flex; flex-direction: column; justify-content: center; gap: .12rem; min-width: 0; }
.cvc-chat-card-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.cvc-chat-card-price { font-size: .85rem; color: var(--gold); font-weight: 600; }
.cvc-chat-card-go { font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.cvc-chat-card:hover .cvc-chat-card-go { color: var(--gold); }

/* Suggested chips — quick entry points into the dialogue */
.cvc-chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; max-width: 100%; margin: .15rem 0 .2rem; }
.cvc-chat-chip { font: inherit; font-size: .82rem; line-height: 1.2; cursor: pointer; padding: .5rem .8rem; border-radius: 999px;
  background: #fff; color: var(--ink); border: 1px solid var(--bg3); transition: border-color .2s, background .2s, transform .15s; }
.cvc-chat-chip:hover { border-color: var(--gold2); background: var(--bg2); transform: translateY(-1px); }
.cvc-chat-chip:active { transform: translateY(0); }

.cvc-chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.cvc-chat-msg { max-width: 85%; padding: .6rem .8rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; word-wrap: break-word; }
.cvc-chat-msg--bot { align-self: flex-start; background: var(--bg2); color: var(--ink2); border-bottom-left-radius: 4px; }
.cvc-chat-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; border-bottom-right-radius: 4px; }
.cvc-chat-msg a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184, 118, 42, .35); }
.cvc-chat-msg--user a { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }

.cvc-chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.cvc-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: cvcBlink 1.3s infinite both; }
.cvc-chat-typing span:nth-child(2) { animation-delay: .2s; }
.cvc-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cvcBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.cvc-chat-channel {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; border-top: 1px solid var(--bg3);
  background: rgba(184, 118, 42, .06);
  text-decoration: none; color: var(--ink);
  font-size: .78rem; line-height: 1.35;
  transition: background .2s;
}
.cvc-chat-channel:hover { background: rgba(184, 118, 42, .12); }
.cvc-chat-channel svg { flex: 0 0 15px; color: var(--gold); }

.cvc-chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 1px solid var(--bg3); background: var(--bg); }
.cvc-chat-input {
  flex: 1; resize: none; border: 1px solid var(--bg3); border-radius: 12px;
  padding: .6rem .7rem; font: inherit; font-size: .9rem; color: var(--ink); background: #fff;
  max-height: 120px; line-height: 1.4; outline: none; transition: border-color .2s;
}
.cvc-chat-input:focus { border-color: var(--gold2); }
.cvc-chat-send {
  flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; font-size: 1.1rem; line-height: 1;
  transition: transform .2s, opacity .2s;
}
.cvc-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.cvc-chat-send:disabled { opacity: .5; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .cvc-chat-panel { animation: none; }
  .cvc-chat-dot, .cvc-chat-typing span, .cvc-chat-launch::after { animation: none; }
  .cvc-chat-teaser { transition: none; }
}

/* ─── Home: re-added unpacking video + salon entry ────────────────────────── */
.vr-yt-wrap { text-align: center; padding: 0 1.2rem 1rem; margin-top: -1rem; }
.vr-yt { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--gold2);
  transition: transform .2s, box-shadow .2s, background .2s; }
.vr-yt:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(184,118,42,.22); background: #fff; }
.vr-yt-play { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; font-size: .7rem; padding-left: 2px; }
.vr-yt-note { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }

.home-salon { padding: clamp(3rem,7vw,6rem) 1.4rem; background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%); text-align: center; }
.home-salon-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.home-salon-eyebrow { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.home-salon-title { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(1.9rem,4.4vw,3rem); line-height: 1.1; margin: .2rem 0 .3rem; color: var(--ink); }
.home-salon-title em { font-style: italic; color: var(--gold); }
.home-salon-text { font-size: 1.02rem; line-height: 1.6; color: var(--ink2); font-weight: 300; margin: 0 0 1rem; }
.home-salon .btn-gold { margin-top: .3rem; }

.nav-salon { color: var(--gold) !important; font-weight: 600; }

/* home-salon: model preview strip + dual CTA */
.home-salon-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.4rem 0 1.6rem; }
.hs-thumb { width: clamp(64px, 9vw, 100px); height: clamp(64px, 9vw, 100px); border-radius: 14px; background: var(--bg3) center/cover no-repeat;
  box-shadow: 0 10px 24px -10px rgba(24,21,15,.35); transition: transform .25s ease; }
.hs-thumb:hover { transform: translateY(-3px) scale(1.04); }
.hs-thumb--more { display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Cormorant', serif; font-weight: 600;
  font-size: .95rem; line-height: 1.15; color: var(--gold); background: var(--bg); border: 1px dashed var(--gold2); box-shadow: none; padding: .4rem; }
.home-salon-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.home-salon-cta .btn-ghost-h { color: var(--ink); border-color: var(--gold2); }

/* ─── Home: «Почему CV Castle» — horizontal cinematic scroll (GSAP pin) ────── */
.home-adv { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #16120c; }
.adv-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.adv-intro { flex: 0 0 auto; width: min(540px, 88vw); height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(2rem, 7vw, 8rem); color: #fff; }
.adv-eyebrow { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold3); margin-bottom: .9rem; }
.adv-h { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.03; margin: 0 0 1rem; }
.adv-h em { font-style: italic; color: var(--gold3); }
.adv-lead { font-size: clamp(.98rem, 1.5vw, 1.15rem); line-height: 1.6; color: rgba(255,255,255,.8); font-weight: 300; max-width: 26em; }
.adv-scrollhint { margin-top: 1.6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.adv-panel { flex: 0 0 auto; position: relative; width: min(560px, 82vw); height: 100%; background: center/cover no-repeat;
  display: flex; align-items: flex-end; overflow: hidden; }
.adv-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,13,8,.92) 0%, rgba(16,13,8,.25) 55%, rgba(16,13,8,.5) 100%); }
.adv-content { position: relative; z-index: 2; padding: clamp(2rem, 4vw, 3.6rem); color: #fff; max-width: 30em; }
.adv-k { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1; color: var(--gold3); }
.adv-t { font-family: 'Cormorant', serif; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.6rem); margin: .35rem 0 .7rem; }
.adv-d { font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.6; color: rgba(255,255,255,.86); font-weight: 300; }
.adv-content .btn-gold { margin-top: 1.4rem; }

@media (max-width: 759px) {
  .home-adv { height: auto; overflow: visible; }
  .adv-track { flex-direction: column; width: auto; transform: none !important; }
  .adv-intro { width: 100%; height: auto; padding: clamp(3rem,10vw,5rem) 1.4rem 2rem; }
  .adv-panel { width: 100%; height: auto; min-height: 78vh; }
}

/* refined line-icons replacing emoji (about features + process steps) */
.af-ic, .pst-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(184,118,42,.1), rgba(212,146,74,.16)); color: var(--gold); }
.af-ic svg, .pst-ic svg { width: 24px; height: 24px; }

/* «Почему» band: native horizontal scroll fallback when GSAP pin isn't active */
.home-adv--scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.home-adv--scroll .adv-track { transform: none !important; }