:root{
  color-scheme:light;
  --paper:#F7F5F0; --paper-deep:#EFEBE3; --felt:#E6DFD2;
  --scene-hero:#F4F0EA;          /* интро видеоны дэвсгэртэй таарсан */
  --scene-svc:#E7E2DB;           /* саарал дүрийн видеоны дэвсгэртэй таарсан */
  --ink:#2B2A28; --ink-soft:#6B6762; --line:#DED8CE;
  --stitch:#B9AE9C; --stitch-soft:rgba(185,174,156,.7);
  --green:#6FAF2A; --green-dark:#5C9222; --green-ring:rgba(111,175,42,.22);
  --wool-grey:#A6A09A; --wool-yellow:#C7B86B; --wool-blue:#7D99AE; --wool-clay:#C77A5C; --wool-rose:#D1A0A1;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Golos Text", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --pad-x:clamp(20px, 5vw, 72px);
  --hdr:64px;                    /* толгойн өндөр — JS жинхэнэ утгыг тавина */
  --ease:cubic-bezier(.22,.61,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  background:var(--paper) var(--grain);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-top:var(--hdr);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
img,video,canvas{max-width:100%; display:block}
a{color:inherit; -webkit-tap-highlight-color:transparent}
button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--green); outline-offset:3px; border-radius:6px}

.felt-dot{
  width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 55%), var(--dot, var(--wool-grey));
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.14);
}

/* ====================== ТОЛГОЙ ====================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) var(--pad-x) 12px;
  background:rgba(244,240,234,.97);
}
.topbar::after{content:""; position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 15px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-width:0}
.brand-mark{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--serif); font-size:22px; color:var(--green);
  background:var(--paper-deep); box-shadow:inset 0 0 0 1.5px var(--line);
  outline:1.5px dashed var(--stitch); outline-offset:-6px;
}
.brand-name{font-weight:600; letter-spacing:.12em; font-size:13px; display:block; line-height:1.2; white-space:nowrap}
.brand-sub{font-size:12px; color:var(--ink-soft)}
.nav{display:none; gap:clamp(16px,1.6vw,26px); font-size:15px; white-space:nowrap}
.nav a{text-decoration:none; padding:6px 0; background:linear-gradient(var(--green),var(--green)) left bottom/0 1.5px no-repeat; transition:background-size .25s ease}
.nav a:hover,.nav a:focus-visible,.nav a.active{background-size:100% 1.5px}
.nav a.active{color:var(--green-dark)}
@media (min-width:1180px){ .nav{display:flex} }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; font:inherit; font-weight:500; text-decoration:none; cursor:pointer;
  padding:12px 24px; border-radius:999px; border:0; touch-action:manipulation;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn::after{content:""; position:absolute; inset:4px; border-radius:inherit;
  border:1.5px dashed transparent; transition:border-color .2s ease; pointer-events:none}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--green-dark)}
.btn-primary:hover::after,.btn-primary:focus-visible::after{border-color:rgba(255,255,255,.65)}
.btn-quiet{background:var(--paper-deep); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-quiet:hover::after,.btn-quiet:focus-visible::after{border-color:var(--stitch)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:40px; padding:9px 18px; font-size:14px}
.btn-lg{min-height:54px; padding:15px 30px; font-size:17px}

/* =====================================================================
   1. ИНТРО ҮЗЭГДЭЛ — скроллоор видео гүйж, баруун талд мэдээлэл ээлжлэн гарна
   ===================================================================== */
.hero{position:relative; background:var(--scene-hero)}
.hero-pin{position:relative}
.hero-media{position:relative; width:100%; aspect-ratio:1.4/1; background:var(--scene-hero) center/cover no-repeat url("assets/hero.jpg"); background-position:0% 50%}
.hero-media canvas{position:absolute; inset:0; width:100%; height:100%}
.hero-copy{position:relative; padding:28px var(--pad-x) 48px; display:grid; gap:18px; max-width:40rem}
.hero-copy h1{font-family:var(--serif); font-weight:400; font-size:clamp(30px, 7.4vw, 44px); line-height:1.12; letter-spacing:-.015em; margin:0; text-wrap:balance}
.hero-copy .lead{margin:0; color:var(--ink-soft); font-size:clamp(16px, 4.2vw, 18px)}
.chip{display:inline-flex; align-items:center; gap:10px; justify-self:start; margin:0;
  padding:9px 16px 9px 12px; border-radius:999px; background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1.5px var(--line); font-weight:500; font-size:15px}
.chip .felt-dot{--dot:var(--green)}
.offer{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px}
.offer li{display:flex; align-items:center; gap:11px}
.offer li:nth-child(1){--dot:var(--wool-blue)}
.offer li:nth-child(2){--dot:var(--wool-rose)}
.offer li:nth-child(3){--dot:var(--wool-yellow)}
.offer li:nth-child(4){--dot:var(--wool-clay)}
.cue{display:none}
.thread{display:none}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}

/* скроллын явцыг харуулах оёдлын утас */
@media (prefers-reduced-motion:no-preference){
  .js .thread{display:block; position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:calc(8px + env(safe-area-inset-bottom,0px)); height:2px;
    background:repeating-linear-gradient(90deg, rgba(185,174,156,.45) 0 9px, transparent 9px 15px)}
  .js .thread span{display:block; height:100%; transform-origin:left center; transform:scaleX(0);
    background:repeating-linear-gradient(90deg, var(--green) 0 9px, transparent 9px 15px)}
}

/* --- JS ажиллаж, хөдөлгөөн зөвшөөрсөн үед: бэхлэгдсэн үзэгдэл --- */
@media (prefers-reduced-motion:no-preference){
  .js .hero{height:300vh; height:300svh; margin-top:calc(-1 * var(--hdr))}
  .js .hero-pin{position:-webkit-sticky; position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
    display:flex; flex-direction:column; padding-top:var(--hdr)}
  /* босоо дэлгэц: зураг дэлгэцийн 36%-аас хэтрэхгүй, үлдсэн нь мэдээлэлд */
  .js .hero-media{flex:0 0 auto; aspect-ratio:auto; height:min(calc(100vw / 1.4), 36vh); height:min(calc(100vw / 1.4), 36svh)}
  .js .hero-copy{flex:1 1 auto; align-content:start; padding-top:clamp(18px,3svh,28px); padding-bottom:16px; gap:clamp(10px,1.8svh,18px)}
  /* алхам бүр эхэндээ нуугдмал, JS тодруулна */
  .js [data-step]{opacity:0; transform:translate3d(0,24px,0); will-change:opacity,transform}
  .js .cue{display:flex; align-items:center; gap:10px; position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%); font-size:13px; color:var(--ink-soft); white-space:nowrap; pointer-events:none}
  .js .cue .felt-dot{--dot:var(--wool-clay); animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(6px)}}
}

/* --- Хэвтээ дэлгэц (компьютер, iPad хэвтээ, утас хэвтээ): видео бүтэн, текст баруун талд дээр нь --- */
@media (min-aspect-ratio:1/1) and (min-width:700px){
  .hero-media{aspect-ratio:auto; background-position:center}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:clamp(28px, 3.5vw, 60px)}
  .hero-copy .lead{font-size:clamp(15px, 1.35vw, 20px)}
  .offer{grid-template-columns:1fr 1fr; gap:10px 22px}
  .hero-cta{margin-top:8px}

  /* JS-гүй эсвэл хөдөлгөөнгүй үед: видеоны жинхэнэ харьцаагаар, текст доор */
  html:not(.js) .hero-media{aspect-ratio:2.36/1}
}
@media (min-aspect-ratio:1/1) and (min-width:700px) and (prefers-reduced-motion:no-preference){
  .js .hero{height:360vh; height:360svh}
  .js .hero-pin{display:block}
  /* видео бүтэн өргөнөөр, жинхэнэ харьцаагаараа, дэлгэцийн голд; дээд доод ирмэг нь дэвсгэрт уусна */
  .js .hero-media{position:absolute; left:0; right:0; top:calc(50% + var(--hdr) / 2); height:auto; aspect-ratio:2.36/1;
    transform:translate3d(0,-50%,0);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%)}
  .js .hero-copy{position:absolute; right:4.5vw; top:calc(50% + var(--hdr) / 2); width:36vw; max-width:600px;
    transform:translateY(-46%); padding:0; align-content:center}
}
/* намхан босоо утас: жагсаалтыг хоёр багана болгож шахна */
@media (max-aspect-ratio:1/1) and (max-height:780px){
  .js .hero-media{height:min(calc(100vw / 1.4), 33vh); height:min(calc(100vw / 1.4), 33svh)}
  .hero-cta .btn{min-height:42px; padding:10px 18px; font-size:14.5px}
  .hero-copy h1{font-size:clamp(26px, 7vw, 34px)}
  .hero-copy .lead{font-size:15px; line-height:1.5}
  .offer{grid-template-columns:1fr 1fr; gap:7px 14px; font-size:13.5px}
  .chip{font-size:14px; padding:7px 14px 7px 10px}
}
/* маш намхан (iPhone SE): жагсаалтыг нууна — доор үйлчилгээний хэсэгт бүрэн бий */
@media (max-aspect-ratio:1/1) and (max-height:620px){
  .js .hero .offer{display:none}
  .hero-copy h1{font-size:25px}
  .hero-copy .lead{font-size:14.5px}
}

/* хэвтээ утас — өндөр бага: зөвхөн гол мэдээлэл */
@media (min-aspect-ratio:1/1) and (min-width:700px) and (max-height:560px){
  .hero-copy h1{font-size:clamp(20px, 3vw, 30px)}
  .hero-copy .lead{font-size:13.5px; line-height:1.45}
  .js .hero-copy{gap:10px}
  .offer, .js .cue{display:none}
  .hero-cta .btn{min-height:40px; padding:9px 18px; font-size:14px}
}
/* намхан компьютерийн дэлгэц (жишээ нь Windows 150% томруулалт) */
@media (min-aspect-ratio:1/1) and (min-width:700px) and (min-height:561px) and (max-height:700px){
  .hero-copy h1{font-size:clamp(28px, 3vw, 44px)}
  .hero-copy .lead{font-size:16px}
  .js .hero-copy{gap:12px}
}
@media (min-aspect-ratio:1/1) and (min-width:700px) and (prefers-reduced-motion:reduce){
  .hero-media{aspect-ratio:2.36/1}
  .hero-copy{padding:40px var(--pad-x) 64px; max-width:52rem}
}

/* =====================================================================
   3. ҮЙЛЧИЛГЭЭНИЙ ҮЗЭГДЭЛ — саарал дүрийн видео бүтэн, баруун талд мэдээлэл
   ===================================================================== */
.svc-scene{position:relative; z-index:2; background:var(--scene-svc) var(--grain); overflow:hidden}
.svc-media{position:relative; z-index:1; width:100%; aspect-ratio:1.15/1; overflow:hidden; background:var(--scene-svc)}
.svc-media video{width:100%; height:100%; object-fit:cover; object-position:16% 50%}
.svc-copy{position:relative; z-index:2; padding:32px var(--pad-x) clamp(56px,8vw,96px)}
.svc-copy h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,6vw,52px); line-height:1.1; margin:0 0 12px; letter-spacing:-.01em}
.svc-copy .section-lead{margin:0 0 24px; color:var(--ink-soft); max-width:36rem}
.svc-items{list-style:none; margin:0 0 28px; padding:0; display:grid}
.svc-items li{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:14px 0;
  border-top:1.5px dashed var(--stitch-soft)}
.svc-items li:last-child{border-bottom:1.5px dashed var(--stitch-soft)}
.svc-items .felt-dot{width:15px; height:15px; margin-top:5px; grid-row:span 2}
.svc-items strong{font-weight:600}
.svc-items span.d{color:var(--ink-soft); font-size:14.5px; line-height:1.5}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fact{padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1.5px rgba(222,216,206,.9)}
.fact b{display:block; font-family:var(--serif); font-weight:500; font-size:19px; line-height:1.2}
.fact span{font-size:13.5px; color:var(--ink-soft)}

@media (min-aspect-ratio:1/1) and (min-width:700px){
  .svc-scene{display:grid}
  .svc-media,.svc-copy{grid-area:1/1}
  .svc-scene{min-height:calc(100vh - var(--hdr)); min-height:calc(100svh - var(--hdr))}
  .svc-media{aspect-ratio:auto; align-self:center; height:min(56.25vw, calc(100vh - var(--hdr))); height:min(56.25vw, calc(100svh - var(--hdr)));
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-composite:intersect}
  .svc-media video{object-fit:contain; object-position:12% 50%}
  .svc-copy{justify-self:end; align-self:center; width:min(46vw, 640px); margin-right:4.5vw; padding:56px 0}
  .svc-copy h2{font-size:clamp(30px,3.6vw,56px)}
  .svc-items{grid-template-columns:1fr 1fr; column-gap:28px}
  .svc-items li:nth-last-child(2){border-bottom:1.5px dashed var(--stitch-soft)}
  .facts{grid-template-columns:repeat(4,1fr)}
}
@media (min-aspect-ratio:1/1) and (min-width:700px) and (max-width:1180px){
  .svc-items{grid-template-columns:1fr}
  .svc-items li:nth-last-child(2){border-bottom:0}
  .svc-items span.d{display:none}
  .svc-items li{padding:10px 0}
  .facts{grid-template-columns:1fr 1fr}
  .svc-copy{width:min(48vw, 560px)}
}

/* зөөлөн гарц — дэлгэцэнд орох үед */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translate3d(0,22px,0); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 90ms)}
  .js .reveal.in{opacity:1; transform:none}
}

/* =====================================================================
   ХУУДАСНЫ ХЭСГҮҮД
   ===================================================================== */
.wrap{max-width:1360px; margin:0 auto}
.band{position:relative; z-index:2; padding:clamp(64px,9vw,120px) var(--pad-x); background:var(--paper) var(--grain)}
.band-felt{background:var(--felt) var(--grain)}
/* хэсэг бүрийн оройд оёдлын шугам */
.band::before{content:""; position:absolute; top:0; left:var(--pad-x); right:var(--pad-x); height:2px;
  background:repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 15px)}
.band h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,46px); line-height:1.15; margin:0 0 14px; letter-spacing:-.01em}
.band h3{font-size:18px; font-weight:600; margin:0 0 6px; line-height:1.35}
.section-lead{color:var(--ink-soft); max-width:40rem; margin:0 0 clamp(32px,5vw,52px); font-size:17px}

/* ---------- мобайл цэс ---------- */
.mnav{position:relative}
.mnav summary{list-style:none; cursor:pointer; width:44px; height:44px; border-radius:50%;
  display:grid; place-content:center; gap:5px; background:var(--paper-deep); box-shadow:inset 0 0 0 1.5px var(--line)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px}
.mnav-panel{position:absolute; right:0; top:54px; width:min(280px, 86vw); padding:12px;
  display:grid; gap:2px; background:var(--paper); border-radius:20px;
  box-shadow:0 20px 50px -18px rgba(50,40,25,.4), inset 0 0 0 1.5px var(--line)}
.mnav-panel a:not(.btn){padding:11px 14px; border-radius:12px; text-decoration:none}
.mnav-panel a:not(.btn):hover{background:var(--paper-deep)}
.mnav-panel .btn{margin-top:8px}
.topbar-cta{display:none}
@media (min-width:480px){ .topbar-cta{display:inline-flex} }
@media (min-width:1180px){ .mnav{display:none} }

/* ---------- үйлчилгээ ---------- */
.svc-list{list-style:none; margin:0; padding:0; display:grid; gap:0 clamp(32px,5vw,72px)}
.svc{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px 0;
  border-top:1.5px dashed var(--stitch-soft)}
.svc .felt-dot{width:18px; height:18px; margin-top:3px}
.svc p{margin:0; color:var(--ink-soft)}
@media (min-width:760px){ .svc-list{grid-template-columns:1fr 1fr} }

/* ---------- явц: дараалал тул дугаартай ---------- */
.steps{list-style:none; counter-reset:s; margin:clamp(28px,4vw,44px) 0 0; padding:0;
  display:grid; gap:28px}
.steps li{counter-increment:s; position:relative; padding-top:62px}
.steps li::before{content:counter(s); position:absolute; top:0; left:0; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:21px;
  background:var(--felt); outline:1.5px dashed var(--stitch); outline-offset:-6px}
.steps p{margin:0; color:var(--ink-soft)}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(4,1fr)}
  /* алхмуудыг холбосон утас */
  .steps li:not(:last-child)::after{content:""; position:absolute; top:22px; left:58px; right:-16px; height:2px;
    background:repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 15px)}
}

/* ---------- үнэ ---------- */
.price-scroll{overflow-x:auto; border-radius:22px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line)}
.prices{width:100%; border-collapse:collapse; min-width:520px; font-size:16px}
.prices th,.prices td{padding:18px 24px; text-align:left}
.prices thead th{font-size:13px; font-weight:600; color:var(--ink-soft); border-bottom:1.5px dashed var(--stitch)}
.prices tbody th{font-weight:500}
.prices tbody tr+tr th,.prices tbody tr+tr td{border-top:1px solid var(--line)}
.prices td:last-child{font-weight:600; white-space:nowrap}
.prices td.soft{font-weight:500; color:var(--ink-soft)}
.prices-org td{font-weight:600; white-space:nowrap}
.org-price{margin-top:clamp(36px,5vw,56px)}
.org-price h3{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2vw,26px); margin:0 0 10px}
.org-price .note{margin-top:18px}
@media (max-width:640px){
  .price-scroll{overflow:visible}
  .prices{min-width:0; font-size:15.5px}
  .prices thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .prices tbody{display:block}
  .prices tbody tr{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 16px; padding:16px 18px}
  .prices tbody tr+tr{border-top:1px solid var(--line)}
  .prices tbody tr+tr th,.prices tbody tr+tr td{border-top:0}
  .prices tbody th{grid-column:1 / -1; padding:0; font-weight:600; line-height:1.4}
  .prices tbody td{padding:0}
  .prices tbody td:first-of-type{color:var(--ink-soft); font-weight:400}
  .prices tbody td:last-child{text-align:right}
  .prices-org tbody tr{grid-template-columns:1fr 1fr}
  .prices-org tbody td:first-of-type{color:var(--ink); font-weight:600; text-align:left}
  .prices-org tbody td:last-child{text-align:left}
  .prices-org td::before{content:attr(data-label); display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft)}
}

/* ---------- захиалга ---------- */
.booking{display:grid; gap:clamp(28px,5vw,64px)}
.note{color:var(--ink-soft); font-size:15px; margin:0 0 10px; padding-left:16px; border-left:2px dashed var(--stitch)}
.form{display:grid; gap:18px; padding:clamp(22px,3vw,36px); border-radius:28px; background:var(--paper-deep);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.field{display:grid; gap:7px; min-width:0; margin:0; padding:0; border:0}
.field label,.field legend{font-size:14px; font-weight:500; padding:0}
.field-row{display:grid; gap:18px}
@media (min-width:560px){ .field-row{grid-template-columns:1fr 1fr} }
input[type=text],input[type=tel],input[type=email],input[type=date],select{
  font:inherit; width:100%; padding:12px 14px; border-radius:14px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); appearance:none; -webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
input[type=date]{display:block; min-width:0; max-width:100%; min-height:50px; text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
input:focus,select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-ring)}
.field.invalid input,.field.invalid select{border-color:#C0563B}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:16px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line)}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0}
.seg span{display:block; text-align:center; padding:10px; border-radius:11px; font-weight:500}
.seg input:checked+span{background:var(--green); color:#fff}
.seg input:focus-visible+span{outline:2.5px solid var(--green); outline-offset:2px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink-soft); cursor:pointer}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--green); flex:0 0 auto}
.btn-wide{width:100%; padding:15px}
.form-msg{margin:0; font-size:15px}
.form-msg:empty{display:none}
.svc-hint{margin:2px 0 0; font-size:14px; color:var(--ink-soft); padding:10px 14px; border-radius:12px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line)}
.svc-hint[hidden]{display:none}
.age{font-weight:400; color:var(--green-dark); font-size:13px}
.form-msg.err{color:#B04A30}
.form-msg.ok{padding:16px 18px; border-radius:16px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--green)}
@media (min-width:900px){ .booking{grid-template-columns:1fr 1.25fr; align-items:start} }

/* ---------- асуулт ---------- */
.faq{display:grid; gap:24px}
.faq-list{display:grid}
.faq details{border-top:1.5px dashed var(--stitch-soft)}
.faq details:last-child{border-bottom:1.5px dashed var(--stitch-soft)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px;
  padding:22px 0; font-weight:500; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:-1px;
  background:var(--paper) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%236B6762' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1.5px var(--line); transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px; color:var(--ink-soft); max-width:46rem}
@media (min-width:900px){ .faq{grid-template-columns:1fr 2fr; gap:clamp(40px,6vw,96px)} }

/* ---------- нийтлэл ---------- */
.posts{display:grid; gap:20px; margin-top:clamp(28px,4vw,44px)}
.post{display:grid; gap:10px; align-content:start; padding:26px; border-radius:24px; text-decoration:none;
  background:var(--paper-deep); box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .2s ease}
.post:hover,.post:focus-visible{box-shadow:inset 0 0 0 1.5px var(--stitch)}
.post h3{margin:6px 0 0; font-family:var(--serif); font-weight:500; font-size:21px}
.post p{margin:0; color:var(--ink-soft); font-size:15px}
@media (min-width:760px){ .posts{grid-template-columns:repeat(3,1fr)} }

/* ---------- холбоо ---------- */
.contact{display:grid; gap:clamp(28px,4vw,48px)}
.contact-list{display:grid; grid-template-columns:auto 1fr; gap:12px 28px; margin:24px 0 28px}
.contact-list dt{color:var(--ink-soft); font-size:14px; padding-top:2px}
.contact-list dd{margin:0; min-width:0; overflow-wrap:anywhere}
@media (max-width:480px){ .contact-list{grid-template-columns:1fr; gap:2px} .contact-list dd{margin-bottom:14px} }
.foot-contact{overflow-wrap:anywhere}
.socials{display:flex; gap:10px; flex-wrap:wrap}
.map{min-height:300px; border-radius:28px; background:var(--paper); display:grid; place-items:center;
  color:var(--ink-soft); font-size:14px; outline:1.5px dashed var(--stitch); outline-offset:-12px}
.map iframe{width:100%; height:100%; min-height:300px; border:0; border-radius:28px}
@media (min-width:900px){ .contact{grid-template-columns:1fr 1.2fr; align-items:stretch} }

/* ---------- яаралтай тусламж ---------- */
.cta-band{position:relative; z-index:2; padding:clamp(44px,6vw,72px) var(--pad-x); background:var(--ink); color:var(--paper)}
.cta-inner{display:grid; gap:26px; align-items:center}
.cta-k{display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:13px; letter-spacing:.06em; color:rgba(247,245,240,.7)}
.cta-k .felt-dot{--dot:var(--green)}
.cta-t{margin:0; font-family:var(--serif); font-size:clamp(24px,3vw,36px); line-height:1.25; max-width:30ch}
.cta-s{margin:12px 0 0; color:rgba(247,245,240,.72); font-size:15px}
.cta-btns{display:flex; flex-wrap:wrap; gap:12px}
.btn-line{background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(247,245,240,.55)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--paper)}
@media (min-width:860px){ .cta-inner{grid-template-columns:1fr auto} .cta-btns{justify-content:flex-end} }

/* ---------- хөл ---------- */
.footer{position:relative; z-index:2; padding:44px var(--pad-x) 52px; background:var(--paper) var(--grain)}
.footer-inner{display:grid; gap:24px}
.footer-nav{display:flex; flex-wrap:wrap; gap:10px 24px; font-size:15px}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.copy-note{margin:0; font-size:13px; color:var(--ink-soft)}
@media (min-width:900px){ .footer-inner{grid-template-columns:auto 1fr auto; align-items:center} .footer-nav{justify-content:center} }




/* =====================================================================
   ОРОН ЗАЙ — бүх сайтад илүү амьсгалтай
   ===================================================================== */
:root{ --pad-x:clamp(22px, 6.5vw, 112px); --gap-xl:clamp(48px, 8vw, 128px) }
.wrap{max-width:1200px}
.band{padding:clamp(96px, 13vw, 200px) var(--pad-x)}
.band h2{font-size:clamp(32px, 4.4vw, 54px); margin-bottom:18px}
.section-lead{font-size:clamp(16.5px, 1.5vw, 19px); line-height:1.7; margin-bottom:clamp(36px, 5vw, 64px)}
body{line-height:1.7}

/* =====================================================================
   ХОЁР БАГАНА: том дүр + текст (.flip = дүр баруун талд)
   ===================================================================== */
.duo{display:grid; gap:clamp(28px, 6vw, 96px); align-items:center}
.duo > *,.booking > *,.faq > *,.field > *,.field-row > *{min-width:0}
.duo-art{display:grid; place-items:center}
.duo-text .section-lead:last-child{margin-bottom:0}
.duo-head{margin-bottom:clamp(48px, 7vw, 96px)}
.center-head{text-align:center; max-width:40rem; margin:0 auto}
.center-head .section-lead{margin-inline:auto; margin-bottom:clamp(12px,2vw,24px)}
@media (min-width:860px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo.flip .duo-art{order:2}
  .duo-price{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}
}
.about-big{font-size:clamp(22px, 2.4vw, 30px); line-height:1.45; margin:0 0 24px}
.about-body p:last-child{color:var(--ink-soft); margin:0; font-size:17px}

/* =====================================================================
   ДҮРҮҮД — том, хуудастай уусна
   multiply холилт ба маскыг ХҮРЭЭН дээр (видеон дээр биш)
   ===================================================================== */
.actor{
  margin:0; position:relative; width:min(100%, 500px); aspect-ratio:1/1;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-composite:intersect;
}
.actor video{display:block; width:100%; height:100%; object-fit:cover}
.actor-wide{aspect-ratio:4/3; width:min(100%, 620px)}
@media (max-width:859px){
  .duo-art .actor{width:min(82vw, 400px)}
  .duo-art .actor-wide{width:min(92vw, 480px)}
}

/* --- захиалга --- */
.booking{gap:clamp(40px, 6vw, 96px)}
.actor-booking{width:min(100%, 380px); margin:clamp(12px,3vw,32px) auto 0}
.actor-booking.cheer{animation:cheer 1s cubic-bezier(.34,1.56,.64,1)}
@keyframes cheer{0%{transform:none} 25%{transform:translateY(-16px) scale(1.04)} 50%{transform:none} 70%{transform:translateY(-6px)} 100%{transform:none}}

/* --- асуулт --- */
.faq{gap:clamp(40px, 6vw, 96px)}
.faq-side{display:grid; align-content:start}
.faq-side .section-lead{margin-bottom:0}
.faq-side .actor{width:min(100%, 380px); margin-top:clamp(8px,2vw,24px)}
@media (max-width:899px){ .faq-side .actor{margin-inline:auto; width:min(76vw, 340px)} }

/* --- холбоо --- */
#holboo .map{margin-top:clamp(40px, 6vw, 80px)}
.contact-list{margin:28px 0 32px}

/* =====================================================================
   МЭРГЭЖИЛТНҮҮД — нүүрэнд төвлөрсөн дугуй хөрөг, цэгцтэй карт
   ===================================================================== */
.people{display:grid; gap:clamp(24px, 3vw, 36px)}
@media (min-width:900px){ .people{grid-template-columns:1fr 1fr} }
.person{position:relative; display:flex; flex-direction:column; gap:22px;
  padding:clamp(28px, 3.4vw, 44px); border-radius:32px; background:var(--paper);
  box-shadow:0 24px 48px -36px rgba(60,48,30,.45)}
.person::before{content:""; position:absolute; inset:12px; border-radius:22px;
  border:1.5px dashed var(--stitch-soft); pointer-events:none}
.person-top{display:flex; align-items:center; gap:clamp(16px, 2.4vw, 26px)}
.avatar{width:clamp(96px, 11vw, 132px); height:auto; aspect-ratio:1/1; flex:0 0 auto; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 5px var(--paper), 0 0 0 6.5px var(--stitch-soft)}
.person h3{font-family:var(--serif); font-weight:500; font-size:clamp(24px, 2.4vw, 30px); margin:0; line-height:1.2}
.role{color:var(--green-dark); font-weight:500; margin:4px 0 0; font-size:15px}
.person dl{margin:0; font-size:15px; line-height:1.6; flex:1}
.person dt{font-weight:600; margin-top:16px; font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft)}
.person dt:first-child{margin-top:0}
.person dd{margin:3px 0 0}
.person .btn{align-self:flex-start}

/* =====================================================================
   АЛХАЛТ — өөрөө алхана, алхмууд дүрийн явцаар тодорно
   ===================================================================== */
.walk{position:relative; width:100%; aspect-ratio:2.77/1; margin:clamp(8px,2vw,24px) 0 clamp(8px,1.5vw,16px);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite:intersect}
.walk video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s ease}
.walk video.fade{opacity:0}
@media (max-width:700px){ .walk{aspect-ratio:1.3/1; width:min(100%, 460px); margin-inline:auto} }
.steps li{transition:opacity .6s var(--ease)}
.steps li::before{transition:background-color .5s ease, color .5s ease}
.walk-on .steps li{opacity:.38}
.walk-on .steps li.on{opacity:1}
.walk-on .steps li.on::before{background:var(--wool-clay); color:#fff; outline-color:rgba(255,255,255,.7)}

/* --- баяртай --- */
.farewell{position:relative; z-index:2; display:flex; justify-content:center;
  padding:clamp(48px,7vw,96px) 0 0; background:var(--paper) var(--grain)}
.actor-footer{width:min(100%, 1040px); aspect-ratio:1280/542}

/* =====================================================================
   ТЕКСТИЙН ЗӨӨЛӨН ХӨДӨЛГӨӨН
   Гарчгийн үгс нэг нэгээрээ доороос гарч, доор нь оёдол зурагдана.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em}
  .js .split .w > span{display:inline-block; transform:translate3d(0,108%,0);
    transition:transform 1s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--wi) * 70ms)}
  .js .split.in .w > span{transform:none}
  .js .split::after{content:""; display:block; height:2px; width:64px; margin-top:16px; border-radius:2px;
    background:repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 15px);
    transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .35s}
  .js .center-head .split::after{margin-inline:auto; transform-origin:center}
  .js .split.in::after{transform:scaleX(1)}
  /* тайлбар текст: компьютер дээр бага зэрэг бүдгээс тодорно */
  @media (hover:hover) and (min-width:900px){
    .js .section-lead.reveal,.js .about-body.reveal{filter:blur(6px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease)}
    .js .section-lead.reveal.in,.js .about-body.reveal.in{filter:none}
  }
  /* дүрүүд: доороос зөөлөн өргөгдөнө */
  .js .duo-art .actor, .js .faq-side .actor, .js .actor-booking, .js .actor-footer{opacity:0; transform:translate3d(0,40px,0) scale(.97);
    transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}
  .js .actor.in{opacity:1; transform:none}
}


/* =====================================================================
   ЛОГО
   ===================================================================== */
.brand-logo{height:clamp(40px, 4.4vw, 52px); width:auto; display:block}
.brand-foot img{width:clamp(180px, 18vw, 240px); height:auto; display:block}

/* =====================================================================
   ДҮРҮҮД — 2 дахин том. Кадрын хоосон зах нь хуудастай уусдаг тул
   багананаасаа халин томорч, дүр өөрөө том харагдана.
   ===================================================================== */
.band,.farewell{overflow:hidden}
@supports (overflow:clip){ .band,.farewell{overflow:clip} }
/* АНХААР: дүрийн эцэг элементүүдэд z-index бүү өг — тусгаарлагдсан давхарга үүсгэж multiply-г эвддэг */
.duo-art .actor{--aw:min(190%, 980px); width:var(--aw); max-width:none;
  margin:calc(var(--aw) * -.12) calc((100% - var(--aw)) / 2)}
.duo-art .actor-wide{--aw:min(175%, 1120px); margin:calc(var(--aw) * -.09) calc((100% - var(--aw)) / 2)}
.faq-side .actor{--aw:min(205%, 760px); width:var(--aw); max-width:none; margin:calc(var(--aw) * -.06) 0 calc(var(--aw) * -.12) calc(var(--aw) * -.18)}
.actor-booking{--aw:min(185%, 760px); width:var(--aw); max-width:none; margin:calc(var(--aw) * -.04) 0 calc(var(--aw) * -.12) calc(var(--aw) * -.2)}
.actor-footer{width:min(100%, 1500px); max-width:none; margin:0 auto; flex:0 0 auto}
@media (max-width:700px){ .actor-footer{width:106%; margin:0 -3%} }
@media (max-width:859px){
  .duo-art .actor{--aw:min(150vw, 720px)}
  .duo-art .actor-wide{--aw:min(150vw, 780px)}
  .faq-side .actor,.actor-booking{--aw:min(150vw, 680px);
    margin:calc(var(--aw) * -.06) calc((100% - var(--aw)) / 2) calc(var(--aw) * -.12)}
}
/* алхалт: бүтэн өргөнөөр */
.walk{width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
@media (max-width:700px){ .walk{aspect-ratio:1.1/1; width:100vw; margin-left:calc(50% - 50vw)} }

/* =====================================================================
   ЧИМЭГЛЭЛ — эсгий бөмбөлөг, навч, цэцэг, зүрх, үүл, хайрга, ноосны бөмбөг
   ===================================================================== */
.decos{position:absolute; inset:0; z-index:-1; pointer-events:none}
.deco{position:absolute; width:var(--s, 80px); height:auto; transform:rotate(var(--r, 0deg)); user-select:none; -webkit-user-drag:none}
@media (prefers-reduced-motion:no-preference){
  .deco.float{animation:float 8s ease-in-out infinite; animation-delay:var(--d, 0s); will-change:transform}
  @keyframes float{
    0%,100%{transform:translate3d(0,0,0) rotate(var(--r, 0deg))}
    50%{transform:translate3d(0,-10px,0) rotate(calc(var(--r, 0deg) + 4deg))}
  }
}
@media (max-width:859px){
  .deco{width:calc(var(--s, 80px) * .62)}
  .deco.m-hide{display:none}
}


/* =====================================================================
   ЗАХИАЛГА: үнэ, сул цаг, QPay цонх
   ===================================================================== */
.price-line{margin:4px 0 0; font-size:14px; color:var(--ink-soft); min-height:1px}
.price-line b{color:var(--ink)}
.opt{font-weight:400; color:var(--ink-soft); font-size:13px}
select:disabled{opacity:.6; cursor:not-allowed}
input[type=email]{font:inherit; width:100%; padding:12px 14px; border-radius:14px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); appearance:none; -webkit-appearance:none}
input[type=email]:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-ring)}
.field.invalid input[type=email]{border-color:#C0563B}
.btn[disabled]{opacity:.7; cursor:progress}

.pay{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(43,42,40,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.pay[hidden]{display:none}
html.pay-open{overflow:hidden}
.pay-card{position:relative; width:min(100%, 420px); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto;
  padding:30px 26px 26px; border-radius:28px; background:var(--paper) var(--grain); text-align:center;
  box-shadow:0 30px 70px -30px rgba(40,30,15,.6)}
.pay-card::before{content:""; position:absolute; inset:10px; border-radius:20px; border:1.5px dashed var(--stitch-soft); pointer-events:none}
.pay-card h3{font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 6px}
.pay-sum{margin:0 0 18px}
.pay-sum span{display:block; font-family:var(--serif); font-size:34px; line-height:1.2}
.pay-sum small{display:block; color:var(--ink-soft); font-size:13.5px; margin-top:4px}
.pay-qr{display:grid; place-items:center; margin:0 auto 16px; width:236px; height:236px; padding:8px; border-radius:18px; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line)}
.pay-qr img{width:220px; height:220px; image-rendering:pixelated}
.qr-mock{font-size:15px; color:var(--ink-soft)}
.pay-banks-t{margin:4px 0 10px; font-size:13.5px; color:var(--ink-soft)}
.bank-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:8px; margin-bottom:14px}
.bank{display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; border-radius:14px; text-decoration:none;
  background:var(--paper-deep); font-size:11.5px; line-height:1.25; box-shadow:inset 0 0 0 1.5px var(--line)}
.bank img{border-radius:8px}
.bank:hover,.bank:focus-visible{box-shadow:inset 0 0 0 1.5px var(--green)}
@media (hover:hover) and (min-width:700px){ .pay-banks{display:none} }   /* компьютер дээр QR-ээр уншуулна */
.pay-wait{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 4px; font-size:14.5px}
.pay-note{margin:0 0 16px; font-size:13px; color:var(--ink-soft)}
.spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--green); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation:none} }
.pay-step[data-view="done"] p,.pay-step[data-view="expired"] p{margin:10px 0 22px; color:var(--ink-soft)}


/* ====================== МАНАЙ ТӨВ ======================
   --p (0→1): зургийн нээгдэлт. 0 = зургаан өнцөгт, 1 = бүтэн зураг + оёдол дууссан.
   Компьютер дээр JS скроллоор, утсан дээр дэлгэцэнд орох үед CSS transition-оор өөрчлөгдөнө. */
@property --p{syntax:'<number>'; inherits:true; initial-value:0}
.space{position:relative; z-index:2; background:#ECE9E4 var(--grain); padding:clamp(80px,11vw,150px) 0 clamp(56px,8vw,110px); overflow:clip}
.space::before{content:""; position:absolute; left:var(--pad-x); right:var(--pad-x); top:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 15px); opacity:.7}
.space-stick{display:flex; flex-direction:column; gap:clamp(26px,4vw,48px)}
.space-head{display:grid; gap:28px; align-items:end; width:100%; max-width:1360px; margin:0 auto; padding:0 var(--pad-x); box-sizing:border-box}
.space-eyebrow{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:13px; letter-spacing:.06em; color:var(--ink-soft)}
.space-eyebrow .felt-dot{--dot:var(--wool-blue)}
.space h2{font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,54px); line-height:1.15; margin:0 0 14px; letter-spacing:-.01em}
.space-lead{color:var(--ink-soft); max-width:32rem; margin:0; font-size:clamp(16.5px,1.5vw,19px); line-height:1.7}
.space-count{display:flex; align-items:center; gap:10px; margin-top:24px; white-space:nowrap; font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.space-count b{font-family:var(--serif); font-weight:500; font-size:24px; color:var(--ink); min-width:1.6em}
.space-bar{position:relative; width:clamp(90px,10vw,150px); height:2px; margin-left:8px;
  background:repeating-linear-gradient(90deg, var(--stitch) 0 6px, transparent 6px 10px)}
.space-bar i{position:absolute; left:0; top:-.5px; height:3px; width:var(--bar,0%); background:var(--green); border-radius:3px; transition:width .25s linear}
.space-hint{margin-left:10px; font-size:13px}

/* эсгий зургаан өнцөгт хавтангууд — дэлгэцэнд ороход хэсэг хэсгээрээ нийлнэ */
.hexwall{--S:clamp(46px, 5.6vw, 84px); position:relative; width:calc(var(--S) * 3.8); height:calc(var(--S) * 2.42); justify-self:end}
.hexwall img{position:absolute; width:var(--S); height:auto; left:calc(var(--c) * var(--S) * .56); top:calc(var(--r) * var(--S) * .67 - var(--S) * .2);
  filter:drop-shadow(0 6px 8px rgba(43,42,40,.12)); user-select:none; -webkit-user-drag:none}
@media (prefers-reduced-motion:no-preference){
  .js .hexwall img{opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5);
    transition:transform 1.3s var(--ease), opacity .7s ease; transition-delay:calc(var(--k) * 75ms)}
  .js .hexwall.in img{opacity:1; transform:none}
  .hexwall.in img:hover{transform:translateY(-4px) rotate(4deg); transition-delay:0s; transition-duration:.4s}
}

.space-track{list-style:none; margin:0; padding:10px var(--pad-x) 30px max(var(--pad-x), calc((100% - 1360px) / 2 + var(--pad-x))); display:flex; align-items:flex-start; gap:clamp(18px,3vw,44px);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad-x);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.space-track::-webkit-scrollbar{display:none}
.shot{--h:calc(1 - min(1, var(--p) / .55));
  --sw:clamp(0, calc((var(--p) - .4) / .6), 1);
  --o:clamp(0, calc((var(--p) - .62) / .38), 1);
  flex:0 0 auto; width:min(84vw, 560px); scroll-snap-align:start; position:relative;
  transform:rotate(calc(var(--tilt, 0deg) * var(--h)))}
.shot-btn{display:block; width:100%; padding:10px 10px 0; border:0; border-radius:26px; cursor:zoom-in; font:inherit; color:inherit; text-align:left;
  background:var(--felt); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 22px 44px -26px rgba(43,42,40,.45);
  -webkit-tap-highlight-color:transparent}
.shot-btn:focus-visible{outline:3px solid var(--green); outline-offset:4px}
.shot-frame{position:relative; display:block; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:#D9D4CC;
  clip-path:polygon(calc(25% * var(--h)) 0, calc(100% - 25% * var(--h)) 0, 100% 50%, calc(100% - 25% * var(--h)) 100%, calc(25% * var(--h)) 100%, 0 50%)}
.shot-frame img{display:block; width:100%; height:100%; object-fit:cover;
  transform:translate3d(var(--px, 0px), 0, 0) scale(calc(1.2 - .14 * var(--p) + var(--hz, 0)));
  transition:transform .5s var(--ease)}
.shot-btn:hover{--hz:.035}
/* оёдол: дөрвөн тал ээлжлэн "оёгдоно" */
.seam{position:absolute; inset:12px; pointer-events:none; --t:rgba(255,253,247,.95);
  --a1:clamp(0, calc(var(--sw) * 4), 1); --a2:clamp(0, calc(var(--sw) * 4 - 1), 1);
  --a3:clamp(0, calc(var(--sw) * 4 - 2), 1); --a4:clamp(0, calc(var(--sw) * 4 - 3), 1);
  background:
    repeating-linear-gradient(90deg,  var(--t) 0 9px, transparent 9px 15px) left top     / calc(var(--a1) * 100%) 2px no-repeat,
    repeating-linear-gradient(180deg, var(--t) 0 9px, transparent 9px 15px) right top    / 2px calc(var(--a2) * 100%) no-repeat,
    repeating-linear-gradient(270deg, var(--t) 0 9px, transparent 9px 15px) right bottom / calc(var(--a3) * 100%) 2px no-repeat,
    repeating-linear-gradient(0deg,   var(--t) 0 9px, transparent 9px 15px) left bottom  / 2px calc(var(--a4) * 100%) no-repeat;
}
/* эсгий шошго */
.shot-tag{position:relative; z-index:1; display:flex; gap:12px; align-items:baseline;
  width:fit-content; max-width:calc(100% - 28px); margin:-30px 0 0 18px; padding:13px 18px 14px; border-radius:16px;
  background:var(--paper); box-shadow:0 10px 24px -14px rgba(43,42,40,.45);
  outline:1.5px dashed var(--stitch); outline-offset:-6px;
  opacity:var(--o); transform:translateY(calc((1 - var(--o)) * 18px)) rotate(-1.2deg)}
.shot-tag .no{font-family:var(--serif); font-size:15px; color:var(--green-dark)}
.shot-tag b{font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.6vw,22px); line-height:1.25; letter-spacing:.01em}
.shot-btn::after{content:""; display:block; height:18px}

/* төгсгөлийн карт */
.shot-end{flex:0 0 auto; width:min(84vw, 420px); scroll-snap-align:start; align-self:stretch; display:flex}
.visit{display:flex; flex-direction:column; justify-content:center; gap:4px; width:100%; padding:clamp(26px,3vw,40px); border-radius:26px;
  background:var(--paper); outline:1.5px dashed var(--stitch); outline-offset:-10px; box-shadow:0 22px 44px -28px rgba(43,42,40,.4)}
.visit-k{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:14px; color:var(--ink-soft)}
.visit-k .felt-dot{--dot:var(--green)}
.visit h3{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.3vw,30px); line-height:1.2; margin:0 0 14px}
.visit-addr{margin:0; font-size:16px}
.visit-hours{margin:6px 0 22px; color:var(--ink-soft); font-size:15px}
.visit-cta{display:flex; flex-wrap:wrap; gap:10px}

/* утсан дээр: дэлгэцэнд орохоор нээгдэнэ */
@media (prefers-reduced-motion:no-preference){
  .js .space:not(.pinned) .shot{transition:--p 1.5s var(--ease)}
  .js .space:not(.pinned) .shot.in{--p:1}
}
@media (prefers-reduced-motion:reduce){ .shot{--p:1} }
.no-js .shot,html:not(.js) .shot{--p:1}
@media (max-width:899px){
  .space-head{grid-template-columns:1fr; position:relative}
  .hexwall{--S:clamp(32px, 9vw, 52px); position:absolute; right:var(--pad-x); top:34px}
  .space-bar{width:clamp(60px, 18vw, 120px)}
}
@media (min-width:900px){ .space-head{grid-template-columns:1fr auto} .space-hint{display:none} }

/* компьютер дээр: sticky + хэвтээ гүйлт (JS .pinned нэмнэ) */
.space.pinned{padding:0}
.space.pinned .space-stick{position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr)); height:calc(100svh - var(--hdr));
  justify-content:flex-start; overflow:hidden; padding:clamp(18px,4vh,48px) 0 clamp(12px,3vh,32px); box-sizing:border-box; gap:clamp(18px,3.4vh,40px)}
.space.pinned .space-head{margin-top:auto}          /* "safe" төвлөрүүлэлт: багтахгүй бол дээд хэсэг тасрахгүй */
.space.pinned .space-track{margin-bottom:auto}
@media (max-height:820px){
  .space.pinned .space-lead{display:none}
  .space.pinned .space-eyebrow{margin-bottom:8px}
  .space.pinned .space-count{margin-top:10px}
  .space.pinned .hexwall{--S:clamp(40px, 4.4vw, 64px)}
}
.space.pinned .space-track{overflow:visible; scroll-snap-type:none; will-change:transform; padding-bottom:16px; flex:0 0 auto}
.space.pinned .shot{width:var(--cardW, 56vw)}
.space.pinned .shot-frame img{transition:none; will-change:transform}
.space.pinned .shot-btn:hover{--hz:0}
.space.pinned .shot-end{width:calc(var(--cardW, 56vw) * .72)}

/* ---------- томруулж харах цонх ---------- */
.lb{border:0; padding:0; margin:0; background:transparent; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; color:#fff; overflow:hidden}
.lb::backdrop{background:rgba(32,30,27,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lb[open]{display:grid; place-items:center}
.lb-fig{margin:0; display:grid; gap:14px; justify-items:center; padding:64px clamp(12px,6vw,96px) 28px; box-sizing:border-box; max-width:100%}
.lb-frame{--h:calc(1 - min(1, var(--p) / .7)); display:block; padding:10px; border-radius:24px; background:var(--felt) var(--grain);
  clip-path:polygon(calc(25% * var(--h)) 0, calc(100% - 25% * var(--h)) 0, 100% 50%, calc(100% - 25% * var(--h)) 100%, calc(25% * var(--h)) 100%, 0 50%);
  --p:1; touch-action:pan-y}
.lb-frame img{display:block; max-width:min(1200px, 88vw); max-height:calc(100dvh - 190px); width:auto; height:auto; border-radius:16px; user-select:none; -webkit-user-drag:none}
.lb figcaption{font-size:15px; text-align:center; max-width:40rem; color:#F3EFE8}
.lb figcaption b{font-family:var(--serif); font-weight:500; font-size:20px; display:block}
.lb-btn{position:absolute; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:rgba(247,245,240,.94); color:var(--ink); font-size:30px; line-height:1; box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.lb-btn:hover{background:#fff}
.lb-btn:focus-visible{outline:3px solid var(--green); outline-offset:3px}
.lb-x{top:max(14px, env(safe-area-inset-top)); right:14px; font-size:28px}
.lb-prev{left:clamp(8px,2vw,28px); top:50%; margin-top:-26px}
.lb-next{right:clamp(8px,2vw,28px); top:50%; margin-top:-26px}
@media (max-width:640px){ .lb-prev,.lb-next{top:auto; bottom:18px; margin:0} .lb-fig{padding-bottom:84px} }
@media (prefers-reduced-motion:no-preference){
  .lb[open] .lb-frame{animation:lbIn .8s var(--ease)}
  @keyframes lbIn{from{--p:0; transform:scale(.9)} to{--p:1; transform:none}}
  .lb-frame.swap{animation:lbSwap .55s var(--ease)}
  @keyframes lbSwap{from{--p:.2; opacity:.4} to{--p:1; opacity:1}}
}
html.lb-open{overflow:hidden}

/* ---------- газрын зургийн карт ---------- */
.map-wrap{position:relative; margin-top:clamp(40px,6vw,80px)}
.map-embed{position:relative; height:clamp(300px, 42vw, 480px); border-radius:28px; overflow:hidden; background:var(--paper-deep);
  box-shadow:inset 0 0 0 1.5px var(--line), 0 22px 44px -30px rgba(43,42,40,.4)}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.8)}
.map-card{position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px 26px; margin-top:16px;
  padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px); border-radius:28px; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--paper) var(--grain); outline:1.5px dashed var(--stitch); outline-offset:-10px; box-shadow:0 22px 44px -30px rgba(43,42,40,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.map-card:hover{transform:translateY(-3px); box-shadow:0 28px 50px -28px rgba(43,42,40,.45)}
.map-card:focus-visible{outline:3px solid var(--green)}
.map-hexes{position:absolute; right:clamp(-30px,1vw,20px); top:50%; width:220px; height:120px; margin-top:-60px; opacity:.85; pointer-events:none}
.map-hexes img{position:absolute; width:62px; left:calc(var(--x) * 35px); top:calc(var(--y) * 42px + 8px); transition:transform .5s var(--ease)}
.map-card:hover .map-hexes img:nth-child(odd){transform:translateY(-5px) rotate(-6deg)}
.map-card:hover .map-hexes img:nth-child(even){transform:translateY(4px) rotate(5deg)}
.map-pin{width:58px; height:58px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); background:var(--green);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.18), 0 10px 18px -8px rgba(92,146,34,.6); position:relative}
.map-pin::after{content:""; position:absolute; inset:19px; border-radius:50%; background:var(--paper)}
.map-text{display:grid; gap:2px; position:relative; z-index:1}
.map-text small{font-size:13px; color:var(--ink-soft)}
.map-text b{font-family:var(--serif); font-weight:500; font-size:clamp(20px,2vw,26px); line-height:1.25}
.map-text span{color:var(--ink-soft); font-size:15px}
.map-go{grid-column:1 / -1; justify-self:start; position:relative; z-index:1; font-weight:600; color:var(--green-dark);
  background:linear-gradient(var(--green),var(--green)) left bottom/0 1.5px no-repeat; transition:background-size .3s ease}
.map-card:hover .map-go{background-size:100% 1.5px}
@media (min-width:760px){ .map-card{grid-template-columns:auto 1fr auto} .map-go{grid-column:auto; margin-right:200px} }
@media (min-width:1000px){
  .map-embed{height:clamp(380px, 38vw, 520px)}
  .map-card{position:absolute; left:24px; bottom:24px; margin:0; max-width:min(560px, calc(100% - 48px)); grid-template-columns:auto 1fr}
  .map-card .map-go{grid-column:1 / -1; margin-right:0}
  .map-hexes{display:none}
}
@media (max-width:759px){ .map-hexes{display:none} }

/* ---------- хөл ---------- */
.foot-contact{font-style:normal; font-size:14px; line-height:1.7; color:var(--ink-soft)}
.foot-contact a{color:inherit}
.copy-note{grid-column:1 / -1}
@media (min-width:900px){ .foot-contact{text-align:right} }

input,select,textarea{font-size:16px !important}