:root{
  --bg:#dccbbe; --paper:#efe5da; --field:#f6efe7;
  --ink:#1c1d16; --ink-2:#3b3a31; --muted:#5a564c;
  --line:rgba(28,29,22,.16); --line-2:rgba(28,29,22,.3);
  --accent:#9a5334; --accent-ink:#7a3f25; --on-accent:#fbf4ec;
  --open:#2c6e46; --closed:#9c3a22;
  --land:#f0e7db; --land-2:#e5d7c7; --lake:#adc2ba; --lake-2:#8ea89e;
  --slab:#c6b19f; --slab-2:#a99280; --road:#cfb19c;
  --head-bg:#7a7062; --head-ink:#f4ede3;
  --disp:'Space Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.22,.8,.26,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#16170f; --paper:#202118; --field:#26271d;
  --ink:#efe8dc; --ink-2:#d0c7b9; --muted:#a59d8f;
  --line:rgba(239,232,220,.13); --line-2:rgba(239,232,220,.26);
  --accent:#d07e58; --accent-ink:#e39c79; --on-accent:#1b120c;
  --open:#6fc493; --closed:#ee8f72;
  --land:#2a2b22; --land-2:#24251d; --lake:#2d4741; --lake-2:#40615a;
  --slab:#1f2019; --slab-2:#101109; --road:#5d4a3d;
  --head-bg:#2b2a23; --head-ink:#efe8dc;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--disp); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s, color .4s}
a{color:inherit}
button, input, select, textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
svg.i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Header (same as the site) ---------- */
.site-header{position:fixed; top:14px; left:0; right:0; z-index:50; padding:0 16px}
.bar{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:14px 18px 14px 28px; border-radius:16px; background:var(--head-bg); color:var(--head-ink)}
.logo{font-weight:700; font-size:16px; letter-spacing:.3em; white-space:nowrap; text-decoration:none}
nav.links{margin-left:auto; display:flex; gap:2px}
nav.links a{font:500 13px var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:10px 13px; text-decoration:none; opacity:.72}
nav.links a:hover, nav.links a[aria-current="page"]{opacity:1}
.hd{display:flex; align-items:center; gap:10px; margin-left:10px}
.lang{display:flex; gap:6px; font:500 13px var(--mono)}
.lang button{background:none; border:0; padding:6px 3px; cursor:pointer; color:var(--head-ink); opacity:.6; border-bottom:1px solid transparent}
.lang button[aria-pressed="true"]{opacity:1; border-bottom-color:currentColor}
.rbtn{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; color:var(--head-ink); display:grid; place-items:center; cursor:pointer}
.menu{display:none}
@media (max-width:980px){
  nav.links{display:none}
  nav.links.open{display:flex; flex-direction:column; position:absolute; top:calc(100% + 8px); left:16px; right:16px; padding:10px; border-radius:14px; background:var(--head-bg)}
  .menu{display:grid}
  .logo{font-size:13px; letter-spacing:.2em}
  .bar{padding:10px 10px 10px 18px}
}
@media (max-width:420px){ .lang{display:none} .logo{letter-spacing:.12em} }

/* ---------- Hero ---------- */
.hero{padding:150px 0 30px}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:32px; align-items:center}
.eyebrow{margin:0; font-size:15px; color:var(--muted)}
h1{margin:10px 0 0; font-weight:600; font-size:clamp(54px, 8vw, 118px); line-height:.95; letter-spacing:-.04em}
h1 .ln{display:block; overflow:hidden; padding-bottom:.05em}
h1 .ln span{display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease)}
.ready h1 .ln span{transform:none}
.ready h1 .ln + .ln span{transition-delay:.08s}
.lead{max-width:440px; margin:22px 0 0; font-size:18px; color:var(--ink-2)}
.ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 22px; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none; font-weight:600; font-size:16px; transition:background .2s, border-color .2s, color .2s}
.btn-main{background:var(--accent); color:var(--on-accent)}
.btn-main:hover{background:var(--accent-ink)}
.btn-line{border-color:var(--line-2); color:var(--ink); background:none}
.btn-line:hover{border-color:var(--ink)}
.today{margin-top:34px; padding-top:18px; border-top:1px solid var(--line-2); max-width:440px}
.today p{margin:0}
.today .now{font-weight:500}
.today .now b{font-weight:600}
.is-open{color:var(--open)} .is-closed{color:var(--closed)}
.today .hrs{margin-top:4px; font-size:15px; color:var(--muted)}

/* ---------- 3D map ---------- */
.stage{position:relative; width:100%; max-width:600px; margin-left:auto; aspect-ratio:1/.96; perspective:1700px}
.rig{position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 1.1s var(--ease)}
.plate{position:absolute; left:13%; top:6%; width:74%; height:84%; transform-style:preserve-3d;
  transform:rotateX(54deg) rotateZ(-16deg) translate(calc(var(--fx,0) * 1%), calc(var(--fy,0) * 1%)); transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.plate-in{position:absolute; inset:0; transform-style:preserve-3d}
.ready .plate-in{animation:land 1.4s var(--ease) backwards .15s}
@keyframes land{from{transform:translateZ(-120px) rotateZ(-20deg) scale(.8); opacity:0}}
.slab{position:absolute; inset:0; border-radius:22px; background:var(--slab); transform:translateZ(var(--z))}
.slab.b{background:var(--slab-2)}
.shadow{position:absolute; inset:8%; border-radius:30px; background:rgba(50,32,20,.3); filter:blur(28px); transform:translateZ(-60px)}
:root[data-theme="dark"] .shadow{background:rgba(0,0,0,.65)}
.surface{position:absolute; inset:0; border-radius:22px; overflow:hidden; background:var(--land); transform:translateZ(1px)}
.surface svg{display:block; width:100%; height:100%}
.f-land2{fill:var(--land-2)} .f-lake{fill:var(--lake)}
.s-lake{fill:none; stroke:var(--lake-2); stroke-width:1.5}
.s-river{fill:none; stroke:var(--lake-2); stroke-width:3; stroke-linecap:round}
.s-border{fill:none; stroke:var(--muted); stroke-opacity:.4; stroke-width:1.4; stroke-dasharray:3 6; stroke-linecap:round}
.s-topo{fill:none; stroke:var(--ink); stroke-opacity:.055; stroke-width:1.2}
.s-route{fill:none; stroke:var(--accent); stroke-opacity:.55; stroke-width:2; stroke-dasharray:5 8; stroke-linecap:round}
.t-country{font:500 13px var(--disp); fill:var(--muted); opacity:.75}
.t-water{font:italic 400 11.5px var(--disp); fill:var(--lake-2)}
.dot{fill:var(--ink); opacity:.45; transition:opacity .4s}
.dot.on{opacity:1}
.halo{fill:var(--accent); opacity:0; transition:opacity .5s}
.halo.on{opacity:.18}

.pins{position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(2px)}
.pin{pointer-events:auto; position:absolute; left:var(--x); top:var(--y); display:flex; flex-direction:column; align-items:center; padding:0; border:0; background:none; cursor:pointer;
  transform-origin:50% 100%; transform:translate(-50%,-100%) rotateZ(16deg) rotateX(-54deg)}
.pin-tag{padding:6px 11px; border-radius:7px; background:var(--paper); border:1px solid var(--line-2); font-weight:500; font-size:13px; white-space:nowrap; transition:background .3s, color .3s, transform .4s var(--ease)}
.pin-stem{width:1.5px; height:30px; background:var(--ink); opacity:.7; transition:height .6s var(--ease)}
.pin:hover .pin-tag{transform:translateY(-3px)}
.pin.on .pin-tag{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pin.on .pin-stem{height:54px; opacity:1}
.ready .pin{animation:rise .8s var(--ease) backwards; animation-delay:calc(.8s + var(--i) * .1s)}
@keyframes rise{from{opacity:0; transform:translate(-50%,-100%) rotateZ(16deg) rotateX(-54deg) translateY(-30px)}}
.map-note{margin:4px 0 0; text-align:center; font-size:14px; color:var(--muted)}

/* ---------- Ways to reach us ---------- */
.reach{display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; border-top:1px solid var(--line-2)}
.way{padding:24px 24px 26px 0}
.way + .way{padding-left:24px; border-left:1px solid var(--line)}
.way-h{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px}
.way-v{display:block; margin-top:10px; font-weight:600; font-size:clamp(19px,1.8vw,22px); letter-spacing:-.015em}
.way-a{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:0; border:0; background:none; cursor:pointer; font-size:15px; color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
:root[data-theme="dark"] .way-a{color:var(--accent)}
.way-a + .way-a{margin-left:16px}
@media (max-width:820px){ .reach{grid-template-columns:1fr} .way, .way + .way{padding:20px 0; border-left:0; border-bottom:1px solid var(--line)} }

/* ---------- Message + shops ---------- */
.section{padding:90px 0 30px}
h2{margin:0; font-weight:600; font-size:clamp(32px,4vw,48px); line-height:1.05; letter-spacing:-.03em}
.sub{margin:12px 0 0; max-width:520px; color:var(--ink-2)}
.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start; margin-top:36px}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:14px}

.form{padding:30px}
.q{margin-top:22px}
.q:first-child{margin-top:0}
.q > label, .q legend{display:block; margin-bottom:8px; font-weight:500; font-size:15px}
.opt{font-weight:400; color:var(--muted)}
fieldset{border:0; margin:0; padding:0; min-width:0}
.choices{display:flex; flex-wrap:wrap; gap:8px}
.choice{position:relative}
.choice input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.choice span{display:inline-block; padding:9px 15px; border-radius:8px; border:1px solid var(--line-2); background:var(--field); font-size:15px; transition:background .2s, color .2s, border-color .2s}
.choice:hover span{border-color:var(--ink)}
.choice input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.bad .choice span{border-color:var(--closed)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px 14px; margin-top:22px}
.two .q{margin-top:0}
input[type=text], input[type=email], input[type=tel], select, textarea{width:100%; padding:13px 14px; border-radius:8px; border:1px solid var(--line-2); background:var(--field); font-size:16px; outline:none; transition:border-color .2s}
input:focus, select:focus, textarea:focus{border-color:var(--ink)}
textarea{min-height:140px; resize:vertical}
.tel{display:grid; grid-template-columns:96px 1fr; gap:8px}
.q.bad input, .q.bad textarea{border-color:var(--closed)}
.msg-err{display:none; margin:6px 0 0; font-size:14px; color:var(--closed)}
.q.bad .msg-err{display:block}
.hint{margin:6px 0 0; font-size:13.5px; color:var(--muted)}
.radios{display:flex; flex-wrap:wrap; gap:18px}
.radios label{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:400; cursor:pointer}
.radios input{accent-color:var(--ink); width:17px; height:17px; margin:0}
.send-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px}
.send-row .btn{min-width:180px}
.btn[disabled]{opacity:.7; cursor:default}
.alt{font-size:15px; color:var(--ink-2); text-underline-offset:4px}
.thanks{display:none; padding:46px 30px}
.done .form-body{display:none}
.done .thanks{display:block; animation:fade .6s var(--ease)}
.thanks h3{margin:0; font-weight:600; font-size:30px; letter-spacing:-.02em}
.thanks p{margin:12px 0 24px; max-width:420px; color:var(--ink-2)}
@keyframes fade{from{opacity:0; transform:translateY(10px)}}

.shops{padding:24px; position:sticky; top:110px}
.tabs{display:flex; gap:22px; border-bottom:1px solid var(--line-2); overflow-x:auto}
.tab{position:relative; padding:4px 0 12px; border:0; background:none; cursor:pointer; font-weight:500; font-size:16px; color:var(--muted); white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink)}
.tab::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transition:transform .35s var(--ease)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.shop{margin-top:20px}
.shop.swap{animation:fade .45s var(--ease)}
.shop-name{margin:0; font-weight:600; font-size:30px; letter-spacing:-.025em; line-height:1.1}
.shop-addr{margin:6px 0 0; color:var(--ink-2)}
.shop-now{margin:8px 0 0; font-size:15px; font-weight:500}
.map{position:relative; margin-top:18px; aspect-ratio:16/11; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--land)}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .5s}
.map.loaded iframe{opacity:1}
.map-wait{position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:var(--muted)}
.map-wait svg{position:absolute; inset:0; width:100%; height:100%}
.map-wait span{position:relative; background:var(--land); padding:4px 10px; border-radius:6px}
.map.loaded .map-wait{display:none}
dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:18px 0 0; font-size:15px}
dt{color:var(--muted)} dd{margin:0}
dd a{text-underline-offset:3px}
.shop-links{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:20px}
.shop-links .btn{height:44px; padding:0 16px; font-size:15px}
.tlink{display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:none; cursor:pointer; font-size:15px; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.tlink:hover{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:40px}
.faq-list{border-top:1px solid var(--line-2)}
details{border-bottom:1px solid var(--line-2)}
summary{list-style:none; display:flex; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; font-weight:500; font-size:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-weight:400; font-size:24px; line-height:1; color:var(--muted)}
details[open] summary::after{content:"\2212"}
.ans{padding:0 0 20px; max-width:600px; color:var(--ink-2)}
details[open] .ans{animation:fade .4s var(--ease)}

footer{padding:60px 0 36px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:20px; border-top:1px solid var(--line-2); font-size:14px; color:var(--muted)}
.foot button{background:none; border:0; padding:0; cursor:pointer; color:inherit; text-decoration:underline; text-underline-offset:3px}

.toast{position:fixed; left:50%; bottom:24px; z-index:80; transform:translate(-50%,20px); opacity:0; padding:11px 16px; border-radius:8px; background:var(--ink); color:var(--bg); font-size:15px; transition:transform .35s var(--ease), opacity .25s; pointer-events:none}
.toast.show{transform:translate(-50%,0); opacity:1}

.rv{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}

@media (max-width:1000px){
  .hero-grid, .grid, .faq{grid-template-columns:1fr}
  .stage{margin:20px auto 0; max-width:520px}
  .shops{position:static}
  .faq{gap:16px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .hero{padding-top:120px}
  .two{grid-template-columns:1fr}
  .form{padding:22px 18px}
  .shops{padding:18px}
  .ctas .btn, .send-row .btn{width:100%}
  .pin-tag{font-size:11.5px; padding:5px 8px}
}
html.still *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  h1 .ln span{transform:none}
}