{"id":88,"date":"2026-10-16T14:01:02","date_gmt":"2026-10-16T14:01:02","guid":{"rendered":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=88"},"modified":"2026-10-20T12:13:07","modified_gmt":"2026-10-20T12:13:07","slug":"utu","status":"publish","type":"page","link":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=88","title":{"rendered":"Utu \u2013 etusivu"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"88\" class=\"elementor elementor-88\">\n\t\t\t\t<div class=\"elementor-element elementor-element-878386a e-con-full e-flex e-con e-parent\" data-id=\"878386a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db3419e elementor-widget elementor-widget-html\" data-id=\"db3419e\" 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-ad939ad e-con-full e-flex e-con e-parent\" data-id=\"ad939ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8fb2ab elementor-widget elementor-widget-html\" data-id=\"c8fb2ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 01 HERO + BOOKING BAR -->\n<style>\n.utu-hero{position:relative;background:var(--utu-ink)}\n.utu-hero__media{position:relative;height:100svh;min-height:680px;overflow:hidden;color:var(--utu-white)}\n.utu-s .utu-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.12;animation:utuZoom 2.8s var(--utu-ease) forwards;will-change:transform}\n@keyframes utuZoom{to{scale:1.02}}\n.utu-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,239,233,.7) 0%,rgba(244,239,233,.25) 26%,rgba(244,239,233,0) 42%,rgba(30,25,22,0) 58%,rgba(30,25,22,.45) 100%)}\n.utu-haze{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.75}\n.utu-haze i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}\n.utu-haze i:nth-child(1){width:55vw;height:40vw;left:5%;top:35%;background:radial-gradient(closest-side,rgba(238,217,210,.9),transparent);animation:utuDrift 26s ease-in-out infinite alternate}\n.utu-haze i:nth-child(2){width:45vw;height:30vw;right:0;top:20%;background:radial-gradient(closest-side,rgba(255,250,245,.7),transparent);animation:utuDrift 32s ease-in-out -8s infinite alternate-reverse}\n.utu-haze i:nth-child(3){width:70vw;height:30vw;left:20%;bottom:5%;background:radial-gradient(closest-side,rgba(233,200,190,.6),transparent);animation:utuDrift 38s ease-in-out -14s infinite alternate}\n@keyframes utuDrift{0%{transform:translate3d(-6%,2%,0) scale(1)}100%{transform:translate3d(8%,-4%,0) scale(1.15)}}\n.utu-hero__top{position:absolute;top:clamp(128px,16vh,162px);left:var(--utu-pad);right:var(--utu-pad);display:flex;justify-content:space-between;align-items:start;gap:24px;color:var(--utu-ink)}\n.utu-hero__def{font-size:16px;line-height:1.45}\n.utu-hero__tag{text-align:right;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:300}\n.utu-hero__mark{position:absolute;left:calc(var(--utu-pad) - .04em);bottom:clamp(24px,5vh,56px);font-family:var(--utu-sans);font-weight:300;font-size:clamp(150px,30vw,470px);line-height:.76;letter-spacing:-.075em;color:var(--utu-white)}\n.utu-hero__mark span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}\n.utu-hero__mark span i{display:inline-block;font-style:normal;transform:translateY(105%);animation:utuRise 1.6s var(--utu-ease) forwards}\n.utu-hero__mark span:nth-child(2) i{animation-delay:.12s}.utu-hero__mark span:nth-child(3) i{animation-delay:.24s}\n@keyframes utuRise{to{transform:none}}\n.utu-first .utu-hero__mark span i{animation-delay:.95s}.utu-first .utu-hero__mark span:nth-child(2) i{animation-delay:1.07s}.utu-first .utu-hero__mark span:nth-child(3) i{animation-delay:1.19s}.utu-first .utu-book{animation-delay:1.5s}\n.utu-hero__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:14px;opacity:.9}\n\n.utu-book{position:absolute;right:var(--utu-pad);bottom:clamp(24px,5vh,56px);width:min(580px,calc(100% - 2*var(--utu-pad)));background:var(--utu-white);color:var(--utu-ink);border-radius:3px;padding:8px;box-shadow:0 30px 80px -30px rgba(42,37,34,.45);opacity:0;transform:translateY(20px);animation:utuIn 1.2s .7s var(--utu-ease) forwards;scroll-margin-top:100px}\n@keyframes utuIn{to{opacity:1;transform:none}}\n.utu-book__tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--utu-bg);border-radius:2px;padding:3px;position:relative}\n.utu-book__tabs button{position:relative;z-index:1;height:44px;border:0;background:none;cursor:pointer;font-size:15px;color:var(--utu-mute);transition:color .4s}\n.utu-book__tabs button[aria-selected=true]{color:var(--utu-ink)}\n.utu-book__pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--utu-white);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .5s var(--utu-ease)}\n.utu-book[data-mode=huone] .utu-book__pill{transform:translateX(100%)}\n.utu-book__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--utu-line);margin:8px 0;border-block:1px solid var(--utu-line)}\n.utu-book__row[hidden]{display:none}\n.utu-f{background:var(--utu-white);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}\n.utu-f span{font-size:13px;color:var(--utu-mute)}\n.utu-f input,.utu-f select{border:0;background:none;padding:0;font-size:17px;outline:0;width:100%;min-width:0;cursor:pointer;-webkit-appearance:none;appearance:none}\n.utu-book .utu-btn{width:100%}\n.utu-book__note{font-size:13px;color:var(--utu-mute);text-align:center;padding:10px 0 4px}\n\n@media (max-width:860px){\n  .utu-hero__media{height:88svh;min-height:560px}\n  .utu-hero__top{flex-direction:column}\n  .utu-hero__tag{text-align:left;font-size:28px}\n  .utu-hero__mark{font-size:clamp(130px,44vw,300px)}\n  .utu-hero__scroll{display:none}\n  .utu-book{position:relative;right:auto;bottom:auto;margin:-36px auto 0;width:calc(100% - 2*var(--utu-pad));z-index:2}\n  .utu-hero{background:var(--utu-bg);padding-bottom:24px}\n}\n@media (max-width:480px){.utu-book__row{grid-template-columns:1fr 1fr}.utu-book__row .utu-f:first-child{grid-column:1\/-1}}\n<\/style>\n\n<section class=\"utu-s utu-hero\" id=\"top\">\n  <div class=\"utu-hero__media\">\n    <img decoding=\"async\" class=\"utu-hero__img\" alt=\"Usvainen j\u00e4rvi aamulla\"\n      src=\"https:\/\/images.unsplash.com\/photo-1671485927315-f56c7a65a051?auto=format&fit=crop&w=1800&q=72\"\n      srcset=\"https:\/\/images.unsplash.com\/photo-1671485927315-f56c7a65a051?auto=format&fit=crop&w=900&q=70 900w,https:\/\/images.unsplash.com\/photo-1671485927315-f56c7a65a051?auto=format&fit=crop&w=1800&q=72 1800w,https:\/\/images.unsplash.com\/photo-1671485927315-f56c7a65a051?auto=format&fit=crop&w=2600&q=70 2600w\"\n      sizes=\"100vw\" fetchpriority=\"high\">\n    <div class=\"utu-haze\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/div>\n    <div class=\"utu-hero__shade\"><\/div>\n    <div class=\"utu-hero__top\">\n      <p class=\"utu-hero__def\">Boutique-hotelli<br>Lappeenranta<\/p>\n      <p class=\"utu-hero__tag\">Brunssi viikonloppuisin.<br>Huoneet joka y\u00f6.<\/p>\n    <\/div>\n    <h1 class=\"utu-hero__mark\" aria-label=\"utu\"><span><i>u<\/i><\/span><span><i>t<\/i><\/span><span><i>u<\/i><\/span><\/h1>\n    <span class=\"utu-hero__scroll\">(Vierit\u00e4 alas)<\/span>\n  <\/div>\n\n  <form class=\"utu-book\" id=\"varaa\" data-mode=\"brunssi\" novalidate>\n    <div class=\"utu-book__tabs\" role=\"tablist\">\n      <span class=\"utu-book__pill\"><\/span>\n      <button type=\"button\" role=\"tab\" aria-selected=\"true\" data-tab=\"brunssi\">Varaa brunssi<\/button>\n      <button type=\"button\" role=\"tab\" aria-selected=\"false\" data-tab=\"huone\">Varaa huone<\/button>\n    <\/div>\n    <div class=\"utu-book__row\" data-panel=\"brunssi\">\n      <label class=\"utu-f\"><span>P\u00e4iv\u00e4<\/span><input type=\"date\" name=\"b_date\"><\/label>\n      <label class=\"utu-f\"><span>Kattaus<\/span><select name=\"b_time\"><option>10.00<\/option><option selected>11.30<\/option><option>13.00<\/option><\/select><\/label>\n      <label class=\"utu-f\"><span>Henkil\u00f6t<\/span><select name=\"b_guests\"><option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><option>6<\/option><option>7<\/option><option>8+<\/option><\/select><\/label>\n    <\/div>\n    <div class=\"utu-book__row\" data-panel=\"huone\" hidden>\n      <label class=\"utu-f\"><span>Saapuminen<\/span><input type=\"date\" name=\"r_in\"><\/label>\n      <label class=\"utu-f\"><span>L\u00e4ht\u00f6<\/span><input type=\"date\" name=\"r_out\"><\/label>\n      <label class=\"utu-f\"><span>Aikuiset<\/span><select name=\"r_guests\"><option>1<\/option><option selected>2<\/option><option>3<\/option><option>4<\/option><\/select><\/label>\n    <\/div>\n    <button class=\"utu-btn\" type=\"submit\"><span data-cta>Etsi vapaa p\u00f6yt\u00e4<\/span><span aria-hidden=\"true\">\u2192<\/span><\/button>\n    <p class=\"utu-book__note\">Ei varausmaksua. Voit perua maksutta vuorokautta ennen.<\/p>\n  <\/form>\n<\/section>\n\n<script>\n(()=>{\n  const f=document.getElementById('varaa'); if(!f||f.dataset.ready)return; f.dataset.ready=1;\n  const iso=d=>d.toLocaleDateString('sv-SE'), day=n=>{const d=new Date();d.setDate(d.getDate()+n);return iso(d)};\n  \/\/ next Saturday for brunch, tonight\u2192tomorrow for rooms\n  const sat=(()=>{const d=new Date();d.setDate(d.getDate()+((6-d.getDay()+7)%7||7));return iso(d)})();\n  f.b_date.value=sat; f.r_in.value=day(0); f.r_out.value=day(1);\n  [f.b_date,f.r_in,f.r_out].forEach(i=>i.min=day(0));\n  f.r_in.addEventListener('change',()=>{if(f.r_out.value<=f.r_in.value){const d=new Date(f.r_in.value+'T12:00');d.setDate(d.getDate()+1);f.r_out.value=iso(d)}f.r_out.min=f.r_in.value});\n  const cta=f.querySelector('[data-cta]');\n  const setMode=m=>{f.dataset.mode=m;f.querySelectorAll('[data-tab]').forEach(b=>b.setAttribute('aria-selected',b.dataset.tab===m));f.querySelectorAll('[data-panel]').forEach(p=>p.hidden=p.dataset.panel!==m);cta.textContent=m==='huone'?'N\u00e4yt\u00e4 vapaat huoneet':'Etsi vapaa p\u00f6yt\u00e4'};\n  f.querySelectorAll('[data-tab]').forEach(b=>b.addEventListener('click',()=>setMode(b.dataset.tab)));\n  \/\/ scroll parallax: photo drifts slower, wordmark and text lift and fade\n  const hero=document.getElementById('top'), img=hero.querySelector('.utu-hero__img'), mark=hero.querySelector('.utu-hero__mark'), top=hero.querySelector('.utu-hero__top');\n  if(!matchMedia('(prefers-reduced-motion:reduce)').matches){let raf=0;const run=()=>{raf=0;const y=Math.min(scrollY,innerHeight);img.style.transform=`translate3d(0,${y*.3}px,0)`;mark.style.transform=`translate3d(0,${y*-.12}px,0)`;top.style.opacity=Math.max(0,1-y\/(innerHeight*.45))};addEventListener('scroll',()=>raf||(raf=requestAnimationFrame(run)),{passive:true})}\n  f.addEventListener('submit',e=>{\n    e.preventDefault();\n    \/\/ rooms and brunch booking live on their own pages; hand the choice over in the URL\n    const r=f.dataset.mode==='huone', d=r?{from:f.r_in.value,to:f.r_out.value,guests:f.r_guests.value}:{date:f.b_date.value,time:f.b_time.value,guests:f.b_guests.value};\n    if(document.getElementById(r?'huoneet':'brunssi-varaus')) document.dispatchEvent(new CustomEvent(r?'utu:rooms':'utu:brunch',{detail:d}));\n    else location.href='\/?pagename='+(r?'huoneet':'brunssi')+'&'+new URLSearchParams(d)+(r?'#huoneet':'#brunssi-varaus');\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f5ee55 e-con-full e-flex e-con e-parent\" data-id=\"4f5ee55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d07d304 elementor-widget elementor-widget-html\" data-id=\"d07d304\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 02 INTRO -->\n<style>\n.utu-intro{padding:clamp(130px,15vw,240px) var(--utu-pad) clamp(100px,11vw,170px);display:grid;grid-template-columns:1fr 1.6fr;gap:40px}\n.utu-intro__body{grid-column:2;grid-row:1}\n.utu-intro__fig{grid-column:1;grid-row:1;align-self:end;width:min(100%,300px);margin:0}\n.utu-intro__fig .utu-fig{aspect-ratio:3\/4}\n.utu-intro__lead{font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:-.03em;font-weight:300}\n.utu-intro__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(70px,8vw,130px)}\n.utu-intro__facts dt{font-size:14px;color:var(--utu-mute);margin-bottom:6px}\n.utu-intro__facts dd{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.015em;line-height:1.3}\n@media (max-width:860px){.utu-intro{grid-template-columns:1fr}.utu-intro__body{grid-column:1}.utu-intro__fig{grid-row:2;width:62%;margin-top:30px}.utu-intro__facts{grid-template-columns:1fr 1fr}}\n<\/style>\n\n<section class=\"utu-s utu-intro\">\n  <figure class=\"utu-intro__fig\" data-utu-reveal><div class=\"utu-fig utu-par\"><img decoding=\"async\" loading=\"lazy\" alt=\"Keramiikkamuki ja mustikoita\" src=\"https:\/\/images.unsplash.com\/photo-1659355110966-42fe631ffb9a?auto=format&fit=crop&w=600&h=800&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Paikallinen keramiikka<\/span><span>Utu<\/span><\/figcaption><\/figure>\n  <div class=\"utu-intro__body\">\n    <p class=\"utu-intro__lead\" data-utu-reveal=\"split\" data-utu-split style=\"--utu-stagger:14ms\">Utu on pieni boutique-hotelli historiallisessa Villa Platanissa Lappeenrannassa. Aamuisin katamme aamupalan, viikonloppuisin brunssin, ja illallisen saa samasta talosta Ravintola Sumusta.<\/p>\n    <dl class=\"utu-intro__facts\" data-utu-reveal>\n      <div><dt>Brunssi<\/dt><dd>La\u2013su klo 10\u201315<\/dd><\/div>\n      <div><dt>Huoneet<\/dt><dd>Aamiainen kuuluu hintaan<\/dd><\/div>\n      <div><dt>Illallinen<\/dt><dd>Ravintola Sumussa<\/dd><\/div>\n    <\/dl>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc3c16f e-con-full e-flex e-con e-parent\" data-id=\"fc3c16f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-460bdbf elementor-widget elementor-widget-html\" data-id=\"460bdbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 02b ETUSIVUN KOLME OVEA (Huoneet \u00b7 Brunssi \u00b7 Illallinen Sumussa \u2192 omat sivut) -->\n<style>\n.utu-ent{padding:clamp(40px,5vw,80px) var(--utu-pad) clamp(120px,13vw,210px)}\n.utu-ent__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}\n.utu-ent__card .utu-fig{aspect-ratio:4\/5;display:block}\n.utu-ent__card h2{font-size:clamp(30px,2.8vw,46px);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin:clamp(20px,2vw,28px) 0 10px}\n.utu-ent__card p{font-size:17px;color:#5e5450;max-width:34ch;min-height:3.2em}\n.utu-ent__act{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:24px}\n.utu-ent__act .utu-btn{height:48px}\n.utu-ent__more{font-size:16px;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size .5s var(--utu-ease)}\n.utu-ent__more:hover{background-size:100% 1px}\n@media (max-width:900px){.utu-ent__grid{grid-template-columns:1fr;gap:clamp(60px,10vw,90px)}.utu-ent__card p{min-height:0}}\n<\/style>\n\n<section class=\"utu-s utu-ent\" id=\"utu\">\n  <div class=\"utu-ent__grid\">\n    <article class=\"utu-ent__card\" data-utu-reveal>\n      <a class=\"utu-fig utu-par\" href=\"\/?pagename=huoneet\" aria-label=\"Huoneet\"><img decoding=\"async\" loading=\"lazy\" alt=\"Aamuvalo huoneessa\" src=\"https:\/\/images.unsplash.com\/photo-1780672823770-dc40e2181cdf?auto=format&fit=crop&w=900&h=1125&q=70\"><\/a>\n      <h2>Huoneet<\/h2>\n      <p>Nelj\u00e4 huonetyyppi\u00e4 vanhassa huvilassa. Aamiainen kuuluu aina hintaan.<\/p>\n      <div class=\"utu-ent__act\"><a class=\"utu-btn\" href=\"\/?pagename=huoneet#huoneet\" data-open-rooms><span>Varaa y\u00f6pyminen<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a><a class=\"utu-ent__more\" href=\"\/?pagename=huoneet\">Tutustu huoneisiin<\/a><\/div>\n    <\/article>\n    <article class=\"utu-ent__card\" data-utu-reveal>\n      <a class=\"utu-fig utu-par\" href=\"\/?pagename=brunssi\" aria-label=\"Brunssi\"><img decoding=\"async\" loading=\"lazy\" alt=\"Pannukakkuja, viikunoita ja marjoja\" src=\"https:\/\/images.unsplash.com\/photo-1623847965554-bf6dfffcc558?auto=format&fit=crop&w=900&h=1125&q=70\"><\/a>\n      <h2>Brunssi<\/h2>\n      <p>Aamupala joka aamu, brunssi lauantaisin ja sunnuntaisin.<\/p>\n      <div class=\"utu-ent__act\"><a class=\"utu-btn\" href=\"\/?pagename=brunssi#brunssi-varaus\"><span>Varaa brunssi<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a><a class=\"utu-ent__more\" href=\"\/?pagename=brunssi\">Katso menu<\/a><\/div>\n    <\/article>\n    <article class=\"utu-ent__card\" data-utu-reveal>\n      <a class=\"utu-fig utu-par\" href=\"#\" aria-label=\"Ravintola Sumu\"><img decoding=\"async\" loading=\"lazy\" alt=\"Annos tummalla lautasella\" src=\"https:\/\/images.unsplash.com\/photo-1593854989775-ae5e4d9e49e9?auto=format&fit=crop&w=900&h=1125&q=70\"><\/a>\n      <h2>Illallinen Sumussa<\/h2>\n      <p>Ravintola Sumu samassa talossa. Pohjoismaista ruokaa illan rauhassa.<\/p>\n      <div class=\"utu-ent__act\"><a class=\"utu-btn\" href=\"#\"><span>Tutustu Sumuun<\/span><span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n    <\/article>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a826db6 e-con-full e-flex e-con e-parent\" data-id=\"a826db6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf4e3b7 elementor-widget elementor-widget-html\" data-id=\"bf4e3b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 07 GALLERIA (desktop: pinned horizontal scroll \u00b7 mobile: swipe) -->\n<style>\n.utu-gal{position:relative;background:var(--utu-bg)}\n.utu-gal__pin{padding:clamp(80px,9vw,130px) 0 clamp(70px,8vw,110px);overflow:hidden}\n.utu-gal__track{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);padding:0 var(--utu-pad);will-change:transform}\n.utu-gal__intro{flex:0 0 clamp(280px,30vw,460px);align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-right:clamp(10px,3vw,50px)}\n.utu-gal__intro h2{font-size:clamp(52px,6.4vw,110px);line-height:.9;letter-spacing:-.055em;font-weight:300}\n.utu-gal__intro p{font-size:18px;max-width:340px;color:#5e5450}\n.utu-gal__item{flex:0 0 auto;margin:0}\n.utu-gal__item .utu-fig{height:clamp(380px,62vh,640px);aspect-ratio:4\/5}\n.utu-gal__item--w .utu-fig{aspect-ratio:3\/2}\n.utu-gal__bar{display:flex;justify-content:flex-end;padding:clamp(28px,4vh,44px) var(--utu-pad) 0;font-size:14px;color:var(--utu-mute)}\n@media (min-width:861px){\n  .utu-gal.is-pinned .utu-gal__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0}\n}\n@media (max-width:860px){\n  .utu-gal__track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--utu-pad);scrollbar-width:none;flex-wrap:nowrap}\n  .utu-gal__track::-webkit-scrollbar{display:none}\n  .utu-gal__intro{flex-basis:78vw;scroll-snap-align:start}\n  .utu-gal__item{scroll-snap-align:start}\n  .utu-gal__item .utu-fig,.utu-gal__item--w .utu-fig{height:auto;width:78vw;aspect-ratio:4\/5}\n}\n<\/style>\n\n<section class=\"utu-s utu-gal\" id=\"kuvat\">\n  <div class=\"utu-gal__pin\">\n    <div class=\"utu-gal__track\">\n      <div class=\"utu-gal__intro\">\n        <h2 data-utu-reveal=\"split\" data-utu-split>Kuvia Utusta<\/h2>\n        <p data-utu-reveal>Talo on j\u00e4rven rannalla. Pihalla on rantasauna ja laituri, ja syksyn aamuina j\u00e4rvelt\u00e4 nousee usein usva.<\/p>\n      <\/div>\n      <figure class=\"utu-gal__item utu-gal__item--w\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Usvainen j\u00e4rvi aamulla\" src=\"https:\/\/images.unsplash.com\/photo-1634023233766-0c16b151bfb0?auto=format&fit=crop&w=1300&h=870&q=70\"><\/div><figcaption class=\"utu-cap\"><span>J\u00e4rvi aamulla<\/span><span>01<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Korvapuusti ja kahvi ikkunalaudalla\" src=\"https:\/\/images.unsplash.com\/photo-1766350731223-79313d2e68e5?auto=format&fit=crop&w=800&h=1000&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Korvapuusti ja kahvi<\/span><span>02<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Rantasauna ja kamina\" src=\"https:\/\/images.unsplash.com\/photo-1728404259075-209cfb5bb89c?auto=format&fit=crop&w=800&h=1000&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Rantasauna<\/span><span>03<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item utu-gal__item--w\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Laituri tyynell\u00e4 j\u00e4rvell\u00e4\" src=\"https:\/\/images.unsplash.com\/photo-1616430303525-b70c1524c5cd?auto=format&fit=crop&w=1300&h=870&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Laituri<\/span><span>04<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Kylpyamme kivikylpyhuoneessa\" src=\"https:\/\/images.unsplash.com\/photo-1644068298141-6333cb147520?auto=format&fit=crop&w=800&h=1000&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Kylpyhuone, Kaste<\/span><span>05<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Katettu brunssip\u00f6yt\u00e4\" src=\"https:\/\/images.unsplash.com\/photo-1558497446-1fd7429d9be4?auto=format&fit=crop&w=800&h=1000&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Brunssip\u00f6yt\u00e4<\/span><span>06<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item utu-gal__item--w\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"L\u00f6yly\u00e4 kiukaalle\" src=\"https:\/\/images.unsplash.com\/photo-1676452458169-318fd3b9a98f?auto=format&fit=crop&w=1300&h=870&q=70\"><\/div><figcaption class=\"utu-cap\"><span>L\u00f6ylyt<\/span><span>07<\/span><\/figcaption><\/figure>\n      <figure class=\"utu-gal__item\" data-utu-reveal><div class=\"utu-fig\"><img decoding=\"async\" loading=\"lazy\" alt=\"Suodatinkahvia kaadetaan kuppiin\" src=\"https:\/\/images.unsplash.com\/photo-1620051787220-50768889e32c?auto=format&fit=crop&w=800&h=1000&q=70\"><\/div><figcaption class=\"utu-cap\"><span>Suodatinkahvi<\/span><span>08<\/span><\/figcaption><\/figure>\n    <\/div>\n    <div class=\"utu-gal__bar\"><span data-count>01 \/ 08<\/span><\/div>\n  <\/div>\n<\/section>\n\n<script>\n(()=>{\n  const s=document.getElementById('kuvat'); if(!s||s.dataset.ready)return; s.dataset.ready=1;\n  const track=s.querySelector('.utu-gal__track'), count=s.querySelector('[data-count]'), n=s.querySelectorAll('.utu-gal__item').length;\n  const mq=matchMedia('(min-width:861px) and (prefers-reduced-motion:no-preference)');\n  const show=p=>{count.textContent=String(Math.min(n,Math.floor(p*n)+1)).padStart(2,'0')+' \/ '+String(n).padStart(2,'0')};\n  let dist=0, raf=0;\n  const fit=()=>{\n    const on=mq.matches; s.classList.toggle('is-pinned',on);\n    if(!on){s.style.height='';track.style.transform='';return}\n    dist=Math.max(0,track.scrollWidth-innerWidth); s.style.height=(dist+innerHeight)+'px'; run();\n  };\n  const run=()=>{raf=0;\n    if(!s.classList.contains('is-pinned'))return;\n    const p=Math.min(1,Math.max(0,-s.getBoundingClientRect().top\/(s.offsetHeight-innerHeight||1)));\n    track.style.transform=`translate3d(${-p*dist}px,0,0)`; show(p);\n  };\n  addEventListener('scroll',()=>raf||(raf=requestAnimationFrame(run)),{passive:true});\n  addEventListener('resize',fit); addEventListener('load',fit); mq.addEventListener('change',fit);\n  \/\/ mobile: progress follows the swipe\n  track.addEventListener('scroll',()=>{if(!s.classList.contains('is-pinned'))show(track.scrollLeft\/Math.max(1,track.scrollWidth-track.clientWidth))},{passive:true});\n  fit();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5052ea0 e-con-full e-flex e-con e-parent\" data-id=\"5052ea0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a61972 elementor-widget elementor-widget-html\" data-id=\"1a61972\" 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-643bb88 e-con-full e-flex e-con e-parent\" data-id=\"643bb88\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2332cf2 elementor-widget elementor-widget-html\" data-id=\"2332cf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 07 LAHJAKORTIT (mockup \u2013 kassa ja QR kytket\u00e4\u00e4n verkkokauppaan my\u00f6hemmin) -->\n<style>\n.utu-gc{background:var(--utu-sand);padding:clamp(120px,13vw,210px) var(--utu-pad);scroll-margin-top:60px}\n.utu-gc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}\n.utu-gc__stage{perspective:1400px;display:grid;place-items:center;padding:clamp(10px,4vw,60px) 0}\n.utu-card{width:min(440px,100%);aspect-ratio:1.586;border-radius:14px;background:linear-gradient(135deg,#F3DED7 0%,#E9CFC6 45%,#F6EBE5 100%);color:var(--utu-ink);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 50px 90px -40px rgba(120,80,70,.55),inset 0 1px 0 rgba(255,255,255,.6);transform:rotateX(8deg) rotateY(-14deg);transition:transform .8s var(--utu-ease)}\n.utu-card::before{content:\"\";position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);transform:translate(var(--gx,20%),var(--gy,-10%));transition:transform .8s var(--utu-ease);pointer-events:none}\n.utu-card__top{display:flex;justify-content:space-between;align-items:start;position:relative}\n.utu-card__logo{font-size:clamp(38px,4vw,54px);font-weight:300;letter-spacing:-.07em;line-height:.8}\n.utu-card__lbl{font-size:11px;text-align:right;line-height:1.4;letter-spacing:.04em}\n.utu-card__bot{display:flex;justify-content:space-between;align-items:end;position:relative;gap:12px}\n.utu-card__val{font-size:clamp(28px,3.4vw,44px);font-weight:300;letter-spacing:-.04em;line-height:1}\n.utu-card__val.is-txt{font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em}\n.utu-card__to{font-size:13px;margin-top:6px;opacity:.75;min-height:1.4em}\n.utu-card svg{width:clamp(64px,7vw,84px);height:auto;background:var(--utu-white);padding:6px;border-radius:4px}\n.utu-gc__h{font-size:clamp(48px,6vw,96px);line-height:.92;letter-spacing:-.05em;font-weight:300;margin:0 0 22px}\n.utu-gc__lead{max-width:480px;color:#5e5450;margin-bottom:32px;font-size:18px}\n.utu-gc__amts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}\n.utu-gc__amts button{border:1px solid rgba(42,37,34,.2);background:none;border-radius:2px;padding:14px;text-align:left;cursor:pointer;transition:background .3s,color .3s,border-color .3s}\n.utu-gc__amts b{display:block;font-weight:400;font-size:21px;letter-spacing:-.02em}\n.utu-gc__amts small{font-size:13px;color:var(--utu-mute)}\n.utu-gc__amts button:hover{border-color:var(--utu-ink)}\n.utu-gc__amts [aria-pressed=true]{background:var(--utu-ink);color:var(--utu-white);border-color:var(--utu-ink)}\n.utu-gc__amts [aria-pressed=true] small{color:rgba(255,255,255,.6)}\n.utu-gc__f{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}\n.utu-gc__f label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--utu-mute)}\n.utu-gc__f .wide{grid-column:1\/-1}\n.utu-gc__f input{border:0;border-bottom:1px solid rgba(42,37,34,.2);background:none;padding:8px 0;font-size:17px;color:var(--utu-ink);outline:0}\n.utu-gc__f input:focus{border-color:var(--utu-ink)}\n.utu-gc__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(90px,10vw,160px)}\n.utu-gc__steps span{font-size:14px;color:var(--utu-mute)}\n.utu-gc__steps h4{font-size:clamp(21px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;margin:10px 0 6px}\n.utu-gc__steps p{font-size:16px;color:#5e5450;max-width:320px}\n.utu-gc__ok{background:var(--utu-white);border-radius:3px;padding:26px;font-size:16px}\n.utu-gc__ok b{display:block;font-size:28px;font-weight:300;letter-spacing:-.03em;margin:0 0 6px}\n@media (max-width:960px){.utu-gc__grid{grid-template-columns:1fr}.utu-gc__stage{order:-1}}\n@media (max-width:600px){.utu-gc__amts{grid-template-columns:1fr 1fr}.utu-gc__f{grid-template-columns:1fr}.utu-gc__steps{grid-template-columns:1fr}.utu-card{transform:none}}\n<\/style>\n\n<section class=\"utu-s utu-gc\" id=\"lahjakortit\">\n  <div class=\"utu-gc__grid\">\n    <div class=\"utu-gc__stage\" data-utu-reveal>\n      <div class=\"utu-card\" aria-label=\"Lahjakortin esikatselu\">\n        <div class=\"utu-card__top\"><span class=\"utu-card__logo\">utu<\/span><span class=\"utu-card__lbl\">LAHJAKORTTI<br><span data-code><\/span><\/span><\/div>\n        <div class=\"utu-card__bot\"><div><div class=\"utu-card__val\" data-val><\/div><div class=\"utu-card__to\" data-to><\/div><\/div><svg viewBox=\"0 0 25 25\" shape-rendering=\"crispEdges\" data-qr aria-hidden=\"true\"><\/svg><\/div>\n      <\/div>\n    <\/div>\n\n    <form data-utu-reveal novalidate>\n      <h2 class=\"utu-gc__h\" data-utu-reveal=\"split\" data-utu-split>Lahjakortit<\/h2>\n      <p class=\"utu-gc__lead\">Lahjakortilla voi maksaa brunssin tai y\u00f6pymisen. Kortti tulee s\u00e4hk\u00f6postiin heti maksun j\u00e4lkeen, ja siin\u00e4 on QR-koodi, jonka n\u00e4yt\u00e4t ravintolassa tai vastaanotossa.<\/p>\n      <div data-flow>\n        <div class=\"utu-gc__amts\" role=\"group\" aria-label=\"Valitse lahja\">\n          <button type=\"button\" data-v=\"50\" aria-pressed=\"false\"><b>50 \u20ac<\/b><small>Vapaa summa<\/small><\/button>\n          <button type=\"button\" data-v=\"100\" aria-pressed=\"true\"><b>100 \u20ac<\/b><small>Vapaa summa<\/small><\/button>\n          <button type=\"button\" data-v=\"150\" aria-pressed=\"false\"><b>150 \u20ac<\/b><small>Vapaa summa<\/small><\/button>\n          <button type=\"button\" data-v=\"104\" data-t=\"Brunssi kahdelle\" aria-pressed=\"false\"><b>104 \u20ac<\/b><small>Brunssi kahdelle<\/small><\/button>\n          <button type=\"button\" data-v=\"199\" data-t=\"Y\u00f6 Usvassa\" aria-pressed=\"false\"><b>199 \u20ac<\/b><small>Y\u00f6 Usvassa<\/small><\/button>\n          <button type=\"button\" data-v=\"349\" data-t=\"Y\u00f6 Aamu-sviitiss\u00e4\" aria-pressed=\"false\"><b>349 \u20ac<\/b><small>Y\u00f6 Aamu-sviitiss\u00e4<\/small><\/button>\n        <\/div>\n        <div class=\"utu-gc__f\">\n          <label>Kenelle<input name=\"to\" maxlength=\"28\"><\/label>\n          <label>Kenelt\u00e4<input name=\"from\" maxlength=\"28\"><\/label>\n          <label class=\"wide\">S\u00e4hk\u00f6postisi, kortti l\u00e4hetet\u00e4\u00e4n t\u00e4h\u00e4n<input name=\"email\" type=\"email\" required autocomplete=\"email\"><\/label>\n        <\/div>\n        <button class=\"utu-btn\" type=\"submit\"><span>Siirry kassalle \u00b7 <span data-sum>100 \u20ac<\/span><\/span><span aria-hidden=\"true\">\u2192<\/span><\/button>\n      <\/div>\n      <div class=\"utu-gc__ok\" data-done hidden aria-live=\"polite\"><b>Kiitos tilauksesta!<\/b>Lahjakortti on l\u00e4hetetty s\u00e4hk\u00f6postiisi. Voit tulostaa sen tai n\u00e4ytt\u00e4\u00e4 QR-koodin puhelimesta.<\/div>\n    <\/form>\n  <\/div>\n\n  <div class=\"utu-gc__steps\" data-utu-reveal>\n    <div><span>01<\/span><h4>Valitse summa<\/h4><p>Valitse rahasumma tai valmis lahja, esimerkiksi brunssi kahdelle.<\/p><\/div>\n    <div><span>02<\/span><h4>Maksa<\/h4><p>Maksat kassalla tavallisilla maksutavoilla. Kortti on voimassa 12 kuukautta.<\/p><\/div>\n    <div><span>03<\/span><h4>K\u00e4yt\u00e4<\/h4><p>N\u00e4yt\u00e4 QR-koodi paikan p\u00e4\u00e4ll\u00e4. Skannaamme sen ja k\u00e4ytt\u00e4m\u00e4tt\u00e4 j\u00e4\u00e4nyt saldo s\u00e4ilyy kortilla.<\/p><\/div>\n  <\/div>\n<\/section>\n\n<script>\n(()=>{\n  const s=document.getElementById('lahjakortit'); if(!s||s.dataset.ready)return; s.dataset.ready=1;\n  const f=s.querySelector('form'), card=s.querySelector('.utu-card'), qr=s.querySelector('[data-qr]');\n  const code='UTU-'+Math.random().toString(36).slice(2,6).toUpperCase()+'-'+Math.random().toString(36).slice(2,6).toUpperCase();\n  s.querySelector('[data-code]').textContent=code;\n  \/\/ ponytail: decorative QR pattern for the mockup \u2013 the shop backend must generate the real scannable code\n  let seed=[...code].reduce((a,c)=>a*31+c.charCodeAt(0),7)>>>0; const rnd=()=>(seed=(seed*1664525+1013904223)>>>0)\/4294967296;\n  const finder=(x,y)=>`<rect x=\"${x}\" y=\"${y}\" width=\"7\" height=\"7\"\/><rect x=\"${x+1}\" y=\"${y+1}\" width=\"5\" height=\"5\" fill=\"#fff\"\/><rect x=\"${x+2}\" y=\"${y+2}\" width=\"3\" height=\"3\"\/>`;\n  let m='';for(let y=0;y<25;y++)for(let x=0;x<25;x++){const inF=(x<8&&y<8)||(x>16&&y<8)||(x<8&&y>16);if(!inF&&rnd()>.52)m+=`<rect x=\"${x}\" y=\"${y}\" width=\"1\" height=\"1\"\/>`}\n  qr.innerHTML=`<g fill=\"#2A2522\">${finder(0,0)+finder(18,0)+finder(0,18)+m}<\/g>`;\n  const st={v:100,t:''};\n  const paint=()=>{const v=s.querySelector('[data-val]');v.textContent=st.t||st.v+' \u20ac';v.classList.toggle('is-txt',!!st.t);s.querySelector('[data-sum]').textContent=st.v+' \u20ac';\n    const to=f.to.value.trim(), from=f.from.value.trim(); s.querySelector('[data-to]').textContent=to?`${to}${from?', '+from:''}`:''};\n  s.querySelectorAll('[data-v]').forEach(b=>b.addEventListener('click',()=>{s.querySelectorAll('[data-v]').forEach(x=>x.setAttribute('aria-pressed',x===b));st.v=+b.dataset.v;st.t=b.dataset.t||'';paint()}));\n  f.addEventListener('input',paint);\n  f.addEventListener('submit',e=>{e.preventDefault();if(!f.reportValidity())return;s.querySelector('[data-flow]').hidden=true;s.querySelector('[data-done]').hidden=false});\n  \/\/ gentle tilt toward the pointer\n  if(matchMedia('(hover:hover)').matches){\n    const stage=s.querySelector('.utu-gc__stage');\n    stage.addEventListener('pointermove',e=>{const r=stage.getBoundingClientRect(),x=(e.clientX-r.left)\/r.width-.5,y=(e.clientY-r.top)\/r.height-.5;card.style.transform=`rotateX(${-y*14}deg) rotateY(${x*18}deg)`;card.style.setProperty('--gx',x*60+'%');card.style.setProperty('--gy',y*60+'%')});\n    stage.addEventListener('pointerleave',()=>{card.style.transform='';card.style.removeProperty('--gx');card.style.removeProperty('--gy')});\n  }\n  paint();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2a1b53 e-con-full e-flex e-con e-parent\" data-id=\"d2a1b53\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce2d40e elementor-widget elementor-widget-html\" data-id=\"ce2d40e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- UTU \u00b7 09 USEIN KYSYTTY\u00c4 -->\n<style>\n.utu-faq{padding:clamp(120px,13vw,210px) var(--utu-pad);display:grid;grid-template-columns:1fr 1.6fr;gap:40px;interpolate-size:allow-keywords;scroll-margin-top:60px}\n.utu-faq h2{font-size:clamp(48px,6vw,96px);line-height:.92;letter-spacing:-.05em;font-weight:300;align-self:start}\n.utu-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;font-weight:300}\n.utu-faq summary::-webkit-details-marker{display:none}\n.utu-faq summary i{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--utu-line);position:relative;transition:transform .5s var(--utu-ease),background .3s}\n.utu-faq summary i::before,.utu-faq summary i::after{content:\"\";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--utu-ink);transform:translate(-50%,-50%)}\n.utu-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}\n.utu-faq summary:hover i{background:var(--utu-white)}\n.utu-faq details[open] summary i{transform:rotate(45deg)}\n.utu-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--utu-ease),content-visibility .5s allow-discrete}\n.utu-faq details[open]::details-content{block-size:auto}\n.utu-faq details p{padding:0 60px 28px 0;font-size:17px;color:#5e5450;max-width:680px}\n.utu-faq__more{grid-column:2;font-size:17px;margin-top:8px}\n.utu-faq__more a{border-bottom:1px solid currentColor}\n@media (max-width:860px){.utu-faq{grid-template-columns:1fr}.utu-faq__more{grid-column:1}.utu-faq details p{padding-right:0}}\n<\/style>\n\n<section class=\"utu-s utu-faq\" id=\"ukk\">\n  <h2 data-utu-reveal=\"split\" data-utu-split>Usein kysytty\u00e4<\/h2>\n  <div class=\"utu-faq__list\" data-utu-reveal>\n    <details><summary>Pit\u00e4\u00e4k\u00f6 brunssi varata etuk\u00e4teen?<i aria-hidden=\"true\"><\/i><\/summary><p>Suosittelemme varaamaan, koska viikonloput t\u00e4yttyv\u00e4t usein. Jos p\u00f6yti\u00e4 on vapaana, otamme mielell\u00e4mme vastaan my\u00f6s ilman varausta.<\/p><\/details>\n    <details><summary>Onko brunssilla gluteenittomia ja vegaanisia vaihtoehtoja?<i aria-hidden=\"true\"><\/i><\/summary><p>On. Kirjoita allergiat ja ruokavaliot varauksen lis\u00e4tietoihin, niin keitti\u00f6 valmistautuu niihin etuk\u00e4teen.<\/p><\/details>\n    <details><summary>Mihin aikaan huoneeseen p\u00e4\u00e4see?<i aria-hidden=\"true\"><\/i><\/summary><p>Huoneet ovat valmiina klo 15. Laukut voi j\u00e4tt\u00e4\u00e4 vastaanottoon jo aamulla, ja uloskirjautuminen on klo 12.<\/p><\/details>\n    <details><summary>Onko pys\u00e4k\u00f6inti\u00e4?<i aria-hidden=\"true\"><\/i><\/summary><p>Pihalla on maksuton pys\u00e4k\u00f6inti ja kaksi s\u00e4hk\u00f6auton latauspistett\u00e4.<\/p><\/details>\n    <details><summary>Saako lemmikin ottaa mukaan?<i aria-hidden=\"true\"><\/i><\/summary><p>Lemmikit ovat tervetulleita Utu-huoneisiin. Kerro lemmikist\u00e4 varauksen yhteydess\u00e4. Lis\u00e4maksu on 25 \u20ac y\u00f6lt\u00e4.<\/p><\/details>\n    <details><summary>Miten lahjakortti toimii?<i aria-hidden=\"true\"><\/i><\/summary><p>Kortti tulee s\u00e4hk\u00f6postiin QR-koodina heti maksun j\u00e4lkeen. N\u00e4yt\u00e4 koodi ravintolassa tai vastaanotossa. Kortti on voimassa 12 kuukautta.<\/p><\/details>\n  <\/div>\n  <p class=\"utu-faq__more\" data-utu-reveal>Etk\u00f6 l\u00f6yt\u00e4nyt vastausta? Soita <a href=\"tel:+358401234567\">+358 40 123 4567<\/a> tai laita viesti\u00e4 <a href=\"mailto:hei@utu.fi\">hei@utu.fi<\/a>.<\/p>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f48149b e-con-full e-flex e-con e-parent\" data-id=\"f48149b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da33ff6 elementor-widget elementor-widget-html\" data-id=\"da33ff6\" 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 Boutique-hotelliLappeenranta Brunssi viikonloppuisin.Huoneet joka y\u00f6. utu (Vierit\u00e4 alas) Varaa brunssi Varaa huone P\u00e4iv\u00e4 Kattaus10.0011.3013.00 Henkil\u00f6t12345678+ Saapuminen L\u00e4ht\u00f6 Aikuiset1234 Etsi vapaa p\u00f6yt\u00e4\u2192 Ei varausmaksua. Voit perua maksutta vuorokautta ennen. Paikallinen keramiikkaUtu Utu on pieni boutique-hotelli historiallisessa [&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-88","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\/88","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=88"}],"version-history":[{"count":63,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}