/* Shree Threading Studio — LuxWeb preview.
   Palette from their own identity: the crimson "Shree" logo + rose lash stroke, the oxblood wall, the lit oval mirrors,
   the gold loop on their wall menu, the cream of their menu graphic. Motif: one gold twisted thread + mirror-lit frames. */
:root {
  --cream: #fbf6f0; --sand: #f3e9df; --blush: #f2e1dc; --rose: #b9737a; --rose-d: #94464f;
  --crimson: #8e1219; --wall: #6f1322; --wine: #2b0a12; --wine2: #3a0f1a;
  --gold: #c9a44c; --gold-l: #e8cf8a; --gold-d: #7f5d1c; --ink: #241a1c; --muted: #685658;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hdr: 64px; --r: 22px;
  --glow: 0 0 0 2px #fff9ef, 0 0 14px 3px rgba(255, 246, 228, .8), 0 0 46px 6px rgba(255, 236, 205, .32);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1rem/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--crimson); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 5.4vw, 3.3rem); }
h3 { font-size: 1.55rem; }
em { font-style: italic; font-weight: 500; }
h1 em, h2 em, h3 em { color: var(--crimson); }
p { margin: 0 0 .9em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--wine); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 8px; }
.defs { position: absolute; }
.muted { color: var(--muted); }

/* ---------- ready mode / owner view ---------- */
html.ready .todo, html.ready .edit-only, html.ready .owner { display: none !important; }
.todo { display: inline-block; font: 600 .7rem/1.35 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: #6b3c00;
  background: #fff1cf; border: 1.5px dashed #c98a10; border-radius: 6px; padding: .25em .5em; margin: .3em .3em .3em 0; max-width: 100%; }
.todo::before { content: 'Edit me · '; color: #a5650b; }
.todo--ph { position: absolute; top: 10px; left: 10px; z-index: 3; }
.todo--block { display: block; margin: 18px auto 0; max-width: 1200px; }
.owner { position: sticky; top: 0; z-index: 70; background: #fff1cf; color: #4b2a00; font-size: .85rem; padding: 8px 16px; text-align: center; border-bottom: 1.5px dashed #c98a10; }
.owner a { color: #6b3c00; font-weight: 600; }

/* ---------- the thread ---------- */
.thread { display: block; width: 100%; height: auto; overflow: visible; }
.strand { fill: none; stroke: url(#gold); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 1 1; }
.strand.b { stroke-width: 3.2; opacity: .85; }
.thread use { stroke-dashoffset: 0; filter: drop-shadow(0 1px 1px rgba(60, 30, 0, .35)); }
.js .thread.draw use { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.55, .05, .25, 1); }
.js .thread.draw.in use { stroke-dashoffset: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--crimson); color: #fff; font: 600 .95rem/1 var(--sans); text-decoration: none; border: 1.5px solid var(--crimson);
  transition: background .2s, color .2s, transform .2s; white-space: nowrap; }
.btn:hover { background: #a3171f; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .88rem; }
.btn--glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); color: #fff; backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgba(255, 255, 255, .22); }
.btn--line { background: transparent; color: var(--crimson); }
.btn--line:hover { background: rgba(142, 18, 25, .07); }
.btn--light { background: var(--cream); color: var(--wine); border-color: var(--cream); }
.btn--light:hover { background: #fff; }
.btn--full { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--crimson); border-bottom: 1.5px solid currentColor; }
.link-arrow::after { content: '→'; margin-left: .45em; }
.link-arrow--light { color: var(--gold-l); }
.kicker { font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--rose-d); margin-bottom: .8em; }
.kicker--light { color: var(--gold-l); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr); display: flex; align-items: center; gap: 18px; padding: 0 clamp(14px, 3vw, 36px);
  background: rgba(251, 246, 240, .92); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid rgba(142, 18, 25, .1); }
html:not(.ready) .owner + .hdr { top: 36px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; margin-right: auto; }
.brand__mark { height: 30px; width: auto; }
.brand__tag { font: 600 .55rem/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: var(--rose-d); margin-top: 3px; padding-left: 2px; }
.nav { display: none; gap: 22px; }
.nav a { color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { border-color: var(--gold); }
.hdr__tel { display: none; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
@media (min-width: 1000px) { .nav { display: flex; } .hdr__tel { display: inline; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--hdr)); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--wine); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 10, 18, .2) 0%, rgba(43, 10, 18, 0) 26%, rgba(43, 10, 18, .55) 52%, rgba(30, 6, 12, .94) 100%); }
.hero__copy { position: relative; z-index: 2; padding: 0 20px 92px; width: 100%; max-width: 620px; }
.hero h1 { font-size: clamp(2.35rem, 9.6vw, 4.3rem); font-weight: 600; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 em { color: var(--gold-l); display: block; }
.thread--hero { max-width: 360px; margin: 14px 0 12px -4px; }
.hero__sub { font-size: 1.05rem; color: rgba(255, 255, 255, .92); max-width: 30em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 16px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .88rem; }
.stars { color: #fff; text-decoration: none; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.stars span { color: var(--gold-l); letter-spacing: .08em; }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d9b77a; }
.status.is-open::before { background: #7ee08f; box-shadow: 0 0 0 3px rgba(126, 224, 143, .25); }
.status--dark { background: var(--sand); color: var(--ink); margin: 6px 0 12px; }
.status--dark.is-open::before { background: #2d9a46; }
.status--glass { margin-top: 16px; }
.hero__mirror { display: none; }
.mirror { border-radius: 999px; overflow: hidden; box-shadow: var(--glow); background: var(--wine); }
.mirror img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .facts li:first-child::before { display: none; }
  .hero { min-height: min(calc(100svh - var(--hdr)), 780px); align-items: center; }
  .hero__shade { background: linear-gradient(90deg, rgba(30, 6, 12, .92) 0%, rgba(43, 10, 18, .78) 34%, rgba(43, 10, 18, .15) 62%, rgba(43, 10, 18, 0) 80%), linear-gradient(0deg, rgba(30, 6, 12, .5), transparent 30%); }
  .hero__copy { padding: 40px 0 40px clamp(32px, 6vw, 96px); max-width: 680px; }
  .hero__mirror { display: block; position: absolute; z-index: 2; right: clamp(24px, 4vw, 64px); bottom: 40px; width: 150px; text-align: center; }
  .hero__mirror .mirror { aspect-ratio: 3 / 4.6; }
  .hero__mirror figcaption { font: 500 italic .9rem var(--serif); margin-top: 12px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
}

/* ---------- facts strip ---------- */
.facts { list-style: none; margin: 0; padding: 14px 16px 14px 4px; background: var(--wine); color: var(--sand); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
  font: 500 .82rem/1.3 var(--sans); letter-spacing: .04em; }
.facts li { display: flex; align-items: center; }
.facts li::before { content: ''; width: 22px; height: 8px; margin: 0 12px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cpath d='M0 8h10c4 0 6-6 10-6s6 12 10 12 6-6 10-6h4' fill='none' stroke='%23c9a44c' stroke-width='1.6'/%3E%3Cpath d='M0 8h10c4 0 6 6 10 6s6-12 10-12 6 6 10 6h4' fill='none' stroke='%23e8cf8a' stroke-width='1.2'/%3E%3C/svg%3E"); }

/* ---------- sections ---------- */
section { position: relative; }
.sec-head { max-width: 1200px; margin: 0 auto 28px; padding: 0 20px; }
.lede { font-size: 1.06rem; color: var(--muted); max-width: 38em; margin-top: 12px; }

/* ---------- build your visit ---------- */
.build { padding: 56px 0 64px; }
.build__grid { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: grid; gap: 28px; }
.scenes { display: grid; gap: 18px; }
.scene { display: grid; gap: 16px; background: #fff; border-radius: var(--r); padding: 14px; box-shadow: 0 1px 0 rgba(142, 18, 25, .06), 0 18px 40px -26px rgba(43, 10, 18, .35); }
.scene__ph { position: relative; }
.scene__ph > img { width: 100%; height: 210px; object-fit: cover; border-radius: 999px / 46%; }
#s-thread .scene__ph > img { object-position: 50% 28%; }
#s-wax .scene__ph > img { object-position: 50% 60%; }
#s-facial .scene__ph > img { object-position: 50% 62%; }
.scene__inset { position: absolute; right: 10px; bottom: -10px; width: 132px; height: 62px; }
.scene__body { padding: 0 6px 6px; }
.scene__no { font: 600 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); margin-bottom: .4em; }
.scene h3 { font-size: 1.9rem; margin-bottom: 8px; }
.scene__body > p:not(.scene__no):not(.items__label) { color: var(--muted); }
.items { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.items button { min-height: 44px; padding: 0 15px; border-radius: 999px; background: var(--cream); border: 1.5px solid rgba(142, 18, 25, .22); font-size: .9rem; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.items button:hover { border-color: var(--crimson); }
.items button[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.items button[aria-pressed="true"]::before { content: '✓ '; }
.items--soft button { background: transparent; border-style: dashed; }
.items--soft button[aria-pressed="true"] { background: var(--wall); border-style: solid; }
.items__label { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-d); margin: 16px 0 0; }

.visit { position: relative; background: var(--wine); color: var(--sand); border-radius: 170px 170px var(--r) var(--r); padding: 44px 22px 24px; text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 249, 239, calc(.25 + var(--lit, 0) * .75)), 0 0 calc(10px + var(--lit, 0) * 26px) calc(var(--lit, 0) * 6px) rgba(255, 238, 205, calc(.12 + var(--lit, 0) * .45)), 0 30px 60px -30px rgba(43, 10, 18, .6);
  transition: box-shadow .5s; scroll-margin-top: calc(var(--hdr) + 16px); }
.visit__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.visit__mark { width: 92px; height: auto; }
.visit h3 { color: #fff; font-size: 1.8rem; }
.thread--card { max-width: 240px; margin: 10px auto 14px; }
.visit__list { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; display: grid; gap: 6px; }
.visit__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 8px 14px; border-bottom: 1px solid rgba(232, 207, 138, .22); font-size: .95rem; }
.visit__list li button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 1.1rem; flex: none; }
.visit__list .visit__empty { color: rgba(243, 233, 223, .7); font-style: italic; border: 0; justify-content: center; text-align: center; padding: 6px 0; }
.visit__shape { font: italic 500 1rem var(--serif); color: var(--gold-l); margin: 0 0 10px; }
.visit__help { min-height: 44px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1.5px dashed rgba(232, 207, 138, .6); color: var(--gold-l); font-size: .88rem; font-weight: 600; }
.visit__help[aria-pressed="true"] { background: rgba(232, 207, 138, .16); border-style: solid; }
.visit .items__label { color: var(--gold-l); }
.items--when { justify-content: center; }
.items--when button { background: transparent; color: var(--sand); border-color: rgba(243, 233, 223, .35); }
.items--when button[aria-pressed="true"] { background: var(--sand); color: var(--wine); border-color: var(--sand); }
.visit__note { font-size: .88rem; color: rgba(243, 233, 223, .85); margin: 12px 0; }
.visit__ctas { display: grid; gap: 10px; }
.visit .btn--line { color: var(--sand); border-color: rgba(243, 233, 223, .55); }
.visit .btn--line:hover { background: rgba(255, 255, 255, .08); }
.visit .btn { background-color: var(--crimson); }
.visit .btn.btn--line { background: transparent; }
.visit__small { font-size: .78rem; color: rgba(243, 233, 223, .7); margin: 12px 0 0; }
.pill { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); background: var(--cream); color: var(--wine);
  border: 1.5px solid var(--gold); border-radius: 999px; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; font-size: .88rem; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); white-space: nowrap; }
.pill span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--crimson); color: #fff; margin-right: 8px; font-size: .8rem; }

@media (min-width: 900px) {
  .build { padding: 84px 0 92px; }
  .build__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; padding: 0 28px; }
  .visit { position: sticky; top: calc(var(--hdr) + 18px); }
  .scene { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 18px; align-items: center; }
  .scene__ph > img { height: 330px; border-radius: 999px; }
  .scene__inset { right: -14px; bottom: 14px; width: 120px; height: 58px; }
  .pill { left: auto; right: 24px; transform: none; bottom: 24px; }
}

/* ---------- studio ---------- */
.studio { background: var(--sand); padding: 60px 16px 64px; display: grid; gap: 30px; }
.studio__copy { max-width: 520px; }
.studio__copy h2 { margin-bottom: 18px; }
.studio__copy p { color: #4a3b3d; font-size: 1.02rem; }
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; padding: 0; border: 0; background: var(--wine); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; text-align: left; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile:hover img { transform: scale(1.04); }
.tile span { position: absolute; left: 8px; bottom: 8px; right: 8px; background: rgba(251, 246, 240, .94); color: var(--ink); font: 600 .72rem/1.3 var(--sans); padding: 6px 9px; border-radius: 8px; width: fit-content; max-width: calc(100% - 16px); }
.tile--tall { grid-row: span 2; aspect-ratio: auto; border-radius: 999px; box-shadow: var(--glow); margin: 6px; }
.tile--tall span { left: 50%; transform: translateX(-50%); bottom: 22px; text-align: center; white-space: nowrap; max-width: none; font-size: .68rem; }
.tile--wide { grid-column: 1 / -1; aspect-ratio: 640 / 228; }
.tile:nth-child(6) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.tile:nth-child(6) img { object-position: 50% 70%; }
@media (min-width: 900px) {
  .studio { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; padding: 92px max(28px, calc((100vw - 1200px) / 2)); align-items: center; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .tile--wide { grid-column: 2 / -1; }
  .tile:nth-child(6) { grid-column: auto; aspect-ratio: 1.39; }
  .studio .todo--block { grid-column: 1 / -1; }
}

/* ---------- reviews ---------- */
.reviews { background: radial-gradient(120% 80% at 80% 0%, #5a1424 0%, var(--wine) 60%); color: var(--sand); padding: 60px 0 64px; overflow: hidden; }
.reviews__head, .quote, .reviews > .link-arrow { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.reviews > .link-arrow { display: flex; width: fit-content; margin-top: 26px; padding: 0; margin-left: max(20px, calc((100vw - 1200px) / 2 + 20px)); }
.reviews h2 { color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.reviews .big { font-size: clamp(3.6rem, 12vw, 5.6rem); line-height: .9; }
.reviews__stars { color: var(--gold); font-size: 1.4rem; letter-spacing: .1em; }
.reviews__sub { font: 500 1rem var(--sans); color: var(--sand); width: 100%; }
.quote { margin-top: 30px; margin-bottom: 30px; }
.thread--quote { max-width: 220px; margin-bottom: 18px; }
.quote blockquote { margin: 0; font: italic 500 clamp(1.45rem, 3.8vw, 2.3rem)/1.3 var(--serif); color: #fff; max-width: 30em; }
.quote figcaption, .rev figcaption { margin-top: 14px; font-size: .85rem; font-weight: 600; color: var(--gold-l); letter-spacing: .04em; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 14px; scrollbar-width: thin; }
.rev { scroll-snap-align: start; background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 207, 138, .22); border-radius: 18px; padding: 22px 20px; position: relative; }
.rev::before { content: '★★★★★'; color: var(--gold); letter-spacing: .1em; font-size: .85rem; display: block; margin-bottom: 8px; }
.rev blockquote { margin: 0; font-size: 1rem; line-height: 1.55; color: #fff; }
@media (min-width: 900px) {
  .reviews { padding: 92px 0; }
  .rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
}

/* ---------- visit ---------- */
.visitus { padding: 60px 0 64px; }
.visitus__grid { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: grid; gap: 26px; }
.visitus__map { position: relative; border-radius: var(--r); overflow: hidden; min-height: 300px; background: var(--sand); }
.visitus__map img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.visitus__map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43, 10, 18, .55), transparent 45%); pointer-events: none; }
.visitus__map .btn { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); }
.visitus__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visitus__map.has-map::after { display: none; }
.addr { font: 600 1.45rem/1.25 var(--serif); margin-bottom: 6px; }
.hours { border-collapse: collapse; width: 100%; max-width: 420px; margin: 6px 0 12px; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: 7px 0; border-bottom: 1px solid rgba(142, 18, 25, .12); font-weight: 400; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { font-weight: 700; color: var(--crimson); }
.hours tr.today th::after { content: ' · today'; font-weight: 500; font-size: .8rem; color: var(--gold-d); }
.notes { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; font-size: .95rem; }
.notes li { padding-left: 18px; position: relative; }
.notes li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--gold); }
.visitus__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) {
  .visitus { padding: 92px 0; }
  .visitus__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding: 0 28px; align-items: stretch; }
  .visitus__map { min-height: 520px; }
}

/* ---------- request form ---------- */
.book { background: var(--wall); background-image: radial-gradient(100% 70% at 0% 0%, #8a1a2c 0%, transparent 60%); color: var(--sand); padding: 60px 16px 64px; display: grid; gap: 28px; }
.book__intro h2 { color: #fff; margin-bottom: 16px; }
.book__intro h2 em { color: var(--gold-l); display: block; }
.book__intro p { color: rgba(243, 233, 223, .9); max-width: 30em; }
.book__mirror { display: none; }
.form, .done { background: var(--cream); color: var(--ink); border-radius: var(--r); padding: 22px 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
legend { font: 600 1.25rem var(--serif); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 0; }
legend span { width: 28px; height: 28px; border-radius: 50%; background: var(--crimson); color: #fff; display: grid; place-items: center; font: 600 .8rem var(--sans); }
label, .lbl { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
.opt { font-weight: 400; color: var(--muted); }
input, textarea, select { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid #d9c8c0; border-radius: 12px; padding: 12px 14px; min-height: 48px; }
input:focus, textarea:focus, select:focus { border-color: var(--crimson); outline: none; box-shadow: 0 0 0 3px rgba(142, 18, 25, .15); }
input[aria-invalid="true"] { border-color: #b3261e; }
.hint { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.err { color: #b3261e; font-size: .85rem; font-weight: 600; margin: 6px 0 0; }
.err-sum { background: #fbe9e7; color: #8c1d18; border-left: 4px solid #b3261e; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 0 15px; border-radius: 999px; background: #fff; border: 1.5px solid #d9c8c0; font-size: .9rem; font-weight: 500; }
.chips button[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: #fff; }
.row2 { display: grid; gap: 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__small { text-align: center; font-size: .85rem; color: var(--muted); margin: 12px 0 0; }
.done { text-align: center; padding: 34px 22px; }
.thread--done { max-width: 220px; margin: 0 auto 16px; }
.done h3 { font-size: 1.8rem; margin-bottom: 10px; }
@media (min-width: 700px) { .row2 { grid-template-columns: 1fr 1fr; } .form, .done { padding: 30px 30px; } }
@media (min-width: 900px) {
  .book { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; padding: 92px max(28px, calc((100vw - 1200px) / 2)); align-items: start; }
  .book__mirror { display: block; width: 190px; aspect-ratio: 3 / 4.6; margin-top: 28px; }
}

/* ---------- FAQ ---------- */
.faq { padding: 60px 0 64px; }
.faq__grid { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: grid; gap: 24px; }
.faq details { border-bottom: 1px solid rgba(142, 18, 25, .15); }
.faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 600 1.12rem/1.3 var(--serif); padding: 12px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem/1 var(--sans); color: var(--crimson); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: #4a3b3d; padding-bottom: 8px; }
.faq__ask { background: var(--wine); color: var(--sand); border-radius: 160px 160px var(--r) var(--r); padding: 44px 24px 28px; text-align: center; box-shadow: var(--glow); align-self: start; }
.faq__mark { width: 120px; height: auto; margin: 0 auto 10px; }
.faq__ask h3 { color: #fff; margin-bottom: 8px; }
@media (min-width: 900px) { .faq { padding: 92px 0; } .faq__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding: 0 28px; } }

/* ---------- footer: closing scene ---------- */
.ftr { background: var(--wine); color: var(--sand); }
.ftr__scene { position: relative; overflow: hidden; text-align: center; padding: 64px 20px 56px; }
.ftr__bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); max-width: none; object-fit: cover; filter: blur(14px) saturate(1.1); opacity: .35; }
.ftr__scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 40%, rgba(43, 10, 18, .35), var(--wine) 85%); }
.ftr__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.ftr__mark { width: 190px; height: auto; margin: 0 auto; }
.ftr__tag { font: 600 .62rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-l); margin: 8px 0 0; padding-left: .42em; }
.thread--ftr { max-width: 300px; margin: 18px auto; }
.ftr__line { font: 600 clamp(1.7rem, 5vw, 2.5rem)/1.15 var(--serif); color: #fff; }
.ftr__line em { color: var(--gold-l); }
.ftr__ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.ftr__cols { max-width: 1200px; margin: 0 auto; padding: 36px 20px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; border-top: 1px solid rgba(232, 207, 138, .18); font-size: .92rem; }
.ftr h4 { font: 600 .72rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l); margin: 0 0 10px; }
.ftr__cols p { margin-bottom: .6em; }
.ftr__cols a { color: var(--sand); text-decoration: none; display: inline-block; padding: 4px 0; }
.ftr__cols a:hover { color: #fff; text-decoration: underline; }
.ftr .muted { color: rgba(243, 233, 223, .7); }
.ftr__base { max-width: 1200px; margin: 0 auto; padding: 18px 20px 26px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: rgba(243, 233, 223, .72); border-top: 1px solid rgba(232, 207, 138, .12); }
.ftr__base p { margin: 0; }
.ftr__top { color: var(--gold-l); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .ftr__cols { grid-template-columns: 1.1fr 1fr 1.3fr .8fr; padding: 48px 28px 18px; } .ftr__scene { padding: 84px 20px 70px; } }

/* ---------- dock (phones) ---------- */
.dock { display: none; }
@media (max-width: 899px) {
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 58; display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 6px; padding: 6px;
    border-radius: 999px; background: rgba(43, 10, 18, .96); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .3s, opacity .3s; }
  .dock a { min-height: 48px; display: grid; place-items: center; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }
  .dock .dock__go { background: linear-gradient(135deg, #e8cf8a, #c9a44c); color: var(--wine); }
  .dock.away { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body { padding-bottom: 76px; }
  .hdr .btn--sm { padding: 0 14px; }
}

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lb::backdrop { background: rgba(20, 4, 8, .92); }
.lb figure { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 16px 24px; }
.lb img { max-width: min(1000px, 100%); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 10px; }
.lb figcaption { color: var(--sand); margin-top: 12px; font: italic 500 1rem var(--serif); }
.lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35); color: #fff; font-size: 1.6rem; line-height: 1; }
.lb__x { top: 12px; right: 12px; }
.lb__prev { left: 12px; top: 50%; }
.lb__next { right: 12px; top: 50%; }

/* ---------- gentle reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- hero stage: their mirror wall switches on ---------- */
.hero__stage { position: absolute; inset: 0; overflow: hidden; background: #140306; }
.hero__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }   /* sized by JS to cover the stage at the photo's aspect ratio */
.hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter 1.1s ease-out; }
html.dark .hero__frame img { filter: brightness(.22) saturate(.55); }
html.dark .hero__copy, html.dark .hero__mirror { opacity: 0; transform: translateY(14px); }
.hero__copy, .hero__mirror { transition: opacity .9s ease .1s, transform .9s ease .1s; }
.lamp { position: absolute; border-radius: 999px; pointer-events: none; opacity: 0; transform: scale(.94);
  box-shadow: 0 0 0 .3vmin #fff8ea, 0 0 1.6vmin .5vmin rgba(255, 246, 228, .95), 0 0 6vmin 1.6vmin rgba(255, 236, 205, .55), 0 0 16vmin 4vmin rgba(255, 220, 170, .22), inset 0 0 3vmin rgba(255, 246, 228, .35);
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.lamp.on { opacity: 1; transform: none; }
html:not(.dark) .lamp { opacity: .5; transform: none; }   /* lit from the start: a soft halo on the real rings */
/* wide crop (1800×1062): the three mirrors measured on the photo */
.lamp--1 { left: 32.8%; top: 8.2%; width: 6.4%; height: 40%; }
.lamp--2 { left: 46.6%; top: 2.6%; width: 9%; height: 48.5%; }
.lamp--3 { left: 68.8%; top: -1%; width: 16.4%; height: 56%; }
@media (max-width: 899px) {   /* tall crop (1200×1600) */
  .lamp--1 { left: 32.4%; top: 39%; width: 7.2%; height: 18.4%; }
  .lamp--2 { left: 46.4%; top: 36%; width: 9.2%; height: 22.4%; }
  .lamp--3 { left: 69%; top: 31.2%; width: 16.4%; height: 28.2%; }
}
.hero__relight { position: absolute; z-index: 3; right: 14px; top: 14px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; border: 1px solid rgba(255, 255, 255, .35); font: 600 .78rem var(--sans); backdrop-filter: blur(6px); }
@media (max-width: 899px) { .hero__relight { display: none; } }

/* ---------- the stitch: one thread runs down beside the menu ---------- */
.scenes { position: relative; }
.stitch { display: none; }
@media (min-width: 900px) {
  .scenes { padding-left: 34px; }
  .stitch { display: block; position: absolute; left: 6px; top: 0; width: 22px; height: 100%; overflow: visible; }
  .stitch path { fill: none; stroke: url(#goldV); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--draw, 1); filter: drop-shadow(0 1px 1px rgba(60, 30, 0, .35)); }
  .scene { position: relative; }
  .scene::before { content: ''; position: absolute; left: -36px; top: 40px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3e2a8, #b98d36 60%, #7f5d1c); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4.5px rgba(185, 141, 54, .5); opacity: 0; transition: opacity .4s; }
  .scene.knot::before { opacity: 1; }
}

/* ---------- studio band: full-bleed photo with the copy over it ---------- */
.studio { position: relative; overflow: hidden; background: var(--wine); color: var(--sand); padding: 72px 20px 76px; min-height: 70svh; display: grid; align-items: end; gap: 0; }
.studio__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.studio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 10, 18, .15), rgba(43, 10, 18, .55) 45%, rgba(30, 6, 12, .96) 100%); }
.studio__copy { position: relative; z-index: 1; max-width: 560px; }
.studio__copy h2 { color: #fff; margin-bottom: 16px; }
.studio__copy h2 em { color: var(--gold-l); }
.studio__copy p { color: rgba(243, 233, 223, .92); font-size: 1.02rem; }
@media (min-width: 900px) {
  .studio { min-height: 640px; padding: 96px max(28px, calc((100vw - 1200px) / 2)); align-items: center; grid-template-columns: none; }
  .studio::after { background: linear-gradient(90deg, rgba(30, 6, 12, .94) 0%, rgba(43, 10, 18, .8) 38%, rgba(43, 10, 18, .1) 70%, rgba(43, 10, 18, 0) 100%); }
  .studio__bg { object-position: 60% 50%; }
}

/* ---------- the mirror walk ---------- */
.walk { background: var(--wine); color: var(--sand); position: relative; }
.walk__pin { position: relative; overflow: hidden; padding: 56px 0 48px; background: radial-gradient(120% 70% at 50% 110%, #3a0f1a, var(--wine) 60%); }
.walk__pin::before { content: ''; position: absolute; inset: 0; background: url('/img/wall-wide-1000.webp') center 40% / cover no-repeat; filter: blur(18px) saturate(1.2); opacity: .22; }
.walk__head { position: relative; z-index: 1; padding: 0 20px; max-width: 1200px; margin: 0 auto 22px; }
.walk__head h2 { color: #fff; }
.walk__hint { color: rgba(243, 233, 223, .7); font-size: .85rem; margin: 8px 0 0; }
.walk__track { position: relative; z-index: 1; display: flex; gap: 22px; padding: 14px 20px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.walk__track::-webkit-scrollbar { display: none; }
.mir { flex: none; scroll-snap-align: center; width: min(68vw, 290px); background: none; border: 0; padding: 0; color: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.mir__ring { display: block; aspect-ratio: 3 / 4.6; border-radius: 999px; overflow: hidden; background: #1a0509; box-shadow: var(--glow); transition: transform .5s; }
.mir__ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mir:hover .mir__ring { transform: translateY(-6px); }
.mir__cap { display: block; margin-top: 14px; font: 500 italic .95rem var(--serif); color: #fff; }
.mir__ring--end { display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 40%, #5a1424, #2b0a12 80%); }
.mir__end { display: grid; gap: 12px; justify-items: center; padding: 24px; }
.mir__end img { width: 120px; height: auto; }
.mir__end b { font: 600 1.3rem var(--serif); color: #fff; }
.walk .todo--block { position: relative; z-index: 1; margin: 12px 20px 0; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .walk.is-pinned { height: var(--run, 260vh); }
  .walk.is-pinned .walk__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--hdr) + 28px) 0 0; }
  .walk.is-pinned .walk__track { overflow: visible; scroll-snap-type: none; padding: 20px 0 0 max(28px, calc((100vw - 1200px) / 2)); will-change: transform; transform: translateX(var(--x, 0px)); }
  .walk.is-pinned .mir { width: 300px; }
  .walk.is-pinned .mir__ring { height: min(56vh, 520px); aspect-ratio: auto; width: 300px; }
}
@media (min-width: 900px) { .walk__pin { padding: 84px 0 56px; } .walk__head { padding: 0 28px; } }