/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
.relative {
  position: relative;
}
.isolate {
  isolation: isolate;
}
.min-w-0 {
  min-width: 0px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --brand-dark: #241f21;
  --brand-deep: #181616;
  --brand-yellow: #ffc20e;
  --brand-yellow-ink: #735300;
  --ink: #252120;
  --muted: #514b43;
  --surface: #fff;
  --page: #f8f7f3;
  --line: #e9e5db;
  --canvas: #fffefa;
  --canvas-text: #262019;
  --canvas-muted: #5f5343;
  --canvas-line: #eadfc3;
  --choice-face: linear-gradient(155deg,#fffefa 0%,#fcf4df 100%);
  --choice-edge: #e7d7b2;
  --choice-depth: inset 0 1px 0 #fff, 0 2px 0 #dcc79e, 0 5px 12px -8px #92682f;
  --radius-card: 18px;
  --radius-panel: 26px;
  --surface-shadow: 0 3px 0 #d9cdb827, 0 10px 28px -15px #32231947, 0 23px 36px -27px #32231952;
  --heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; font: 400 16px/1.6 var(--body); color: var(--ink); background: var(--canvas); }
main { background: radial-gradient(ellipse 85% 35rem at 88% 0,#fff0be,transparent 86%), radial-gradient(ellipse 85% 32rem at 0% 50%,#fff5d6,transparent 90%), var(--canvas); }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--heading); color: var(--brand-dark); line-height: 1.17; letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.12rem; }
:focus-visible { outline: 3px solid #8a6500; outline-offset: 3px; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 20; background: white; padding: 10px; }
.wrap { width: min(calc(100% - 36px), 1260px); margin-inline: auto; }
.icon { width: 20px; height: 20px; display: inline-block; flex: none; vertical-align: middle; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; border: 1px solid transparent; border-radius: 11px; padding: 9px 14px; font-size: .84rem; font-weight: 700; line-height: 1.3; white-space: nowrap; transition: transform .18s ease; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }
.btn-dark { color: white; background: var(--brand-dark); }
.btn-dark:hover { background: #423831; }
.btn-gold { color: var(--brand-dark); background: linear-gradient(180deg,#ffdf69,var(--brand-yellow) 78%); box-shadow: inset 0 1px 0 #fff5cc, 0 3px 0 #bb840d, 0 7px 14px -7px #31220380; }
.btn-gold:hover { background: linear-gradient(180deg,#ffe796,#ffd346 78%); }
.btn-gold:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff5cc, 0 1px 0 #bb840d; }
.btn-outline { border-color: #e4ded1; color: var(--brand-dark); background: white; }
.btn-outline:hover { border-color: var(--brand-dark); background: #fbf5e4; }
.icon-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border-radius: 100px; border: 1px solid var(--line); background: white; color: var(--brand-dark); }
.site-header { position: sticky; z-index: 10; top: 0; padding-top: env(safe-area-inset-top); background: #fffcf3f5; border-bottom: 1px solid var(--canvas-line); backdrop-filter: blur(12px); }
.header-inner { height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: inline-flex; flex: none; align-items: center; }
.brand img { width: 92px; height: auto; }
.site-header .brand, .site-footer .brand { padding: 4px 9px; background: #fffdf7; border: 1px solid var(--canvas-line); border-radius: 9px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-actions .hotline { display: none; }
.hotline { gap: 9px; padding-block: 5px; }
.phone-copy { display: grid; gap: 3px; text-align: left; line-height: 1.12; }
.phone-label { font-size: .63rem; font-weight: 600; letter-spacing: .035em; }
.phone-number { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .025em; white-space: nowrap; }
.hotline .phone-label { color: #e9e4d9; }
.site-header .hotline { border-color: #8e7047; background: #2a221b; }
.site-header .hotline:hover { background: #403124; }
.consignment { padding-inline: 8px; font-size: .75rem; }
.menu-toggle { border-radius: 9px; }
#site-nav { display: none; }
#site-nav.open { display: grid; position: absolute; inset: 100% 0 auto; background: #fffcf3; padding: 10px 18px 18px; box-shadow: 0 12px 24px #49321528; }
#site-nav a { display: grid; align-items: center; min-height: 44px; padding: 8px 10px; font-size: .87rem; font-weight: 650; color: var(--canvas-muted); }
#site-nav a:hover, #site-nav .nav-active { color: var(--canvas-text); }
#site-nav .nav-active { text-decoration: underline 3px var(--brand-yellow); text-underline-offset: 7px; }
.intro { padding-top: 14px; }
.hero { display: grid; border-radius: var(--radius-panel); overflow: hidden; background: radial-gradient(ellipse at 83% 36%,#ffe7a2 0%,#fff7dc 40%,#fffefa 76%); border: 1px solid #e9d49e; box-shadow: inset 0 1px 0 white, 0 24px 48px -25px #976b3654; }
.hero-content { position: relative; z-index: 1; padding: 25px 22px 21px; color: var(--canvas-text); }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--brand-dark); font-size: .68rem; font-weight: 760; letter-spacing: .115em; text-transform: uppercase; }
.eyebrow > span { width: 16px; height: 2px; flex: none; background: var(--brand-yellow); }
.hero .eyebrow { color: var(--brand-yellow-ink); }
.hero h1 { color: var(--canvas-text); font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; line-height: .98; letter-spacing: -.055em; }
.hero h1 span { color: #8b5904; text-shadow: 0 1px #efc057, 0 2px #e5b356, 0 5px 12px #d4942135; }
.hero-description { color: var(--canvas-muted); margin-top: 15px; font-size: .93rem; max-width: 38ch; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 13px; margin-top: 16px; }
.hero-link { display: inline-flex; gap: 5px; align-items: center; min-height: 44px; color: var(--canvas-text); font-size: .8rem; font-weight: 650; }
.hero-link:hover { text-decoration: underline; }
.hero-link .icon { width: 16px; }
.hero-media { --turn-x: 0deg; --turn-y: 0deg; display: grid; align-items: center; aspect-ratio: 1.46; padding: 14px 23px 35px 18px; perspective: 850px; touch-action: pan-y pinch-zoom; }
.hero-media::before { content: ""; position: absolute; inset: 32% -14% -29%; pointer-events: none; background: repeating-linear-gradient(90deg,#d4a25938 0 1px,transparent 1px 44px), repeating-linear-gradient(0deg,#d4a25938 0 1px,transparent 1px 44px); transform: perspective(260px) rotateX(43deg); transform-origin: bottom; mask-image: linear-gradient(0deg,#000 0%,transparent 90%); }
.hero-scene { position: relative; width: 100%; aspect-ratio: 1.5; transform-style: preserve-3d; transform: rotateX(calc(7deg + var(--turn-x))) rotateY(calc(-8deg + var(--turn-y))) rotateZ(-2deg); transition: transform .36s cubic-bezier(.2,.75,.25,1); }
.hero-media[data-depth-active] .hero-scene { transition-duration: .16s; }
.scene-frame, .scene-outline { position: absolute; inset: 0; display: block; border-radius: clamp(10px,2vw,19px); }
.scene-outline { transform: translate3d(7%,4%,-24px); border: 1px solid #d8ac57; background: linear-gradient(135deg,#fff8de,#e7bf72a0); box-shadow: 0 12px 28px #9b69234d; }
.scene-frame { overflow: hidden; transform: translateZ(5px); border: 1px solid #ffe1a3; background: #292423; box-shadow: 1px 1px #edc474, 2px 2px #cc934a, 3px 3px #b27c35, 4px 4px #94622c, 5px 5px #784a24, 0 20px 36px #7d4e274d; }
.scene-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.hero-media figcaption { position: absolute; right: 13px; bottom: 9px; display: flex; align-items: center; gap: 6px; color: white; background: #181616ec; border: 1px solid #ffffff32; border-radius: 8px; padding: 5px 8px; font-size: .71rem; }
.hero-media figcaption .icon { width: 15px; height: 15px; color: var(--brand-yellow); }
.bee-decoration { position: absolute; top: -8%; right: -3%; width: clamp(75px,22vw,113px); aspect-ratio: 1; display: grid; place-items: center; transform-style: preserve-3d; transform: translateZ(64px) rotateZ(3deg); pointer-events: none; }
.bee-decoration::before, .bee-decoration::after { content: ""; position: absolute; width: 77%; aspect-ratio: 1; clip-path: polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%); }
.bee-decoration::before { background: #a36625; transform: translate3d(4%,7%,-8px) rotate(-12deg); }
.bee-decoration::after { background: linear-gradient(135deg,#fff7df,#ffce58); transform: rotate(-12deg); }
.bee-decoration img { width: 100%; height: auto; transform: translateZ(13px); filter: drop-shadow(0 8px 8px #33251580); animation: bee-hover 3.2s ease-in-out 2; }
@keyframes bee-hover { 50% { transform: translate3d(0,-7px,20px) rotateZ(-4deg); } }
.filter-bar { z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 9px; margin: 12px 0 0; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-card); background: white; box-shadow: var(--surface-shadow); }
.filter-field { min-width: 0; display: grid; align-content: center; padding: 6px 9px 2px; border: 1px solid var(--choice-edge); border-radius: 11px; background: var(--choice-face); box-shadow: var(--choice-depth); }
.filter-field:focus-within { border-color: #ba8a10; background: #fffaf0; }
.filter-field span { display: flex; gap: 6px; align-items: center; font-size: .7rem; font-weight: 750; color: var(--brand-dark); }
.filter-field .icon { width: 15px; height: 15px; }
.filter-field :is(select,input) { width: 100%; min-width: 0; min-height: 41px; border: 0; padding: 0 1px; color: var(--ink); background: transparent; font-size: 1rem; }
.filter-field :is(select,input):focus-visible { outline-offset: -2px; }
.filter-field select { min-height: 44px; }
.filter-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.filter-toggle { display: none; }
.filter-toggle [data-filter-count] { display: grid; place-items: center; min-width: 21px; min-height: 21px; border-radius: 50%; background: var(--brand-yellow); font-size: .67rem; }
.search-field, .filter-submit { grid-column: 1 / -1; }
.stats { display: flex; align-items: center; gap: 17px; margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--canvas-line); }
.stats > div { display: grid; gap: 1px; }
.stats > div + div { border-left: 1px solid var(--canvas-line); padding-left: 17px; }
.stats strong { color: var(--canvas-text); font: 800 1.16rem/1.1 var(--heading); font-variant-numeric: tabular-nums; }
.stats span { color: var(--canvas-muted); font-size: .71rem; }
.section { padding: 48px 0; }
.section-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.section-heading .eyebrow { margin-bottom: 8px; color: var(--brand-yellow-ink); }
.section-heading h2 { color: var(--canvas-text); }
.section-heading h2 + p { color: var(--canvas-muted); margin-top: 9px; font-size: .93rem; }
.inventory-heading { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; }
.section-bee { position: relative; display: grid; place-items: center; isolation: isolate; flex: none; width: clamp(72px,9vw,112px); aspect-ratio: 1; pointer-events: none; }
.section-bee::before { content: ""; position: absolute; inset: 3%; z-index: -1; background: radial-gradient(circle,#d38d325a,transparent 67%); }
.section-bee::after { content: ""; position: absolute; inset: 13%; z-index: -1; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background: linear-gradient(145deg,#fff0c3,#d7a45f 75%); transform: rotate(-11deg); }
.section-bee img { width: 100%; height: auto; filter: drop-shadow(0 7px 6px #77501f4d); }
.inventory-bee { margin-inline: 6px 9px; }
.contact-bee { width: clamp(82px,11vw,132px); transform: rotate(7deg); }
.listing-toolbar { display: grid; gap: 10px; margin-bottom: 13px; }
.pills { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pill { padding: 7px 13px; min-height: 44px; border: 1px solid var(--choice-edge); border-radius: 30px; background: var(--choice-face); color: var(--brand-dark); font-size: .78rem; font-weight: 700; box-shadow: var(--choice-depth); }
.pill[aria-pressed="true"] { background: linear-gradient(155deg,#ffeab2,#ffd06d); color: #35220a; border-color: #d8a34b; box-shadow: inset 0 1px 0 #fff3cd, 0 2px 0 #c79b50; }
.pill:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #b6864a45; }
.listing-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; }
.sort select { min-height: 44px; border: 1px solid var(--choice-edge); border-radius: 11px; padding: 5px 10px; background: var(--choice-face); color: var(--muted); font-size: .84rem; box-shadow: var(--choice-depth); }
.result-count { color: var(--canvas-text); font-size: .86rem; font-weight: 650; }
.listing-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 19px; }
.card { --turn-x: 3deg; --turn-y: -2deg; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: white; overflow: hidden; box-shadow: 0 4px 0 #dfd4bc, var(--surface-shadow); transition: transform .24s ease; }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 1px solid #b89144; background: linear-gradient(132deg,#ffe9ad30,transparent 36%); opacity: 0; transition: opacity .25s ease; }
.gallery { position: relative; overflow: hidden; aspect-ratio: 1.66; background: #ebe4d6; }
.gallery[data-gallery] { touch-action: pan-y pinch-zoom; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery.no-photo { display: grid; align-content: center; justify-items: center; gap: 8px; background: linear-gradient(135deg, #faf7ee, #f5ecd4); color: var(--muted); font-size: .78rem; }
.no-photo > .icon { width: 34px; height: 34px; color: var(--brand-yellow-ink); }
.gallery .icon-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #ffffffec; }
.gallery .previous { left: 8px; }
.gallery .next { right: 8px; }
.gallery-count { position: absolute; right: 12px; bottom: 10px; color: white; background: #181616df; border-radius: 5px; padding: 3px 7px; font-size: .72rem; }
.badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 20px; font-size: .72rem; font-weight: 740; background: #fff1c0; color: #584000; }
.card-body { padding: 17px; display: flex; flex: 1; flex-direction: column; }
.card-project { color: var(--brand-yellow-ink); font-size: .69rem; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.card h3 { font-size: clamp(1.08rem,2vw,1.32rem); }
.specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 11px 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }
.specs li { display: inline-flex; align-items: center; gap: 5px; }
.specs .icon { width: 16px; height: 16px; color: var(--brand-dark); }
.card-finish { margin-bottom: 5px; color: var(--muted); font-size: .81rem; }
.card-finish .icon { width: 16px; height: 16px; margin-right: 5px; color: var(--brand-dark); }
.card-furniture-rental { margin-bottom: 12px; color: var(--brand-yellow-ink); font-size: .78rem; font-weight: 600; }
.card-bottom { border-top: 1px solid #efebe2; margin-top: auto; padding-top: 11px; }
.price { color: var(--brand-dark); font: 800 1.56rem/1.2 var(--heading); }
.price small { font: 550 .77rem/1.3 var(--body); color: var(--muted); }
.promotion { color: var(--brand-yellow-ink); font-size: .78rem; font-weight: 650; margin-top: 5px; }
.detail-copy > p.promotion { color: var(--brand-yellow-ink); }
.card-actions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8px; margin-top: 12px; }
.card-actions .btn { font-size: .76rem; padding-inline: 6px; text-align: center; white-space: normal; }
.empty { text-align: center; background: white; border: 1px dashed #d3c6a5; border-radius: 14px; padding: 36px 15px; }
.empty > .icon { color: var(--brand-yellow-ink); width: 30px; height: 30px; margin-bottom: 7px; }
.empty p { margin: 8px 0 14px; color: var(--muted); }
.comparison, .process { background: linear-gradient(120deg,#fff7dc,#fffefa 72%); border-block: 1px solid var(--canvas-line); }
.date-label { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-dark); background: #fff0b7; padding: 6px 10px; border-radius: 6px; font-size: .76rem; font-weight: 650; }
.date-label .icon { width: 16px; height: 16px; }
.comparison-picker { display: none; }
.table-shell { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: white; box-shadow: var(--surface-shadow); }
table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .84rem; text-align: left; }
thead { color: #503718; background: #f9edcb; }
th, td { padding: 12px 14px; }
tbody th { color: var(--brand-dark); }
tbody tr { border-top: 1px solid var(--line); }
tbody tr:nth-child(even) { background: #faf9f6; }
.fine { margin-top: 12px; color: var(--muted); font-size: .78rem; }
.listings-section .fine, .comparison .fine, .location-choices .fine { color: var(--canvas-muted); }
.sources { margin-top: 9px; color: var(--brand-yellow-ink); font-size: .79rem; }
.sources summary { display: list-item; cursor: pointer; min-height: 44px; padding-top: 9px; font-weight: 700; }
.sources a { text-decoration: underline; }
.location-grid { display: grid; gap: 18px; }
.location-choices { display: grid; gap: 9px; align-content: start; }
.destination { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 13px; }
.destination[aria-pressed="true"] { border-color: var(--brand-yellow-ink); background: #fff5d2; }
.destination-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 7px; background: #fff0b7; color: var(--brand-dark); }
.destination strong { display: block; font-size: .9rem; color: var(--brand-dark); line-height: 1.3; }
.destination small { display: block; font-size: .72rem; margin-top: 4px; color: var(--muted); }
.destination b { color: var(--brand-yellow-ink); font-size: .74rem; white-space: nowrap; }
.map-panel { position: relative; min-width: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: #f6f1e6; box-shadow: var(--surface-shadow); }
.map-panel > svg { display: block; width: 100%; aspect-ratio: 560/324; }
.map-route { stroke: var(--brand-yellow-ink); }
.map-origin-halo { fill: var(--brand-yellow); }
.map-origin-dot { fill: var(--brand-dark); }
.map-pin circle:first-child { fill: #766b58; }
.map-pin.active circle:first-child { fill: var(--brand-yellow-ink); }
.map-panel text { fill: var(--brand-dark); font: 700 16px var(--body); paint-order: stroke fill; stroke: #f6f1e6; stroke-width: 4px; }
.map-panel .map-origin { font-weight: 800; }
.map-panel figcaption { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding-inline: 12px; background: white; font-size: .73rem; color: var(--muted); }
.map-panel a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-weight: 720; color: var(--brand-dark); }
.map-panel a .icon { width: 14px; height: 14px; }
.steps { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; margin: 0; list-style: none; }
.steps li { padding: 15px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--surface-shadow); }
.steps li div { display: flex; align-items: center; justify-content: space-between; color: #735300; margin-bottom: 10px; }
.steps li div .icon { box-sizing: content-box; padding: 9px; border-radius: 10px; background: linear-gradient(155deg,#fff6d7,#f7d47c); box-shadow: inset 0 1px 0 #fffdf8, 0 2px 0 #d5ac58, 0 6px 12px -8px #533500; }
.steps li div span { color: var(--brand-dark); font-size: .75rem; font-weight: 760; }
.steps p { color: var(--muted); font-size: .82rem; margin-top: 7px; }
.contact-panel { display: grid; gap: 22px; padding: 22px; border: 1px solid #ead59f; border-radius: var(--radius-panel); color: var(--canvas-text); background: radial-gradient(ellipse at 5% 10%,#fff0be 0,transparent 74%),#fffaf0; box-shadow: inset 0 1px 0 white, 0 20px 38px -25px #986c31; }
.contact-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
.contact-copy .eyebrow { color: var(--brand-yellow-ink); }
.contact-copy h2 { color: var(--canvas-text); }
.contact-copy > p:not(.eyebrow) { margin-top: 10px; color: var(--canvas-muted); max-width: 42ch; }
.contact-phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; color: var(--canvas-text); }
.contact-phone-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid #e9ca7a; border-radius: 9px; background: #fff6db; color: var(--brand-yellow-ink); }
.contact-phone-icon .icon { width: 18px; height: 18px; }
.contact-phone .phone-label { color: var(--canvas-muted); font-size: .73rem; }
.contact-phone .phone-number { font-size: 1.18rem; }
.contact-phone:hover .phone-number { color: var(--brand-yellow-ink); }
.form-shell { border-radius: 15px; padding: 15px; color: var(--ink); background: white; }
.lead-form { display: grid; gap: 10px; }
.lead-fields { display: grid; gap: 10px; }
.lead-field { display: grid; gap: 4px; color: var(--brand-dark); font-size: .78rem; font-weight: 700; }
.lead-field :is(input, select, textarea), .draft-text { width: 100%; min-width: 0; min-height: 44px; background: #faf9f6; border: 1px solid #e4ded1; border-radius: 7px; padding: 6px 9px; color: var(--ink); font-size: 16px; font-weight: 400; }
.lead-field select { border-color: var(--choice-edge); border-radius: 9px; background: var(--choice-face); box-shadow: var(--choice-depth); }
.lead-field select:disabled { opacity: .72; cursor: default; }
.lead-field textarea, .draft-text { resize: vertical; }
.lead-field [aria-invalid="true"] { border-color: #a32020; }
.error { font-size: .72rem; color: #a32020; }
.form-note { color: var(--muted); font-size: .74rem; }
.form-result { background: #edf8f2; border: 1px solid #b6dfc9; border-radius: 8px; color: #15513b; padding: 10px; font-size: .8rem; }
.form-result.is-error { color: #a32020; background: #fff5f5; border-color: #ecc8c8; }
.form-result.is-pending { color: var(--brand-dark); background: #fff8e5; border-color: #e7d7b2; }
.handoff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.draft-text { margin-top: 6px; }
.site-footer { background: #fff9e9; border-top: 1px solid var(--canvas-line); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-block: 19px 32px; font-size: .78rem; color: var(--canvas-muted); }
.footer-inner > a:last-child { color: var(--brand-yellow-ink); font-weight: 700; }
.footer-inner > a:last-child .icon { width: 14px; }
.floating { position: fixed; z-index: 8; bottom: max(16px,env(safe-area-inset-bottom)); right: max(14px,env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 10px; }
.floating a { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; color: white; box-shadow: 0 5px 16px #241f2148; position: relative; }
.float-call span { display: none; }
.float-call { background: var(--brand-dark); }
.float-zalo { background: #005bd8; font-weight: 800; font-size: .78rem; }
.float-messenger { background: #5948d3; font-weight: 750; }
.float-messenger span { display: none; }
.float-zalo::after { content: ""; position: absolute; inset: -3px; border: 2px solid #2580f2; border-radius: inherit; pointer-events: none; animation: radar 2.8s ease-out 3 both; }
@keyframes radar { from { opacity: .72; transform: scale(.9); } to { opacity: 0; transform: scale(1.36); } }
dialog { border: 0; border-radius: 16px; padding: 0; color: var(--ink); width: min(680px,calc(100% - 28px)); max-height: min(88dvh, 850px); box-shadow: 0 25px 80px #18161666; }
dialog::backdrop { background: #181616ac; }
dialog[open] { animation: reveal .22s ease both; }
.dialog-inner { position: relative; padding: 18px; }
.dialog-close { position: absolute; top: 10px; right: 10px; z-index: 1; }
.lead-dialog-inner { padding-top: 26px; }
.lead-dialog-inner h2 { margin-right: 45px; font-size: 1.85rem; }
#lead-context { color: var(--muted); margin: 8px 0 14px; }
#detail-dialog { width: min(1040px,calc(100% - 24px)); max-height: min(92dvh,850px); border: 1px solid #e8dfcf; border-radius: 22px; background: #fffcf6; box-shadow: 0 5px 0 #9b775c52, 0 32px 80px #0d0907ab; }
#detail-dialog::backdrop { background: #171310b8; backdrop-filter: blur(4px); }
#detail-dialog[open] { animation: detail-enter .28s cubic-bezier(.2,.75,.25,1) both; }
@keyframes detail-enter {
  from { opacity: 0; transform: perspective(1000px) translateY(16px) rotateX(5deg) scale(.985); }
  to { opacity: 1; transform: none; }
}
#detail-dialog .dialog-inner { padding: 11px; }
#detail-dialog .dialog-close { z-index: 3; box-shadow: 0 4px 10px #231b1530; }
.detail-layout { display: grid; gap: 14px; }
.detail-gallery { overflow: clip; margin: 0; width: 100%; min-width: 0; height: clamp(230px,43dvh,440px); aspect-ratio: auto; border: 1px solid var(--line); border-radius: 16px; background: #f1eee8; }
.detail-gallery img { object-fit: contain; }
.detail-gallery .gallery-count { right: 8px; bottom: 7px; }
.detail-copy { min-width: 0; padding: 4px 5px 10px; }
.detail-layout:not(.has-photos) .detail-copy { padding-right: 48px; }
.detail-rate { margin-top: 13px; padding: 12px 14px; border: 1px solid #e9d7a8; border-radius: 12px; background: linear-gradient(145deg,#fffcf1,#f9edc7); box-shadow: 0 3px 0 #e5d2a5; }
.furniture-detail { margin-block: 14px; padding: 12px; border: 1px solid var(--line); background: white; border-radius: 12px; box-shadow: var(--surface-shadow); }
.furniture-detail p { margin-top: 6px; color: var(--muted); font-size: .87rem; }
.detail-copy h2 { font-size: clamp(1.45rem,4vw,2.3rem); }
.detail-copy > p:not(.eyebrow) { margin: 9px 0; color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detail-actions .btn { white-space: normal; }
@media (min-width: 760px) {
  #detail-dialog .dialog-inner { padding: 17px; }
  .detail-layout.has-photos { grid-template-columns: minmax(0,1.16fr) minmax(0,1fr); align-items: start; gap: 23px; }
  .detail-gallery { height: clamp(350px,65dvh,530px); }
  .detail-layout.has-photos .detail-copy { padding: 14px 12px 10px 0; }
  .detail-copy .eyebrow { padding-right: 38px; }
}
.reveal.is-visible { animation: reveal .5s ease backwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@supports (appearance: base-select) and selector(::picker(select)) {
  select, select::picker(select) { appearance: base-select; }
  select { align-items: center; }
  select::picker(select) {
    margin-block: 6px;
    padding: 5px;
    min-inline-size: max(10.75rem, anchor-size(width));
    max-inline-size: calc(100vw - 20px);
    max-block-size: min(55dvh, 21rem);
    border: 1px solid #d5b06a;
    border-radius: 13px;
    background: linear-gradient(150deg,#fffefa,#fff4d9);
    color: var(--ink);
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #cda567, 0 14px 25px -10px #60442360;
    transform-origin: top center;
  }
  select:open::picker(select) { animation: choice-open .17s ease-out both; }
  select::picker-icon { color: var(--brand-yellow-ink); transition: rotate .18s ease; }
  select:open::picker-icon { rotate: 180deg; }
  select option { min-block-size: 44px; align-items: center; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; white-space: normal; }
  select option:checked { border-color: #e2b259; background: #ffe3a3; color: #402a09; font-weight: 650; }
  select option:checked::checkmark { color: #765111; }
  select option:is(:hover,:focus-visible) { border-color: #c79944; background: #fff0c8; }
  @keyframes choice-open {
    from { opacity: 0; transform: perspective(460px) translateY(-3px) rotateX(-9deg); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    select:open::picker(select) { animation: none; }
    select::picker-icon { transition: none; }
  }
}

@media (max-width: 879px) {
  .filter-bar.filters-ready .search-field { grid-column: 1; }
  .filter-bar.filters-ready .filter-toggle { display: inline-flex; grid-column: 2; align-self: stretch; padding-inline: 10px; }
  .filter-bar.filters-ready:not(.filters-open) .filter-options { display: none; }
  .filter-submit { min-height: 46px; }
}
@media (max-width: 680px) {
  .comparison-picker:has(+ .comparison-ready) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-bottom: 10px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
  .comparison-picker .pill { border-radius: 9px; padding: 5px; min-width: 0; }
  .comparison-ready [data-project-column]:not(.is-current) { display: none; }
  .comparison-ready table { min-width: 0; table-layout: fixed; }
  .comparison-ready th:first-child { width: 44%; }
  .comparison-ready :is(th,td) { padding: 10px; overflow-wrap: anywhere; }
}
@media (max-width: 619px) {
  html { scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .wrap { width: min(calc(100% - 28px), 1260px); }
  .header-inner { height: 60px; gap: 8px; }
  .brand img { width: 81px; }
  .site-header .brand { padding: 3px 6px; }
  .inventory-heading { grid-template-columns: minmax(0,1fr) auto; gap: 6px 8px; }
  .inventory-reset { grid-column: 1 / -1; justify-self: start; }
  .inventory-bee { margin: 0; }
  .pills { flex-wrap: nowrap; overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
  .pills .pill { flex: none; white-space: nowrap; }
  .listing-grid { gap: 16px; }
  .card-actions .btn { min-height: 46px; }
  .footer-inner { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .floating { inset: auto 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 8px max(14px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); border-top: 1px solid var(--canvas-line); background: #fffcf3f5; backdrop-filter: blur(10px); }
  .floating a { display: flex; justify-content: center; gap: 8px; align-items: center; width: 100%; height: 44px; border-radius: 10px; box-shadow: none; font-size: .86rem; }
  .float-call span { display: inline; font-weight: 700; }
  .floating .float-call { background: #ffd372; color: #251910; }
  .floating .icon { width: 17px; height: 17px; }
  .floating:has(.float-messenger) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .floating .float-messenger span { display: inline; }
  .floating .float-messenger .icon { display: none; }
  .float-zalo::after { display: none; }
}
@media (min-width: 620px) {
  .wrap { width: min(calc(100% - 56px), 1260px); }
  .header-actions .hotline { display: inline-flex; }
  .consignment { padding-inline: 12px; font-size: .82rem; }
  .listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lead-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wide { grid-column: 1/-1; }
  .steps li, .form-shell { padding: 19px; }
}
@media (min-width: 880px) {
  .header-inner { height: 72px; }
  .site-header .brand img { width: 98px; }
  #site-nav, #site-nav.open { display: flex; position: static; gap: 0; padding: 0; box-shadow: none; background: transparent; }
  .menu-toggle { display: none; }
  .intro { padding-top: 24px; }
  .hero { grid-template-columns: .86fr 1.14fr; min-height: 451px; }
  .hero-content { display: flex; flex-direction: column; justify-content: center; padding: 36px clamp(27px,3.8vw,57px) 62px; }
  .hero h1 { font-size: clamp(2.85rem,5vw,4.6rem); }
  .hero h1 span { display: block; }
  .hero-description { margin-top: 18px; }
  .hero-media { aspect-ratio: auto; padding: 25px clamp(28px,5vw,77px) 68px 8px; }
  .hero-media figcaption { right: 19px; bottom: 55px; }
  .bee-decoration { top: 6%; right: -3%; width: clamp(100px,10.5vw,144px); }
  .filter-bar { grid-template-columns: 1.35fr repeat(4,minmax(0,1fr)) auto; margin: -40px 25px 0; padding: 12px; }
  .search-field, .filter-submit { grid-column: auto; }
  .filter-options { display: contents; }
  .filter-field { min-height: 58px; padding-inline: 9px; }
  .filter-field :is(select,input) { font-size: .82rem; }
  .filter-submit { padding-inline: 16px; }
  .stats { gap: 20px; margin-top: 23px; padding-top: 15px; }
  .stats > div + div { padding-left: 20px; }
  .stats strong { font-size: 1.35rem; }
  .stats span { font-size: .76rem; }
  .section { padding-block: 62px; }
  .listings-section { padding-top: 46px; }
  .listing-toolbar { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; }
  .listing-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .location-grid, .contact-panel { grid-template-columns: .85fr 1.15fr; align-items: center; }
  .location-grid { gap: 27px; }
  .steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .contact-panel { padding: 38px; }
  .footer-inner { padding-bottom: 19px; }
}
@media (min-width: 1120px) {
  #site-nav { gap: 8px; }
  .card-body { padding: 19px; }
  .card-actions .btn { font-size: .83rem; }
  .floating { right: 22px; bottom: 22px; }
}
@media (max-width: 350px) {
  .hero-content { padding-inline: 17px; }
  .hero-cta { gap: 6px 8px; }
  .hero-cta :is(.btn,.hero-link) { font-size: .74rem; }
  .hero-cta .btn { padding-inline: 9px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:hover { transform: perspective(900px) translateY(-7px) rotateX(var(--turn-x)) rotateY(var(--turn-y)); }
  .card:hover::after { opacity: 1; }
  .card:hover .gallery img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}