:root{
  /* Vuokrakaista-sininen paletti (vahvista tarkka hex, vaihto yhdeltä riviltä) */
  --ink:#16222E;--pine:#1763A6;--pine-deep:#0E3E6B;--amber:#4E97D1;
  --amber-soft:#9CC6E8;--stone:#E7ECF2;--paper:#F5F7FA;--sage:#8593A1;
  --line:rgba(22,34,46,.13);--line-2:rgba(22,34,46,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.08;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pine)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(246,245,240,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:baseline;gap:.55rem;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.12rem;text-decoration:none}
.brand small{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-size:.92rem;text-decoration:none;opacity:.78}
.nav-links a:hover{opacity:1}
.btn{display:inline-block;font-weight:600;padding:.7rem 1.3rem;border-radius:3px;text-decoration:none;font-size:.94rem;text-align:center;transition:transform .15s,background .15s;border:none;cursor:pointer}
.btn-primary{background:var(--pine);color:var(--paper)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine);transform:translateY(-1px)}

/* breadcrumb + title */
.crumb{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--sage);padding:1.6rem 0 .2rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--pine)}
.listing-head{padding:.6rem 0 1.3rem}
.listing-head h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:900;margin-bottom:.5rem}
.listing-sub{font-family:'IBM Plex Mono',monospace;font-size:.82rem;letter-spacing:.05em;color:var(--ink);opacity:.8;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.listing-sub .dot{color:var(--sage)}

/* AIRBNB-STYLE GALLERY */
.agallery{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.55rem;border-radius:14px;overflow:hidden;aspect-ratio:2/1;max-height:62vh}
.agallery .ph{position:relative;background:var(--stone);overflow:hidden;display:flex;align-items:center;justify-content:center}
.agallery .ph:first-child{grid-column:span 2;grid-row:span 2}
.agallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.agallery .ph span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--sage);text-align:center;padding:.4rem}
.gallery-badge{position:absolute;right:1rem;bottom:1rem;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1rem;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.04em}

/* LISTING BODY: content + sticky booking card */
.listing-body{display:grid;grid-template-columns:1fr 380px;gap:clamp(2rem,5vw,4.5rem);padding:clamp(2rem,4vw,3.2rem) 0;align-items:start}
.listing-main > .seg{padding:2rem 0;border-bottom:1px solid var(--line)}
.listing-main > .seg:first-child{padding-top:0}
.seg h2{font-size:1.45rem;font-weight:800;margin-bottom:.7rem}
.seg p{color:#3a423e;font-size:1.05rem;max-width:60ch}
.overview{display:flex;gap:1.6rem;flex-wrap:wrap}
.overview .o{flex:1;min-width:140px}
.overview .o .k{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.overview .o .v{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.3rem;margin-top:.2rem}

/* amenities grid with icons */
.amenities{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem;margin-top:.3rem}
.amenity{display:flex;align-items:center;gap:.85rem;font-size:1rem;padding:.35rem 0}
.amenity svg{flex:none;width:24px;height:24px;stroke:var(--pine);stroke-width:1.6;fill:none}

/* missä nukut */
.sleep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.sleep-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.sleep-card .img{position:relative;aspect-ratio:4/3;background:var(--stone);display:flex;align-items:center;justify-content:center}
.sleep-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sleep-card .img svg{width:40px;height:40px;stroke:var(--sage);stroke-width:1.4;fill:none}
.sleep-card .body{padding:.9rem 1rem 1.1rem}
.sleep-card h3{font-size:1.02rem;font-weight:700;margin-bottom:.3rem}
.sleep-card .beds{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#3a423e}
.sleep-card .beds svg{width:20px;height:20px;stroke:var(--pine);stroke-width:1.6;fill:none;flex:none}

/* yhteiset tilat */
.facilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.facility-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.facility-card .img{position:relative;aspect-ratio:4/3;background:var(--stone);display:flex;align-items:center;justify-content:center}
.facility-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.facility-card .img span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--sage)}
.facility-card .body{padding:1rem 1.1rem 1.2rem}
.facility-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.3rem}
.facility-card p{font-size:.9rem;color:#3a423e}

/* BOOKING CARD (sticky) */
.bookcard{position:sticky;top:88px;border:1px solid var(--line-2);border-radius:14px;padding:1.5rem 1.5rem 1.6rem;background:var(--paper);box-shadow:0 18px 40px -24px rgba(18,36,31,.4)}
.bookcard .price{display:flex;align-items:baseline;gap:.4rem;margin-bottom:1.1rem}
.bookcard .price b{font-family:'Archivo',sans-serif;font-size:1.6rem;font-weight:800}
.bookcard .price span{color:var(--sage);font-size:.92rem}
.datebox{border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.datebox .row{display:grid;grid-template-columns:1fr 1fr}
.datebox .cell{padding:.7rem .85rem;border-bottom:1px solid var(--line-2)}
.datebox .cell + .cell{border-left:1px solid var(--line-2)}
.datebox .full{border-bottom:none}
.datebox .lab{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
.datebox .inp{font-size:.95rem;color:var(--ink);margin-top:.15rem}
.datebox .inp.muted{color:var(--sage)}
.bookcard .btn-primary{width:100%;margin-top:1rem;font-size:1rem;padding:.85rem}
.bookcard .btn-call{width:100%;margin-top:.55rem;font-size:1rem;padding:.85rem;display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--pine);border-color:var(--pine)}
.btn-call::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/></svg>") center/contain no-repeat}
.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* tarjouspyyntölomake */
.inquiry{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.inquiry label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600;color:#3a423e}
.inquiry .frow{display:flex;gap:.7rem}
.inquiry .frow label{flex:1;min-width:0}
.inquiry input,.inquiry select,.inquiry textarea{font:inherit;font-weight:400;font-size:.92rem;padding:.6rem .7rem;border:1px solid var(--line-2);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(23,99,166,.12)}
.inquiry .err{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.form-ok{background:#eef5ee;border:1px solid #cfe0cf;border-radius:8px;padding:1rem 1.1rem;font-size:.95rem;color:var(--ink);line-height:1.5}
.inquiry textarea{resize:vertical}
.inquiry .btn{width:100%;margin-top:.2rem}
.btn-wa{background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem}
.btn-wa:hover{background:#1ebe5b}
.btn-wa::before{content:"";width:18px;height:18px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-2 .9-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.2.1.4 0 .5l-.3.5-.3.3c-.2.2-.3.4-.1.6.2.4.9 1.4 1.9 2.3 1.2 1.1 2.2 1.4 2.5 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l1.8.9c.3.1.5.2.5.3.1.2.1.7-.1 1.2z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-2 .9-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.2.1.4 0 .5l-.3.5-.3.3c-.2.2-.3.4-.1.6.2.4.9 1.4 1.9 2.3 1.2 1.1 2.2 1.4 2.5 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l1.8.9c.3.1.5.2.5.3.1.2.1.7-.1 1.2z'/></svg>") center/contain no-repeat}
.book-note{text-align:center;font-size:.78rem;color:var(--sage);margin-top:.9rem;line-height:1.45}
.apaleo-slot{display:none}

/* other types */
.alt{background:var(--stone)}
.muut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.8rem}
.muut{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:1.2rem;transition:transform .15s,border-color .15s}
.muut:hover{transform:translateY(-2px);border-color:var(--pine)}
.muut .p{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.muut .n{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;margin:.4rem 0 .2rem}
.muut .c{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--sage)}

/* hub */
.thero{padding:1.4rem 0 0}
.thero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900;margin:.8rem 0 1rem}
.thero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:48ch;color:#3a423e}
section.block{padding:clamp(2.5rem,5vw,4rem) 0}
/* landing: hero + intro kuvalla */
.lhero{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.lhero h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:900;margin:.8rem 0 1rem}
.lhero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#3a423e;max-width:46ch}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.media-img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--stone)}
.media-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.lhero,.split{grid-template-columns:1fr}.lhero .media-img{margin-top:.4rem}}
@media (max-width:560px){.lnav a:not(.btn-primary){display:none}}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.hub-card{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .15s,border-color .15s}
.hub-card:hover{transform:translateY(-3px);border-color:var(--pine)}
.hub-card .img{position:relative;aspect-ratio:4/3;background:var(--stone);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.hub-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-card .img span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--sage)}
.hub-card .body{padding:1.3rem 1.4rem 1.5rem}
.hub-card .p{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.hub-card h3{font-size:1.25rem;font-weight:700;margin:.5rem 0 .5rem}
.hub-card p{font-size:.95rem;color:#3a423e}
.hub-card .meta{margin-top:1rem;font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--pine);letter-spacing:.04em}
/* kompakti korttiruudukko (landing-sivut) */
.hub-grid.compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-top:1.6rem}
.hub-grid.compact .hub-card .img{aspect-ratio:3/2}
.hub-grid.compact .hub-card .body{padding:.75rem .85rem .95rem}
.hub-grid.compact .hub-card .p{font-size:.6rem}
.hub-grid.compact .hub-card h3{font-size:.98rem;margin:.3rem 0 .25rem}
.hub-grid.compact .hub-card p{font-size:.8rem;line-height:1.4}
.hub-grid.compact .hub-card .meta{margin-top:.5rem;font-size:.64rem}

/* cta band */
.band{background:var(--pine-deep);color:var(--paper)}
.band .wrap{padding:clamp(2.6rem,5vw,4rem) 0;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--paper);max-width:20ch}
.band p{color:rgba(246,245,240,.8);margin-top:.5rem}

/* footer */
footer{background:var(--ink);color:rgba(246,245,240,.7);padding:3rem 0 2.2rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;align-items:flex-end}
footer .brand{color:var(--paper)}
footer small{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em}
footer .flinks{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
footer .flinks a{color:rgba(246,245,240,.85);text-decoration:none}
footer .flinks a:hover{color:var(--paper)}

@media(max-width:920px){
  .nav-links a:not(.btn){display:none}
  .listing-body{grid-template-columns:1fr}
  .bookcard{position:static;top:auto;order:-1}
  .muut-grid{grid-template-columns:1fr 1fr}
  .hub-grid{grid-template-columns:1fr}
  .hub-grid.compact{grid-template-columns:1fr 1fr}
  .facilities-grid{grid-template-columns:1fr 1fr}
  .sleep-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .agallery{aspect-ratio:4/3;grid-template-rows:1fr 1fr 1fr;max-height:none}
  .agallery .ph:first-child{grid-column:span 4;grid-row:span 2}
  .agallery .ph:nth-child(n+4){display:none}
  .amenities{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.muut,.hub-card{transition:none}}