{"id":161,"date":"2026-10-20T08:02:04","date_gmt":"2026-10-20T08:02:04","guid":{"rendered":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=161"},"modified":"2026-10-20T12:13:48","modified_gmt":"2026-10-20T12:13:48","slug":"huoneet","status":"publish","type":"page","link":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=161","title":{"rendered":"Huoneet"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"161\" class=\"elementor elementor-161\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9479308 e-con-full e-flex e-con e-parent\" data-id=\"9479308\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0acb3bf elementor-widget elementor-widget-html\" data-id=\"0acb3bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 00 GLOBAL + HEADER \u2014 keep this block first on every page (fonts, tokens, reveal, nav) -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"preconnect\" href=\"https:\/\/images.unsplash.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  --utu-bg:#F4EFE9; --utu-sand:#E9E0D5; --utu-blush:#EED9D2; --utu-rose:#C8968A; --utu-rose-d:#A9786C;\n  --utu-ink:#2A2522; --utu-mute:#8B807A; --utu-brown:#3B2C24; --utu-brown-d:#2A201B; --utu-cream:#F3EADF; --utu-line:rgba(42,37,34,.14); --utu-white:#FBF8F5;\n  --utu-sans:\"Inter Tight\",system-ui,-apple-system,sans-serif;\n  --utu-pad:clamp(20px,4vw,56px); --utu-ease:cubic-bezier(.22,.8,.24,1);\n}\nhtml{scroll-behavior:smooth}\nbody{background:var(--utu-bg);color:var(--utu-ink);-webkit-font-smoothing:antialiased}\n.e-con:has(>.elementor-widget-html .utu-s),.e-con:has(>.e-con-inner>.elementor-widget-html .utu-s){--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--gap:0px;--content-width:100%}\n.elementor-widget-html:has(.utu-s){margin:0!important}\n.utu-s,.utu-s *{box-sizing:border-box;margin:0}\n.utu-s{font-family:var(--utu-sans);font-weight:400;color:var(--utu-ink);font-size:17px;line-height:1.6;letter-spacing:-.01em}\n.utu-s img{display:block;max-width:100%}\n:where(.utu-s) button,.utu-s input,.utu-s select,.utu-s textarea{font:inherit;color:inherit}\n.utu-s a{color:inherit;text-decoration:none}\n.utu-s em{font-style:normal}\n.utu-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;height:54px;padding:0 7px 0 22px;background:var(--utu-ink);color:var(--utu-white)!important;border:0;border-radius:2px;cursor:pointer;font-size:16px;background-image:linear-gradient(var(--utu-brown),var(--utu-brown));background-repeat:no-repeat;background-size:0 100%;transition:background-size .7s var(--utu-ease),background-color .4s}\n.utu-btn>span:last-child{width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.1);border-radius:2px;transition:transform .4s var(--utu-ease)}\n.utu-btn:hover{background-size:100% 100%}.utu-btn:hover>span:last-child{transform:translateX(3px)}\n.utu-btn--light{background-color:var(--utu-white);background-image:linear-gradient(var(--utu-sand),var(--utu-sand));color:var(--utu-ink)!important}.utu-btn--light>span:last-child{background:var(--utu-sand)}\n.utu-btn--line{background-color:transparent;background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1));color:inherit!important;box-shadow:inset 0 0 0 1px currentColor}.utu-btn--line>span:last-child{background:none}\n.utu-btn:focus-visible,.utu-s a:focus-visible,.utu-s button:focus-visible{outline:2px solid var(--utu-rose);outline-offset:3px}\n.utu-fig{position:relative;overflow:hidden;background:var(--utu-sand);clip-path:inset(0);transition:clip-path 1.9s var(--utu-ease)}\n[data-utu-reveal]:not(.is-in) .utu-fig,.utu-fig[data-utu-reveal]:not(.is-in){clip-path:inset(100% 0 0 0)}\n.utu-s .utu-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--utu-ease)}\n.utu-fig.is-in img,.is-in .utu-fig img{transform:scale(1)}\n.utu-fig:hover img{transform:scale(1.03)}\n.utu-s .utu-par img{scale:1.12}\n.utu-curtain{position:fixed;inset:0;z-index:2000;background:var(--utu-blush);display:grid;place-items:center;pointer-events:none;clip-path:inset(0);animation:utuCurtain 1.1s .6s var(--utu-ease) forwards}\n.utu-curtain span{font-family:var(--utu-sans);font-weight:300;font-size:clamp(44px,6vw,76px);letter-spacing:-.05em;color:var(--utu-ink);animation:utuCurtainTxt .9s var(--utu-ease) both}\n@keyframes utuCurtain{to{clip-path:inset(0 0 100% 0)}}\n@keyframes utuCurtainTxt{from{opacity:0;transform:translateY(14px)}}\n.elementor-editor-active .utu-curtain{display:none}\n.utu-cap{display:flex;justify-content:space-between;font-size:14px;padding-top:12px}\n.utu-cap span:last-child{color:var(--utu-mute)}\n[data-utu-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1.5s var(--utu-ease),transform 1.5s var(--utu-ease)}\n[data-utu-reveal].is-in{opacity:1;transform:none}\n[data-utu-reveal=split]{opacity:1;transform:none}\n[data-utu-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}\n[data-utu-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.4s var(--utu-ease);transition-delay:calc(var(--i)*var(--utu-stagger,70ms))}\n[data-utu-split].is-in .w>span{transform:none}\n.elementor-editor-active [data-utu-reveal]{opacity:1;transform:none}\n.elementor-editor-active .utu-fig{clip-path:none!important}\n.elementor-editor-active [data-utu-split] .w>span{transform:none}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-utu-reveal]{opacity:1;transform:none}.utu-curtain{display:none}[data-utu-split] .w>span{transform:none}.utu-s .utu-fig{clip-path:none}html{scroll-behavior:auto}}\n\n.utu-hd{position:fixed;inset:0 0 auto;z-index:999;padding:18px var(--utu-pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--utu-ink);transition:background .5s var(--utu-ease),padding .5s var(--utu-ease),transform .7s var(--utu-ease)}\n.utu-hd.is-hidden{transform:translateY(-120%)}\n.admin-bar .utu-hd{top:32px}@media (max-width:782px){.admin-bar .utu-hd{top:46px}}\n.utu-hd.is-solid{background:rgba(244,239,233,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px}\n.utu-hd__bar{grid-column:1\/-1;display:flex;justify-content:space-between;align-items:center;font-size:13px;padding-bottom:14px;max-height:40px;overflow:hidden;transition:max-height .5s var(--utu-ease),opacity .5s,padding .5s}\n.utu-hd.is-solid .utu-hd__bar{max-height:0;opacity:0;padding-bottom:0}\n.utu-hd__brands{display:flex;gap:18px}\n.utu-hd__brands a{opacity:.55;transition:opacity .3s}\n.utu-hd__brands a:hover,.utu-hd__brands a[aria-current]{opacity:1}\n.utu-hd__nav{display:flex;gap:32px;font-size:15px}\n.utu-hd__nav a{position:relative;opacity:.9}\n.utu-hd__m{display:none}\n.utu-hd__nav a::after{content:\"\";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--utu-ease)}\n.utu-hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}\n.utu-hd__logo{font-size:30px;font-weight:300;letter-spacing:-.05em;line-height:1}\n.utu-hd__end{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-size:15px}\n.utu-hd__cta{height:42px;padding:0 20px;display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:2px;transition:background .4s,color .4s}\n.utu-hd__cta:hover{background:var(--utu-ink);color:var(--utu-white);border-color:var(--utu-ink)}\n.utu-s .utu-hd__cta--fill{background:var(--utu-ink);color:var(--utu-white);border-color:var(--utu-ink)}\n.utu-hd__cta--fill:hover{background:var(--utu-brown);border-color:var(--utu-brown)}\n@media (max-width:1200px) and (min-width:861px){.utu-hd__nav{gap:20px;font-size:14px}.utu-hd__end{gap:10px}.utu-hd__cta{padding:0 14px;font-size:14px}}\n.utu-hd__menu{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative}\n.utu-hd__menu i{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .4s var(--utu-ease)}\n.utu-hd__menu i:first-child{top:16px}.utu-hd__menu i:last-child{top:23px}\n.utu-hd[data-open] .utu-hd__menu i:first-child{transform:translateY(3.5px) rotate(45deg)}\n.utu-hd[data-open] .utu-hd__menu i:last-child{transform:translateY(-3.5px) rotate(-45deg)}\n.utu-cta{display:none}\n@media (max-width:860px){\n  .utu-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:998;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:rgba(251,248,245,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:4px;box-shadow:0 20px 50px -20px rgba(42,37,34,.45);transform:translateY(140%);transition:transform .6s var(--utu-ease)}\n  .utu-cta.is-on{transform:none}\n  .utu-cta a{height:50px;display:grid;place-items:center;border-radius:2px;font-size:16px;box-shadow:inset 0 0 0 1px var(--utu-line)}\n  .utu-cta a:last-child{background:var(--utu-ink);color:var(--utu-white);box-shadow:none}\n  .utu-hd{grid-template-columns:1fr auto}\n  .utu-hd__nav{position:fixed;inset:0;background:var(--utu-bg);color:var(--utu-ink);flex-direction:column;justify-content:center;padding:0 var(--utu-pad);gap:6px;font-size:44px;font-weight:300;letter-spacing:-.04em;opacity:0;pointer-events:none;transition:opacity .5s var(--utu-ease);z-index:-1}\n  .utu-hd[data-open] .utu-hd__nav{opacity:1;pointer-events:auto}\n  .utu-hd__m{display:inline}\n  .utu-hd__logo{order:-1}\n  .utu-hd__bar{order:-2}\n  .utu-hd__end .utu-hd__cta{display:none}\n  .utu-hd__menu{display:block}\n}\n<\/style>\n\n<header class=\"utu-s utu-hd\" id=\"utu-hd\">\n  <div class=\"utu-hd__bar\">\n    <nav class=\"utu-hd__brands\" aria-label=\"Talot\"><a href=\"\/?page_id=88\" aria-current=\"page\">Utu<\/a><a href=\"#\">Sumu<\/a><a href=\"#\">Platanin talo<\/a><\/nav>\n    <span class=\"utu-hd__lang\">FI \/ EN<\/span>\n  <\/div>\n  <nav class=\"utu-hd__nav\" aria-label=\"P\u00e4\u00e4valikko\">\n    <a href=\"\/?pagename=huoneet\">Huoneet<\/a>\n    <a href=\"\/?pagename=brunssi\">Brunssi<\/a>\n    <a href=\"\/?page_id=88#kuvat\">Kuvat<\/a>\n    <a href=\"\/?page_id=88#lahjakortit\">Lahjakortit<\/a>\n    <a class=\"utu-hd__m\" href=\"#yhteys\">Yhteystiedot<\/a>\n  <\/nav>\n  <a class=\"utu-hd__logo\" href=\"\/?page_id=88\" aria-label=\"Utu \u2013 etusivu\">utu<\/a>\n  <div class=\"utu-hd__end\">\n    <a class=\"utu-hd__cta\" href=\"\/?pagename=brunssi#brunssi-varaus\">Varaa brunssi<\/a>\n    <a class=\"utu-hd__cta utu-hd__cta--fill\" href=\"\/?pagename=huoneet#huoneet\" data-open-rooms>Varaa y\u00f6pyminen<\/a>\n    <button class=\"utu-hd__menu\" aria-label=\"Valikko\" aria-expanded=\"false\"><i><\/i><i><\/i><\/button>\n  <\/div>\n<\/header>\n\n<div class=\"utu-curtain\" id=\"utu-curtain\" aria-hidden=\"true\"><span>utu<\/span><\/div>\n<script>try{if(sessionStorage.getItem(\"utuSeen\"))document.getElementById(\"utu-curtain\").remove();else{sessionStorage.setItem(\"utuSeen\",\"1\");document.documentElement.classList.add(\"utu-first\")}}catch(e){document.getElementById(\"utu-curtain\").remove()}<\/script>\n\n<nav class=\"utu-s utu-cta\" id=\"utu-cta\" aria-label=\"Pikavaraus\">\n  <a href=\"\/?pagename=brunssi#brunssi-varaus\">Varaa brunssi<\/a>\n  <a href=\"\/?pagename=huoneet#huoneet\" data-open-rooms>Varaa y\u00f6pyminen<\/a>\n<\/nav>\n\n<script>\n(()=>{\n  const hd=document.getElementById('utu-hd'); if(!hd||hd.dataset.ready)return; hd.dataset.ready=1;\n  const btn=hd.querySelector('.utu-hd__menu');\n  const set=o=>{o?hd.setAttribute('data-open',''):hd.removeAttribute('data-open');btn.setAttribute('aria-expanded',o)};\n  btn.addEventListener('click',()=>set(!hd.hasAttribute('data-open')));\n  hd.querySelectorAll('.utu-hd__nav a').forEach(a=>a.addEventListener('click',()=>set(false)));\n  const cta=document.getElementById('utu-cta');\n  let lastY=scrollY;\n  const solid=()=>{const y=scrollY;hd.classList.toggle('is-solid',y>innerHeight*.6);if(Math.abs(y-lastY)>6){hd.classList.toggle('is-hidden',y>innerHeight&&y>lastY&&!hd.hasAttribute('data-open'));lastY=y}cta.classList.toggle('is-on',scrollY>innerHeight*.8&&innerHeight+scrollY<document.documentElement.scrollHeight-500)};\n  addEventListener('scroll',solid,{passive:true}); solid();\n  \/\/ [data-open-rooms] links open the room list on the rooms page, elsewhere they just navigate there\n  document.addEventListener('click',e=>{if(e.target.closest('[data-open-rooms]')&&document.getElementById('huoneet')){e.preventDefault();document.dispatchEvent(new CustomEvent('utu:rooms'))}});\n  \/\/ booking started on another page arrives as URL params (?from&to&guests or ?date&time&guests)\n  const q=new URLSearchParams(location.search), hand=()=>{if(q.get('from'))document.dispatchEvent(new CustomEvent('utu:rooms',{detail:{from:q.get('from'),to:q.get('to'),guests:q.get('guests')}}));else if(q.get('date'))document.dispatchEvent(new CustomEvent('utu:brunch',{detail:{date:q.get('date'),time:q.get('time'),guests:q.get('guests')}}))};\n  document.readyState==='loading'?document.addEventListener('DOMContentLoaded',hand):hand();\n  \/\/ scroll reveal for every block on the page\n  const io='IntersectionObserver' in window&&new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target)}}),{rootMargin:'0px 0px -8% 0px'});\n  \/\/ split headings into words that rise in one by one\n  const split=()=>document.querySelectorAll('[data-utu-split]:not([data-done])').forEach(el=>{el.dataset.done=1;el.setAttribute('aria-label',el.textContent.trim());el.innerHTML=el.textContent.trim().split(\/\\s+\/).map((w,i)=>`<span class=\"w\" aria-hidden=\"true\"><span style=\"--i:${i}\">${w}<\/span><\/span>`).join(' ')});\n  const scan=()=>{split();document.querySelectorAll('[data-utu-reveal]:not(.is-in)').forEach(el=>io?io.observe(el):el.classList.add('is-in'))};\n  document.readyState==='loading'?document.addEventListener('DOMContentLoaded',scan):scan();\n  addEventListener('load',scan);\n  \/\/ photos drift slowly inside their frames\n  if(!matchMedia('(prefers-reduced-motion:reduce)').matches){let pr=0;const run=()=>{pr=0;const H=innerHeight;document.querySelectorAll('.utu-par').forEach(f=>{const r=f.getBoundingClientRect();if(r.bottom<0||r.top>H)return;f.firstElementChild.style.translate='0 '+(-(r.top+r.height\/2-H\/2)\/H*r.height*.08).toFixed(1)+'px'})};addEventListener('scroll',()=>pr||(pr=requestAnimationFrame(run)),{passive:true});addEventListener('load',run)}\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39f10d7 e-con-full e-flex e-con e-parent\" data-id=\"39f10d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ab2894 elementor-widget elementor-widget-html\" data-id=\"2ab2894\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 11 ALASIVUN HERO \u00b7 HUONEET -->\n<style>\n.utu-ph{position:relative;height:80svh;min-height:560px;overflow:hidden;color:var(--utu-white);background:var(--utu-ink)}\n.utu-s .utu-ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.1;animation:utuPhZoom 2.8s var(--utu-ease) forwards}\n@keyframes utuPhZoom{to{scale:1.02}}\n.utu-ph__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,239,233,.75) 0%,rgba(244,239,233,.2) 22%,rgba(244,239,233,0) 38%,rgba(30,25,22,0) 50%,rgba(30,25,22,.55) 100%)}\n.utu-ph__body{position:absolute;left:var(--utu-pad);right:var(--utu-pad);bottom:clamp(28px,6vh,64px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px}\n.utu-ph__title{font-size:clamp(72px,12vw,210px);font-weight:300;letter-spacing:-.065em;line-height:.82;margin-left:-.04em}\n.utu-ph__title:has(br){font-size:clamp(60px,8.4vw,150px)}\n.utu-ph__title span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}\n.utu-ph__title i{display:inline-block;font-style:normal;transform:translateY(105%);animation:utuPhRise 1.6s var(--utu-ease) forwards}\n.utu-ph__title span:nth-child(2) i{animation-delay:.12s}\n@keyframes utuPhRise{to{transform:none}}\n.utu-ph__side{max-width:36ch;opacity:0;animation:utuPhIn 1.4s .6s var(--utu-ease) forwards}\n.utu-ph__side p{font-size:clamp(17px,1.4vw,20px);line-height:1.45;margin-bottom:24px}\n@keyframes utuPhIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}\n@media (max-width:860px){.utu-ph{height:78svh}.utu-ph__body{flex-direction:column;align-items:flex-start;gap:24px}.utu-ph__title{font-size:clamp(60px,17vw,120px)}}\n<\/style>\n\n<section class=\"utu-s utu-ph\" id=\"top\">\n  <img decoding=\"async\" class=\"utu-ph__img\" alt=\"Aamuvalo makuuhuoneessa\" fetchpriority=\"high\" src=\"https:\/\/images.unsplash.com\/photo-1638531540340-9c3d9f3c3077?auto=format&fit=crop&w=2200&h=1300&q=72\" srcset=\"https:\/\/images.unsplash.com\/photo-1638531540340-9c3d9f3c3077?auto=format&fit=crop&w=1000&h=1250&q=70 1000w,https:\/\/images.unsplash.com\/photo-1638531540340-9c3d9f3c3077?auto=format&fit=crop&w=2200&h=1300&q=72 2200w\" sizes=\"100vw\">\n  <div class=\"utu-ph__shade\"><\/div>\n  <div class=\"utu-ph__body\">\n    <h1 class=\"utu-ph__title\" aria-label=\"Huoneet\"><span><i>Huoneet<\/i><\/span><\/h1>\n    <div class=\"utu-ph__side\"><p>Vanhan huvilan huoneet Lappeenrannan keskustassa. Aamiainen kuuluu aina hintaan.<\/p><a class=\"utu-btn utu-btn--light\" href=\"#huoneet\" data-open-rooms><span>Varaa y\u00f6pyminen<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca41ff4 e-con-full e-flex e-con e-parent\" data-id=\"ca41ff4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06fc8ba elementor-widget elementor-widget-html\" data-id=\"06fc8ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 05 HUONEET + HUONEVARAUS (mockup \u2013 kytke varausj\u00e4rjestelm\u00e4\u00e4n my\u00f6hemmin) -->\n<style>\n.utu-rm{padding:clamp(120px,13vw,210px) var(--utu-pad) clamp(90px,10vw,160px);scroll-margin-top:60px}\n.utu-rm__title{font-size:clamp(64px,10vw,180px);line-height:.88;letter-spacing:-.06em;font-weight:300;margin:0 0 clamp(44px,6vw,80px)}\n.utu-rm__feat{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);align-items:stretch}\n.utu-rm__feat .utu-fig{aspect-ratio:16\/11}\n.utu-rm__info{display:flex;flex-direction:column;justify-content:space-between;gap:32px}\n.utu-rm__info p{font-size:clamp(19px,1.7vw,24px);line-height:1.4;letter-spacing:-.015em}\n.utu-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;font-size:16px}\n.utu-meta dt{color:var(--utu-mute);font-size:14px;margin-bottom:2px}\n.utu-rm__toggle{scroll-margin-top:90px;width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:clamp(60px,7vw,110px);padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,40px);border:0;border-radius:2px;background:var(--utu-sand);transition:background .4s;cursor:pointer;font-size:clamp(24px,3vw,44px);letter-spacing:-.035em;font-weight:300;text-align:left}\n.utu-rm__toggle>span:first-child{flex:1}\n.utu-rm__peek{display:flex;gap:6px;margin-right:24px}\n.utu-s .utu-rm__peek img{width:64px;height:64px;object-fit:cover;border-radius:1px;transition:transform .6s var(--utu-ease)}\n.utu-rm__toggle:hover .utu-rm__peek img{transform:translateY(-4px)}\n.utu-rm__toggle:hover .utu-rm__peek img:nth-child(2){transition-delay:.04s}.utu-rm__toggle:hover .utu-rm__peek img:nth-child(3){transition-delay:.08s}.utu-rm__toggle:hover .utu-rm__peek img:nth-child(4){transition-delay:.12s}\n.utu-rm__toggle[aria-expanded=true] .utu-rm__peek{opacity:0;transition:opacity .4s}\n.utu-rm__toggle i{width:44px;height:44px;border-radius:50%;border:1px solid var(--utu-ink);position:relative;flex:0 0 auto;transition:background .4s,transform .6s var(--utu-ease)}\n.utu-rm__toggle i::before,.utu-rm__toggle i::after{content:\"\";position:absolute;left:50%;top:50%;width:14px;height:1px;background:currentColor;transform:translate(-50%,-50%)}\n.utu-rm__toggle i::after{transform:translate(-50%,-50%) rotate(90deg)}\n.utu-rm__toggle:hover{background:#E3D8CB}\n.utu-rm__toggle:hover i{background:var(--utu-ink);color:var(--utu-white)}\n.utu-rm__toggle[aria-expanded=true] i{transform:rotate(45deg)}\n.utu-rm__toggle{display:none}\n.utu-rm__panel{scroll-margin-top:90px;margin-top:clamp(50px,6vw,100px);display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--utu-ease)}\n.utu-rm__panel.is-open{grid-template-rows:1fr}\n.utu-rm__panel>div{overflow:hidden}\n.utu-rm__bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:clamp(28px,3vw,44px) 0 0;font-size:16px}\n.utu-rm__bar b{font-weight:400}\n.utu-rm__bar label{display:flex;flex-direction:column;font-size:13px;color:var(--utu-mute)}\n.utu-rm__bar input,.utu-rm__bar select{border:0;background:none;font-size:17px;color:var(--utu-ink);padding:2px 0;outline:0}\n.utu-rm__bar-f{display:flex;gap:28px;flex-wrap:wrap}\n.utu-room{display:grid;grid-template-columns:44px 1fr 1.25fr;gap:clamp(16px,3vw,48px);padding:clamp(44px,6vw,90px) 0 0}\n.utu-room__n{font-size:14px;color:var(--utu-mute)}\n.utu-room__media{display:grid;gap:8px;align-content:start}\n.utu-room .utu-fig{aspect-ratio:4\/3}\n.utu-room .utu-fig img{transition:opacity .45s,transform 1.6s var(--utu-ease)}\n.utu-room .utu-fig img.is-swap{opacity:0}\n.utu-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n.utu-thumb{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:4\/3;overflow:hidden;opacity:.55;transition:opacity .3s;border-radius:1px}\n.utu-thumb:hover,.utu-thumb[aria-pressed=true]{opacity:1}\n.utu-s .utu-thumb img{width:100%;height:100%;object-fit:cover}\n.utu-room__tag{display:inline-block;font-size:13px;padding:4px 10px;background:var(--utu-blush);border-radius:20px;margin-left:10px;vertical-align:middle;letter-spacing:0}\n.utu-room__name{font-size:clamp(38px,4vw,62px);font-weight:300;letter-spacing:-.045em;line-height:1}\n.utu-room__name small{display:block;font-size:16px;letter-spacing:0;color:var(--utu-mute);margin-top:8px}\n.utu-room__body{display:flex;flex-direction:column;gap:24px}\n.utu-room__body>p{font-size:18px}\n.utu-room__specs{display:flex;flex-wrap:wrap;gap:6px}\n.utu-room__specs span{font-size:14px;padding:6px 12px;border:1px solid var(--utu-line);border-radius:20px}\n.utu-room__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:auto}\n.utu-room__price{font-size:28px;font-weight:300;letter-spacing:-.02em}\n.utu-room__price small{display:block;font-size:14px;color:var(--utu-mute);letter-spacing:0}\n.utu-room__state{font-size:14px;display:inline-flex;align-items:center;gap:6px}\n.utu-room__state::before{content:\"\";width:6px;height:6px;border-radius:50%;background:#7a9a7e}\n.utu-room[data-full] .utu-room__state::before{background:var(--utu-rose)}\n.utu-room[data-full] .utu-btn{opacity:.35;pointer-events:none}\n.utu-room__actions{display:flex;gap:10px;align-items:center}\n.utu-more{background:none;border:0;border-bottom:1px solid currentColor;padding:2px 0;cursor:pointer;font-size:16px}\n.utu-room details{grid-column:2\/-1}\n.utu-room summary{display:none}\n.utu-room__long{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(16px,3vw,48px);padding-top:28px}\n.utu-room__long p{font-size:17px;line-height:1.6;color:#4a423e}\n.utu-room__long p+p{margin-top:12px}\n.utu-room__long ul{padding:0;columns:2;column-gap:24px;font-size:16px;line-height:2}\n.utu-room__long li{list-style:none}\n.utu-room__long h4{font-size:14px;font-weight:400;color:var(--utu-mute);margin-bottom:8px}\n.utu-s .utu-dlg{margin:auto;border:0;padding:0;background:var(--utu-white);color:var(--utu-ink);width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);border-radius:3px;font-family:var(--utu-sans)}\n.utu-dlg::backdrop{background:rgba(42,37,34,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}\n.utu-dlg[open]{animation:utuDlg .6s var(--utu-ease)}\n@keyframes utuDlg{from{opacity:0;transform:translateY(24px)}}\n.utu-dlg__img{aspect-ratio:16\/7;object-fit:cover;width:100%}\n.utu-dlg__in{padding:28px}\n.utu-dlg__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--utu-white);cursor:pointer;font-size:18px}\n.utu-dlg h3{font-size:40px;font-weight:300;letter-spacing:-.04em;margin:0 0 20px}\n.utu-dlg h3 small{font-size:18px;color:var(--utu-mute);letter-spacing:0;margin-left:8px}\n.utu-dlg .utu-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}\n.utu-dlg .utu-in{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--utu-mute)}\n.utu-dlg .utu-in--wide{grid-column:1\/-1}\n.utu-dlg .utu-in input,.utu-dlg .utu-in select{border:0;border-bottom:1px solid var(--utu-line);background:none;padding:8px 0;font-size:17px;color:var(--utu-ink);outline:0}\n.utu-dlg .utu-in input:focus{border-color:var(--utu-ink)}\n.utu-dlg__sum{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;padding-top:10px}\n.utu-dlg__sum p{font-size:14px;color:var(--utu-mute)}\n.utu-dlg__sum b{display:block;font-size:30px;font-weight:300;color:var(--utu-ink);letter-spacing:-.03em}\n@media (max-width:640px){.utu-rm__peek{display:none}}\n@media (max-width:960px){.utu-rm__feat{grid-template-columns:1fr}.utu-room{grid-template-columns:1fr}.utu-room__n{display:none}.utu-room details{grid-column:1}.utu-room__long{grid-template-columns:1fr}}\n@media (max-width:480px){.utu-room__long ul{columns:1}.utu-dlg .utu-fields{grid-template-columns:1fr}}\n<\/style>\n\n<section class=\"utu-s utu-rm\" id=\"huoneet\">\n  <div class=\"utu-rm__feat\">\n    <div class=\"utu-fig utu-par\" data-utu-reveal><img decoding=\"async\" loading=\"lazy\" alt=\"Aamuvalo pellavalakanoilla\" src=\"https:\/\/images.unsplash.com\/photo-1601276174812-63280a55656e?auto=format&fit=crop&w=1600&h=1100&q=70\"><\/div>\n    <div class=\"utu-rm__info\" data-utu-reveal>\n      <p>Meill\u00e4 on 12 huonetta ja nelj\u00e4 huonetyyppi\u00e4. Huoneissa on puulattiat, pellavalakanat ja kunnon s\u00e4ngyt. Aamiainen kuuluu hintaan, ja viikonloppuisin se on brunssi.<\/p>\n      <dl class=\"utu-meta\">\n        <div><dt>Sis\u00e4\u00e4nkirjautuminen<\/dt><dd>klo 15 alkaen<\/dd><\/div>\n        <div><dt>Uloskirjautuminen<\/dt><dd>klo 12 menness\u00e4<\/dd><\/div>\n        <div><dt>Aamiainen<\/dt><dd>Sis\u00e4ltyy hintaan<\/dd><\/div>\n        <div><dt>Peruutus<\/dt><dd>Maksutta 48 h ennen<\/dd><\/div>\n      <\/dl>\n    <\/div>\n  <\/div>\n\n  <button class=\"utu-rm__toggle\" type=\"button\" aria-expanded=\"false\" aria-controls=\"utu-rooms\"><span>N\u00e4yt\u00e4 huonetyypit (4)<\/span><span class=\"utu-rm__peek\" aria-hidden=\"true\"><img decoding=\"async\" alt=\"\" loading=\"lazy\" src=\"https:\/\/images.unsplash.com\/photo-1766245456897-5c86726d084d?auto=format&fit=crop&w=140&h=140&q=60\"><img decoding=\"async\" alt=\"\" loading=\"lazy\" src=\"https:\/\/images.unsplash.com\/photo-1780672823770-dc40e2181cdf?auto=format&fit=crop&w=140&h=140&q=60\"><img decoding=\"async\" alt=\"\" loading=\"lazy\" src=\"https:\/\/images.unsplash.com\/photo-1791730096546-626d456217df?auto=format&fit=crop&w=140&h=140&q=60\"><img decoding=\"async\" alt=\"\" loading=\"lazy\" src=\"https:\/\/images.unsplash.com\/photo-1641133639375-f71c3c1220a1?auto=format&fit=crop&w=140&h=140&q=60\"><\/span><i aria-hidden=\"true\"><\/i><\/button>\n  <div class=\"utu-rm__panel is-open\" id=\"utu-rooms\"><div>\n    <form class=\"utu-rm__bar\" data-bar>\n      <div class=\"utu-rm__bar-f\">\n        <label>Saapuminen<input type=\"date\" name=\"from\"><\/label>\n        <label>L\u00e4ht\u00f6<input type=\"date\" name=\"to\"><\/label>\n        <label>Aikuiset<select name=\"guests\"><option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option><\/select><\/label>\n      <\/div>\n      <b data-nights><\/b>\n    <\/form>\n    <div data-list><\/div>\n  <\/div><\/div>\n\n  <dialog class=\"utu-dlg\" aria-label=\"Huonevaraus\">\n    <form method=\"dialog\"><button class=\"utu-dlg__x\" aria-label=\"Sulje\">\u00d7<\/button><\/form>\n    <img class=\"utu-dlg__img\" alt=\"\">\n    <form class=\"utu-dlg__in\" data-book novalidate>\n      <div data-flow>\n        <h3 data-name><\/h3>\n        <div class=\"utu-fields\">\n          <label class=\"utu-in\">Saapuminen<input type=\"date\" name=\"from\" required><\/label>\n          <label class=\"utu-in\">L\u00e4ht\u00f6<input type=\"date\" name=\"to\" required><\/label>\n          <label class=\"utu-in\">Nimi<input name=\"name\" required autocomplete=\"name\"><\/label>\n          <label class=\"utu-in\">Puhelin<input name=\"tel\" type=\"tel\" autocomplete=\"tel\"><\/label>\n          <label class=\"utu-in utu-in--wide\">S\u00e4hk\u00f6posti<input name=\"email\" type=\"email\" required autocomplete=\"email\"><\/label>\n        <\/div>\n        <div class=\"utu-dlg__sum\"><p><span data-sumtxt><\/span><b data-total><\/b><\/p><button class=\"utu-btn\" type=\"submit\"><span>Vahvista varaus<\/span><span aria-hidden=\"true\">\u2192<\/span><\/button><\/div>\n      <\/div>\n      <div data-done hidden aria-live=\"polite\" style=\"text-align:center;padding:20px 0\">\n        <h3>Kiitos, huone on varattu<\/h3>\n        <p style=\"font-size:16px;color:var(--utu-mute)\">L\u00e4hetimme vahvistuksen ja saapumisohjeet s\u00e4hk\u00f6postiisi.<br>Varausnumero <b data-ref style=\"font-weight:500;color:var(--utu-ink)\"><\/b><\/p>\n      <\/div>\n    <\/form>\n  <\/dialog>\n<\/section>\n\n<script>\n(()=>{\n  const s=document.getElementById('huoneet'); if(!s||s.dataset.ready)return; s.dataset.ready=1;\n  const U='https:\/\/images.unsplash.com\/', q='?auto=format&fit=crop&q=70&';\n  const ROOMS=[\n    {id:'utu',name:'Utu',type:'Huone',m2:18,max:2,bed:'160 cm s\u00e4nky',view:'Sis\u00e4piha',price:159,imgs:['photo-1766245456897-5c86726d084d','photo-1762199904138-d163fe89540a','photo-1661107259637-4e1c55462428'],\n     short:'Rauhallinen huone sis\u00e4pihan puolella. Sopii yhdelle tai kahdelle.',\n     long:['Utu on talon pienin ja hiljaisin huone. Ikkunat ovat sis\u00e4pihalle, joten kadun \u00e4\u00e4ni\u00e4 ei kuulu.','S\u00e4ngyss\u00e4 on 160 cm leve\u00e4 patja ja untuvapeitto. Kylpyhuoneessa on suihku ja lattial\u00e4mmitys.'],\n     am:['Pellavalakanat','Untuvapeitto','Suihku','Lattial\u00e4mmitys','Kahvi ja tee','Wifi']},\n    {id:'usva',name:'Usva',type:'Superior',m2:24,max:2,bed:'180 cm s\u00e4nky',view:'J\u00e4rvi',price:199,tag:'Suosituin',imgs:['photo-1780672823770-dc40e2181cdf','photo-1638531540340-9c3d9f3c3077','photo-1601276174812-63280a55656e'],\n     short:'Ikkuna j\u00e4rvelle ja leve\u00e4 ikkunapenkki. Aamuaurinko paistaa suoraan huoneeseen.',\n     long:['Usva on huoneistamme suosituin. Ikkunapenkill\u00e4 on hyv\u00e4 istua kahvin kanssa ja katsella j\u00e4rvelle.','Huoneessa on tammilattia, 180 cm s\u00e4nky ja minibaari, jossa on paikallisia juomia.'],\n     am:['Ikkunapenkki','J\u00e4rvin\u00e4kym\u00e4','Minibaari','Kylpytakit','Suihku','Wifi']},\n    {id:'kaste',name:'Kaste',type:'Junior Suite',m2:32,max:3,bed:'180 cm + vuodesohva',view:'J\u00e4rvi ja puutarha',price:259,imgs:['photo-1791730096546-626d456217df','photo-1507652313519-d4e9174996dd','photo-1764867248357-f1d63647bff3'],\n     short:'Iso huone, jossa on erillinen oleskelutila ja kylpyamme.',\n     long:['Kaste sopii pidemp\u00e4\u00e4n oleskeluun. Makuu- ja oleskelutilan v\u00e4liss\u00e4 on matala sein\u00e4, ja vuodesohvalla nukkuu kolmas henkil\u00f6.','Kylpyamme on ikkunan edess\u00e4. Huoneessa on my\u00f6s kahvinkeitin ja teet\u00e4.'],\n     am:['Kylpyamme','Oleskelutila','Vuodesohva','Kahvinkeitin','Minibaari','Wifi']},\n    {id:'aamu',name:'Aamu',type:'Sviitti',m2:46,max:4,bed:'2 \u00d7 180 cm',view:'J\u00e4rvi',price:349,imgs:['photo-1641133639375-f71c3c1220a1','photo-1603373659283-f0728b2621c2','photo-1676452457948-7d02dff1eb43'],\n     short:'Kaksi makuuhuonetta, oma sauna ja n\u00e4kym\u00e4 j\u00e4rvelle.',\n     long:['Aamu on talon ainoa sviitti. Siin\u00e4 on kaksi makuuhuonetta, olohuone ja oma puul\u00e4mmitteinen sauna.','Aamiaisen voi tilata huoneeseen. Viikonloppuisin varaamme sviitin vieraille p\u00f6yd\u00e4n brunssilta.'],\n     am:['Oma sauna','Kaksi makuuhuonetta','Olohuone','Aamiainen huoneeseen','My\u00f6h\u00e4inen uloskirjautuminen','Wifi']}\n  ];\n  const panel=s.querySelector('.utu-rm__panel'), toggle=s.querySelector('.utu-rm__toggle'), bar=s.querySelector('[data-bar]'), list=s.querySelector('[data-list]');\n  const dlg=s.querySelector('dialog'), book=s.querySelector('[data-book]');\n  const iso=d=>d.toLocaleDateString('sv-SE'), D=k=>new Date(k+'T12:00'), add=(k,n)=>{const d=D(k);d.setDate(d.getDate()+n);return iso(d)};\n  const nights=()=>Math.max(1,Math.round((D(bar.to.value)-D(bar.from.value))\/864e5));\n  const fmt=new Intl.DateTimeFormat('fi-FI',{day:'numeric',month:'numeric'});\n  \/\/ ponytail: mock availability (one room type sold out on some dates) \u2013 swap for the real PMS\/booking API\n  const full=r=>{let h=0;for(const c of r.id+bar.from.value)h=(h*31+c.charCodeAt(0))%101;return h%6===0};\n  bar.from.value=iso(new Date()); bar.to.value=add(bar.from.value,1); bar.from.min=bar.to.min=bar.from.value;\n\n  const open=(o=true)=>{panel.classList.toggle('is-open',o);toggle.setAttribute('aria-expanded',o)};\n  toggle.addEventListener('click',()=>open(!panel.classList.contains('is-open')));\n\n  const render=()=>{\n    if(bar.to.value<=bar.from.value)bar.to.value=add(bar.from.value,1);\n    const n=nights(), g=+bar.guests.value;\n    bar.querySelector('[data-nights]').textContent=`${fmt.format(D(bar.from.value))}\u2013${fmt.format(D(bar.to.value))} \u00b7 ${n} ${n>1?'y\u00f6t\u00e4':'y\u00f6'} \u00b7 ${g} ${g>1?'aikuista':'aikuinen'}`;\n    list.innerHTML=ROOMS.map((r,i)=>{\n      const fits=g<=r.max, sold=full(r)||!fits;\n      return `<article class=\"utu-room\" ${sold?'data-full':''}>\n        <span class=\"utu-room__n\">0${i+1}<\/span>\n        <div class=\"utu-room__media\"><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"${r.name} \u2013 ${r.type}\" src=\"${U+r.imgs[0]+q}w=1000&h=750\"><\/div>\n          <div class=\"utu-thumbs\">${r.imgs.map((m,j)=>`<button type=\"button\" class=\"utu-thumb\" aria-label=\"Kuva ${j+1}\" aria-pressed=\"${!j}\" data-img=\"${m}\"><img decoding=\"async\" loading=\"lazy\" alt=\"\" src=\"${U+m+q}w=240&h=180\"><\/button>`).join('')}<\/div><\/div>\n        <div class=\"utu-room__body\">\n          <h3 class=\"utu-room__name\">${r.name}${r.tag?`<span class=\"utu-room__tag\">${r.tag}<\/span>`:''} <small>${r.type}<\/small><\/h3>\n          <p>${r.short}<\/p>\n          <div class=\"utu-room__specs\"><span>${r.m2} m\u00b2<\/span><span>max ${r.max} hl\u00f6<\/span><span>${r.bed}<\/span><span>N\u00e4kym\u00e4: ${r.view}<\/span><\/div>\n          <div class=\"utu-room__foot\">\n            <p class=\"utu-room__price\">${r.price*n} \u20ac<small>${n>1?n+' y\u00f6t\u00e4 \u00b7 ':''}aamiainen sis\u00e4ltyy<\/small><\/p>\n            <span class=\"utu-room__state\">${!fits?'Enint\u00e4\u00e4n '+r.max+' hl\u00f6':sold?'Ei vapaana n\u00e4in\u00e4 p\u00e4ivin\u00e4':'Vapaana'}<\/span>\n            <div class=\"utu-room__actions\"><button type=\"button\" class=\"utu-more\" data-more>Lue lis\u00e4\u00e4<\/button><button type=\"button\" class=\"utu-btn\" data-room=\"${r.id}\"><span>Varaa<\/span><span aria-hidden=\"true\">\u2192<\/span><\/button><\/div>\n          <\/div>\n        <\/div>\n        <details><summary>Lis\u00e4tiedot<\/summary><div class=\"utu-room__long\">\n          <div>${r.long.map(p=>`<p>${p}<\/p>`).join('')}<\/div>\n          <div><h4>Huoneessa<\/h4><ul>${r.am.map(a=>`<li>${a}<\/li>`).join('')}<\/ul><\/div>\n        <\/div><\/details>\n      <\/article>`}).join('');\n  };\n  bar.addEventListener('change',render);\n  list.addEventListener('click',e=>{\n    const th=e.target.closest('[data-img]');\n    if(th){const card=th.closest('.utu-room'),im=card.querySelector('.utu-fig img');card.querySelectorAll('[data-img]').forEach(x=>x.setAttribute('aria-pressed',x===th));im.classList.add('is-swap');setTimeout(()=>{im.onload=()=>im.classList.remove('is-swap');im.src=U+th.dataset.img+q+'w=1000&h=750'},250);return}\n    const more=e.target.closest('[data-more]');\n    if(more){const d=more.closest('.utu-room').querySelector('details');d.open=!d.open;more.textContent=d.open?'Sulje':'Lue lis\u00e4\u00e4';return}\n    const b=e.target.closest(\"[data-room]\"); if(!b)return;\n    const r=ROOMS.find(x=>x.id===b.dataset.room);\n    dlg.dataset.room=r.id; dlg.querySelector('[data-name]').innerHTML=`${r.name}<small>${r.type}<\/small>`;\n    dlg.querySelector('.utu-dlg__img').src=U+r.imgs[0]+q+'w=1100&h=480';\n    book.from.value=bar.from.value; book.to.value=bar.to.value; book.from.min=book.to.min=bar.from.min;\n    book.querySelector('[data-flow]').hidden=false; book.querySelector('[data-done]').hidden=true;\n    sum(); dlg.showModal();\n  });\n  const sum=()=>{\n    const r=ROOMS.find(x=>x.id===dlg.dataset.room); if(book.to.value<=book.from.value)book.to.value=add(book.from.value,1);\n    const n=Math.max(1,Math.round((D(book.to.value)-D(book.from.value))\/864e5));\n    book.querySelector('[data-sumtxt]').textContent=`${n} ${n>1?'y\u00f6t\u00e4':'y\u00f6'} \u00b7 ${bar.guests.value} hl\u00f6 \u00b7 aamiainen sis\u00e4ltyy`;\n    book.querySelector('[data-total]').textContent=r.price*n+' \u20ac';\n  };\n  book.addEventListener('change',sum);\n  book.addEventListener('submit',e=>{e.preventDefault();if(!book.reportValidity())return;book.querySelector('[data-flow]').hidden=true;book.querySelector('[data-done]').hidden=false;book.querySelector('[data-ref]').textContent='UTU-'+Math.random().toString(36).slice(2,7).toUpperCase()});\n  dlg.addEventListener('click',e=>{if(e.target===dlg)dlg.close()});\n\n  \/\/ from the hero booking bar: \"varaa huone \u2192 huonevaihtoehdot\"\n  document.addEventListener('utu:rooms',e=>{\n    const d=e.detail||{}; if(d.from){bar.from.value=d.from; bar.to.value=d.to; bar.guests.value=d.guests}\n    render(); open(true); setTimeout(()=>panel.scrollIntoView({behavior:'smooth'}),60);\n  });\n  render();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9581cb e-con-full e-flex e-con e-parent\" data-id=\"a9581cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b2a461 elementor-widget elementor-widget-html\" data-id=\"9b2a461\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 06 VARAA SUORAAN (konversio: suoravarauksen edut + CTA) -->\n<style>\n.utu-dir{background:var(--utu-brown);color:var(--utu-cream);padding:clamp(110px,13vw,200px) var(--utu-pad)}\n.utu-dir .utu-btn--light{background:var(--utu-cream)}\n.utu-dir__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(70px,8vw,130px)}\n.utu-dir__head h2{font-size:clamp(48px,6.4vw,110px);line-height:.9;letter-spacing:-.055em;font-weight:300;max-width:12ch}\n.utu-dir__cta{display:flex;gap:10px;flex-wrap:wrap}\n.utu-dir__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,48px)}\n.utu-dir__list svg{width:30px;height:30px;stroke:var(--utu-blush);fill:none;stroke-width:1.2;margin-bottom:28px}\n.utu-dir__list h3{font-size:clamp(21px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;margin-bottom:8px}\n.utu-dir__list p{font-size:16px;color:rgba(243,234,223,.62);max-width:280px}\n@media (max-width:960px){.utu-dir__list{grid-template-columns:1fr 1fr}}\n@media (max-width:520px){.utu-dir__list{grid-template-columns:1fr}.utu-dir__cta,.utu-dir__cta .utu-btn{width:100%}}\n<\/style>\n\n<section class=\"utu-s utu-dir\">\n  <div class=\"utu-dir__head\">\n    <h2 data-utu-reveal=\"split\" data-utu-split>Varaa suoraan meilt\u00e4<\/h2>\n    <div class=\"utu-dir__cta\" data-utu-reveal>\n      <a class=\"utu-btn utu-btn--light\" href=\"\/?pagename=huoneet#huoneet\" data-open-rooms><span>Varaa y\u00f6pyminen<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a>\n      <a class=\"utu-btn utu-btn--line\" href=\"\/?pagename=brunssi#brunssi-varaus\"><span>Varaa brunssi<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a>\n    <\/div>\n  <\/div>\n  <ul class=\"utu-dir__list\" data-utu-reveal>\n    <li><svg viewBox=\"0 0 30 30\" aria-hidden=\"true\"><circle cx=\"15\" cy=\"15\" r=\"12\"\/><path d=\"M10 15.5l3.5 3.5L20.5 11\"\/><\/svg><h3>Edullisin hinta<\/h3><p>Hinta on aina v\u00e4hint\u00e4\u00e4n yht\u00e4 edullinen kuin varaussivustoilla.<\/p><\/li>\n    <li><svg viewBox=\"0 0 30 30\" aria-hidden=\"true\"><rect x=\"4\" y=\"6\" width=\"22\" height=\"20\" rx=\"1\"\/><path d=\"M4 12h22M10 3v6M20 3v6\"\/><\/svg><h3>Maksuton peruutus<\/h3><p>Huoneen voi perua maksutta 48 tuntia ennen saapumista.<\/p><\/li>\n    <li><svg viewBox=\"0 0 30 30\" aria-hidden=\"true\"><path d=\"M5 12h17v6a7 7 0 0 1-7 7h-3a7 7 0 0 1-7-7z\"\/><path d=\"M22 14h2a3 3 0 0 1 0 6h-2M11 3c-1 2 1 3 0 6M16 3c-1 2 1 3 0 6\"\/><\/svg><h3>Aamiainen mukana<\/h3><p>Jokaiseen y\u00f6h\u00f6n kuuluu aamiainen, viikonloppuisin brunssi.<\/p><\/li>\n    <li><svg viewBox=\"0 0 30 30\" aria-hidden=\"true\"><circle cx=\"15\" cy=\"15\" r=\"12\"\/><path d=\"M15 8v7l5 3\"\/><\/svg><h3>My\u00f6h\u00e4inen l\u00e4ht\u00f6<\/h3><p>Kysy my\u00f6h\u00e4ist\u00e4 uloskirjautumista. J\u00e4rjest\u00e4mme sen, jos huone ei ole heti varattu.<\/p><\/li>\n  <\/ul>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8dd0395 e-con-full e-flex e-con e-parent\" data-id=\"8dd0395\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ab1cc2 elementor-widget elementor-widget-html\" data-id=\"0ab1cc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 08 FOOTER \/ YHTEYSTIEDOT -->\n<style>\n.utu-ft{background:var(--utu-brown-d);color:var(--utu-cream);padding:clamp(110px,12vw,190px) var(--utu-pad) 28px;overflow:hidden;scroll-margin-top:60px}\n.utu-ft__top{display:grid;grid-template-columns:1fr 1.35fr;gap:40px}\n.utu-ft__lead{font-size:clamp(34px,4vw,60px);line-height:1.05;letter-spacing:-.04em;font-weight:300}\n.utu-ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;font-size:17px;line-height:1.7}\n.utu-ft__cols h4{font-size:13px;font-weight:400;color:rgba(251,248,245,.5);margin-bottom:10px;letter-spacing:.03em}\n.utu-ft__cols a{border-bottom:1px solid transparent;transition:border-color .3s}\n.utu-ft__cols a:hover{border-color:currentColor}\n.utu-ft__news{grid-column:2;display:flex;border-bottom:1px solid rgba(251,248,245,.3);margin-top:clamp(40px,5vw,70px)}\n.utu-ft__news input{flex:1;border:0;background:none;color:var(--utu-white);padding:14px 0;font-size:17px;outline:0;min-width:0}\n.utu-ft__news input::placeholder{color:rgba(251,248,245,.5)}\n.utu-ft__news button{border:0;background:none;color:var(--utu-white);cursor:pointer;font-size:17px}\n.utu-ft__mark{font-size:clamp(160px,38vw,640px);font-weight:300;letter-spacing:-.08em;line-height:.72;margin:clamp(70px,9vw,140px) 0 0 -.04em;color:rgba(243,234,223,.13)}\n.utu-ft__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:rgba(251,248,245,.55);margin-top:28px}\n.utu-ft__base nav{display:flex;gap:20px}\n@media (max-width:860px){.utu-ft__top{grid-template-columns:1fr}.utu-ft__news{grid-column:1}.utu-ft__cols{grid-template-columns:1fr 1fr}}\n<\/style>\n\n<footer class=\"utu-s utu-ft\" id=\"yhteys\">\n  <div class=\"utu-ft__top\">\n    <p class=\"utu-ft__lead\" data-utu-reveal=\"split\" data-utu-split>Yhteystiedot<\/p>\n    <div data-utu-reveal>\n      <div class=\"utu-ft__cols\">\n        <div><h4>OSOITE<\/h4><p>Utu<br>Rantatie 1<br>53100 Lappeenranta<\/p><\/div>\n        <div><h4>YHTEYS<\/h4><p><a href=\"mailto:hei@utu.fi\">hei@utu.fi<\/a><br><a href=\"tel:+358401234567\">+358 40 123 4567<\/a><br><a href=\"#\" aria-label=\"Instagram\">Instagram<\/a><\/p><\/div>\n        <div><h4>AUKIOLO<\/h4><p>Brunssi la\u2013su 10\u201315<br>Vastaanotto ma\u2013su 7\u201322<\/p><\/div>\n      <\/div>\n    <\/div>\n    <form class=\"utu-ft__news\" onsubmit=\"event.preventDefault();this.innerHTML='<p style=&quot;padding:14px 0&quot;>Kiitos tilauksesta!<\/p>'\">\n      <input type=\"email\" required placeholder=\"Tilaa uutiskirje: s\u00e4hk\u00f6postiosoite\" aria-label=\"S\u00e4hk\u00f6posti uutiskirjeeseen\">\n      <button type=\"submit\">Tilaa \u2192<\/button>\n    <\/form>\n  <\/div>\n  <p class=\"utu-ft__mark\" aria-hidden=\"true\">utu<\/p>\n  <div class=\"utu-ft__base\">\n    <span>\u00a9 2026 Utu<\/span>\n    <nav><a href=\"\/?pagename=huoneet\">Huoneet<\/a><a href=\"\/?pagename=brunssi\">Brunssi<\/a><a href=\"\/?page_id=88#lahjakortit\">Lahjakortit<\/a><a href=\"#\">Tietosuoja<\/a><\/nav>\n  <\/div>\n<\/footer>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UtuSumuPlatanin talo FI \/ EN Huoneet Brunssi Kuvat Lahjakortit Yhteystiedot utu Varaa brunssi Varaa y\u00f6pyminen utu Varaa brunssi Varaa y\u00f6pyminen Huoneet Vanhan huvilan huoneet Lappeenrannan keskustassa. Aamiainen kuuluu aina hintaan. Varaa y\u00f6pyminen\u2192 Meill\u00e4 on 12 huonetta ja nelj\u00e4 huonetyyppi\u00e4. Huoneissa on puulattiat, pellavalakanat ja kunnon s\u00e4ngyt. Aamiainen kuuluu hintaan, ja viikonloppuisin se on brunssi. Sis\u00e4\u00e4nkirjautuminen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=161"}],"version-history":[{"count":9,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/161\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}