@font-face{font-family:"Neue Montreal";src:url(../fonts/pp-neue-montreal-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* Ecostan brändi: tumma #0f0f0f, pinnat #181818, luonnonvalkoinen #f7f7f5, valkoinen.
     Kierros 7: ainoa korostus syvä sininen #1d4ed8 (hover #1a44bf); vaalea #4f7cf0 vain pieniin pisteisiin hämärää vasten */
  --bg:#0f0f0f; --line:rgba(247,247,245,.14); --line-2:rgba(247,247,245,.22);
  --fg:#f7f7f5; --muted:rgba(247,247,245,.85); --faint:rgba(247,247,245,.82); --ink:#0f0f0f; --soft:rgba(247,247,245,.85);
  --accent:#1d4ed8; --accent-h:#1a44bf; --accent-l:#4f7cf0;
  --night:#0f0f0f;
  --sans:"Neue Montreal",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(1rem,4vw,4rem); --nav:4.5rem;
  --tsh:0 2px 24px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:transparent;color:var(--fg);font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cap{font-size:.6875rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--fg);color:var(--ink);padding:.7rem 1rem;border-radius:100px;font-weight:600}
.skip:focus{top:1rem}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.875rem;padding:0 1.3rem;border-radius:100px;font-size:.9375rem;font-weight:500;white-space:nowrap;border:1px solid rgba(247,247,245,.6);color:var(--fg);background:transparent;text-shadow:0 1px 10px rgba(0,0,0,.25);transition:background-color .35s var(--out),border-color .35s var(--out),color .35s var(--out)}
.pill:hover{border-color:var(--fg);background:rgba(247,247,245,.1)}
.pill.is-main{background:var(--fg);border-color:var(--fg);color:var(--ink);text-shadow:none}
.pill.is-main:hover{background:#fff;border-color:#fff}

/* kierros 6: high end -napit. Ensisijainen = valkoinen pilleri ja tumma nuolipallo, toissijainen = hiusviiva, tekstinappi = teksti + nuoli */
.btn,.tbtn{font-size:.9375rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:.85rem;height:3.1rem;border-radius:100px;transition:transform .4s var(--out),background-color .4s var(--out),border-color .4s var(--out),color .4s var(--out)}
.btn.is-main{padding:0 .75rem 0 1.5rem;background:var(--accent);color:#fff;text-shadow:none}
.btn.is-main:hover,.btn.is-main:focus-visible{transform:translateY(-1px);background:var(--accent-h)}
.btn_b{position:relative;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;overflow:hidden;transition:transform .4s var(--out),background-color .4s var(--out),color .4s var(--out)}
.btn.is-main:hover .btn_b,.btn.is-main:focus-visible .btn_b{background:#fff;color:var(--accent)}
.btn_b svg{position:absolute;inset:0;margin:auto;width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--out)}
.btn_b svg+svg{transform:translateY(170%)}
.btn.is-main:hover .btn_b,.btn.is-main:focus-visible .btn_b{transform:translateX(4px)}
.btn.is-main:hover .btn_b svg:first-child,.btn.is-main:focus-visible .btn_b svg:first-child{transform:translateY(-170%)}
.btn.is-main:hover .btn_b svg+svg,.btn.is-main:focus-visible .btn_b svg+svg{transform:none}
/* toissijainen (kierros 7): 1,5 px vaalea reuna, hoverissa valkoinen täyttö ja tumma teksti */
.btn.is-line{padding:0 1.4rem;border:1.5px solid rgba(247,247,245,.7);color:#f7f7f5;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.btn.is-line:hover,.btn.is-line:focus-visible{border-color:#f7f7f5;background:#f7f7f5;color:var(--ink);text-shadow:none}
.btn_t{position:relative}
.tbtn .btn_t{padding-bottom:2px;background:linear-gradient(var(--accent-l),var(--accent-l)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--out)}
.tbtn:hover .btn_t,.tbtn:focus-visible .btn_t{background-size:100% 1.5px}
.tbtn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 0;color:inherit}
.tbtn svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--out)}
.tbtn:hover svg,.tbtn:focus-visible svg{transform:translateX(3px)}

/* ---------- latausruutu: tyylit tiedostossa css/loader.css (kierros 14 L) ---------- */

/* ---------- kiinteä näyttämö ---------- */
.scene{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#1f4377 0%,#4f78ad 50%,#9fb2c7 100%)}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#1f4377 0%,#4f78ad 50%,#9fb2c7 100%);transition:opacity 1.2s var(--out);pointer-events:none}
html.gl-ready .scene::before{opacity:0}
.scene_shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(140% 110% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.25) 100%)}
.scene_shade::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.no-gl .scene{background:radial-gradient(70% 50% at 70% 20%,#6f8fb7 0%,rgba(111,143,183,0) 70%),linear-gradient(180deg,#1d355c 0%,#3a3f55 45%,#1c1712 100%)}
html.no-gl .scene canvas,html.no-gl .scene::before{display:none}
html.tower-hover{cursor:pointer}

/* ---------- navi (kierros 7): wordmark, "Varaa puhelu" sinisenä nuolipillerinä, Menu kolmen viivan burgerina ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad);pointer-events:none}
.nav > *{pointer-events:auto}
.nav_brand{font-size:1.4375rem;font-weight:600;letter-spacing:-.045em;display:inline-flex;align-items:flex-end;gap:.18rem;line-height:1;text-shadow:0 1px 16px rgba(0,0,0,.35)}
.nav_brand i,.foot_brand i{width:.32rem;height:.32rem;border-radius:50%;background:var(--accent-l);margin-bottom:.16rem;transition:background-color .6s var(--out)}
.nav_r{display:flex;align-items:center;gap:1.5rem}
.nav .nav_cta{height:2.75rem;padding:0 .6rem 0 1.25rem;gap:.75rem;font-size:.875rem}
.nav .nav_cta .btn_b{width:1.5rem;height:1.5rem}
.nav_burger{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.25rem}
.nav_burger_i{position:relative;display:block;width:34px;height:20px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.3))}
.nav_burger_i i{position:absolute;right:0;width:100%;height:2px;border-radius:1px;background:currentColor;transition:transform .5s var(--out),top .5s var(--out),width .45s var(--out),opacity .3s}
.nav_burger_i i:nth-child(1){top:0}.nav_burger_i i:nth-child(2){top:9px}.nav_burger_i i:nth-child(3){top:18px}
.fine .nav_burger:hover .nav_burger_i i:nth-child(2),.nav_burger:focus-visible .nav_burger_i i:nth-child(2){width:60%}
html.menu-open .nav_burger_i i:nth-child(2){opacity:0;width:0}
html.menu-open .nav_burger_i i:nth-child(1){top:9px;transform:rotate(45deg)}
html.menu-open .nav_burger_i i:nth-child(3){top:9px;transform:rotate(-45deg)}
html.menu-open .nav_cta{opacity:0;pointer-events:none}

/* ---------- koko ruudun valikko (v9b .menu.is-full, tämän teeman väreissä) ---------- */
.menu{position:fixed;inset:0;z-index:45;background:var(--night);color:var(--fg);clip-path:circle(0% at calc(100% - 3.5rem) 2.25rem);visibility:hidden;transition:clip-path .9s var(--io),visibility 0s .9s}
html.menu-open .menu{clip-path:circle(150% at calc(100% - 3.5rem) 2.25rem);visibility:visible;transition:clip-path 1.1s var(--out),visibility 0s}
.menu_bg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:blur(28px) saturate(115%);opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--out) .3s,transform 1.6s var(--out)}
html.menu-open .menu_bg{opacity:.42;transform:none}
.menu::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60rem 40rem at 85% 15%,rgba(247,247,245,.06),transparent 60%),linear-gradient(90deg,rgba(15,15,15,.92) 0%,rgba(15,15,15,.6) 60%,rgba(15,15,15,.78) 100%);pointer-events:none}
.menu_in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:minmax(0,1fr) auto;gap:1.5rem clamp(2rem,5vw,6rem);height:100%;padding:calc(var(--nav) + 1.5rem) var(--pad) clamp(1.5rem,5vh,3rem)}
.menu_links{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-self:center;max-width:44rem;border-top:1px solid rgba(247,247,245,.18)}
.menu_links a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding:clamp(.5rem,1.35vh,.95rem) 0;border-bottom:1px solid rgba(247,247,245,.18);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.ml_n{font-size:clamp(1.9rem,3vw,3rem);font-weight:400;letter-spacing:-.02em;line-height:1.08;color:rgba(247,247,245,.85);transition:color .4s,transform .5s var(--out)}
.ml_d{display:grid;justify-items:end;gap:.2rem;text-align:right;font-size:.8125rem;line-height:1.35;color:var(--muted);transition:transform .5s var(--out)}
.ml_d b{font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.menu_links a::before{content:"";position:absolute;left:-1.1rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent-l);box-shadow:0 0 0 3px rgba(79,124,240,.18);opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s var(--out)}
.menu_links a:hover .ml_n,.menu_links a:focus-visible .ml_n{color:#fff;transform:translateX(8px)}
.menu_links a:hover .ml_d,.menu_links a:focus-visible .ml_d{transform:translateX(8px)}
.menu_links a:hover::before,.menu_links a:focus-visible::before,.menu_links a.is-cur::before{opacity:1;transform:none}
.menu_links a.is-cur .ml_n{color:#fff}
html.menu-open .menu_links a{opacity:1;transform:none;transition:opacity .6s var(--out) calc(.25s + var(--i) * 60ms),transform .9s var(--out) calc(.25s + var(--i) * 60ms)}
.menu_foot{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem clamp(2rem,5vw,4.5rem)}
.menu_foot,.mtower{opacity:0;transform:translateY(1rem);transition:opacity .3s,transform .3s}
html.menu-open .menu_foot,html.menu-open .mtower{opacity:1;transform:none;transition:opacity .8s var(--out) .55s,transform 1.1s var(--out) .55s}
.menu_contact{display:flex;flex-direction:column;gap:.3rem;font-size:1.125rem}
.menu_contact a{width:max-content;border-bottom:1px solid rgba(247,247,245,.35);transition:color .3s,border-color .3s}
.menu_contact a:hover{color:#fff;border-color:var(--accent-l)}
.menu_meta{display:flex;flex-direction:column;gap:.35rem;color:var(--faint)}
.menu_meta b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}

/* ---------- reunan pysäkkirivi: ohut viiva, pienet pisteet ---------- */
.rail{position:fixed;right:clamp(1rem,2vw,1.75rem);top:50%;transform:translateY(-50%);z-index:30;--step:2.15rem}
.rail ol{display:grid;justify-items:end;position:relative}
.rail_line{position:absolute;right:calc(.5rem - .5px);top:calc(var(--step) / 2);bottom:calc(var(--step) / 2);width:1px;background:rgba(247,247,245,.32);box-shadow:0 0 8px rgba(0,0,0,.25)}
.rail_line i{position:absolute;inset:0 0 auto;height:100%;background:var(--accent-l);transform-origin:50% 0;transform:scaleY(var(--rp,0));transition:transform .25s linear}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:.55rem;height:var(--step);padding-right:1.6rem;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:rgba(247,247,245,.85);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.rail a::after{content:"";position:absolute;right:calc(.5rem - 2.5px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:rgba(247,247,245,.75);transition:transform .45s var(--out),background-color .3s}
.rail a b{font-weight:400;opacity:0;transform:translateX(.35rem);transition:opacity .3s,transform .4s var(--out)}
.rail a span{opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .3s,max-width .5s var(--out)}
.rail a:hover b,.rail a:focus-visible b{opacity:1;transform:none}
.rail a:hover::after{transform:scale(1.4)}
.rail a[aria-current="true"]{color:var(--fg)}
.rail a[aria-current="true"] b{opacity:1;transform:none;color:var(--fg)}
.rail a[aria-current="true"] span{opacity:1;max-width:8rem}
.rail a[aria-current="true"]::after{background:var(--accent-l);transform:scale(1.9);box-shadow:0 0 0 1px rgba(79,124,240,.4)}

/* takaisin huipulle (kierros 12): pyöreä maitolasinappi, pienempi nuoli; sävy osion mukaan */
.totop{position:fixed;right:clamp(1.1rem,2vw,1.85rem);bottom:clamp(1rem,2.4vh,1.6rem);z-index:31;width:3.25rem;height:3.25rem;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 26px -14px rgba(10,14,30,.4);
  opacity:0;transform:translateY(.75rem);pointer-events:none;transition:opacity .5s var(--out),transform .6s var(--out),color .6s var(--out),background-color .45s var(--out),border-color .45s var(--out)}
.totop svg{width:14px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .5s var(--out)}
.totop:hover,.totop:focus-visible{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.7)}
.totop:hover svg,.totop:focus-visible svg{transform:translateY(-2px)}
html.totop-light .totop{color:#f7f7f5;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
html.totop-light .totop:hover,html.totop-light .totop:focus-visible{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}
html.is-past .totop{opacity:1;transform:none;pointer-events:auto}
html.menu-open .totop,html.in-room .totop{opacity:0;pointer-events:none}

/* ---------- pysäkit ---------- */
main,.is-foot{position:relative;z-index:3}
.stop{position:relative;height:150vh;height:150svh}
.stop.is-hero{height:135vh;height:135svh}
.stop.is-lobby{height:160vh;height:160svh}
.stop.is-foot{height:100vh;height:100svh}
.stop_pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 1rem) calc(var(--pad) + 6rem) 2rem var(--pad);pointer-events:none}
.stop.is-foot .stop_pin{align-items:flex-end;padding-bottom:1.5rem}
/* luettavuus: pehmeä tumma liukuväri tekstin takana, ei laatikkoa.
   Kierros 7: liukuväri ankkuroitu paneeliin (.panel::before alla), joten se peittää tekstin joka leveydellä; tämä jää vain footerille */
.stop:not(.is-foot) .stop_pin::before{display:none}
.stop_pin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s var(--out);background:radial-gradient(60% 55% at 30% 50%,rgba(12,12,12,.45),rgba(12,12,12,0) 70%),radial-gradient(44% 50% at 24% 52%,rgba(12,12,12,.34),rgba(12,12,12,0) 80%)}
.stop_pin.is-r::before{background:radial-gradient(60% 62% at 70% 52%,rgba(12,12,12,.45),rgba(12,12,12,0) 70%),radial-gradient(44% 56% at 76% 56%,rgba(12,12,12,.34),rgba(12,12,12,0) 80%)}
.stop.is-hero .stop_pin::before{background:radial-gradient(60% 55% at 30% 50%,rgba(12,12,12,.45),rgba(12,12,12,0) 70%)}
.stop_pin.is-c::before{background:radial-gradient(70% 60% at 50% 55%,rgba(12,12,12,.45),rgba(12,12,12,0) 70%)}
.stop.is-foot .stop_pin::before{background:linear-gradient(180deg,rgba(10,9,8,0) 55%,rgba(10,9,8,.45))}
html.js.ready .stop.is-active .stop_pin::before{opacity:1}
html.in-room .stop_pin::before{opacity:0!important}

.panel{position:relative;isolation:isolate;pointer-events:auto;width:min(34rem,42vw);max-height:calc(100svh - var(--nav) - 3rem);color:var(--fg);text-shadow:var(--tsh);--shade:.56;--fx:11rem;--fy:8rem}
/* tumma pehmeäreunainen kenttä: täysi peitto tekstin alueella (--shade), häivytys --fx/--fy reunoille kahdella maskilla */
.panel:not(.is-wall):not(.is-foot)::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--fy) - .5rem) calc(-1 * var(--fx) - 1rem);pointer-events:none;background:rgba(9,12,20,var(--shade));
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,0.05) calc(var(--fx) * 0.15),rgba(0,0,0,0.18) calc(var(--fx) * 0.3),rgba(0,0,0,0.5) calc(var(--fx) * 0.5),rgba(0,0,0,0.82) calc(var(--fx) * 0.7),rgba(0,0,0,0.95) calc(var(--fx) * 0.85),#000 var(--fx),#000 calc(100% - var(--fx)),rgba(0,0,0,0.95) calc(100% - var(--fx) * 0.85),rgba(0,0,0,0.82) calc(100% - var(--fx) * 0.7),rgba(0,0,0,0.5) calc(100% - var(--fx) * 0.5),rgba(0,0,0,0.18) calc(100% - var(--fx) * 0.3),rgba(0,0,0,0.05) calc(100% - var(--fx) * 0.15),transparent),linear-gradient(180deg,transparent,rgba(0,0,0,0.05) calc(var(--fy) * 0.15),rgba(0,0,0,0.18) calc(var(--fy) * 0.3),rgba(0,0,0,0.5) calc(var(--fy) * 0.5),rgba(0,0,0,0.82) calc(var(--fy) * 0.7),rgba(0,0,0,0.95) calc(var(--fy) * 0.85),#000 var(--fy),#000 calc(100% - var(--fy)),rgba(0,0,0,0.95) calc(100% - var(--fy) * 0.85),rgba(0,0,0,0.82) calc(100% - var(--fy) * 0.7),rgba(0,0,0,0.5) calc(100% - var(--fy) * 0.5),rgba(0,0,0,0.18) calc(100% - var(--fy) * 0.3),rgba(0,0,0,0.05) calc(100% - var(--fy) * 0.15),transparent),radial-gradient(farthest-corner,#000 var(--r0,62%),rgba(0,0,0,.8) var(--r1,74%),rgba(0,0,0,.45) var(--r2,86%),rgba(0,0,0,.12) var(--r3,95%),transparent var(--r4,100%));-webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,0.05) calc(var(--fx) * 0.15),rgba(0,0,0,0.18) calc(var(--fx) * 0.3),rgba(0,0,0,0.5) calc(var(--fx) * 0.5),rgba(0,0,0,0.82) calc(var(--fx) * 0.7),rgba(0,0,0,0.95) calc(var(--fx) * 0.85),#000 var(--fx),#000 calc(100% - var(--fx)),rgba(0,0,0,0.95) calc(100% - var(--fx) * 0.85),rgba(0,0,0,0.82) calc(100% - var(--fx) * 0.7),rgba(0,0,0,0.5) calc(100% - var(--fx) * 0.5),rgba(0,0,0,0.18) calc(100% - var(--fx) * 0.3),rgba(0,0,0,0.05) calc(100% - var(--fx) * 0.15),transparent),linear-gradient(180deg,transparent,rgba(0,0,0,0.05) calc(var(--fy) * 0.15),rgba(0,0,0,0.18) calc(var(--fy) * 0.3),rgba(0,0,0,0.5) calc(var(--fy) * 0.5),rgba(0,0,0,0.82) calc(var(--fy) * 0.7),rgba(0,0,0,0.95) calc(var(--fy) * 0.85),#000 var(--fy),#000 calc(100% - var(--fy)),rgba(0,0,0,0.95) calc(100% - var(--fy) * 0.85),rgba(0,0,0,0.82) calc(100% - var(--fy) * 0.7),rgba(0,0,0,0.5) calc(100% - var(--fy) * 0.5),rgba(0,0,0,0.18) calc(100% - var(--fy) * 0.3),rgba(0,0,0,0.05) calc(100% - var(--fy) * 0.15),transparent),radial-gradient(farthest-corner,#000 var(--r0,62%),rgba(0,0,0,.8) var(--r1,74%),rgba(0,0,0,.45) var(--r2,86%),rgba(0,0,0,.12) var(--r3,95%),transparent var(--r4,100%));mask-composite:intersect,intersect}
.panel.is-right{margin-left:auto}
.panel.is-wide{width:min(52rem,56vw)}
.stop.is-hero .panel{width:min(50rem,52vw);--shade:.6}

html.js .panel{opacity:0;transform:translateY(1.25rem);filter:blur(6px);pointer-events:none;transition:opacity .7s var(--out),transform .7s var(--out),filter .7s var(--out)}
html.js.ready .stop.is-active .panel{opacity:1;transform:none;filter:none;pointer-events:auto}
html.in-room .panel:not(.is-wall){opacity:0!important;pointer-events:none!important}
html.reduced .panel{transition:none!important}

.eyebrow{font-size:.75rem;letter-spacing:.16em;color:rgba(247,247,245,.9);text-shadow:0 1px 14px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
.hero_title{margin-top:.85rem;font-size:clamp(3.4rem,6.2vw,6.6rem);line-height:.96;font-weight:500;letter-spacing:-.035em}
.panel h2:where(:not(.hero_title)){margin-top:.8rem;font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
.lead{margin-top:1.15rem;max-width:30rem;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.45;color:rgba(247,247,245,.92)}
.stop.is-hero .lead{font-size:1.0625rem;color:rgba(247,247,245,.95);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.btns{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.6rem}

.scrollhint{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(247,247,245,.85);text-shadow:var(--tsh);transition:opacity .5s}
.scrollhint i{width:1px;height:2.5rem;background:linear-gradient(rgba(247,247,245,0),rgba(247,247,245,.8));position:relative;overflow:hidden}
/* kierros P: valuva viiva siirretään transformilla (ennen top-arvoa, joka laski asettelun joka ruudussa); sama liike:
   top -40 % -> 100 % säiliöstä = 140 % säiliöstä = 350 % viivan omasta korkeudesta (40 %). Pysähtyy, kun vihje on poistunut. */
.scrollhint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:drip 2.6s var(--io) infinite}
@keyframes drip{from{transform:translateY(0)}to{transform:translateY(350%)}}
html.hint-gone .scrollhint i::after{animation:none}
html.js:not(.ready) .scrollhint,html.js .stop:not(.is-active) .scrollhint{opacity:0}
html.hint-gone .scrollhint{opacity:0!important;transition:opacity .3s ease!important}

/* palvelut (kierros 7): viisi riviä allekkain; levossa numero, nimi ja hinta, hoverissa (kosketuksella napautus) lause ja kolme avainsanaa */
.panel.is-svc{width:min(44rem,48vw);--shade:.64}
#tyot .panel{--shade:.64}
#hinnat .panel{--shade:.62}
.svc{margin-top:1.9rem;border-top:1px solid rgba(247,247,245,.2)}
.svc>li{border-bottom:1px solid rgba(247,247,245,.2)}
.svc h3{font:inherit;letter-spacing:inherit}
.svc_row{width:100%;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto 1.1rem;align-items:center;column-gap:1rem;padding:.95rem 0;text-align:left;color:#fff;outline-offset:2px}
.svc_n{align-self:center;font-size:.875rem;font-weight:400;letter-spacing:.02em;color:rgba(247,247,245,.55);font-variant-numeric:tabular-nums}
.svc_name{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;transition:transform .55s var(--out)}
.svc_p{font-size:.9375rem;font-weight:500;color:rgba(247,247,245,.9);font-variant-numeric:tabular-nums;white-space:nowrap}
.svc_a{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:transform .55s var(--out),opacity .3s,color .3s}
.svc_more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--out),visibility 0s .55s}
.svc_in{min-height:0;overflow:hidden;padding-left:3.4rem}
.svc_in>*{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .5s var(--out)}
.svc_in p{max-width:30rem;font-size:.9688rem;line-height:1.45;color:rgba(247,247,245,.92)}
.svc_k{max-width:none!important;margin-top:.45rem;padding-bottom:1.05rem;font-size:.8125rem;letter-spacing:.02em;color:rgba(247,247,245,.85)}
.svc_k i{font-style:normal;margin:0 .35rem;color:var(--accent-l)}
.svc>li.is-open .svc_more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--out),visibility 0s}
.svc>li.is-open .svc_in>*{opacity:1;transform:none;transition:opacity .45s .12s,transform .6s var(--out) .08s}
.svc>li.is-open .svc_in>*+*{transition-delay:.2s,.16s}
.svc>li.is-open .svc_name{transform:translateX(8px)}
.svc>li.is-open .svc_a{transform:rotate(45deg);opacity:1;color:var(--accent-l)}
/* porrastettu sisääntulo, kun pysäkki aktivoituu */
html.js .svc>li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready .stop.is-active .svc>li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * 70ms)}

/* työt: pikkukuva + nimi joka rivillä; hover nostaa etusivun isona, puhtaana kuvana (ks. .wpop) */
.works{margin-top:1.5rem;display:grid;gap:.5rem}
.works a{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;align-items:center;column-gap:1.25rem;padding:.3rem 0;transition:opacity .45s var(--out)}
.works a>*{grid-row:1}
.works .w_thumb{grid-column:1;display:block;aspect-ratio:16/10;border-radius:.6rem;overflow:hidden;position:relative;background:rgba(247,247,245,.9);transition:opacity .45s var(--out),transform .6s var(--out)}
.works .w_thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(247,247,245,.16);pointer-events:none}
.works .w_thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.works .w_t{grid-column:2;display:grid;gap:.3rem}
.works .arr{grid-column:3}
.works h3{font-size:clamp(1.55rem,2.2vw,2.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;transition:color .4s var(--out),transform .6s var(--out)}
.works .cap{color:var(--muted)}
.works .arr{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;transition:transform .5s var(--out),opacity .3s,color .3s}
.fine .works:hover a{opacity:.42}
.fine .works a:hover,.fine .works a:focus-visible{opacity:1}
.fine .works a:hover .w_thumb,.fine .works a:focus-visible .w_thumb{opacity:.5}
.works a:hover h3,.works a:focus-visible h3{color:#fff;transform:translateX(.25rem)}
.works a:hover .arr{opacity:1;color:#fff;transform:translate(3px,-3px)}
.works_more{margin-top:1rem;font-size:.9375rem;color:var(--muted)}
.works_more .cap{color:var(--soft);margin-right:.4rem}
.works_more a{border-bottom:1px solid rgba(247,247,245,.3);transition:color .3s,border-color .3s}
.works_more a:hover{color:#fff;border-color:var(--accent-l)}
.w_tile{display:grid;place-content:center;height:100%;padding:0 .5rem;text-align:center;background:rgba(247,247,245,.9);color:var(--ink);text-shadow:none}
.w_tile span{font-size:.625rem;letter-spacing:.08em;color:#3a3a3a;overflow-wrap:anywhere;line-height:1.3}
.wpop{position:fixed;left:0;top:0;z-index:20;width:36vw;max-width:44rem;pointer-events:none;opacity:0;transform:translate3d(var(--px,60vw),var(--py,30vh),0);transition:opacity .35s var(--out)}
.wpop.is-on{opacity:1}
.wpop_in{position:relative;border-radius:1rem;overflow:hidden;background:#f7f7f5;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:rotate(var(--pr,0deg)) scale(var(--ps,.94));transform-origin:30% 50%;transition:transform .6s var(--out)}
.wpop_in::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);pointer-events:none}
.wpop.is-on .wpop_in{--ps:1}
.wpop_img{position:relative;aspect-ratio:16/10;background:#f7f7f5}
.wpop_img img,.wpop_img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wpop_img video{opacity:0;transition:opacity .25s}
.wpop.is-vid .wpop_img video{opacity:1}
.wpop_tile{position:absolute;inset:0;z-index:1;display:none;place-content:center;text-align:center;background:#f7f7f5}
.wpop_tile b{font-size:clamp(1.8rem,3.2vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.wpop.is-tile .wpop_tile{display:grid}
.wpop.is-tile img,.wpop.is-tile video{display:none}

/* prosessi (kierros 7): neljä vaihetta vaakarivissä; ohut viiva numeroiden yllä piirtyy vasemmalta oikealle ja siniset pisteet syttyvät järjestyksessä */
.panel.is-steps{width:min(54rem,56vw);--shade:.64}
.steps_w{position:relative;margin-top:2.4rem;padding-top:1.5rem}
.steps_line{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(247,247,245,.2)}
.steps_line i{position:absolute;inset:0;background:rgba(247,247,245,.85);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s var(--out)}
html.js.ready .stop.is-active .steps_line i,html:not(.js) .steps_line i{transform:scaleX(1);transition:transform 1s cubic-bezier(.45,.05,.35,1) .2s}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(1.25rem,2.2vw,2.25rem)}
.steps li{position:relative}
.st_dot{position:absolute;left:0;top:-1.5rem;width:7px;height:7px;margin:-3px 0 0 0;border-radius:50%;background:rgba(247,247,245,.45);transition:background-color .3s,box-shadow .3s,transform .4s var(--out)}
html.js.ready .stop.is-active .st_dot,html:not(.js) .st_dot{background:var(--accent-l);box-shadow:0 0 0 4px rgba(79,124,240,.22);transform:scale(1.15);transition-delay:calc(.2s + var(--k) * .27s)}
.st_n{display:block;font-size:2.4rem;font-weight:300;line-height:1;letter-spacing:-.02em;color:rgba(247,247,245,.55);font-variant-numeric:tabular-nums}
.steps h3{margin-top:.7rem;font-size:1.35rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.st_w{display:block;margin-top:.35rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(247,247,245,.78)}
.steps p{margin-top:.6rem;max-width:16rem;font-size:.95rem;line-height:1.42;color:rgba(247,247,245,.85)}
html.js .steps li>:not(.st_dot){opacity:0;transform:translateY(8px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready .stop.is-active .steps li>:not(.st_dot){opacity:1;transform:none;transition-delay:calc(.3s + var(--k) * .2s)}

/* hinnat (kierros 6): vaaleat liquid glass -kortit, valkoinen teksti, ei varjoa */
.plans{margin:2.5rem 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:stretch}
.plans>li{position:relative;display:flex;flex-direction:column;padding:1.7rem 1.8rem 1.5rem;border-radius:20px;color:#fff;text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),rgba(15,15,15,.18);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.plans h3{display:flex;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#fff}
.plans .is-featured h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-l);box-shadow:0 0 0 3px rgba(79,124,240,.22)}
.plan_tag{position:absolute;top:1.7rem;right:1.8rem;font-size:.75rem;line-height:1.3;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.plan_tag i{display:none}
.plans .sum{margin-top:1.2rem;font-size:clamp(2rem,2.6vw,2.7rem);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.plans .sum small{display:block;margin-bottom:.45rem;font-size:.75rem;letter-spacing:.02em;font-weight:400;color:rgba(255,255,255,.92)}
.plans .d{margin-top:.75rem;font-size:.9375rem;line-height:1.4;color:rgba(255,255,255,.9)}
.plan_f{flex:1;display:grid;align-content:start;gap:.45rem;margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.24);font-size:.875rem;line-height:1.35;color:rgba(255,255,255,.88)}
.plan_f li{display:flex;align-items:baseline;gap:.6rem}
.plan_f li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.7);transform:translateY(-.2em)}
.plans .tbtn{margin-top:1.1rem;align-self:flex-start}
.plans .btn{margin-top:1.1rem;align-self:flex-start}

/* tekijät: pienet pyöreät kuvat, yksi sitaatti */
.team{margin-top:1.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
.team li{display:flex;align-items:center;gap:.85rem}
.team img{flex:none;width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 1px rgba(247,247,245,.25)}
.team p{display:grid;gap:.15rem}
.team b{font-weight:500;font-size:1.0625rem;letter-spacing:-.01em}
.team .cap{color:var(--muted);font-size:.625rem}
.quote{margin-top:1.8rem;max-width:30rem}
.quote blockquote{font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.3;letter-spacing:-.015em}
.quote figcaption{margin-top:.6rem;color:var(--soft)}

/* ---------- aula: lomakestandin valkokangas (kierros 12) ----------
   Minimalistinen: tumma teksti valkoisella, ohuet alaviivakentät, pienet valittavat tekstipillerit ja sininen Lähetä.
   Desktopilla lomake on standin kankaan etupinta (600 × 1036 px = 2 × koko, sisältö zoom 2 -> virtuaalinen 300 × 518). */
@font-face{font-family:"GT Super Display";src:url(../fonts/gt-super-display-light.woff2?v=14) format("woff2");font-weight:300;font-style:normal;font-display:swap}
.panel.stand{--sk:#121316;--sk2:rgba(18,19,22,.62);--sl:rgba(18,19,22,.26);width:min(24rem,100%);max-height:none;margin:0 auto;padding:1.7rem 1.5rem 1.4rem;border-radius:.2rem;color:var(--sk);text-shadow:none;
  background:linear-gradient(180deg,#f6f4f0,#ebe8e2);box-shadow:0 24px 60px -28px rgba(20,16,10,.45)}
.panel.stand::before{display:none!important}
.stand_logo{display:flex;align-items:flex-end;gap:.07em;font-size:15px;line-height:1;font-weight:600;letter-spacing:-.045em;color:var(--sk)}
.stand_logo i{width:4.2px;height:4.2px;margin-bottom:.14em;border-radius:50%;background:var(--accent)}
.stand_h,.panel.stand h2.stand_h{margin-top:1.55rem;font-family:"GT Super Display",Georgia,"Times New Roman",serif;font-weight:300;font-size:2.4rem;line-height:1;letter-spacing:-.02em;color:var(--sk);max-width:8em}
.stand_lead{margin-top:.6rem;font-size:.875rem;line-height:1.35;color:var(--sk2);max-width:22em}
.stand_form{margin-top:1.4rem;display:grid;gap:1.05rem}
.sf{display:grid;gap:.1rem}
.sf label,.sf_need legend{font-size:.625rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--sk2);padding:0}
.sf label span{letter-spacing:.02em;text-transform:none;font-weight:400}
.sf input,.sf textarea{display:block;width:100%;font:inherit;font-size:1rem;line-height:1.3;color:var(--sk);caret-color:var(--accent);background:transparent;border:0;border-bottom:1px solid var(--sl);border-radius:0;padding:.35rem 0 .4rem;outline:none;resize:none;appearance:none;-webkit-appearance:none;user-select:text;transition:border-color .4s ease,box-shadow .4s ease}
.sf textarea{height:3.6rem}
.sf input:focus,.sf textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.stand .field.is-bad input{border-bottom-color:#a8461f;box-shadow:0 1px 0 #a8461f}
.sf_need{border:0;margin:0;padding:0;min-width:0}
.sf_pills{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.35rem}
.sp{position:relative;display:inline-flex;cursor:pointer}
.sp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sp span{display:inline-flex;align-items:center;height:1.9rem;padding:0 .75rem;border-radius:100px;border:1px solid var(--sl);font-size:.8125rem;line-height:1;color:var(--sk);transition:background-color .35s var(--out),border-color .35s var(--out),color .35s var(--out)}
.sp:hover span{border-color:rgba(18,19,22,.55)}
.sp input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.sp input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sf_end{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.2rem}
.stand .sf_send{height:2.75rem}
.sf_note{font-size:.75rem;line-height:1.3;color:#8a3412}
.sf_note:empty{display:none}
.stand_done{margin-top:1.6rem;outline:none}
.stand_done .stand_h{margin-top:0;font-size:3rem}
.stand_done[hidden]{display:none}
.stand_contact{margin-top:1.3rem;padding-top:.8rem;border-top:1px solid rgba(18,19,22,.12);display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.75rem;color:var(--sk2)}
.stand_contact a{transition:color .3s}
.stand_contact a:hover,.stand_contact a:focus-visible{color:var(--accent)}
.stand.is-sent .stand_form,.stand.is-sent>.stand_lead,.stand.is-sent>h2.stand_h{display:none}
.stand.is-sending .sf_send{opacity:.6;pointer-events:none}
/* kankaalla: virtuaalinen 300 × 518 px (sama asettelu kuin tower.js:n kankaan kuvassa) */
.panel.is-wall.stand{width:600px;height:1036px;padding:62px 52px 40px;margin:0;border-radius:0;overflow:hidden;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;box-shadow:none;display:flex;flex-direction:column}
.panel.is-wall.stand>*{zoom:2}
.panel.is-wall .stand_h,.panel.is-wall.stand h2.stand_h{margin-top:26px;font-size:33px;line-height:33px;max-width:none}
.panel.is-wall .stand_lead{margin-top:10px;font-size:11.5px;line-height:15px;max-width:15.5em}
.panel.is-wall .stand_form{margin-top:22px;gap:13px}
.panel.is-wall .sf{gap:0}
.panel.is-wall .sf label,.panel.is-wall .sf_need legend{font-size:8.5px;letter-spacing:.16em}
.panel.is-wall .sf input,.panel.is-wall .sf textarea{font-size:12.5px;padding:5px 0 6px}
.panel.is-wall .sf textarea{height:42px}
.panel.is-wall .sf_pills{margin-top:6px;gap:5px}
.panel.is-wall .sp span{height:21px;padding:0 9px;font-size:10.5px}
.panel.is-wall .sf_end{margin-top:4px}
.panel.is-wall .stand .sf_send,.panel.is-wall.stand .sf_send{height:30px;gap:8px;padding:0 5px 0 13px;font-size:11.5px}
.panel.is-wall.stand .sf_send .btn_b{width:20px;height:20px}
.panel.is-wall.stand .sf_send .btn_b svg{width:10px;height:10px}
.panel.is-wall .sf_note{font-size:9.5px}
.panel.is-wall .stand_done{margin-top:28px}
.panel.is-wall .stand_done .stand_h{font-size:44px;line-height:1}
.panel.is-wall .stand_contact{margin-top:auto;padding-top:9px;font-size:9.5px;gap:3px 14px}
html.js .panel.is-wall{position:absolute;left:0;top:0;transform-origin:0 0;opacity:var(--wo,0)!important;filter:none!important;transition:none!important;pointer-events:none!important}
html.js .panel.is-wall.is-on{pointer-events:auto!important}
/* aulan muut toiminnot: mobiilissa näkyvät lomakkeen alla, desktopilla vain näppäimistöfokuksessa (hissinappi ja kellarin ovi ovat 3D:ssä) */
.aula_more{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin:1.1rem auto 0;width:min(24rem,100%)}
.aula_lift{gap:.6rem}
.aula_lift .liftcall_i{width:1.6rem;height:1.6rem;margin-left:-.55rem;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor}
.aula_lift .liftcall_i svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.aula_k{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:#f7f7f5;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.aula_k svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--out)}
.aula_k:hover svg,.aula_k:focus-visible svg{transform:translateY(2px)}
/* mobiilissa aulan seinä on vaalea: tumma teksti maitolasilla */
.aula_more .aula_lift{color:#121316;border-color:rgba(18,19,22,.28);background:rgba(248,247,244,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-shadow:none}
.aula_more .aula_lift:hover,.aula_more .aula_lift:focus-visible{background:#fff;border-color:#fff}
.aula_more .aula_k{color:#121316;text-shadow:0 1px 10px rgba(255,255,255,.6)}
@media (min-aspect-ratio:21/20) and (min-width:768px){
  .aula_more{position:fixed;left:50%;bottom:1.4rem;z-index:5;width:auto;margin:0;transform:translateX(-50%);padding:.45rem .9rem .45rem .45rem;border-radius:100px;background:rgba(248,247,244,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .3s}
  .aula_more:focus-within{opacity:1;pointer-events:auto}
}
/* lomakkeen kontti: bodyn suora lapsi canvasin ja sisällön (main z 3) yläpuolella, navin ja reunarivin alapuolella */
.wall2d{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
html.menu-open .wall2d,html.in-room .wall2d{visibility:hidden}

/* footer aulassa */
.panel.is-foot{width:100%;max-width:none;padding:0 .2rem}
.foot_brand{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:600;letter-spacing:-.06em;line-height:.8;display:flex;align-items:flex-end;gap:.04em;color:rgba(247,247,245,.94)}
.foot_brand i{width:.11em;height:.11em;margin-bottom:.03em}
.foot_row{margin-top:1.5rem;display:flex;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap;color:var(--muted)}
.foot_links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-right:4.5rem}
.foot_links a,.foot_links button{font-size:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:inherit;color:var(--muted);transition:color .3s}
.foot_links a:hover,.foot_links button:hover{color:#fff}
.foot_links [data-top]{color:var(--fg)}
/* kierros 43: kaupunkisivujen rivi footerin alimpana (oma rivi, sama hillitty sävy kuin linkeillä) */
.foot_cities{width:100%;margin:0;padding-right:4.5rem;color:var(--muted)}
.foot_cities a{color:var(--muted);transition:color .3s}
.foot_cities a:hover{color:#fff}

/* easter egg: kurkista-label ja huoneen ohjain */
.egglabel{position:fixed;left:0;top:0;z-index:35;pointer-events:none;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4);opacity:0;transform:translate(var(--ex,0),var(--ey,0)) scale(.9);transition:opacity .3s,transform .08s linear}
html.egg-hover .egglabel{opacity:1}
/* maamerkin nimi (Tornimäe, Majakka, Tuomiokirkko...) */
.marklabel{position:fixed;left:0;top:0;z-index:35;pointer-events:none;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4);white-space:nowrap;opacity:0;transform:translate(var(--mx,0),var(--my,0));transition:opacity .3s ease}
html.mark-hover .marklabel{opacity:1}
html.menu-open .marklabel,html.in-room .marklabel{opacity:0}
.roomui{position:fixed;left:50%;bottom:clamp(1.2rem,4vh,2.5rem);transform:translateX(-50%);z-index:36;display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.2rem;border-radius:100px;background:rgba(247,247,245,.88);color:var(--ink);border:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.roomui[hidden]{display:none}
.roomui .cap{color:#444}
.roomui .pill{color:var(--ink);border-color:rgba(15,15,15,.35);text-shadow:none}
.roomui .pill:hover{background:rgba(15,15,15,.06);border-color:var(--ink)}
html.in-room .rail,html.in-room .scrollhint{opacity:0;pointer-events:none}
.rail{transition:opacity .5s}


/* ---------- matalat läppärit ---------- */
@media (max-height:820px) and (min-width:768px){
  .panel h2:where(:not(.hero_title)){font-size:clamp(2.3rem,3.9vw,3.8rem)}
  .hero_title{font-size:clamp(3.2rem,5.6vw,5.6rem)}
  .svc{margin-top:1.3rem}.svc_row{padding:.7rem 0}.svc_name{font-size:clamp(1.6rem,2.5vw,2.3rem)}.svc_in p{font-size:.9063rem}.svc_k{padding-bottom:.8rem}
  .steps_w{margin-top:1.8rem}.steps h3{font-size:1.25rem}.st_n{font-size:2.1rem}.steps p{font-size:.9063rem}
  .plans>li{padding:1.3rem 1.5rem 1.2rem}.plan_tag{top:1.3rem;right:1.5rem}.plan_f{margin-top:.8rem;padding-top:.8rem;gap:.3rem}.plans .sum{margin-top:.9rem}
  .works{margin-top:1.1rem;gap:.35rem}.works a{grid-template-columns:7.5rem minmax(0,1fr) auto;padding:.2rem 0}.works h3{font-size:clamp(1.4rem,2vw,1.9rem)}.plans{margin:1.8rem 0}
  .team{margin-top:1.1rem}.quote{margin-top:1.2rem}
  .rail{--step:1.9rem}
}
@media (max-width:1100px) and (min-width:768px){
  .panel{width:min(30rem,50vw)}
  .panel.is-wide{width:min(40rem,62vw)}
  .panel.is-svc{width:min(40rem,60vw)}
  .panel.is-steps{width:min(44rem,64vw)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
}

/* pystykuva ja mobiili: torni ylhäällä, teksti alareunassa koko leveydeltä */
@media (max-aspect-ratio:21/20){
  .stop,.stop.is-hero,.stop.is-lobby{height:auto;min-height:100vh;min-height:100svh}
  .stop_pin{position:relative;height:auto;min-height:100vh;min-height:100svh;align-items:flex-end;padding:40svh var(--pad) 8rem}
  .panel{--fx:2rem;--fy:5.5rem;--r0:100%;--r1:100%;--r2:100%;--r3:100%;--r4:100%}
  /* aulan lomake on mobiilissa vaalean seinän edessä: tummempi pohja vain tässä, jotta kentät ja nimiöt erottuvat */
  /* aula: hissi näkyy ylhäällä, kutsupaneeli sen alla */
  .stop.is-lobby .stop_pin{padding-top:52svh;padding-bottom:7rem;flex-direction:column;align-items:center;justify-content:flex-start}
  .stop.is-lobby .panel.stand{width:min(24rem,100%);margin:0 auto}
  .stop.is-foot{height:auto}
  .stop.is-foot .stop_pin{padding-top:58svh}
  .panel,.panel.is-wide,.panel.is-form,.panel.is-svc,.panel.is-steps,.stop.is-hero .panel{width:100%;max-height:none;margin:0}
  /* aikajana pystyyn: viiva vasemmalla, piste jokaisen numeron kohdalla */
  .steps_w{margin-top:1.6rem;padding-top:0;padding-left:1.5rem}
  .steps_line{left:0;right:auto;top:.9rem;bottom:1rem;width:1px;height:auto}
  .steps_line i{transform-origin:50% 0;transform:scaleY(0)}
  html.js.ready .stop.is-active .steps_line i,html:not(.js) .steps_line i{transform:scaleY(1)}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .st_dot{top:.95rem;left:-1.5rem;margin:-3px 0 0 -3px}
  .steps p{max-width:none}
  .stop.is-foot .stop_pin{padding-bottom:4.75rem}
  .foot_row{padding-right:4rem}
  .scrollhint{display:none}
  .rail{top:auto;bottom:0;left:0;right:0;transform:none;padding:0 var(--pad) .9rem;--step:auto;background:linear-gradient(180deg,rgba(10,9,8,0),rgba(10,9,8,.6) 60%)}
  .rail ol{display:flex;justify-content:space-between;padding-top:1.6rem}
  .rail li{flex:1 1 0;display:flex;justify-content:center}
  .rail_line{left:calc(var(--pad) + 100% / 16 - var(--pad) / 8);right:calc(var(--pad) + 100% / 16 - var(--pad) / 8);top:auto;bottom:calc(.9rem + .7rem);width:auto;height:1px}
  .rail_line i{inset:0 auto 0 0;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(var(--rp,0))}
  .rail a{height:1.4rem;width:100%;justify-content:center;padding:0}
  .rail a::after{right:auto;left:50%;margin-left:-2.5px}
  .rail a b,.rail a span{position:absolute;bottom:1.45rem;left:50%;transform:translateX(-50%);white-space:nowrap}
  .rail a span{display:none}
  .rail a[aria-current="true"] b{transform:translateX(-50%)}
  .rail a:hover b{transform:translateX(-50%)}
  .rail a[aria-current="true"] span{display:inline;max-width:none;left:calc(50% + .9rem);transform:none;opacity:1}
  .rail a[aria-current="true"] b{left:calc(50% - .9rem)}
  .rail li:last-child a[aria-current="true"] b{left:auto;right:calc(50% + 2.4rem);transform:none}
  .rail li:last-child a[aria-current="true"] span{left:auto;right:-.2rem}
  .rail li:first-child a[aria-current="true"] b{left:-.2rem;transform:none}
  .rail li:first-child a[aria-current="true"] span{left:1.9rem}
  .totop{bottom:4.7rem;right:.75rem;width:2.85rem;height:2.85rem}
  .totop svg{width:13px;height:21px}
  .scrollhint{bottom:5rem}
  .foot_links{padding-right:0}
}
@media (max-width:767px){
  :root{--nav:3.75rem;--pad:1rem}
  .nav_r{gap:.9rem}
  .nav .nav_cta{height:2.5rem;padding:0 .45rem 0 1rem;gap:.55rem;font-size:.8125rem}
  .nav .nav_cta .btn_b{width:1.4rem;height:1.4rem}
  .nav_burger_i{width:30px}
  .hero_title{font-size:clamp(2.6rem,11.5vw,3.6rem);line-height:.96}
  .panel h2:where(:not(.hero_title)){font-size:clamp(2.2rem,9.4vw,2.7rem)}
  .lead{font-size:.9688rem}
  .btns .btn{height:2.9rem}.btn.is-main{padding:0 .65rem 0 1.25rem}.btn.is-line{padding:0 1.15rem}
  .svc{margin-top:1.2rem}.svc_row{grid-template-columns:1.7rem minmax(0,1fr) auto .9rem;column-gap:.6rem;padding:.7rem 0}
  .svc_name{font-size:1.5rem}.svc_p{font-size:.8125rem}.svc_n{font-size:.75rem}
  .svc_in{padding-left:2.3rem}.svc_in p{font-size:.875rem}.svc_k{font-size:.75rem}
  .works h3{font-size:1.375rem}
  .works{gap:.55rem}
  .works a{grid-template-columns:6.25rem minmax(0,1fr) auto;column-gap:.9rem}
  .works .cap{font-size:.625rem;letter-spacing:.1em}
  .steps h3{font-size:1.2rem;margin-top:.35rem}.st_n{font-size:1.8rem}.steps p{font-size:.875rem;margin-top:.4rem}
  .plans{grid-template-columns:1fr;gap:1rem;margin:1.6rem 0 0}
  .plans>li{padding:1.3rem 1.3rem 1.1rem}.plan_tag{top:1.3rem;right:1.3rem}.plan_f{margin-top:.85rem;padding-top:.85rem}
  .plans .sum{font-size:2rem;margin-top:.7rem}
  .plans .sum small{display:inline;margin:0 .4rem 0 0}
  .plans .d{font-size:.875rem;margin-top:.4rem}
  .plans .tbtn,.plans .btn{margin-top:.8rem}
  .team{grid-template-columns:1fr 1fr;gap:.8rem}
  .team img{width:2.6rem;height:2.6rem}
  .team b{font-size:.9375rem}
  .direct div{grid-template-columns:5.5rem 1fr}
  .foot_brand{font-size:4rem}
  .menu_in{grid-template-columns:1fr;align-items:start;align-content:space-between;padding-top:calc(var(--nav) + 1rem)}
  .ml_n{font-size:clamp(1.7rem,8vw,2.4rem)}
  .ml_d{display:none}
  .menu_links a::before{left:-.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* evästebanneri */
#cc-root .cc-banner{border-radius:.9rem!important;background:rgba(23,22,21,.9)!important;color:var(--fg)!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(247,247,245,.1),0 30px 70px -30px rgba(0,0,0,.85)!important;-webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%);font-family:var(--sans)!important;max-width:25rem!important}
#cc-root .cc-title{font-size:1.125rem!important;font-weight:500!important;letter-spacing:-.02em!important}
#cc-root .cc-text,#cc-root .cc-banner p{font-size:.8125rem!important;line-height:1.45!important;color:rgba(247,247,245,.7)!important}
#cc-root .cc-btn{border-radius:100px!important;font-family:var(--sans)!important;font-weight:500!important;height:2.75rem!important;min-height:0!important}
#cc-root .cc-actions-main{flex:0 0 auto!important}

/* ---------- sävy osion mukaan: tumma käyttöliittymä vaaleaa taivasta vasten ---------- */
.nav_brand,.nav_burger,.rail a{transition:color .6s var(--out),border-color .6s var(--out),background-color .35s var(--out),text-shadow .6s,opacity .3s}
.nav .nav_cta{transition:transform .4s var(--out),background-color .4s var(--out),opacity .4s}
.rail a::after,.rail_line{transition:background-color .6s var(--out),transform .45s var(--out)}
.rail::before,.rail::after{content:"";position:absolute;z-index:-1;inset:-4rem -1.4rem -4rem -3.2rem;pointer-events:none;transition:opacity .6s var(--out)}
.rail::before{background:radial-gradient(50% 50% at 62% 50%,rgba(255,255,255,.18),rgba(255,255,255,0) 100%);opacity:0}
.rail::after{background:radial-gradient(50% 50% at 62% 50%,rgba(0,0,0,.25),rgba(0,0,0,0) 100%);opacity:1}
html.ui-dark:not(.menu-open):not(.in-room) .nav_brand{color:var(--ink);text-shadow:0 1px 14px rgba(255,255,255,.35)}
html.ui-dark:not(.menu-open):not(.in-room) .nav_brand i{background:var(--accent)}
html.ui-dark:not(.menu-open):not(.in-room) .nav_burger{color:var(--ink)}
html.ui-dark:not(.menu-open):not(.in-room) .nav_burger_i{filter:drop-shadow(0 1px 6px rgba(255,255,255,.35))}
@media (min-aspect-ratio:21/20){
  html.ui-dark .rail::before{opacity:1}
  html.ui-dark .rail::after{opacity:0}
  html.ui-dark .rail a{color:rgba(18,17,16,.82);text-shadow:0 1px 10px rgba(255,255,255,.4)}
  html.ui-dark .rail a[aria-current="true"]{color:var(--ink)}
  html.ui-dark .rail a[aria-current="true"] b{color:var(--ink)}
  html.ui-dark .rail a::after{background:rgba(18,17,16,.7)}
  html.ui-dark .rail a[aria-current="true"]::after{background:var(--accent);box-shadow:0 0 0 1px rgba(29,78,216,.35)}
  html.ui-dark .rail_line{background:rgba(18,17,16,.32);box-shadow:none}
  html.ui-dark .rail_line i{background:var(--accent)}
}
@media (max-aspect-ratio:21/20){ .rail::before,.rail::after{display:none} }

/* ---------- valikko: iso torni ja läpileikkaus nykyisestä kerroksesta ---------- */
.mtower{grid-column:2;grid-row:1/3;align-self:center;position:relative;height:min(78vh,100%);min-height:22rem;margin:0}
.mtower_svg{position:absolute;right:0;top:0;height:100%;width:auto;overflow:visible}
.mtower_svg .ol{fill:none;stroke:rgba(247,247,245,.6);stroke-width:1;vector-effect:non-scaling-stroke}
.mtower_svg polygon.ol{fill:url(#mtG)}
.mtower_svg .fl{stroke:rgba(247,247,245,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.mtower_svg .ml{stroke:rgba(247,247,245,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.mtower_svg .rl{stroke:rgba(247,247,245,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.mtower_svg .gl{stroke:rgba(247,247,245,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_band,.mt_lead i,.mt_cut{position:absolute;transition:top .7s var(--out),left .7s var(--out),width .7s var(--out),height .7s var(--out)}
.mt_band{top:var(--bt);left:var(--bl);width:var(--bw);height:var(--bh);background:rgba(247,247,245,.9);box-shadow:0 0 14px 1px rgba(247,247,245,.28)}
.mtower.is-here .mt_band{background:var(--accent);box-shadow:0 0 14px 1px rgba(29,78,216,.55)}
.mt_lead i{display:block;background:rgba(247,247,245,.75)}
.mt_lead i:first-child{left:var(--lx);top:var(--vt);width:1px;height:var(--vh)}
.mt_lead i:last-child{left:var(--lx);top:var(--fy);width:var(--lw);height:1px}
.mt_cut{top:var(--ct);left:var(--cl);width:var(--cw)}
.mt_box{position:relative;aspect-ratio:384/144;border-radius:.35rem;overflow:hidden;background:linear-gradient(180deg,rgba(26,30,38,.96),rgba(14,17,22,.96));box-shadow:inset 0 2px 0 rgba(247,247,245,.45),inset 0 -3px 0 rgba(247,247,245,.5),inset 0 0 0 1px rgba(247,247,245,.24),0 24px 50px -24px rgba(0,0,0,.8)}
.mt_room{display:block;width:100%;height:100%}
.mt_cap{margin-top:.85rem;display:grid;gap:.35rem;max-width:24rem}
.mt_cap b{font-weight:500;color:var(--fg);display:flex;align-items:center;gap:.6rem}
.mt_cap b::after{content:"Olet täällä";font-size:.5625rem;letter-spacing:.14em;padding:.2rem .5rem;border-radius:100px;color:#fff;background:var(--accent);opacity:0;transition:opacity .35s}
.mtower.is-here .mt_cap b::after{opacity:1}
.mt_cap span{font-size:.9375rem;line-height:1.4;color:var(--muted)}
.mtower.is-instant .mt_band,.mtower.is-instant .mt_lead i,.mtower.is-instant .mt_cut,.mtower.is-instant .rm{transition:none!important}
/* läpileikkausten piirrokset */
.mt_room .rm{opacity:0;transition:opacity .45s var(--out)}
.mt_room .rm.is-on{opacity:1}
.mt_room .ln,.mt_room .lf,.mt_room .lf2,.mt_room .lt,.mt_room .gs,.mt_room .ik{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mt_room .ln{stroke:rgba(247,247,245,.62)}
.mt_room .lf{stroke:rgba(247,247,245,.16)}
.mt_room .lf2{stroke:rgba(247,247,245,.42)}
.mt_room .lt{stroke:rgba(255,226,180,.55);stroke-width:2}
.mt_room .gs{stroke:rgba(255,255,255,.9)}
.mt_room .ik{stroke:rgba(18,17,16,.7)}
.mt_room .wall{fill:rgba(247,247,245,.035);stroke:rgba(247,247,245,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .floor{fill:rgba(247,247,245,.05)}
.mt_room .ceil{fill:rgba(247,247,245,.02)}
.mt_room .deck{fill:rgba(247,247,245,.07)}
.mt_room .dk{fill:#171b22;stroke:rgba(247,247,245,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .tp{fill:#232832;stroke:rgba(247,247,245,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .fl{fill:rgba(247,247,245,.06);stroke:rgba(247,247,245,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .desk{fill:rgba(247,247,245,.1);stroke:rgba(247,247,245,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .win{fill:rgba(93,127,180,.16);stroke:rgba(247,247,245,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .pic{fill:rgba(247,247,245,.08)}
.mt_room .board{fill:rgba(247,247,245,.1)}
.mt_room .note{fill:rgba(247,247,245,.14)}
.mt_room .gf{fill:rgba(255,255,255,.9)}
.mt_room .sg{fill:rgba(247,247,245,.08);stroke:rgba(247,247,245,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .sgf{fill:rgba(247,247,245,.85);stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .scr{fill:#f7f7f5;opacity:.3;animation:mtScr 3s ease-in-out infinite alternate}
.mt_room .glow{fill:rgba(255,214,150,.13)}
.mt_room .glow2{stroke:rgba(255,200,130,.35);stroke-width:5;filter:blur(3px)}
.mt_room .cone{fill:rgba(255,220,160,.07)}
.mt_room .spot{fill:#fff3dc}
.mt_room .sun{fill:rgba(255,243,220,.35);stroke:#fff3dc;stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .tx{fill:rgba(247,247,245,.7);font:500 8px var(--sans);letter-spacing:.08em;text-anchor:middle}
.mt_room .logo{fill:var(--fg);color:var(--fg);font:600 19px var(--sans);letter-spacing:-.04em}
.mt_room .dr{fill:rgba(170,190,215,.12);stroke:rgba(247,247,245,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.mt_room .doorglow{fill:rgba(255,206,140,.22)}
.mt_room .plant{transform-box:fill-box;transform-origin:50% 100%;animation:mtSway 5.5s ease-in-out infinite alternate}
.mt_room .door-l{animation:mtDoorL 8s ease-in-out infinite}
.mt_room .door-r{animation:mtDoorR 8s ease-in-out infinite}
.mt_room .cloud{animation:mtCloud 18s ease-in-out infinite alternate}
@keyframes mtScr{from{opacity:.28}to{opacity:.85}}
@keyframes mtSway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes mtDoorL{0%,45%{transform:none}58%,82%{transform:translateX(-27px)}95%,100%{transform:none}}
@keyframes mtDoorR{0%,45%{transform:none}58%,82%{transform:translateX(27px)}95%,100%{transform:none}}
@keyframes mtCloud{from{transform:none}to{transform:translateX(18px)}}
html:not(.menu-open) .mt_room *{animation-play-state:paused}
html.reduced .mt_room *{animation:none!important}
@media (max-width:899px){
  .mtower{display:none}
  .menu_in{grid-template-columns:minmax(0,1fr)}
}
@media (max-height:820px) and (min-width:900px){
  .ml_n{font-size:clamp(1.7rem,min(3vw,5vh),3rem)}
  .menu_links a{padding:clamp(.35rem,1vh,.7rem) 0}
}

/* ---------- kierros 8 (7.10.2026) ---------- */
/* ei tummennuksia tekstien takana: luettavuus tekstivarjolla */
.panel:not(.is-wall):not(.is-foot)::before,.stop_pin::before{display:none!important}
:root{--tsh:0 1px 2px rgba(6,10,20,.28),0 2px 22px rgba(6,10,20,.42)}
/* valikko: ei viivoja linkkien välissä, välit ennallaan, ei pikkutekstejä */
.menu_links,.menu_links a{border:0}
.menu_links a{border-bottom:1px solid transparent}
.ml_d{display:none}
/* palvelut: ei numeroita, aktiivisen rivin edessä sininen valopiste kuten valikossa */
.svc_row{position:relative;grid-template-columns:minmax(0,1fr) auto 1.1rem}
.svc_dot{position:absolute;left:-1.1rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent-l);box-shadow:0 0 0 3px rgba(79,124,240,.2),0 0 12px rgba(79,124,240,.55);opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s var(--out)}
.svc>li.is-open .svc_dot{opacity:1;transform:none}
.svc_in{padding-left:8px}
.svc>li.is-open .svc_a{transform:rotate(-45deg)}
/* prosessi tiiviimmäksi */
.panel.is-steps{width:min(46rem,46vw)}
.steps{column-gap:clamp(1rem,1.6vw,1.6rem)}
.steps p{max-width:12.5rem}
@media (max-width:1199px){.panel.is-steps{width:min(42rem,58vw)}}
@media (max-aspect-ratio:21/20){.panel.is-steps{width:100%}}
@media (max-width:767px){
  .svc_row{grid-template-columns:minmax(0,1fr) auto .9rem}
  .svc_dot{left:-.8rem}
  .svc_in{padding-left:6px}
  .panel.is-steps{width:100%}
}
/* kierros 8: vaaleilla pysäkeillä (taivas) tumma teksti ilman tummennusta */
:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .panel{--fg:#0f1115;--muted:rgba(15,17,21,.74);--faint:rgba(15,17,21,.7);--soft:rgba(15,17,21,.74);color:#0f1115;text-shadow:0 0 22px rgba(255,255,255,.28)}
:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .eyebrow{color:rgba(15,17,21,.78);text-shadow:none}
:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .lead{color:rgba(15,17,21,.84)}
:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line{border-color:rgba(15,17,21,.5);color:#0f1115;text-shadow:none}
:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line:hover,:is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line:focus-visible{border-color:#0f1115;background:#0f1115;color:#fff}
#huippu .scrollhint{color:rgba(15,17,21,.78);text-shadow:none}
#huippu .scrollhint i{background:linear-gradient(rgba(15,17,21,0),rgba(15,17,21,.6))}
#huippu .scrollhint i::after{background:#0f1115}
#palvelut .svc{border-top-color:rgba(15,17,21,.16)}
#palvelut .svc>li{border-bottom-color:rgba(15,17,21,.16)}
#palvelut .svc_row{color:#0f1115}
#palvelut .svc_p{color:rgba(15,17,21,.8)}
#palvelut .svc_in p{color:rgba(15,17,21,.84)}
#palvelut .svc_k{color:rgba(15,17,21,.72)}
#palvelut .svc_k i,#palvelut .svc>li.is-open .svc_a{color:var(--accent)}
#palvelut .svc_dot{background:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.16),0 0 12px rgba(29,78,216,.5)}
#tyot .works h3{color:#0f1115}
#tyot .works .cap{color:rgba(15,17,21,.7)}
#tyot .works a:hover h3,#tyot .works a:focus-visible h3{color:var(--accent)}
#tyot .works a:hover .arr{color:var(--accent)}
#tyot .works .w_thumb::after{box-shadow:inset 0 0 0 1px rgba(15,17,21,.1)}
#tyot .works_more{color:rgba(15,17,21,.78)}
#tyot .works_more a{border-bottom-color:rgba(15,17,21,.3)}
#tyot .works_more a:hover{color:var(--accent);border-color:var(--accent)}
/* hämärät pysäkit: tiukka kirjainvarjo laatikon sijaan */
:is(#hinnat,#yhteys) .panel{text-shadow:0 1px 2px rgba(4,6,12,.55),0 0 10px rgba(4,6,12,.42),0 2px 26px rgba(4,6,12,.3)}
:is(#hinnat,#yhteys) .eyebrow,:is(#hinnat,#yhteys) .cap{color:#fff;text-shadow:0 1px 2px rgba(4,6,12,.7),0 0 10px rgba(4,6,12,.5)}
:is(#hinnat,#yhteys) .lead{color:#fff}
/* hintaosion otsikko on taivasta vasten: tumma teksti, kortit pysyvät lasina */
#hinnat .panel>.eyebrow,#hinnat .panel>h2,#hinnat .panel>.lead{color:#0f1115;text-shadow:0 0 22px rgba(255,255,255,.3)}
#hinnat .panel>.eyebrow{color:rgba(15,17,21,.78)}
#tekijat .team img{box-shadow:0 0 0 1px rgba(15,17,21,.14)}
/* footer vaaleaa puuseinää vasten (vaakaruutu): tumma teksti */
@media (min-aspect-ratio:21/20){
  .panel.is-foot{--fg:#0f1115;--muted:rgba(15,17,21,.78);color:#0f1115;text-shadow:0 0 18px rgba(255,248,236,.35)}
  .foot_brand{color:#0f1115}
  .foot_links a:hover,.foot_links button:hover,.foot_cities a:hover{color:var(--accent)}
}
/* pystyruutu: teksti on tornin päällä, joten tumman tekstin taakse vaalea pilviusva (ei tummennusta) */
@media (max-aspect-ratio:21/20){
  :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .panel:not(.is-wall)::before{display:block!important;background:rgba(232,238,247,.8)}
  #hinnat .panel>.eyebrow,#hinnat .panel>h2,#hinnat .panel>.lead{color:#fff;text-shadow:0 1px 2px rgba(4,6,12,.55),0 0 10px rgba(4,6,12,.42),0 2px 26px rgba(4,6,12,.3)}
}
/* kierros 9 */
.svc_name{font-size:clamp(1.5rem,2.35vw,2.2rem)}
@media (max-height:820px) and (min-width:768px){.svc_name{font-size:clamp(1.4rem,2.1vw,1.95rem)}}
@media (max-width:767px){.svc_name{font-size:1.3rem}}
.plans h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-l);box-shadow:0 0 0 3px rgba(79,124,240,.22)}
/* kierros 10: hinnat ja Tekijöiden sitaatti näkyvämmiksi */
.plans .sum{margin-top:1.1rem;font-size:clamp(2.6rem,3.4vw,3.6rem);font-weight:600;letter-spacing:-.05em;color:#fff;text-shadow:0 2px 22px rgba(8,12,28,.45)}
.plans .sum .cur{font-size:.55em;font-weight:500;letter-spacing:0;color:#b9cbff;margin-left:.08em}
.plans .sum small{color:#fff;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem}
@media (max-height:820px) and (min-width:768px){.plans .sum{font-size:clamp(2.3rem,3vw,3rem);margin-top:.8rem}}
@media (max-width:767px){.plans .sum{font-size:2.4rem}.plans .sum small{font-size:.625rem}}
#tekijat .quote{position:relative;margin-top:2rem;padding-left:1.15rem;max-width:34rem}
#tekijat .quote::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;border-radius:2px;background:var(--accent)}
#tekijat .quote blockquote{font-size:clamp(1.45rem,2vw,1.95rem);font-weight:500;line-height:1.2;letter-spacing:-.025em;color:#0f1115}
#tekijat .quote figcaption{margin-top:.75rem;color:rgba(15,17,21,.78)}
@media (max-height:820px) and (min-width:768px){#tekijat .quote{margin-top:1.4rem}#tekijat .quote blockquote{font-size:clamp(1.3rem,1.8vw,1.6rem)}}
@media (max-width:767px){#tekijat .quote blockquote{font-size:1.3rem}}

/* ---------- kierros 11 (9.10.2026) ---------- */
/* tulokset: kolme isoa ohutta lukua rivissä, alla vaihtuva asiakaspalaute */
.panel.is-res{width:min(44rem,46vw)}
.stats{margin-top:2.2rem;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:clamp(2rem,4vw,4rem)}
.stats li{display:grid;gap:.55rem}
.stat_n{font-size:clamp(3.4rem,5.6vw,6rem);font-weight:250;line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:#0f1115}
.stat_l{font-size:.8125rem;line-height:1.3;letter-spacing:.01em;color:rgba(15,17,21,.78)}
html.js .stats li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready .stop.is-active .stats li{opacity:1;transform:none;transition-delay:calc(.2s + var(--k) * .12s)}
.vq{position:relative;margin-top:2.2rem;padding-left:1.15rem;max-width:34rem}
.vq::before{content:"";position:absolute;left:0;top:.25em;bottom:2.4rem;width:2px;border-radius:2px;background:var(--accent)}
.vq_list{display:grid}
.vq_item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .9s var(--out),transform 1.1s var(--out),visibility 0s .9s}
.vq_item.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--out) .25s,transform 1.1s var(--out) .25s,visibility 0s}
.vq_item blockquote{font-size:clamp(1.3rem,1.75vw,1.7rem);font-weight:500;line-height:1.22;letter-spacing:-.025em;color:#0f1115;text-wrap:pretty}
.vq_item figcaption{margin-top:.75rem;color:rgba(15,17,21,.78)}
.vq_dots{display:flex;gap:.25rem;margin-top:1rem;margin-left:-.55rem}
.vq_dots button{position:relative;width:1.6rem;height:1.6rem}
.vq_dots button::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(15,17,21,.28);transition:background-color .5s var(--out),transform .5s var(--out)}
.vq_dots button[aria-pressed="true"]::after{background:var(--accent);transform:scale(1.25)}
.vq_dots button:hover::after{background:rgba(15,17,21,.55)}
@media (max-height:820px) and (min-width:768px){.stats{margin-top:1.5rem}.stat_n{font-size:clamp(3rem,4.6vw,4.8rem)}.vq{margin-top:1.5rem}.vq_item blockquote{font-size:clamp(1.2rem,1.55vw,1.45rem)}}
@media (max-width:1100px) and (min-width:768px){.panel.is-res{width:min(40rem,60vw)}}
@media (max-aspect-ratio:21/20){.panel.is-res{width:100%}}
@media (max-width:767px){.stats{column-gap:1.6rem;margin-top:1.5rem}.stat_n{font-size:2.6rem}.stat_l{font-size:.75rem}.vq{margin-top:1.5rem}.vq_item blockquote{font-size:1.2rem}}

/* astu sisään (kierros 12): ensisijainen sininen pilleri, pallossa hissinovi (kaksi ohutta ovea raottuvat hoverissa) */
.btns.is-enter{margin-top:1.6rem}
#hinnat .plans{margin-bottom:0}
.enterwrap{position:relative;display:inline-flex}
.btn.is-enter{gap:.8rem}
.btn_dr{display:grid;place-items:center}
.btn_door{position:relative;flex:none;display:flex;gap:2px;width:.95rem;height:1.05rem;overflow:hidden;border-bottom:1.25px solid currentColor}
.btn_dr .btn_door{width:.72rem;height:.8rem;gap:1.5px;border-bottom-width:1.1px}
.btn_door::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#ffd49a;opacity:0;transition:opacity .5s var(--out)}
.btn_door i{position:relative;flex:1;border:1.25px solid currentColor;border-bottom:0;border-radius:1px 1px 0 0;transition:transform .55s var(--out)}
.btn_dr .btn_door i{border-width:1.1px}
.btn.is-enter:hover .btn_door i:first-child,.btn.is-enter:focus-visible .btn_door i:first-child{transform:translateX(-45%)}
.btn.is-enter:hover .btn_door i:last-child,.btn.is-enter:focus-visible .btn_door i:last-child{transform:translateX(45%)}
.btn.is-enter:hover .btn_door::before,.btn.is-enter:focus-visible .btn_door::before{opacity:1}
.btn.is-enter:hover .btn_b,.btn.is-enter:focus-visible .btn_b{transform:none}
/* vihjekupla napin oikealla puolella (mobiilissa alla) */
.enterhint{position:absolute;left:calc(100% + .9rem);top:50%;z-index:2;width:max-content;max-width:19.5rem;padding:.6rem .85rem .62rem;border-radius:.7rem;background:#f7f7f5;color:#0f1115;font-size:.8125rem;line-height:1.3;text-shadow:none;box-shadow:0 14px 34px -14px rgba(8,12,28,.45),inset 0 0 0 1px rgba(15,17,21,.06);opacity:0;transform:translate(-.4rem,-50%);transition:opacity .5s var(--out),transform .6s var(--out)}
.enterhint::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;margin-top:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.enterhint .cap{display:inline-block;margin-right:.35rem;color:var(--accent);font-size:.625rem}
.enterhint.is-on{opacity:1;transform:translate(0,-50%)}
@media (max-width:767px){
  .enterhint{left:0;top:calc(100% + .7rem);transform:translateY(-.3rem)}
  .enterhint::before{left:1.4rem;top:-5px;margin-top:0}
  .enterhint.is-on{transform:none}
}
/* tornin hehkuva kerros: "Astu sisään" kursorin vieressä (sama tyyli kuin maamerkeillä) */
html.enter-hover .enterlabel{opacity:1}
html.enter-hover .marklabel:not(.enterlabel){opacity:0}

/* lento: käyttöliittymä häivytetään heti liikkeen alussa, lopussa lämmin valoverho */
.flyveil{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(90% 80% at 50% 45%,#f8f1e6 0%,#efe6d8 55%,#e4d9c6 100%)}
html.flying .nav,html.flying .rail,html.flying .totop,html.flying .panel:not(.is-wall),html.flying .wall2d,html.flying .scrollhint,html.flying .egglabel,html.flying .marklabel,html.flying .wpop,html.flying .enterhint,
html.in-floor .nav,html.in-floor .rail,html.in-floor .totop,html.in-floor .panel:not(.is-wall),html.in-floor .wall2d,html.in-floor .scrollhint,html.in-floor .egglabel,html.in-floor .marklabel,html.in-floor .wpop{opacity:0!important;pointer-events:none!important;transition:opacity .4s var(--out)!important}
html.in-floor .nav,html.in-floor .rail,html.in-floor .totop,html.in-floor main,html.in-floor .wall2d,html.in-floor footer.stop{visibility:hidden}
html.in-floor{overflow:hidden}
html.flying{cursor:default}
/* suora lataus kerrossivulle: ei sisältövälähdystä ennen kuin kerros on auki (valoverho peittää tornin) */
html[data-floor]:not(.floor-left) .flyveil{opacity:1}
html[data-floor]:not(.floor-left) .nav,html[data-floor]:not(.floor-left) .rail,html[data-floor]:not(.floor-left) .totop,html[data-floor]:not(.floor-left) main,html[data-floor]:not(.floor-left) footer.stop{visibility:hidden}
@media (prefers-reduced-motion:reduce){.vq_item,.vq_item.is-on{transition:opacity .3s linear!important;transform:none}}

/* ---------- kierros 12 (9.10.2026) ---------- */
/* tornin kyljen sisäänmenonappi: pyöreä maitolasinappi (4rem) kerroksen ikkunan kohdalla, label vieressä. Rengas laajenee
   hitaasti kerran 3 s:ssa (vain läpinäkyvyys ja koko, ei kirkkausvälkettä). */
.tdoor{position:fixed;left:0;top:0;z-index:5;display:flex;align-items:center;gap:.8rem;margin:-2rem 0 0 -2rem;opacity:0;visibility:hidden;pointer-events:none;color:#fff;transition:opacity .45s var(--out),visibility 0s .45s;will-change:transform}
.tdoor.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s var(--out),visibility 0s}
.tdoor.is-flip{flex-direction:row-reverse;margin-left:2rem}
.tdoor_b{position:relative;flex:none;width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 14px 34px -16px rgba(8,12,28,.55);transition:background-color .45s var(--out),border-color .45s var(--out),color .45s var(--out),transform .5s var(--out)}
.tdoor_b::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.75);opacity:0;animation:tdoorRing 3s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
@keyframes tdoorRing{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.55);opacity:0}}
.tdoor_b .btn_door{width:1.05rem;height:1.2rem;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.tdoor_l{display:flex;align-items:baseline;gap:.55rem;white-space:nowrap;line-height:1;padding:.72rem 1rem .7rem;border-radius:100px;color:#121316;background:rgba(248,247,244,.84);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 12px 30px -16px rgba(8,12,28,.5)}
.tdoor_l b{font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.tdoor_l>span{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(18,19,22,.62)}
.tdoor:hover .tdoor_b,.tdoor:focus-visible .tdoor_b{background:#fff;border-color:#fff;color:var(--ink);transform:scale(1.04)}
.tdoor:hover .btn_door,.tdoor:focus-visible .btn_door{filter:none}
.tdoor:hover .btn_door i:first-child{transform:translateX(-45%)}
.tdoor:hover .btn_door i:last-child{transform:translateX(45%)}
.tdoor:hover .btn_door::before{opacity:1}
/* vihjekupla tornin napin alla, nuoli osoittaa nappiin */
.tdoor .enterhint{left:.4rem;top:calc(100% + .75rem);transform:translateY(-.3rem);pointer-events:auto}
.tdoor .enterhint::before{left:1.35rem;top:-5px;margin-top:0}
.tdoor .enterhint.is-on{transform:none}
.tdoor.is-flip .enterhint{left:auto;right:.4rem}
.tdoor.is-flip .enterhint::before{left:auto;right:1.35rem}
html.flying .tdoor,html.in-floor .tdoor,html.menu-open .tdoor{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.enter-hover .tdoor_b{border-color:rgba(255,255,255,.85)}

/* hissin kutsunappi (ankkuroitu kutsupaneeliin oven oikealla) ja kerrospaneeli */
.liftcall{position:fixed;left:0;top:0;z-index:5;display:flex;align-items:center;gap:.6rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;padding:0 1.1rem 0 .3rem;border-radius:100px;color:#121316;background:rgba(248,247,244,.72);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 30px -16px rgba(20,14,8,.55);font-size:.875rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--out),visibility 0s .45s,background-color .4s var(--out),color .4s var(--out)}
.liftcall.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s var(--out),visibility 0s,background-color .4s var(--out),color .4s var(--out)}
.liftcall_i{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#fbfaf8,#dddad4 60%,#c3c0ba);box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.liftcall_i svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.liftcall:hover,.liftcall[aria-expanded="true"]{background:rgba(255,255,255,.95)}
.liftcall:hover .liftcall_i,.liftcall[aria-expanded="true"] .liftcall_i{box-shadow:0 0 0 1.5px var(--accent),0 0 0 4px rgba(79,124,240,.2)}
html.flying .liftcall,html.in-floor .liftcall,html.menu-open .liftcall{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.liftpanel{position:fixed;z-index:40;width:17.5rem;padding:1rem 1rem 1.05rem;border-radius:1.1rem;color:var(--ink);background:rgba(246,244,240,.86);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 70px -30px rgba(20,14,8,.6);opacity:0;transform:translateY(.5rem);transition:opacity .4s var(--out),transform .5s var(--out)}
.liftpanel.is-on{opacity:1;transform:none}
.liftpanel[hidden]{display:none}
.liftpanel.is-sheet{left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));top:auto;width:min(21rem,calc(100% - 2rem));transform:translate(-50%,.5rem)}
.liftpanel.is-sheet.is-on{transform:translate(-50%,0)}
.liftpanel_h{display:flex;align-items:baseline;gap:.6rem;padding-right:2rem;font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.liftpanel_h .cap{color:var(--accent)}
.liftpanel_l{margin-top:.85rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .5rem}
.liftpanel_l li:first-child{grid-column:1/-1}
.liftpanel_l button{width:100%;display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.2rem .4rem .2rem .2rem;border-radius:100px;text-align:left;transition:background-color .35s var(--out)}
.liftpanel_l button:hover,.liftpanel_l button:focus-visible{background:rgba(18,19,22,.06)}
.liftpanel_l b{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font-size:.9375rem;font-weight:400;font-variant-numeric:tabular-nums;color:#2a2b2e;
  background:radial-gradient(circle at 38% 30%,#fbfaf8,#dddad4 55%,#b9b6b0);box-shadow:0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.16);transition:box-shadow .5s ease,color .5s ease}
.liftpanel_l span{font-size:.875rem;line-height:1.2;color:#2a2b2e}
.liftpanel_l button:hover b,.liftpanel_l button:focus-visible b{box-shadow:0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(29,78,216,.55)}
.liftpanel_l button.is-lit b{color:var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.7),inset 0 -1px 2px rgba(0,0,0,.18),0 0 0 1.5px var(--accent),0 0 0 5px rgba(79,124,240,.22),0 0 14px 2px rgba(79,124,240,.4)}
.liftpanel_x{position:absolute;right:.55rem;top:.55rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;color:#2a2b2e;transition:background-color .3s}
.liftpanel_x:hover,.liftpanel_x:focus-visible{background:rgba(18,19,22,.07)}
.liftpanel_x svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media (max-width:767px){
  .tdoor_b{width:3.4rem;height:3.4rem}
  .tdoor{margin:-1.7rem 0 0 -1.7rem}
  .tdoor.is-flip{margin-left:1.7rem}
  .tdoor_l b{font-size:.9375rem}
}
@media (prefers-reduced-motion:reduce){.tdoor_b::before{animation:none;opacity:0}}

/* kierros 13: hintojen numerot tiiviimmiksi (suhteelliset numerot, kapea tuhaterotin) */
.plans .sum{font-variant-numeric:proportional-nums;letter-spacing:-.035em;word-spacing:-.05em}
/* kierros 13: Tulokset-luvut lainauksen alle omaksi riviksi, vahvemmat numerot ja sininen aksenttiviiva */
.panel.is-res .stats{margin-top:2.1rem;padding-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.25rem);border-top:1px solid rgba(15,17,21,.16)}
.panel.is-res .stats li{position:relative;padding-top:1.15rem;gap:.4rem;align-content:start}
.panel.is-res .stats li::before{content:"";position:absolute;left:0;top:-1px;width:1.75rem;height:2px;border-radius:2px;background:var(--accent)}
.panel.is-res .stat_n{font-size:clamp(2.5rem,3.6vw,3.75rem);font-weight:500;line-height:.95;letter-spacing:-.045em;font-variant-numeric:proportional-nums}
.panel.is-res .stat_l{font-size:.875rem;color:rgba(15,17,21,.8)}
.panel.is-res .vq{margin-top:1.6rem}
@media (max-height:820px) and (min-width:768px){.panel.is-res .stats{margin-top:1.5rem}.panel.is-res .stats li{padding-top:.9rem}.panel.is-res .stat_n{font-size:clamp(2.2rem,3vw,3rem)}}
@media (max-width:767px){.panel.is-res .stats{column-gap:1rem;margin-top:1.5rem}.panel.is-res .stat_n{font-size:2.2rem}.panel.is-res .stat_l{font-size:.75rem}}

/* kierros 13: uusi logo (V2, General Sans Medium, kuutio-o) SVG-symbolina */
.brandsvg{display:block;width:auto;fill:currentColor;overflow:visible}
.nav_brand .brandsvg{height:1.42rem}
.foot_brand .brandsvg{height:.86em}
.stand_logo .brandsvg{height:14px}
.nav_brand i,.loader_brand i,.foot_brand i,.stand_logo i{display:none}
.nav_brand{filter:drop-shadow(0 1px 10px rgba(0,0,0,.28))}
html.ui-dark:not(.menu-open):not(.in-room) .nav_brand{filter:drop-shadow(0 1px 10px rgba(255,255,255,.35))}
@media (max-width:767px){.nav_brand .brandsvg{height:1.3rem}}

/* kierros 14: uusi h1 "Verkkosivut, jotka / vievät yrityksesi / huipulle" mahtuu kolmelle riville */
.hero_title{font-size:clamp(2.9rem,5.3vw,5.7rem)}
@media (max-height:820px) and (min-width:768px){.hero_title{font-size:clamp(2.7rem,4.8vw,4.9rem)}}
@media (max-width:767px){.hero_title{font-size:clamp(2.3rem,9.6vw,3.1rem)}}

/* ---------- kierros 14 T (10.10.2026): tornin pysäkit editoriaalisemmiksi ----------
   Isompi typografia, juokseva otsakerivi hiusviivalla, 2×2-kehikot (Palvelut, Työt), luvut ennen palautetta,
   selkeämmät hintakortit (lasi valmiina heti), valkoiset "tarkemmin"-napit, tekijät ruudukkona ja iso lainaus.
   Numerot ja lainausmerkit GT Super Display Lightilla (sama kuin kerrossivujen otsikot). */
:root{--gts:"GT Super Display",Georgia,"Times New Roman",serif}
:is(#palvelut,#tyot,#tulokset,#tekijat){--hl:rgba(15,17,21,.2);--ink2:rgba(15,17,21,.8)}
/* juokseva otsakerivi: hiusviiva, vasemmalla pysäkki, oikealla kerros */
.eyebrow.is-run{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.8rem}
.eyebrow.is-run::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.4}
:is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{margin-top:.8rem;font-size:clamp(2.8rem,5.5vw,5.9rem);line-height:.94;letter-spacing:-.04em}
:is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{margin-top:1.15rem;max-width:32rem;font-size:clamp(1rem,1.25vw,1.1875rem);line-height:1.42}
.btns.is-enter{margin-top:1.75rem}

/* "tarkemmin"-napit: valkoinen pilleri, tumma teksti, tumma ovipallo; hoverissa pallo siniseksi */
.btn.is-main.is-enter{padding:0 .4rem 0 1.4rem;background:#fff;color:#0f1115;box-shadow:0 0 0 1px rgba(15,17,21,.07),0 14px 32px -18px rgba(8,12,28,.55)}
.btn.is-main.is-enter .btn_b{width:2.3rem;height:2.3rem;background:#0f1115;color:#fff}
.btn.is-main.is-enter:hover,.btn.is-main.is-enter:focus-visible{background:#f2f1ee;color:#0f1115;transform:translateY(-1px)}
.btn.is-main.is-enter:hover .btn_b,.btn.is-main.is-enter:focus-visible .btn_b{background:var(--accent);color:#fff;transform:none}
.btn.is-main.is-enter .btn_dr .btn_door{width:.8rem;height:.9rem}

/* palvelut: 2×2-kehikko hiusviivoin */
.panel.is-svc{width:min(46rem,50vw)}
.sgrid{margin-top:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--hl)}
.sgrid>li{padding:1.2rem 1.6rem 1.35rem 0;border-top:1px solid var(--hl)}
.sgrid>li:nth-child(2n){padding:1.2rem 0 1.35rem 1.6rem;border-left:1px solid var(--hl)}
.sgrid h3{font-size:clamp(1.5rem,2.25vw,2.3rem);font-weight:500;letter-spacing:-.035em;line-height:1;color:#0f1115}
.sg_p{display:block;margin-top:.55rem;font-size:.8125rem;font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--accent);text-shadow:none}
.sg_d{margin-top:.65rem;max-width:20rem;font-size:.9375rem;line-height:1.42;color:var(--ink2)}
.sg_more{margin-top:1.1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .75rem;font-size:.9375rem;line-height:1.4;color:var(--ink2)}
.sg_more b{font-size:1.125rem;font-weight:500;letter-spacing:-.02em;color:#0f1115}
.sg_more .sg_p{display:inline;margin:0}
html.js .sgrid>li,html.js .sg_more{opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready .stop.is-active .sgrid>li,html.js.ready .stop.is-active .sg_more{opacity:1;transform:none;transition-delay:calc(.16s + var(--i) * 70ms)}

/* työt: 2×2, iso pikkukuva ja iso nimi; hoverissa ruutunauhoitus pyörii kuvan sisällä (site.js) */
@media (min-width:768px){
  #tyot .panel{width:min(37rem,41vw)}
  #tyot .works{margin-top:2rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.5rem}
  #tyot .works a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.85rem;align-items:start;padding:0}
  #tyot .works .w_thumb{grid-column:1/-1;grid-row:1;aspect-ratio:2/1;border-radius:.55rem}
  #tyot .works .w_t{grid-column:1;grid-row:2;gap:.4rem}
  #tyot .works .cap{letter-spacing:.08em}
  #tyot .works .arr{grid-column:2;grid-row:2;margin-top:.15rem;width:1.25rem;height:1.25rem}
  #tyot .works h3{font-size:clamp(1.35rem,1.75vw,1.8rem);line-height:1.04}
  #tyot .works_more{margin-top:1.4rem}
}
#tyot .works .w_thumb img{transition:transform .9s var(--out)}
#tyot .works .w_thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s var(--out)}
#tyot .works a.is-play .w_thumb video{opacity:1}
.fine #tyot .works:hover a{opacity:.58}
.fine #tyot .works a:hover,.fine #tyot .works a:focus-visible{opacity:1}
.fine #tyot .works a:hover .w_thumb,.fine #tyot .works a:focus-visible .w_thumb{opacity:1}
.fine #tyot .works a:hover .w_thumb img{transform:scale(1.025)}
#tyot .works a:hover h3,#tyot .works a:focus-visible h3{transform:none}
html.js #tyot .works>li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready #tyot.is-active .works>li{opacity:1;transform:none}
html.js.ready #tyot.is-active .works>li:nth-child(2){transition-delay:.07s}
html.js.ready #tyot.is-active .works>li:nth-child(3){transition-delay:.14s}
html.js.ready #tyot.is-active .works>li:nth-child(4){transition-delay:.21s}

/* tulokset: luvut heti otsikon alla, sitten iso lainaus */
.panel.is-res{width:min(46rem,50vw)}
.panel.is-res .stats{margin-top:2rem;border-top:1px solid var(--hl)}
.panel.is-res .stats li{padding-top:1.1rem}
.panel.is-res .stat_n{font-family:var(--gts);font-weight:300;font-size:clamp(3.2rem,5vw,5.4rem);line-height:.92;letter-spacing:-.025em;color:#0f1115}
.panel.is-res .stat_l{font-size:.875rem;color:var(--ink2)}
.panel.is-res .vq{margin-top:2.2rem;padding-left:3.6rem;max-width:40rem}
.vq::before{display:none}
.q_mark{position:absolute;left:0;top:0;font-family:var(--gts);font-weight:300;font-size:6.2rem;line-height:.8;color:var(--accent);text-shadow:none;pointer-events:none}
.vq_item blockquote,.panel.is-res .vq_item blockquote{font-size:clamp(1.35rem,1.75vw,1.75rem);line-height:1.24}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;margin-top:1.05rem}
.who b{display:inline-flex;align-items:center;gap:.7rem;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:#0f1115}
.who b::after{content:"";width:1.4rem;height:1px;background:currentColor;opacity:.45}
.who .cap{color:var(--ink2)}
.panel.is-res .vq_dots{margin-top:.9rem}

/* hinnat: lasi valmiina heti. Paneelille ei animoida läpinäkyvyyttä eikä filtteriä (ne katkaisisivat korttien
   backdrop-filterin, jolloin sumennus tulisi viiveellä); sisältö ja kortit tulevat sisään erikseen. */
html.js #hinnat .panel{opacity:1;transform:none;filter:none;transition:none}
html.js #hinnat .panel>:not(.plans){opacity:0;transform:translateY(1rem);transition:opacity .7s var(--out),transform .8s var(--out)}
html.js.ready #hinnat.is-active .panel>:not(.plans){opacity:1;transform:none}
/* kortti ei koskaan ole puoliläpinäkyvä: lasi paljastuu alhaalta ylös leikkauksella (clip-path ei katkaise omaa
   backdrop-filteriä), ja vasta sen jälkeen kortin sisältö häivytetään esiin */
html.js #hinnat .plans>li{clip-path:inset(100% -3rem -3rem -3rem round 18px);transform:translateY(1.25rem);transition:clip-path .85s var(--out),transform .9s var(--out),opacity .5s var(--out)}
html.js #hinnat .plans>li>*{opacity:0;transition:opacity .45s var(--out)}
html.js.ready #hinnat.is-active .plans>li{clip-path:inset(-3rem -3rem -3rem -3rem round 18px);transform:none;transition-delay:calc(.1s + var(--k) * 90ms)}
html.js.ready #hinnat.is-active .plans>li>*{opacity:1;transition:opacity .6s var(--out) calc(.38s + var(--k) * 90ms)}
html.js.ready #hinnat.is-active .panel>.pl_foot{transition-delay:.36s}
html.flying #hinnat .panel,html.in-floor #hinnat .panel,html.in-room #hinnat .panel{opacity:1!important}
html.flying #hinnat .panel>:not(.plans),html.flying #hinnat .plans>li,html.in-floor #hinnat .panel>:not(.plans),html.in-floor #hinnat .plans>li,html.in-room #hinnat .panel>:not(.plans),html.in-room #hinnat .plans>li{opacity:0!important;transition:opacity .4s var(--out)!important}
html.reduced #hinnat .panel>*,html.reduced #hinnat .plans>li,html.reduced #hinnat .plans>li>*{transition:opacity .3s linear,clip-path 0s!important;transform:none!important}
/* kortit: koko, hinta, kenelle, mitä saat, nappi koko leveydeltä */
#hinnat .panel.is-wide{width:min(52rem,55vw)}
#hinnat .plans{margin-top:2rem;gap:1rem}
#hinnat .plans>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;padding:1.45rem 1.45rem 1.35rem;border-radius:18px}
/* savulasi: tausta tummennetaan suodattimella, jotta valkoinen teksti erottuu myös vaaleaa taivasta vasten (≥ 4.5:1) */
#hinnat .plans>li{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%),rgba(12,14,20,.26);border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(22px) saturate(135%) brightness(.7);backdrop-filter:blur(22px) saturate(135%) brightness(.7)}
#hinnat .plans>li>*{grid-column:1/-1}
.pl_top{display:grid;justify-items:start;gap:.7rem}
.pl_top .pl_k{order:-1}
#hinnat .plans h3{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;text-transform:none}
#hinnat .plans h3::before{display:none}
.pl_k{flex:none;padding:.32rem .62rem .3rem;border-radius:100px;border:1px solid rgba(255,255,255,.5);font-size:.625rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;font-weight:500;white-space:nowrap}
#hinnat .plans .sum{grid-column:1;margin-top:1.35rem;font-family:var(--gts);font-weight:300;font-size:clamp(2.8rem,3.6vw,3.9rem);line-height:.9;letter-spacing:-.02em;word-spacing:0;color:#fff}
#hinnat .plans .sum small{display:block;margin-bottom:.55rem;font-family:var(--sans);font-size:.625rem;letter-spacing:.14em;word-spacing:normal;font-weight:500;text-transform:uppercase;color:rgba(255,255,255,.92)}
#hinnat .plans .sum .cur{font-size:.55em;margin-left:.06em;color:inherit;opacity:.85;letter-spacing:0}
.pl_vat{grid-column:2!important;align-self:end;justify-self:start;margin:0 0 .35rem .55rem;font-size:.6875rem;letter-spacing:.06em;color:rgba(255,255,255,.85)}
#hinnat .plans .d{margin-top:.95rem;font-size:.9375rem;line-height:1.38;color:#fff}
#hinnat .plan_f{margin-top:1rem;padding-top:1rem;gap:.5rem;border-top-color:rgba(255,255,255,.26);font-size:.875rem;color:rgba(255,255,255,.92)}
#hinnat .plan_f li{gap:.55rem}
#hinnat .plan_f li::before{width:.8rem;height:.8rem;border-radius:0;background:currentColor;transform:translateY(.1em);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#hinnat .plans .btn{margin-top:1.35rem;align-self:end;justify-content:space-between;width:100%;padding-left:1.3rem}
/* korostettu kortti: kirkkaampi lasi ja vahvempi reuna, hieman koholla */
#hinnat .plans>li.is-featured{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),rgba(12,14,20,.22);border:1.5px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 28px 60px -34px rgba(4,8,20,.75)}
html.js.ready #hinnat.is-active .plans>li.is-featured{transform:translateY(-.5rem)}
#hinnat .plans>li.is-featured .pl_k{background:#fff;border-color:#fff;color:#0f1115;text-shadow:none}
/* alarivi: tarkemmin-nappi ja Sivustudio-ohjaus */
.pl_foot{align-items:center;gap:.9rem 1.6rem}
.sivustudio{max-width:27rem;font-size:.875rem;line-height:1.4;color:#fff}
.sivustudio a{display:inline;font-weight:500;border-bottom:1px solid rgba(255,255,255,.55);transition:border-color .3s var(--out)}
.sivustudio a:hover,.sivustudio a:focus-visible{border-bottom-color:#fff}
.sivustudio svg{display:inline-block;width:.8em;height:.8em;margin-left:.25em;vertical-align:-.04em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* tekijät: neljä muotokuvaa rivissä, iso lainaus omana osanaan */
#tekijat .panel{width:min(35rem,39vw)}
/* kaupunki näkyy tekstin takana: pienille teksteille tiukempi vaalea hehku (ei laatikkoa) */
#tekijat .panel{text-shadow:0 0 1px rgba(255,255,255,.55),0 0 14px rgba(255,255,255,.5),0 0 32px rgba(255,255,255,.3)}
#tekijat .team{margin-top:2rem;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
#tekijat .team li{display:block}
#tekijat .team img{width:100%;height:auto;aspect-ratio:4/5;border-radius:.5rem;object-position:50% 22%;box-shadow:inset 0 0 0 1px rgba(15,17,21,.1)}
#tekijat .team p{margin-top:.7rem;gap:.3rem}
#tekijat .team b{font-size:1rem;letter-spacing:-.015em;line-height:1.15}
#tekijat .team .cap{font-size:.625rem;letter-spacing:.12em;color:rgba(15,17,21,.86)}
#tekijat .team .cap,#tekijat .who{text-shadow:0 0 2px rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.75),0 0 24px rgba(255,255,255,.4)}
#tekijat .who .cap{color:rgba(15,17,21,.86)}
html.js #tekijat .team li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
html.js.ready #tekijat.is-active .team li{opacity:1;transform:none}
html.js.ready #tekijat.is-active .team li:nth-child(2){transition-delay:.07s}
html.js.ready #tekijat.is-active .team li:nth-child(3){transition-delay:.14s}
html.js.ready #tekijat.is-active .team li:nth-child(4){transition-delay:.21s}
#tekijat .quote{position:relative;margin-top:2rem;padding:1.5rem 0 0 3.6rem;max-width:none;border-top:1px solid var(--hl)}
#tekijat .quote::before{display:none}
#tekijat .quote .q_mark{top:1.45rem}
#tekijat .quote blockquote{font-size:clamp(1.4rem,1.95vw,1.95rem);line-height:1.2;letter-spacing:-.025em}

/* yhteys: sama iso otsikko, hämärässä tiukka kirjainvarjo (kierros 8) */
#yhteys .panel{width:min(36rem,40vw)}

/* matalat läppärit (1366×768, 1280×800): kaikki mahtuu pysäkille */
@media (max-height:820px) and (min-width:768px){
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{font-size:clamp(2.5rem,4.6vw,4.7rem)}
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{font-size:1rem}
  .sgrid{margin-top:1.5rem}.sgrid>li{padding-top:.95rem;padding-bottom:1.05rem}.sgrid h3{font-size:clamp(1.35rem,1.85vw,1.8rem)}.sg_d{font-size:.875rem;margin-top:.5rem}.sg_p{margin-top:.45rem}.sg_more{margin-top:.85rem;font-size:.875rem}
  #tyot .works{margin-top:1.5rem;gap:1.1rem 1.25rem}#tyot .works a{row-gap:.6rem}#tyot .works .w_thumb{aspect-ratio:12/5}#tyot .works h3{font-size:clamp(1.2rem,1.6vw,1.5rem)}#tyot .works_more{margin-top:1rem}
  .panel.is-res .stats{margin-top:1.5rem}.panel.is-res .stat_n{font-size:clamp(2.8rem,4.2vw,4.2rem)}.panel.is-res .vq{margin-top:1.6rem;padding-left:3rem}.q_mark{font-size:5rem}.vq_item blockquote,.panel.is-res .vq_item blockquote{font-size:clamp(1.2rem,1.55vw,1.45rem)}
  #hinnat .plans{margin-top:1.5rem}#hinnat .plans>li{padding:1.15rem 1.2rem 1.1rem}#hinnat .plans .sum{margin-top:1rem;font-size:clamp(2.4rem,3.2vw,3.2rem)}#hinnat .plans .d{margin-top:.7rem;font-size:.875rem}#hinnat .plan_f{margin-top:.75rem;padding-top:.75rem;gap:.3rem;font-size:.8125rem}#hinnat .plans .btn{margin-top:1rem;height:2.8rem}
  #tekijat .team{margin-top:1.4rem;gap:.8rem}#tekijat .team img{aspect-ratio:1/1}#tekijat .team p{margin-top:.55rem}#tekijat .team b{font-size:.9375rem}#tekijat .quote{margin-top:1.4rem;padding-top:1.1rem;padding-left:3rem}#tekijat .quote .q_mark{top:1.05rem}#tekijat .quote blockquote{font-size:clamp(1.2rem,1.6vw,1.5rem)}
}
@media (max-width:1100px) and (min-width:768px){
  .panel.is-svc,.panel.is-res,#tekijat .panel,#tyot .panel{width:min(40rem,60vw)}
  #hinnat .panel.is-wide{width:min(46rem,70vw)}
}
@media (max-aspect-ratio:21/20){
  .panel.is-svc,.panel.is-res,#tekijat .panel,#tyot .panel,#yhteys .panel,#hinnat .panel.is-wide{width:100%}
}
/* mobiili: yksi sarake, sama rytmi */
@media (max-width:767px){
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{font-size:clamp(2.35rem,10.6vw,2.9rem);line-height:.96}
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{font-size:1rem}
  .sgrid{margin-top:1.5rem;grid-template-columns:minmax(0,1fr)}
  .sgrid>li,.sgrid>li:nth-child(2n){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:1rem;padding:.95rem 0 1rem;border-left:0}
  .sgrid h3{font-size:1.5rem}
  .sgrid .sg_p{margin:0;justify-self:end}
  .sg_d{grid-column:1/-1;margin-top:.45rem;max-width:none;font-size:.9063rem}
  .sg_more{font-size:.875rem}
  #tyot .works{margin-top:1.4rem;gap:.85rem}
  #tyot .works a{grid-template-columns:8.5rem minmax(0,1fr) auto;column-gap:1rem}
  #tyot .works h3{font-size:1.4rem}
  .panel.is-res .stats{margin-top:1.4rem;column-gap:1rem}.panel.is-res .stats li{padding-top:.9rem}
  .panel.is-res .stat_n{font-size:2.6rem}.panel.is-res .stat_l{font-size:.75rem}
  .panel.is-res .vq{margin-top:1.6rem;padding-left:2.5rem}.q_mark{font-size:4.2rem}
  .vq_item blockquote,.panel.is-res .vq_item blockquote{font-size:1.25rem}
  #hinnat .plans{margin-top:1.5rem;grid-template-columns:minmax(0,1fr);gap:.85rem}
  #hinnat .plans>li{padding:1.2rem 1.2rem 1.1rem}
  #hinnat .plans .sum{font-size:2.9rem;margin-top:1rem}
  #hinnat .plans .sum small{display:block;margin:0 0 .45rem}
  html.js.ready #hinnat.is-active .plans>li.is-featured{transform:none}
  .pl_foot{flex-direction:column;align-items:flex-start}
  #tekijat .team{margin-top:1.4rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem .85rem}
  #tekijat .team img{aspect-ratio:1/1}
  #tekijat .quote{margin-top:1.6rem;padding-left:2.5rem}
  #tekijat .quote blockquote{font-size:1.3rem}
}

/* ---------- kierros N (10.10.2026): päivä/yö-vaihto ----------
   Nappi navissa "Varaa puhelu" -napin ja valikon välissä: pyöreä maitolasi, ohut kuu/aurinko (kuu päivällä = vaihda yöhön).
   Yöllä ulkonäkymän pysäkit ovat tummaa taivasta vasten: vaalea teksti ja tiukka kirjainvarjo (ei laatikoita). */
:root{--ntsh:0 0 2px rgba(2,4,12,.85),0 1px 3px rgba(2,4,12,.7),0 0 12px rgba(2,4,12,.55),0 2px 30px rgba(2,4,12,.4);--nacc:#b9c8ff}
.nav_theme{position:relative;flex:none;width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;color:#f7f7f5;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 26px -14px rgba(0,0,0,.55);transition:color .6s var(--out),background-color .45s var(--out),border-color .45s var(--out),box-shadow .45s var(--out),opacity .4s}
.nav_theme svg{position:absolute;left:50%;top:50%;width:1.25rem;height:1.25rem;margin:-.625rem 0 0 -.625rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity .7s var(--out),transform .9s var(--out)}
.nav_theme .ti_sun{opacity:0;transform:rotate(-60deg) scale(.55)}
html.is-night .nav_theme .ti_sun{opacity:1;transform:none}
html.is-night .nav_theme .ti_moon{opacity:0;transform:rotate(40deg) scale(.55)}
.nav_theme:hover,.nav_theme:focus-visible{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.7)}
.fine .nav_theme:hover .ti_moon{transform:rotate(-14deg)}
html.fine.is-night .nav_theme:hover .ti_sun{transform:rotate(30deg)}
html.ui-dark:not(.menu-open):not(.in-room) .nav_theme{color:var(--ink);background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.66);box-shadow:0 10px 26px -14px rgba(10,14,30,.4)}
html.ui-dark:not(.menu-open):not(.in-room) .nav_theme:hover,html.ui-dark:not(.menu-open):not(.in-room) .nav_theme:focus-visible{background:rgba(255,255,255,.55);border-color:#fff}
.nav_theme:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px}
@media (max-width:767px){
  .nav_r{gap:.6rem}
  .nav_theme{width:2.75rem;height:2.75rem}
  .nav_theme svg{width:1.15rem;height:1.15rem;margin:-.575rem 0 0 -.575rem}
}
@media (max-width:374px){.nav .nav_cta .btn_t{font-size:.75rem}.nav_r{gap:.45rem}}

/* vaihdon aikana kaikki värit liukuvat tornin hämärtymisen tahdissa (1,6 s), ei kirkkaushyppyjä */
html.theme-anim body *,html.theme-anim body *::before,html.theme-anim body *::after{transition-property:color,background-color,border-color,text-shadow,box-shadow,fill,stroke!important;transition-duration:1.6s!important;transition-timing-function:cubic-bezier(.37,0,.63,1)!important;transition-delay:0s!important}
html.theme-anim.reduced body *,html.theme-anim.reduced body *::before,html.theme-anim.reduced body *::after{transition-duration:.4s!important}

/* yö: vaaleat tekstit tumman taivaan päällä */
html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat) .panel{--fg:#f7f7f5;--muted:rgba(247,247,245,.9);--faint:rgba(247,247,245,.88);--soft:rgba(247,247,245,.9);--hl:rgba(247,247,245,.28);--ink2:rgba(247,247,245,.9);color:#f7f7f5;text-shadow:var(--ntsh)}
html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat) .eyebrow,html.is-night #hinnat .panel>.eyebrow{color:rgba(247,247,245,.9);text-shadow:var(--ntsh)}
html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .lead,html.is-night #hinnat .panel>h2,html.is-night #hinnat .panel>.lead{color:#f7f7f5;text-shadow:var(--ntsh)}
html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line{border-color:rgba(247,247,245,.7);color:#f7f7f5;text-shadow:0 1px 10px rgba(0,0,0,.35)}
html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line:hover,html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .btn.is-line:focus-visible{border-color:#f7f7f5;background:#f7f7f5;color:var(--ink);text-shadow:none}
html.is-night #huippu .scrollhint{color:rgba(247,247,245,.88);text-shadow:var(--ntsh)}
html.is-night #huippu .scrollhint i{background:linear-gradient(rgba(247,247,245,0),rgba(247,247,245,.6))}
html.is-night #huippu .scrollhint i::after{background:#f7f7f5}
html.is-night .sgrid h3,html.is-night .sg_more b,html.is-night #tyot .works h3,html.is-night .panel.is-res .stat_n,html.is-night .stat_n,html.is-night .vq_item blockquote,html.is-night .who b,html.is-night #tekijat .quote blockquote,html.is-night #tekijat .team b{color:#f7f7f5}
html.is-night .sg_p,html.is-night #palvelut .svc_k i{color:var(--nacc)}
html.is-night .q_mark{color:var(--nacc);text-shadow:var(--ntsh)}
html.is-night #tyot .works .cap,html.is-night #tyot .works_more,html.is-night .stat_l,html.is-night .panel.is-res .stat_l,html.is-night .vq_item figcaption,html.is-night .who .cap,html.is-night #tekijat .who .cap,html.is-night #tekijat .team .cap,html.is-night #tekijat .quote figcaption{color:rgba(247,247,245,.86)}
html.is-night #tyot .works a:hover h3,html.is-night #tyot .works a:focus-visible h3,html.is-night #tyot .works a:hover .arr{color:var(--nacc)}
html.is-night #tyot .works_more a{border-bottom-color:rgba(247,247,245,.4)}
html.is-night #tyot .works_more a:hover{color:var(--nacc);border-color:var(--nacc)}
html.is-night #tyot .works .w_thumb::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html.is-night .vq_dots button::after{background:rgba(247,247,245,.36)}
html.is-night .vq_dots button[aria-pressed="true"]::after{background:var(--nacc)}
html.is-night .vq_dots button:hover::after{background:rgba(247,247,245,.7)}
html.is-night #tekijat .panel,html.is-night #tekijat .team .cap,html.is-night #tekijat .who{text-shadow:var(--ntsh)}
html.is-night #tekijat .team img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
html.is-night #palvelut .svc_row{color:#f7f7f5}
html.is-night #palvelut .svc_p,html.is-night #palvelut .svc_in p,html.is-night #palvelut .svc_k{color:rgba(247,247,245,.88)}
html.is-night #palvelut :is(.svc,.svc>li){border-color:rgba(247,247,245,.24)}
/* hintakortit yöllä: lasi tiedoston lopun lohkossa "yö: mustat lasikortit (Revdot-tyyli)" */
/* pystyruutu: vaalean pilviusvan sijaan yötaivaan sävyinen pehmeä usva tekstin takana (ei laatikkoa: reunat häivytetty) */
@media (max-aspect-ratio:21/20){
  html.is-night :is(#huippu,#palvelut,#tyot,#tulokset,#tekijat) .panel:not(.is-wall)::before{background:rgba(5,9,22,.58)}
  html.is-night #hinnat .panel:not(.is-wall)::before{display:block!important;background:rgba(5,9,22,.5)}
}
html.is-night #hinnat .pl_foot{text-shadow:var(--ntsh)}
html.is-night #yhteys .panel,html.is-night #yhteys .eyebrow{text-shadow:var(--ntsh),0 0 6px rgba(2,4,12,.6),0 0 22px rgba(2,4,12,.6)}
html.is-night #tyot .works_more{color:rgba(247,247,245,.95)}
html.no-gl.is-night .scene{background:radial-gradient(36% 28% at 78% 16%,rgba(160,180,230,.16),rgba(160,180,230,0) 70%),linear-gradient(180deg,#060b1a 0%,#0c1330 52%,#120f14 100%)}
html.menu-open .nav_theme{opacity:0;pointer-events:none}

/* ---------- kierros 15 T2 (10.10.2026): pysäkit ----------
   Ei hiusviivoja osioiden päällä (otsakerivi, palvelukehikko, luvut), palvelut pienempinä ja ilmavampina,
   palaute vaaleaan liquid glass -korttiin, hintakortit takaisin vaaleaksi lasiksi (Neue Montreal -hinnat, osiot tilalla),
   Sivustudio omalle rivilleen, tekijöiltä lainaus pois. */
/* otsakerivi ilman viivaa */
.eyebrow.is-run{padding-top:0}
.eyebrow.is-run::before{display:none}

/* palvelut: 2×2 ilman viivoja, pienemmät osiot, väli tilalla */
.panel.is-svc{width:min(42rem,46vw)}
.sgrid{margin-top:2.1rem;gap:1.75rem clamp(1.75rem,3vw,3rem);border:0}
.sgrid>li,.sgrid>li:nth-child(2n){padding:0;border:0}
.sgrid h3{font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:-.025em;line-height:1.08}
.sg_p{margin-top:.45rem;font-size:.75rem}
.sg_d{margin-top:.55rem;max-width:18.5rem;font-size:.875rem;line-height:1.45}
.sg_more{margin-top:1.75rem;font-size:.875rem}
.sg_more b{font-size:1rem}

/* tulokset: luvut ilman viivoja, palaute vaaleassa lasikortissa */
.panel.is-res .vq{margin-top:2.1rem;padding:1.55rem 1.75rem 1rem 4.5rem;max-width:35rem;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);text-shadow:none}
.panel.is-res .vq .q_mark{left:1.35rem;top:1.45rem;font-size:5rem}
.panel.is-res .vq_item blockquote{font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.25;color:#0f1115}
.panel.is-res .vq .who{margin-top:.95rem}
.panel.is-res .vq .who b{color:#0f1115}
.panel.is-res .vq .who .cap{color:rgba(15,17,21,.8)}
.panel.is-res .vq_dots{margin-top:.7rem}
/* lasi valmiina heti (sama ratkaisu kuin hintakorteissa): paneelia ei häivytetä eikä sumenneta, sisältö tulee erikseen
   ja kortti paljastuu leikkauksella, joten backdrop-filter on päällä alusta asti */
html.js #tulokset .panel{opacity:1;transform:none;filter:none;transition:none}
html.js #tulokset .panel>:not(.vq){opacity:0;transform:translateY(1rem);transition:opacity .7s var(--out),transform .8s var(--out)}
html.js.ready #tulokset.is-active .panel>:not(.vq){opacity:1;transform:none}
html.js #tulokset .vq{clip-path:inset(100% -2rem -2rem -2rem round 20px);transform:translateY(1.25rem);transition:clip-path .85s var(--out),transform .9s var(--out)}
html.js #tulokset .vq>*{opacity:0;transition:opacity .45s var(--out)}
html.js.ready #tulokset.is-active .vq{clip-path:inset(-2rem -2rem -2rem -2rem round 20px);transform:none;transition-delay:.28s}
html.js.ready #tulokset.is-active .vq>*{opacity:1;transition:opacity .6s var(--out) .62s}
html.js #tulokset .panel::before{opacity:0;transition:opacity .7s var(--out)}
html.js.ready #tulokset.is-active .panel::before{opacity:1}
html.flying #tulokset .panel,html.in-floor #tulokset .panel,html.in-room #tulokset .panel{opacity:1!important}
html.flying #tulokset .panel>*,html.in-floor #tulokset .panel>*,html.in-room #tulokset .panel>*{opacity:0!important;transition:opacity .4s var(--out)!important}
html.reduced #tulokset .panel>*,html.reduced #tulokset .vq>*{transition:opacity .3s linear,clip-path 0s!important;transform:none!important}

/* hintakortit: vaalea liquid glass (kierros 6), sisältö osioina tilalla eikä viivoilla */
#hinnat .panel.is-wide{width:min(54rem,57vw)}
#hinnat .plans{margin-top:2rem;gap:1.1rem}
#hinnat .plans>li{display:flex;flex-direction:column;align-items:stretch;padding:1.6rem 1.5rem 1.5rem;border-radius:20px;color:#0f1115;text-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
/* päivällä lasin alla oleva kaupunki kirkastetaan hieman, jotta tumma teksti erottuu (≥ 4.5:1) */
html:not(.is-night) #hinnat .plans>li{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),rgba(255,255,255,.26);-webkit-backdrop-filter:blur(22px) saturate(140%) brightness(1.22);backdrop-filter:blur(22px) saturate(140%) brightness(1.22)}
#hinnat .pl_top{margin:0;gap:.85rem}
#hinnat .plans h3{font-size:1.25rem;color:inherit}
#hinnat .pl_k{border-color:rgba(15,17,21,.32);color:inherit;text-shadow:none}
#hinnat .pl_price{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:.6rem}
#hinnat .plans .sum{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(2.3rem,2.75vw,2.85rem);line-height:1;letter-spacing:-.045em;word-spacing:-.06em;font-variant-numeric:proportional-nums;color:inherit;text-shadow:none;white-space:nowrap}
#hinnat .plans .sum small{margin-bottom:.5rem;font-family:var(--sans);font-size:.625rem;font-weight:500;letter-spacing:.14em;word-spacing:normal;color:inherit;opacity:.78}
#hinnat .plans .sum .cur{font-size:.62em;font-weight:500;letter-spacing:0;margin-left:.04em;color:inherit;opacity:.8}
#hinnat .pl_vat{margin:0 0 .3rem;font-size:.6875rem;letter-spacing:.04em;color:inherit;opacity:.78}
#hinnat .plans .d{margin-top:1.2rem;font-size:.9375rem;line-height:1.42;color:inherit}
#hinnat .plan_f{flex:1;margin-top:1.2rem;padding-top:0;border-top:0;gap:.55rem;font-size:.875rem;color:inherit}
#hinnat .plans .btn{margin-top:1.5rem}
/* korostettu: hieman kirkkaampi lasi, vahvempi reuna, täytetty kokolappu, koholla */
html:not(.is-night) #hinnat .plans>li.is-featured,#hinnat .plans>li.is-featured{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 45%),rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 26px 56px -34px rgba(4,8,20,.55)}
#hinnat .plans>li.is-featured .pl_k{background:#0f1115;border-color:#0f1115;color:#fff}
/* alarivi: tarkemmin-nappi ja sen alla Sivustudio omalla rivillään */
#hinnat .pl_foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem .9rem}
#hinnat .sivustudio{max-width:none}

/* tekijät: ei lainausta, roolikortit saavat tilan */
#tekijat .panel{width:min(40rem,43vw)}
#tekijat .team{margin-top:2.2rem;gap:1rem}
#tekijat .team img{aspect-ratio:4/5}
#tekijat .team p{margin-top:.85rem;gap:.35rem}
#tekijat .team b{font-size:1rem}

@media (max-height:820px) and (min-width:768px){
  .sgrid{margin-top:1.5rem;gap:1.25rem clamp(1.5rem,2.6vw,2.5rem)}.sgrid>li,.sgrid>li:nth-child(2n){padding:0}.sgrid h3{font-size:clamp(1.1rem,1.4vw,1.35rem)}.sg_d{margin-top:.45rem;font-size:.8125rem}.sg_more{margin-top:1.25rem}
  .panel.is-res .vq{margin-top:1.5rem;padding:1.2rem 1.4rem .8rem 3.9rem}.panel.is-res .vq .q_mark{left:1.1rem;top:1.15rem;font-size:4.2rem}.panel.is-res .vq_item blockquote{font-size:clamp(1.15rem,1.45vw,1.4rem)}
  #hinnat .plans{margin-top:1.5rem;gap:1rem}#hinnat .plans>li{padding:1.3rem 1.35rem 1.2rem}#hinnat .pl_top{gap:.6rem}#hinnat .plans h3{font-size:1.125rem}
  #hinnat .pl_price{margin-top:1.1rem}#hinnat .plans .sum{font-size:clamp(2rem,2.45vw,2.4rem)}#hinnat .plans .sum small{margin-bottom:.35rem}
  #hinnat .plans .d{margin-top:.9rem;font-size:.875rem}#hinnat .plan_f{margin-top:.9rem;gap:.35rem;font-size:.8125rem}#hinnat .plans .btn{margin-top:1.2rem;height:2.75rem}
  #hinnat .pl_foot{gap:.75rem}
  #tekijat .team{margin-top:1.6rem;gap:1rem}#tekijat .team img{aspect-ratio:4/5}#tekijat .team p{margin-top:.65rem}
}
@media (max-width:1100px) and (min-width:768px){.panel.is-svc,#tekijat .panel{width:min(40rem,60vw)}#hinnat .panel.is-wide{width:min(46rem,70vw)}}
@media (max-aspect-ratio:21/20){.panel.is-svc,#tekijat .panel,#hinnat .panel.is-wide{width:100%}}
@media (max-width:767px){
  .sgrid{margin-top:1.5rem;gap:1.25rem}
  .sgrid>li,.sgrid>li:nth-child(2n){padding:0}
  .sgrid h3{font-size:1.25rem}
  .panel.is-res .vq{margin-top:1.5rem;padding:1.2rem 1.15rem .75rem 3.1rem}
  .panel.is-res .vq .q_mark{left:.85rem;top:1.05rem;font-size:3.6rem}
  .panel.is-res .vq_item blockquote{font-size:1.15rem}
  #hinnat .plans{margin-top:1.5rem;gap:1rem}
  #hinnat .plans>li{padding:1.4rem 1.3rem 1.3rem}
  #hinnat .pl_price{margin-top:1.2rem}
  #hinnat .plans .sum{font-size:2.5rem}
  #hinnat .plans .d{margin-top:1rem}
  #hinnat .plan_f{margin-top:1rem}
  #hinnat .plans .btn{margin-top:1.35rem}
  #tekijat .team{margin-top:1.5rem;gap:1.25rem .9rem}
  #tekijat .team img{aspect-ratio:4/5}
}

/* yö: palautekortti ja hintakortit vaaleaa lasia tummaa taivasta vasten, teksti vaalea */
html.is-night .panel.is-res .vq{text-shadow:0 1px 2px rgba(2,4,12,.35)}
html.is-night .panel.is-res .vq_item blockquote,html.is-night .panel.is-res .vq .who b{color:#f7f7f5}
html.is-night .panel.is-res .vq .who .cap{color:rgba(247,247,245,.86)}
html.is-night #hinnat .plans>li{color:#f7f7f5;text-shadow:0 1px 2px rgba(2,4,12,.35)}
html.is-night #hinnat .pl_k{border-color:rgba(247,247,245,.45)}
html.is-night #hinnat .plans>li.is-featured .pl_k{background:#f7f7f5;border-color:#f7f7f5;color:#0f1115;text-shadow:none}

/* pienet tekstit kirjavaa taustaa vasten: tiukka hehku (päivällä vaalea, yöllä tumma), ei laatikoita */
:root{--dsh:0 0 1px rgba(255,255,255,.75),0 0 6px rgba(255,255,255,.75),0 0 16px rgba(255,255,255,.6);--nsh2:0 0 1px rgba(2,4,12,.95),0 0 4px rgba(2,4,12,.9),0 0 10px rgba(2,4,12,.75),0 0 22px rgba(2,4,12,.55)}
html:not(.is-night) :is(.sg_p,.sg_d,.sg_more,#tyot .works .cap,#tyot .works_more,.panel.is-res .stat_l){text-shadow:var(--dsh)}
html:not(.is-night) .sg_p{color:#1a3fb8;font-weight:600}
html:not(.is-night) :is(#palvelut,#tyot,#tulokset,#tekijat) .eyebrow{color:#0f1115;text-shadow:var(--dsh)}
html:not(.is-night) #tyot .works_more .cap{color:#0f1115}
html:not(.is-night) #tyot .works .cap{color:rgba(15,17,21,.9)}
html:not(.is-night) #tyot .works_more,html:not(.is-night) #tyot .works_more a{color:#0f1115}
html.is-night :is(#tyot .works_more,#tyot .works .cap){text-shadow:var(--nsh2)}

/* Sivustudio-rivi: oma vaalea lasisiru napin alla (lasi paljastuu leikkauksella, ei häivytystä, jotta sumennus on valmis heti) */
html.js #hinnat .panel>.pl_foot{opacity:1;transform:none}
html.js #hinnat .pl_foot>.enterwrap{opacity:0;transform:translateY(1rem);transition:opacity .7s var(--out),transform .8s var(--out)}
html.js.ready #hinnat.is-active .pl_foot>.enterwrap{opacity:1;transform:none;transition-delay:.36s}
#hinnat .sivustudio{padding:.62rem 1rem .66rem 1.05rem;border-radius:14px;font-size:.8125rem;line-height:1.4;color:#0f1115;text-shadow:none}
html.js #hinnat .sivustudio{clip-path:inset(100% -1rem -1rem -1rem round 100px);transition:clip-path .85s var(--out)}
html.js.ready #hinnat.is-active .sivustudio{clip-path:inset(-1rem -1rem -1rem -1rem round 100px);transition-delay:.48s}

/* tekijät: roolikortit vaaleina lasikortteina (kuva, nimi, rooli), teksti erottuu kaupunkia vasten joka kohdassa */
#tekijat .panel{text-shadow:0 0 22px rgba(255,255,255,.28)}
#tekijat .team li{padding:.45rem .45rem .9rem;border-radius:16px;text-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(22px) saturate(140%) brightness(1.14);backdrop-filter:blur(22px) saturate(140%) brightness(1.14);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#tekijat .team img{border-radius:11px;box-shadow:none}
#tekijat .team p{margin-top:.8rem;padding:0 .4rem;gap:.3rem}
#tekijat .team b{color:#0f1115}
#tekijat .team .cap{letter-spacing:.09em;line-height:1.3;color:rgba(15,17,21,.82);text-shadow:none}
html.is-night #tekijat .team li{text-shadow:0 1px 2px rgba(2,4,12,.35)}
html.is-night #tekijat .team b{color:#f7f7f5}
html.is-night #tekijat .team .cap{color:#f7f7f5;text-shadow:none}
html.is-night #tekijat .team img{box-shadow:none}
/* sama paljastus kuin muissa lasielementeissä: paneeli ei häivy, kortit avautuvat leikkauksella ja sisältö häivytetään */
html.js #tekijat .panel{opacity:1;transform:none;filter:none;transition:none}
html.js #tekijat .panel>:not(.team){opacity:0;transform:translateY(1rem);transition:opacity .7s var(--out),transform .8s var(--out)}
html.js.ready #tekijat.is-active .panel>:not(.team){opacity:1;transform:none}
html.js #tekijat .team li{opacity:1;clip-path:inset(100% -1rem -1rem -1rem round 16px);transform:translateY(1rem);transition:clip-path .85s var(--out),transform .9s var(--out)}
html.js #tekijat .team li>*{opacity:0;transition:opacity .45s var(--out)}
html.js.ready #tekijat.is-active .team li:nth-child(n){clip-path:inset(-1rem -1rem -1rem -1rem round 16px);transform:none;transition-delay:calc(.14s + var(--k) * 80ms)}
html.js.ready #tekijat.is-active .team li>*{opacity:1;transition:opacity .6s var(--out) calc(.46s + var(--k) * 80ms)}
html.js #tekijat .panel::before{opacity:0;transition:opacity .7s var(--out)}
html.js.ready #tekijat.is-active .panel::before{opacity:1}
html.flying #tekijat .panel,html.in-floor #tekijat .panel,html.in-room #tekijat .panel{opacity:1!important}
html.flying #tekijat .panel>*,html.in-floor #tekijat .panel>*,html.in-room #tekijat .panel>*{opacity:0!important;transition:opacity .4s var(--out)!important}
html.reduced #tekijat .panel>*,html.reduced #tekijat .team li,html.reduced #tekijat .team li>*{transition:opacity .3s linear,clip-path 0s!important;transform:none!important}
/* pystyruutu päivällä: lasielementit ovat tornin tumman julkisivun päällä, joten lasi on huurteisempi (tumma teksti ≥ 4.5:1) */
@media (max-aspect-ratio:21/20){
  html:not(.is-night) #hinnat .plans>li,html:not(.is-night) #hinnat .plans>li.is-featured,html:not(.is-night) #tekijat .team li{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%),rgba(255,255,255,.46);-webkit-backdrop-filter:blur(22px) saturate(140%) brightness(1.3);backdrop-filter:blur(22px) saturate(140%) brightness(1.3)}
  html:not(.is-night) #hinnat .plans>li.is-featured{border-color:#fff}
  /* hintojen otsikko kuten muilla pysäkeillä: vaalea pilviusva ja tumma teksti (kortit ovat nyt vaaleaa lasia) */
  html:not(.is-night) #hinnat .panel:not(.is-wall)::before{display:block!important;background:rgba(232,238,247,.8)}
  html:not(.is-night) #hinnat .panel>:is(h2,.lead){color:#0f1115;text-shadow:0 0 22px rgba(255,255,255,.28)}
  html:not(.is-night) #hinnat .panel>.eyebrow{color:rgba(15,17,21,.9);text-shadow:var(--dsh)}
}
html.js #hinnat .panel::before{opacity:0;transition:opacity .7s var(--out)}
html.js.ready #hinnat.is-active .panel::before{opacity:1}
html.is-night .sg_p{text-shadow:var(--nsh2)}
@media (max-width:1330px) and (min-width:768px){#tekijat .team b{font-size:.9375rem}#tekijat .team p{padding:0 .25rem}#tekijat .team .cap{letter-spacing:.06em}}
@media (max-width:767px){#tekijat .team .cap{letter-spacing:.07em}}

/* ---------- kierros 15 T2 lisäys (Alex 10.10.2026) ---------- */
/* 7. hissin kerrosvalitsin: harjattu teräs, kaiverrettu numero, valittuna ohut valaistu rengas; ei kiiltopalloja */
.liftpanel_l{gap:.5rem .6rem}
.liftpanel_l button{gap:.75rem;padding:.25rem .5rem .25rem .25rem}
.liftpanel_l b,.liftcall_i{position:relative;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(0,0,0,.06) 61%,rgba(255,255,255,0) 64%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0 .5px,rgba(0,0,0,.045) .5px 1.5px,rgba(255,255,255,.08) 1.5px 2.2px),
    linear-gradient(160deg,#e7e8ea 0%,#c9cbce 46%,#dcdde0 62%,#b7b9bd 100%);
  box-shadow:0 0 0 1px rgba(28,30,34,.42),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12)}
.liftpanel_l b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:#3b3e43;text-shadow:0 1px 0 rgba(255,255,255,.65),0 -1px 0 rgba(0,0,0,.18);transition:box-shadow .5s var(--out),color .5s var(--out)}
.liftpanel_l span{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#3a3c40}
.liftpanel_l button:hover b,.liftpanel_l button:focus-visible b{box-shadow:0 0 0 1px rgba(28,30,34,.62),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12)}
.liftpanel_l button.is-lit b{color:#1d4ed8;text-shadow:0 0 6px rgba(79,124,240,.35),0 1px 0 rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(28,30,34,.42),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 1px rgba(0,0,0,.18),0 0 0 3px #efedea,0 0 0 4.5px #6f93f4,0 0 10px 3px rgba(79,124,240,.35)}
.liftcall_i{color:#3b3e43}
.liftcall:hover .liftcall_i,.liftcall[aria-expanded="true"] .liftcall_i{box-shadow:0 0 0 1px rgba(28,30,34,.42),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 1px rgba(0,0,0,.18),0 0 0 3px rgba(255,255,255,.9),0 0 0 4.5px #6f93f4}
.aula_lift .liftcall_i{border:0}

/* 9. valitut työt allekkain riveinä: kuva vasemmalla, tekstipalsta kuvan korkuinen (nimi ylhäällä, tiedot alhaalla) */
@media (min-width:768px){
  #tyot .panel{width:min(34rem,40vw)}
  #tyot .works{margin-top:1.9rem;grid-template-columns:minmax(0,1fr);gap:.95rem}
  #tyot .works a{grid-template-columns:9.5rem minmax(0,1fr) auto;grid-template-rows:auto;column-gap:1.25rem;row-gap:0;align-items:stretch;padding:0}
  #tyot .works .w_thumb{grid-column:1;grid-row:1;aspect-ratio:16/10;border-radius:.5rem}
  #tyot .works .w_t{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;padding:.15rem 0 .1rem}
  #tyot .works .arr{grid-column:3;grid-row:1;align-self:start;margin-top:.2rem}
  #tyot .works h3{font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.05}
  #tyot .works_more{margin-top:1.3rem}
}
@media (max-height:820px) and (min-width:768px){
  #tyot .works{margin-top:1.4rem;gap:.7rem}
  #tyot .works a{grid-template-columns:7.75rem minmax(0,1fr) auto;column-gap:1rem}
  #tyot .works .w_thumb{aspect-ratio:16/10}
  #tyot .works h3{font-size:clamp(1.15rem,1.45vw,1.4rem)}
  #tyot .works_more{margin-top:1rem}
}
@media (max-width:767px){
  #tyot .works a{grid-template-columns:7.5rem minmax(0,1fr) auto;align-items:stretch}
  #tyot .works .w_t{display:flex;flex-direction:column;justify-content:space-between;gap:.35rem;padding:.1rem 0}
  #tyot .works .arr{align-self:start}
  #tyot .works .w_thumb{aspect-ratio:16/10}
}

/* 10. tulokset: luvut Neue Montrealilla, pienet siniset viivat lukujen päällä, ei pitkää viivaa, väliä palautteeseen */
.panel.is-res .stats{margin-top:2.2rem;border-top:0}
.panel.is-res .stats li{position:relative;padding-top:1.1rem}
.panel.is-res .stats li::before{display:block;content:"";position:absolute;left:0;top:0;width:1.75rem;height:2px;border-radius:2px;background:var(--accent)}
html.is-night .panel.is-res .stats li::before{background:var(--nacc)}
.panel.is-res .stat_n{font-family:var(--sans);font-weight:500;font-size:clamp(2.6rem,3.8vw,4rem);line-height:.95;letter-spacing:-.045em;font-variant-numeric:proportional-nums}
.panel.is-res .vq{margin-top:2.9rem}
@media (max-height:820px) and (min-width:768px){.panel.is-res .stats{margin-top:1.6rem}.panel.is-res .stats li{padding-top:.9rem}.panel.is-res .stat_n{font-size:clamp(2.3rem,3.2vw,3.2rem)}.panel.is-res .vq{margin-top:2.1rem}}
@media (max-width:767px){.panel.is-res .stats li{padding-top:.85rem}.panel.is-res .stat_n{font-size:2.3rem}.panel.is-res .vq{margin-top:2rem}}

/* 11. hintakortit samalle alalinjalle; keskikortti ulottuu muiden yläreunan yli (negatiivinen yläreunus, alareuna ennallaan) */
@media (min-width:768px){
  #hinnat .plans{margin-top:2.6rem;align-items:stretch}
  #hinnat .plans>li.is-featured{margin-top:-1.1rem;padding-top:2.7rem}
  html.js.ready #hinnat.is-active .plans>li.is-featured{transform:none}
}
@media (max-height:820px) and (min-width:768px){#hinnat .plans{margin-top:2.1rem}#hinnat .plans>li.is-featured{margin-top:-.9rem;padding-top:2.2rem}}

/* 12. revealit: yhtenäinen, kompositoriystävällinen esiintulo kaikilla sisältöpysäkeillä (vain opacity, transform, clip-path).
   Paneeli itse ei häivy eikä sumennu; sen lapset tulevat porrastetusti (otsakerivi, otsikko, lead, lista, napit),
   listojen rivit ja lasikortit omalla porrastuksellaan. Poistuessa kaikki häivytetään lyhyesti ilman viivettä. */
:root{--rv-e:cubic-bezier(.16,1,.3,1);--rv-o:.6s;--rv-t:.8s;--rv-y:14px}
html.js :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel{opacity:1;transform:none;filter:none;transition:none}
html.js :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){opacity:0;transform:translateY(var(--rv-y));transition:opacity .35s var(--rv-e),transform .5s var(--rv-e)}
html.js.ready :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys).is-active .panel>:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){opacity:1;transform:none;transition:opacity var(--rv-o) var(--rv-e) var(--rd,0s),transform var(--rv-t) var(--rv-e) var(--rd,0s)}
.panel>.eyebrow{--rd:0s}.panel>h2{--rd:.06s}.panel>.lead{--rd:.13s}.panel>:is(.sg_more,.works_more){--rd:.46s}.panel>.btns{--rd:.5s}#yhteys .panel>.btns{--rd:.22s}
/* rivit ja luvut */
html.js :is(#palvelut,#tyot,#tulokset) :is(.sgrid,.works,.stats)>li{opacity:0;transform:translateY(var(--rv-y));transition:opacity .35s var(--rv-e),transform .5s var(--rv-e)}
html.js.ready :is(#palvelut,#tyot,#tulokset).is-active :is(.sgrid,.works,.stats)>li:nth-child(n){opacity:1;transform:none;transition:opacity var(--rv-o) var(--rv-e) calc(.2s + var(--n,0) * 75ms),transform var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms)}
:is(.sgrid,.works,.stats,.plans,.team)>li:nth-child(2){--n:1}:is(.sgrid,.works,.stats,.plans,.team)>li:nth-child(3){--n:2}:is(.sgrid,.works,.stats,.plans,.team)>li:nth-child(4){--n:3}
/* lasikortit: leikkaus alhaalta ylös (lasi valmis heti), sisältö perässä */
html.js #hinnat .plans>li,html.js #tekijat .team li{transform:translateY(var(--rv-y));transition:clip-path .45s var(--rv-e),transform .5s var(--rv-e)}
html.js.ready #hinnat.is-active .plans>li:nth-child(n),html.js.ready #tekijat.is-active .team li:nth-child(n){transform:none;transition:clip-path var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms),transform var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms)}
html.js.ready #hinnat.is-active .plans>li>*,html.js.ready #tekijat.is-active .team li>*{transition:opacity var(--rv-o) var(--rv-e) calc(.4s + var(--n,0) * 75ms)}
html.js.ready #tulokset.is-active .vq{transition:clip-path var(--rv-t) var(--rv-e) .42s,transform var(--rv-t) var(--rv-e) .42s}
html.js.ready #tulokset.is-active .vq>*{transition:opacity var(--rv-o) var(--rv-e) .6s}
html.js.ready #hinnat.is-active .pl_foot>.enterwrap{transition:opacity var(--rv-o) var(--rv-e) .5s,transform var(--rv-t) var(--rv-e) .5s}
html.js.ready #hinnat.is-active .sivustudio{transition:clip-path var(--rv-t) var(--rv-e) .58s}
html.js :is(#palvelut,#tyot,#yhteys) .panel::before{opacity:0;transition:opacity .5s var(--rv-e)}
html.js.ready :is(#palvelut,#tyot,#yhteys).is-active .panel::before{opacity:1}
/* lennot ja kerrokset: paneelit piiloon kuten ennen (lasipysäkeillä paneeli pysyy ja lapset piiloutuvat) */
html:is(.flying,.in-floor,.in-room) :is(#palvelut,#tyot,#yhteys) .panel{opacity:0!important;transition:opacity .4s var(--out)!important}
html.reduced :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel *{transition-duration:.3s!important;transition-delay:0s!important;transform:none!important}
html.js :is(#palvelut,#tyot,#tulokset) .panel>:is(.sgrid,.works,.stats):nth-child(n){opacity:1;transform:none}

/* kierros P (suorituskyky): valikon tornipiirroksen jatkuvat animaatiot (SVG, pääsäikeellä) vain kun valikko on auki */
html:not(.menu-open) .mt_room *{animation-play-state:paused}
/* mid/low-taso (html[data-q], tower.js): paneelin esiintulo ilman sumennusta (opacity + transform riittää; sumennettu
   paneeli piirretään joka ruudussa uudelleen raskaan WebGL-näkymän päällä). High-taso ennallaan. */
html.js:is([data-q=low],[data-q=mid]) .panel{filter:none}

/* kierros 16: Sivustudio pillerinä Hinnat tarkemmin -napin vieressä */
#hinnat .sivustudio.is-pill{display:inline-flex;align-items:center;gap:.55rem;height:3.1rem;padding:0 1.15rem 0 1.2rem;border-radius:100px;max-width:none;font-size:.875rem;line-height:1;white-space:nowrap;transition:background-color .35s var(--out),border-color .35s var(--out),transform .35s var(--out),translate .35s var(--out)}
#hinnat .sivustudio.is-pill .sv_a{display:inline-flex;align-items:center;gap:.3rem;font-weight:500;border:0}
#hinnat .sivustudio.is-pill svg{margin:0;width:.85em;height:.85em}
@media (max-width:767px){#hinnat .sivustudio.is-pill{height:2.85rem;font-size:.8125rem;padding:0 1rem}#hinnat .sivustudio.is-pill .sv_q{display:none}}

/* kierros 16: hissipaneelin kerrosnimet mahtuvat (Referenssit), työkuvat matalammiksi */
.liftpanel{width:19.5rem}
.liftpanel_l span{font-size:.625rem;letter-spacing:.1em;white-space:nowrap}
.liftpanel_l button{gap:.5rem;padding-right:.2rem}
@media (min-width:900px){#tyot .works .w_thumb{aspect-ratio:2/1}}
@media (min-width:768px) and (max-width:899px){#tyot .works .w_thumb{aspect-ratio:2/1}}
/* kierros 16: otsakerivi kokonaan vasempaan laitaan, osat pisteellä eroteltuna */
.eyebrow.is-run{justify-content:flex-start;gap:0;flex-wrap:wrap}
.eyebrow.is-run span+span::before{content:"·";margin:0 .55em;opacity:.7}

/* ---------- kierros 18 T3 (11.10.2026) ----------
   Desktop: palveluiden pystyvälit tiiviimmiksi, työkuvat 16:9 matalampina ja kapeampina, Sivustudio-pilleri venyy korttien
   oikeaan reunaan. Pystyruutu: kierroksen 17 M kirjainhehkut ja ohut usva pois; tilalle jokaisen pysäkin taakse pehmeä
   pilvi (koko näkymä, ei reunoja), pysäkki pysyy paikallaan (sticky) ja kaikki sisältö mahtuu näkymään. */
/* 1. palvelut: tiiviimpi 2×2 */
.sgrid{margin-top:1.75rem;row-gap:1.25rem}
.sg_p{margin-top:.28rem}
.sg_d{margin-top:.36rem}
.sg_more{margin-top:1.35rem}
@media (max-height:820px) and (min-width:768px){.sgrid{margin-top:1.3rem;row-gap:.9rem}.sg_p{margin-top:.2rem}.sg_d{margin-top:.28rem}.sg_more{margin-top:1rem}}
/* 2. työt: pikkukuvat 16:9, matalammat ja kapeammat; tekstipalsta kuvan korkuinen */
@media (min-width:768px){
  #tyot .works a{grid-template-columns:7.5rem minmax(0,1fr) auto}
  #tyot .works .w_thumb{aspect-ratio:16/9}
}
@media (max-height:820px) and (min-width:768px){#tyot .works a{grid-template-columns:6.25rem minmax(0,1fr) auto}#tyot .works h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}}
/* 4. Sivustudio-pilleri venyy "Hinnat tarkemmin" -napin vierestä korttiruudukon oikeaan reunaan */
#hinnat .sivustudio.is-pill .sv_go{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;margin:0 -.75rem 0 auto;border-radius:50%;transition:background-color .35s var(--out),color .35s var(--out)}
#hinnat .sivustudio.is-pill .sv_go svg{width:.8rem;height:.8rem;margin:0}
#hinnat .sivustudio.is-pill .sv_a{display:inline;font-weight:500}
/* koko kysymys mahtuu yhdelle riville vasta leveällä ruudulla; muuten lyhyt muoto */
#hinnat .sivustudio.is-pill .sv_y{display:none}
@media (min-width:1540px) and (min-aspect-ratio:21/20){#hinnat .sivustudio.is-pill .sv_y{display:inline}}
/* hintojen "alkaen" tummemmaksi */
html:not(.is-night) #hinnat .plans .sum small{opacity:.9}
@media (min-width:768px){
  #hinnat .pl_foot{flex-wrap:nowrap}
  #hinnat .sivustudio.is-pill{flex:1 1 auto;min-width:0;gap:.45rem;padding:0 1.25rem 0 1.35rem}
}

/* 5. pystyruutu (mq 11.10.2026): pysäkit vierivät normaalisti (ei sticky-pysähdystä) ja jokaisen pysäkin sisältö mahtuu
   näkymään. Tekstien takana on tornin oikeita kumpupilviä (tower.js, mq-pilvet), ei CSS-pilvitaustaa. */
@media (max-aspect-ratio:21/20){
  :root{--mt:calc(var(--nav) + 5.25rem);--mb:4.75rem;--cl:238,242,248;--cla:.82}
  html.is-night{--cl:8,12,26;--cla:.8}
  .stop:not(.is-lobby):not(.is-foot){height:auto;min-height:100vh;min-height:100svh}
  .stop:not(.is-lobby):not(.is-foot) .stop_pin{position:relative;height:auto;min-height:100vh;min-height:100svh;align-items:flex-end;padding:var(--mt) var(--pad) var(--mb)}
  .stop.is-hero .stop_pin{padding-top:40svh}
  /* vanha usva ja kaikki kirjainhehkut pois: pilvi antaa kontrastin */
  html:not(.__) body :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel:not(.is-wall):not(.is-foot)::before{display:none!important}
  html:not(.__) body :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat) .panel,html:not(.__) body :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat) .panel *{text-shadow:none!important}
  /* päivä: tumma teksti myös Hinnoissa */
  html:not(.is-night) body #hinnat .panel>:is(h2,.lead){color:#0f1115}
  html:not(.is-night) body #hinnat .panel>.eyebrow{color:rgba(15,17,21,.86)}
  html:not(.is-night) .sg_p{color:#1a3fb8}
  /* lasikortit pilven päällä: vaalea huurrettu kortti ilman taustasumennusta (kevyempi ja valmis heti) */
  html:not(.is-night) body :is(#hinnat .plans>li,#hinnat .plans>li.is-featured,#tekijat .team li,#tulokset .panel.is-res .vq){background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -24px rgba(18,28,58,.4);-webkit-backdrop-filter:none;backdrop-filter:none}
  html:not(.is-night) body #hinnat .plans>li.is-featured{background:rgba(255,255,255,.88)}
  /* reunarivi: päivällä tumma vaalealla pilvellä, yöllä ennallaan */
  html.ui-dark .rail{background:linear-gradient(180deg,rgba(var(--cl),0),rgba(var(--cl),.72) 58%)}
  html.ui-dark .rail a{color:rgba(15,17,21,.78);text-shadow:none}
  html.ui-dark .rail a[aria-current="true"],html.ui-dark .rail a[aria-current="true"] b{color:#0f1115}
  html.ui-dark .rail a::after{background:rgba(15,17,21,.42)}
  html.ui-dark .rail a[aria-current="true"]::after{background:var(--accent);box-shadow:0 0 0 1px rgba(29,78,216,.3)}
  html.ui-dark .rail_line{background:rgba(15,17,21,.2);box-shadow:none}
  html.ui-dark .rail_line i{background:var(--accent)}
  /* takaisin huipulle -nappi peittäisi sisältöä pysäkeillä; reunarivin 01 tekee saman. Näkyy aulassa ja footerissa. */
  html:not([data-at="7"]):not([data-at="8"]) .totop{opacity:0!important;pointer-events:none!important}
  /* tornin "Astu sisään": nappi ja label pienempinä tornin yläosassa */
  .tdoor{gap:.6rem}
  .tdoor_l{padding:.62rem .85rem .6rem}
}

/* mobiili: kaikki pysäkin sisältö mahtuu näkymään (yksi sarake, tiiviit välit, ei hehkuja) */
@media (max-width:767px) and (max-aspect-ratio:21/20){
  :root{--mt:calc(var(--nav) + 5.25rem);--mb:4.75rem}
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{margin-top:.7rem;font-size:clamp(1.85rem,8.6vw,2.3rem);line-height:.98;letter-spacing:-.035em}
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{margin-top:.8rem;font-size:.9375rem;line-height:1.4}
  .panel>.eyebrow{font-size:.6875rem}
  .btns.is-enter{margin-top:1.25rem}
  .btns .btn{height:2.85rem}
  /* palvelut: yksi sarake, nimi ja hinta samalla rivillä, kuvaus alla */
  .sgrid{margin-top:1.1rem;row-gap:.8rem}
  .sgrid>li,.sgrid>li:nth-child(2n){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:.75rem;padding:0}
  .sgrid h3{font-size:1.0625rem;line-height:1.15}
  .sgrid .sg_p{margin:0;font-size:.75rem}
  .sg_d{grid-column:1/-1;margin-top:.2rem;max-width:none;font-size:.8125rem;line-height:1.38}
  .sg_more{margin-top:.95rem;gap:.15rem .55rem;font-size:.8125rem;line-height:1.38}
  .sg_more b{font-size:.9375rem}
  /* työt: neljä matalaa riviä, 16:9-kuva */
  #tyot .works{margin-top:1rem;gap:.6rem}
  #tyot .works a{grid-template-columns:6rem minmax(0,1fr) auto;column-gap:.85rem}
  #tyot .works .w_thumb{aspect-ratio:16/9;border-radius:.4rem}
  #tyot .works .w_t{gap:.15rem;padding:0}
  #tyot .works h3{font-size:1.0625rem;line-height:1.1}
  #tyot .works .cap{font-size:.5625rem;letter-spacing:.08em}
  #tyot .works .arr{width:1.1rem;height:1.1rem}
  #tyot .works_more{margin-top:.85rem;font-size:.8125rem;line-height:1.5}
  /* tulokset: luvut ja yksi palaute kerrallaan */
  .panel.is-res .stats{margin-top:1.1rem;column-gap:.9rem}
  .panel.is-res .stats li{padding-top:.7rem;gap:.3rem}
  .panel.is-res .stat_n{font-size:1.95rem}
  .panel.is-res .stat_l{font-size:.6875rem;line-height:1.3}
  .panel.is-res .vq{margin-top:1.3rem;padding:.95rem 1rem .45rem 2.6rem;border-radius:16px}
  .panel.is-res .vq .q_mark{left:.75rem;top:.95rem;font-size:3rem}
  .panel.is-res .vq_item blockquote{font-size:1.0625rem;line-height:1.3}
  .panel.is-res .vq .who{margin-top:.6rem}
  .panel.is-res .vq_dots{margin-top:.3rem}
  /* hinnat: kortit vaakakaruselliksi (seuraava kortti pilkistää), kortit kompakteina */
  #hinnat .plans{margin:1.1rem calc(-1 * var(--pad)) 0;padding:.1rem var(--pad) .2rem;display:flex;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
  #hinnat .plans::-webkit-scrollbar{display:none}
  #hinnat .plans>li,#hinnat .plans>li.is-featured{flex:0 0 min(80%,19rem);scroll-snap-align:start;margin:0;padding:1rem 1.05rem 1rem;border-radius:16px}
  #hinnat .pl_top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
  #hinnat .pl_top .pl_k{order:2}
  #hinnat .plans h3{font-size:1.0625rem}
  #hinnat .pl_price{margin-top:.75rem}
  #hinnat .plans .sum{font-size:2rem}
  #hinnat .plans .sum small{display:inline-block;margin:0 .45rem 0 0;vertical-align:.45em}
  #hinnat .pl_vat{margin-bottom:.2rem}
  #hinnat .plans .d{margin-top:.55rem;font-size:.8125rem;line-height:1.38}
  #hinnat .plan_f{margin-top:.6rem;gap:.2rem;font-size:.8125rem;line-height:1.35}
  #hinnat .plans .btn{margin-top:.85rem;height:2.6rem}
  #hinnat .pl_foot{margin-top:1rem;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}
  #hinnat .sivustudio.is-pill{display:grid;grid-template-columns:auto auto;column-gap:.7rem;align-items:center;height:auto;min-height:2.85rem;padding:.42rem .42rem .42rem 1.05rem;border-radius:22px;font-size:.8125rem;line-height:1.3;white-space:normal}
  #hinnat .sivustudio.is-pill .sv_q{display:block;grid-column:1;font-size:.6875rem;line-height:1.3}
  #hinnat .sivustudio.is-pill .sv_a{grid-column:1}
  #hinnat .sivustudio.is-pill .sv_y{display:none}
  #hinnat .sivustudio.is-pill .sv_go{grid-column:2;grid-row:1/3}
  #hinnat .sivustudio.is-pill .sv_x{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #hinnat .sivustudio.is-pill .sv_go{margin:0 0 0 .2rem;width:2rem;height:2rem}
  /* tekijät: 2×2 pienillä kuvilla (kuva vasemmalla, nimi ja rooli oikealla) */
  #tekijat .team{margin-top:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  #tekijat .team li{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem .4rem .4rem;border-radius:14px}
  #tekijat .team img{flex:none;width:3rem;height:3rem;aspect-ratio:1/1;border-radius:10px;object-position:50% 22%}
  #tekijat .team p{margin:0;padding:0;gap:.15rem;min-width:0}
  #tekijat .team b{font-size:.875rem;line-height:1.15}
  #tekijat .team .cap{font-size:.5625rem;letter-spacing:.06em;line-height:1.25}
  /* vihjekupla napin oikealla puolella (napin alla olisi reunarivi) */
  .enterwrap .enterhint{left:calc(100% + .65rem);top:50%;width:calc(100vw - 2 * var(--pad) - 100% - .65rem);max-width:13rem;padding:.5rem .7rem .52rem;font-size:.75rem;transform:translate(-.3rem,-50%)}
  .enterwrap .enterhint::before{left:-5px;top:50%;margin-top:-5px}
  .enterwrap .enterhint.is-on{transform:translate(0,-50%)}
  .enterwrap .enterhint .cap{display:block;margin:0 0 .15rem}
}
@media (max-width:374px) and (max-aspect-ratio:21/20){
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{font-size:.875rem}
}

/* ---------- kierros 18 kohta 7 (Alex 11.10.2026): desktopin aulassa lomake vaaleassa laatikossa kuten mobiilissa ----------
   Laatikko nousee standin kohdalle (ruudun keskelle, kamera on kohtisuoraan standin edessä), kun aula-pysäkki aktivoituu.
   Vain opacity + transform (ei sumennusta), pieni viive jotta kamera ehtii asettua. Standin 3D-kangas jää laatikon taakse. */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  .stop.is-lobby .stop_pin{justify-content:center;padding:calc(var(--nav) + .25rem) var(--pad) 1rem}
  .stop.is-lobby .panel.stand{width:min(28rem,calc(100vw - 2 * var(--pad)));max-height:none;margin:0;padding:1.5rem 1.75rem 1.2rem;border-radius:.2rem;
    background:linear-gradient(180deg,#f8f6f2,#eeebe5);border:1px solid rgba(18,19,22,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 34px 80px -34px rgba(20,16,10,.55)}
  html.js .stop.is-lobby .panel.stand{opacity:0;transform:translateY(min(14rem,32vh));filter:none;transition:opacity .55s var(--out),transform .95s var(--out)} /* kierros 20: nousee selvästi alhaalta */
  html.js.ready .stop.is-lobby.is-active .panel.stand{opacity:1;transform:none;transition:opacity .55s var(--out) .2s,transform .95s var(--out) .2s}
  /* standin kankaan logo näkyy laatikon yläpuolella, joten laatikossa ei toista logoa */
  .stop.is-lobby .stand_logo{display:none}
  .stop.is-lobby .stand_h,.stop.is-lobby .panel.stand h2.stand_h{margin-top:0;font-size:2.35rem}
  .stop.is-lobby .stand_lead{margin-top:.5rem}
  .stop.is-lobby .stand_form{margin-top:1.15rem;gap:.9rem}
  .stop.is-lobby .sf textarea{height:2.9rem}
  .stop.is-lobby .stand_contact{margin-top:1rem}
}
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:820px){
  .stop.is-lobby .panel.stand{padding:1.2rem 1.6rem 1rem}
  .stop.is-lobby .stand_h,.stop.is-lobby .panel.stand h2.stand_h{margin-top:0;font-size:2.05rem}
  .stop.is-lobby .stand_form{margin-top:.95rem;gap:.7rem}
  .stop.is-lobby .sf input,.stop.is-lobby .sf textarea{padding:.28rem 0 .32rem}
  .stop.is-lobby .sf textarea{height:2.5rem}
  .stop.is-lobby .stand_contact{margin-top:.8rem;padding-top:.65rem}
}
@media (prefers-reduced-motion:reduce){html.js .stop.is-lobby .panel.stand{transform:none!important}}
/* kierros 19b (Alex 11.10.2026): mobiilin palveluihin tilaa, töiden nimi ja lisärivi pystysuunnassa keskelle yhdessä
   (desktop ja mobiili) */
@media (max-aspect-ratio:21/20){
  #palvelut .sgrid>li{padding-top:.95rem;padding-bottom:1rem}
  #palvelut .sgrid .sg_p{margin-top:.3rem}
  #palvelut .sgrid .sg_d{margin-top:.35rem}
}
#tyot .works .w_t{justify-content:center!important;gap:.3rem!important;padding:0!important}
/* mq: matalalla puhelimella (esim. 360 × 780) palveluiden rivit tiiviimmiksi, jotta koko pysäkki mahtuu navin ja reunarivin väliin */
@media (max-aspect-ratio:21/20) and (max-height:800px){
  #palvelut .sgrid>li{padding-top:.6rem;padding-bottom:.62rem}
}

/* kierros 19c (Alex 11.10.2026): mobiilin navin napit matalammiksi; pienillä näytöillä ei Varaa puhelu -nappia */
@media (max-width:767px){
  .nav .nav_cta{height:2.25rem;padding:0 .4rem 0 .9rem;gap:.5rem;font-size:.8125rem}
  .nav .nav_cta .btn_b{width:1.4rem;height:1.4rem}
  .nav_theme{width:2.25rem;height:2.25rem}
  .nav_burger{width:2.25rem;height:2.25rem}
  .nav_burger_i{transform:scale(.88)}
}
@media (max-width:374px){.nav .nav_cta{display:none}}

/* kierros 20 (Alex 11.10.2026): Sivustudio-pilleri lyhyeksi, ei veny; kolmas nappi "Varaa palaveri" hinnaston alle */
#hinnat .sivustudio.is-pill{flex:0 0 auto!important;min-width:0}
#hinnat .sivustudio.is-pill .sv_go{margin-left:.35rem}
@media (max-width:767px){#hinnat .sivustudio.is-pill{display:inline-flex;grid-template-columns:none;height:2.85rem;min-height:0;padding:0 .9rem 0 1rem;border-radius:100px;white-space:nowrap}#hinnat .sivustudio.is-pill .sv_q{display:none}}

/* kierros 20b: Varaa palaveri valkoisena pillerinä, mobiilissa Sivustudio ennen Hinnat tarkemmin -nappia; hintakarusellin swipe-vihje */
.pl_swipe{display:none}
@media (max-aspect-ratio:21/20){
  #hinnat .pl_foot{display:flex;flex-wrap:wrap;gap:.6rem .6rem}
  #hinnat .pl_foot>.sivustudio.is-pill{order:-1}
  #hinnat .pl_foot>.enterwrap{order:0}
  .pl_swipe{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.9rem 0 -.3rem;font-size:.625rem;letter-spacing:.16em;color:rgba(15,17,21,.6)}
  .pl_swipe svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .pl_swipe svg:first-child{animation:swL 2.6s ease-in-out infinite}
  .pl_swipe svg:last-child{animation:swR 2.6s ease-in-out infinite}
  html.is-night .pl_swipe{color:rgba(247,247,245,.7)}
  @keyframes swL{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-3px);opacity:1}}
  @keyframes swR{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(3px);opacity:1}}
}
@media (prefers-reduced-motion:reduce){.pl_swipe svg{animation:none!important}}

/* ---------- kierros ML (Alex 12.10.2026) ---------- */
/* desktopin aulan lomakelaatikko: enemmän sisätilaa; matalilla näytöillä kentät tiiviimmin, jotta mahtuu ilman vieritystä */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  .stop.is-lobby .panel.stand{width:min(30rem,calc(100vw - 2 * var(--pad)));padding:2.25rem 2.5rem 2rem}
}
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:820px){
  .stop.is-lobby .panel.stand{padding:1.85rem 2.25rem 1.6rem}
  .stop.is-lobby .stand_form{margin-top:.85rem;gap:.6rem}
  .stop.is-lobby .sf textarea{height:2.3rem}
}
/* pystyruutu: footer on aulan vaaleaa marmoria vasten (myös yöllä, aula on valaistu), joten tekstit tummiksi ilman hehkuja */
@media (max-aspect-ratio:21/20){
  .panel.is-foot{--fg:#0f1115;--muted:#0f1115;color:#0f1115}
  .panel.is-foot,.panel.is-foot *{text-shadow:none!important}
  .foot_brand,.foot_row,.foot_links a,.foot_links button,.foot_links [data-top]{color:#0f1115}
  .foot_cities,.foot_cities a{color:#0f1115}
  .foot_cities{padding-right:3.75rem}
  .foot_links a:hover,.foot_links button:hover,.foot_links a:focus-visible,.foot_links button:focus-visible,.foot_cities a:hover,.foot_cities a:focus-visible{color:var(--accent)}
  /* palvelulistan rivien väliin lyhyt 20 px viiva vasempaan laitaan (myös Ylläpito-rivin edelle, ei ensimmäisen yläpuolelle) */
  #palvelut .sgrid>li{position:relative}
  #palvelut .sgrid>li+li::before,#palvelut .sg_more::before{content:"";position:absolute;left:0;top:-.4rem;width:20px;height:1px;background:rgba(15,17,21,.35);pointer-events:none}
  #palvelut .sg_more{position:relative}
  #palvelut .sg_more::before{top:-.98rem}
  html.is-night #palvelut .sgrid>li+li::before,html.is-night #palvelut .sg_more::before{background:rgba(247,247,245,.4)}
  /* Hinnat-pysäkin alarivi: Hinnat tarkemmin ensin, Sivustudio viereen jos mahtuu (muuten alle) */
  #hinnat .pl_foot>.enterwrap{order:0}
  #hinnat .pl_foot>.sivustudio.is-pill{order:1}
  /* hintakarusellin vihje korttirivin oikeaan yläkulmaan, vain oikealle osoittava nuoli */
  .pl_swipe{justify-content:flex-end;margin:.7rem 0 -.6rem;font-size:.625rem;letter-spacing:.16em;color:rgba(15,17,21,.72)}
  .pl_swipe svg:first-child{display:none}
}
/* Sivustudio-pilleri mobiilissa kahdella rivillä: pieni kysymys ylhäällä, Tutustu Sivustudioon alla, nuolipallo oikealla */
@media (max-aspect-ratio:21/20) and (max-width:767px){
  #hinnat .sivustudio.is-pill{display:inline-grid;grid-template-columns:auto auto;column-gap:.55rem;align-items:center;height:auto;min-height:2.875rem;padding:.2rem .42rem .2rem 1rem;border-radius:100px;line-height:1.2;white-space:nowrap}
  #hinnat .sivustudio.is-pill .sv_q{display:block;grid-column:1;grid-row:1;font-size:.6875rem;line-height:1.1;margin-bottom:-2px}
  #hinnat .sivustudio.is-pill .sv_a{grid-column:1;grid-row:2;line-height:1.1}
  #hinnat .sivustudio.is-pill .sv_go{grid-column:2;grid-row:1/3;margin:0;width:2rem;height:2rem}
}

/* kierros 21 (Alex 12.10.2026): pyyhkäisyvihje sormi-ikonilla korttien keskellä, välähtää pehmeästi pari kertaa */
.pl_swipe{display:none!important}
.pl_swipe2{display:none}
@media (max-aspect-ratio:21/20){
  #hinnat .panel{position:relative}
  .pl_swipe2{position:absolute;left:50%;top:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.9rem 1.1rem .8rem;border-radius:1rem;transform:translate(-50%,0);
    color:#0f1115;background:rgba(247,247,245,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 40px -20px rgba(10,14,30,.4);
    font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;pointer-events:none;opacity:0;transition:opacity .5s var(--out)}
  .pl_swipe2 svg{width:3.2rem;height:3.2rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .pl_swipe2.is-on{opacity:1;animation:swipeFade 7.5s ease-in-out 1 forwards}
  .pl_swipe2.is-on .sw_hand{animation:swipeHand 1.9s ease-in-out infinite}
  .pl_swipe2.is-on .sw_arr{animation:swipeArr 1.9s ease-in-out infinite}
  html.is-night .pl_swipe2{color:#f7f7f5;background:rgba(15,15,15,.72);border-color:rgba(255,255,255,.18)}
  @keyframes swipeHand{0%,100%{transform:translateX(8px)}50%{transform:translateX(-8px)}}
  @keyframes swipeArr{0%,100%{opacity:.35}50%{opacity:1}}
  @keyframes swipeFade{0%{opacity:0}8%{opacity:1}84%{opacity:1}100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){.pl_swipe2.is-on,.pl_swipe2.is-on .sw_hand,.pl_swipe2.is-on .sw_arr{animation:none!important}.pl_swipe2.is-on{opacity:1}}


/* kierros 21c (Alex 12.10.2026): desktopilla alarivin kolme nappia jaettuna tasan korttiruudukon leveydelle,
   järjestys Hinnat tarkemmin · Varaa palaveri · Sivustudio */
@media (min-aspect-ratio:21/20){
  #hinnat .pl_foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content;gap:1.1rem;align-items:stretch} /* kierros 21f: Sivustudio tarvitsemansa levyinen, kaksi muuta jakavat loput */
  #hinnat .pl_foot>.enterwrap{order:0;display:flex}
  #hinnat .pl_foot>.sivustudio.is-pill{order:2;flex:none!important}
  #hinnat .pl_foot>.enterwrap>.btn,#hinnat .pl_foot>.sivustudio.is-pill{width:100%;justify-content:center;min-width:0}
  #hinnat .pl_foot>.enterwrap>.btn{justify-content:space-between}
  #hinnat .pl_foot>.sivustudio.is-pill .sv_go{margin-left:auto}
}

/* kierros 21d (Alex): pyyhkäisyvihje ilman taustaa, ohut viivaikoni (fine line) */
@media (max-aspect-ratio:21/20){
  .pl_swipe2{padding:0;background:none!important;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:.55rem;color:#0f1115;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.85),0 0 24px rgba(255,255,255,.7)}
  .pl_swipe2 svg{width:4.2rem;height:3.15rem;stroke-width:1.15;filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.8))}
  .pl_swipe2 span{font-size:.625rem;letter-spacing:.2em;font-weight:500}
  .pl_swipe2.is-on .sw_hand{animation:swipeHand2 2s cubic-bezier(.45,0,.25,1) infinite}
  .pl_swipe2.is-on .sw_l{animation:swipeArrL 2s ease-in-out infinite}
  .pl_swipe2.is-on .sw_r{animation:swipeArrR 2s ease-in-out infinite}
  .pl_swipe2.is-on .sw_arr{animation-name:none}
  html.is-night .pl_swipe2{color:#f7f7f5;text-shadow:0 0 1px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7)}
  html.is-night .pl_swipe2 svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(0,0,0,.6))}
  @keyframes swipeHand2{0%,100%{transform:translateX(7px) rotate(-4deg)}50%{transform:translateX(-7px) rotate(4deg)}}
  @keyframes swipeArrL{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(-2px)}}
  @keyframes swipeArrR{0%,100%{opacity:1;transform:translateX(2px)}50%{opacity:.3;transform:translateX(0)}}
  .pl_swipe2 .sw_hand{transform-origin:28px 42px}
}

/* kierros 21e: isompi pyyhkäisyikoni */
@media (max-aspect-ratio:21/20){.pl_swipe2 svg{width:6.4rem;height:4.8rem;stroke-width:1}}

/* ---------- kierros 21 R (12.10.2026): näyttökoot ----------
   Kaikki näkymät läpi 360×780 … 3840×2160. 1440×900 ennallaan (mitattu ennen/jälkeen).
   1. Isot näytöt ja TV: koko käyttöliittymä skaalautuu hillitysti juurifontin kautta (rem), 3D pysyy täysruutuna.
      Juurikoko = 16 px + 62 % suhteellisesta kasvusta (min(leveys/1440, korkeus/900)), katto 30 px:
      1920×1080 ≈ 18 px, 2560×1440 ≈ 22 px, 3840×2160 ≈ 30 px. Koska kasvu on aina pienempi kuin näkymän kasvu,
      otsikot ja paneelit eivät koskaan ole suhteessa isompia kuin 1440×900:lla (vw-rajatut clampit pysyvät ennallaan).
   kierros 23 UHD (Alex 12.10.2026: 27" UHD -näytöllä etusivu hiukan liian iso): torninäkymässä kasvu 36 % (ennen 62 %),
      katto 26 px: 1920×1080 ≈ 17,2 px, 2560×1440 ≈ 19,5 px, 3072×1728 ≈ 21,3 px, 3840×2160 ≈ 24,1 px; 1440×900 = 16 px ennallaan.
      Kerrosnäkymä (html.in-floor, suoraan ladattu kerrossivu html[data-floor] ennen tornia) pitää vanhan kaavan, joten
      kerrossivut ja niiden hissipaneeli pysyvät ennallaan. Vaihto tapahtuu lennon jälkeen, kun tornin käyttöliittymä on jo
      häivytetty (html.flying), ja ulos tultaessa ennen kuin se häivytetään takaisin, joten hyppyä ei näy.
      Tornin hissi (3D-pilleri "Hissi kerroksiin" ja kerrosvalitsin) pysyy vanhan kokoisena: --rem0 = vanha juurikoko. */
@media (min-width:1600px) and (min-height:960px){
  html{font-size:clamp(16px,calc(10.21px + min(.4018vw,.6429vh)),26px);--rem0:clamp(16px,calc(6.08px + min(.6889vw,1.1022vh)),30px)}
  html:is(.in-floor,[data-floor]:not(.floor-left)){font-size:var(--rem0)}
  .liftcall{gap:calc(.6*var(--rem0));height:calc(2.75*var(--rem0));margin:calc(-1.375*var(--rem0)) 0 0 calc(-1.375*var(--rem0));padding:0 calc(1.1*var(--rem0)) 0 calc(.3*var(--rem0));font-size:calc(.875*var(--rem0))}
  .liftcall_i{width:calc(2.1*var(--rem0));height:calc(2.1*var(--rem0))}
  .liftcall_i svg,.liftpanel_x svg{width:calc(.85*var(--rem0));height:calc(.85*var(--rem0))}
  .liftpanel{width:calc(19.5*var(--rem0));padding:var(--rem0) var(--rem0) calc(1.05*var(--rem0));border-radius:calc(1.1*var(--rem0))}
  .liftpanel.is-sheet{bottom:calc(var(--rem0) + env(safe-area-inset-bottom,0px));width:min(calc(21*var(--rem0)),calc(100% - 2*var(--rem0)))}
  .liftpanel_h{gap:calc(.6*var(--rem0));padding-right:calc(2*var(--rem0));font-size:calc(.9375*var(--rem0))}
  .liftpanel_h .cap{font-size:calc(.6875*var(--rem0))}
  .liftpanel_l{margin-top:calc(.85*var(--rem0));gap:calc(.5*var(--rem0)) calc(.6*var(--rem0))}
  .liftpanel_l button{gap:calc(.5*var(--rem0));min-height:calc(2.75*var(--rem0));padding:calc(.25*var(--rem0)) calc(.2*var(--rem0)) calc(.25*var(--rem0)) calc(.25*var(--rem0))}
  .liftpanel_l b{width:calc(2.6*var(--rem0));height:calc(2.6*var(--rem0));font-size:calc(.9375*var(--rem0))}
  .liftpanel_l span{font-size:calc(.625*var(--rem0))}
  .liftpanel_x{right:calc(.55*var(--rem0));top:calc(.55*var(--rem0));width:calc(2.2*var(--rem0));height:calc(2.2*var(--rem0))}
}
/* 1a. Pysäkkien otsikot eivät kasva suhteessa näkymän korkeuteen isommiksi kuin 1440×900:lla (h2 79 px = 8,8 vh,
       h1 76 px = 8,48 vh). Ennen 16:9-näytöillä (1536×864, 1920×1080) otsikot olivat leveyden mukaan 9,4–9,8 vh.
       1440×900:lla arvot ovat täsmälleen samat kuin ennen; matalien läppärien (≤ 820 px) säännöt ennallaan. */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (min-height:821px){
  :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{font-size:clamp(2.8rem,min(5.5vw,8.8vh),5.9rem)}
  .hero_title{font-size:clamp(2.9rem,min(5.3vw,8.48vh),5.7rem)}
}
/* 1b. Aulan lomakelaatikko 16:9-näytöillä (1536×864, 1920×1080, 2560×1440, TV): kamera on standia lähempänä kuin
       16:10:llä, joten standin kangas jatkui laatikon alapuolelle (yhteystiedot näkyivät kahteen kertaan). Laatikko
       kattaa kankaan logon alapuolelta kankaan alareunaan (28–84,5 % näkymän korkeudesta), yhteystiedot alas. */
@media (min-aspect-ratio:17/10) and (min-width:768px){
  .stop.is-lobby .stop_pin{align-items:flex-start;padding-top:28vh;padding-bottom:0}
  .stop.is-lobby .panel.stand{display:flex;flex-direction:column;min-height:56.5vh}
  .stop.is-lobby .panel.stand>.stand_contact{margin-top:auto}
  .stop.is-lobby .panel.stand>.stand_form{flex:none}
}
/* 2. (Sivustudio-pilleri: leikkautuminen korjattu kierroksilla 21f–21g, ei omaa sääntöä tässä.)
   3. Matalat läppärit ja tabletti vaaka (1024×768, 1280×720, 1366×768): kierroksen 21g kaksirivinen alarivi
      (≤ 1400 px) vei Hinnat-pysäkin alareunan ruudun ulkopuolelle (742/720, 773/768, 774/768). Pystyvälit tiiviimmiksi. */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-width:1400px) and (max-height:820px){
  #hinnat .panel>.lead{margin-top:.85rem}
  #hinnat .plans{margin-top:1.6rem}
  #hinnat .plans>li{padding-top:1.1rem;padding-bottom:1rem}
  #hinnat .plans>li.is-featured{padding-top:1.95rem}
  #hinnat .pl_price{margin-top:.85rem}
  #hinnat .plans .d{margin-top:.7rem}
  #hinnat .plan_f{margin-top:.7rem;gap:.28rem}
  #hinnat .plans .btn{margin-top:.95rem}
  #hinnat .pl_foot{margin-top:1.2rem;row-gap:.6rem}
}
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:740px){
  #hinnat .panel>h2{font-size:clamp(2.2rem,3.9vw,3.5rem)}
  #hinnat .panel>.lead{margin-top:.6rem}
  #hinnat .plans{margin-top:1.35rem}
  #hinnat .plans>li{padding-top:.95rem;padding-bottom:.85rem}
  #hinnat .plans>li.is-featured{padding-top:1.75rem}
  #hinnat .pl_price{margin-top:.7rem}
  #hinnat .plans .d{margin-top:.55rem}
  #hinnat .plan_f{margin-top:.55rem;gap:.22rem}
  #hinnat .plans .btn{margin-top:.8rem;height:2.6rem}
  #hinnat .pl_foot{margin-top:1rem;row-gap:.5rem}
}
/* 4. Tabletti vaaka ja pienet läppärit (≤ 1100 px leveä, vaaka): Palvelut- ja Tulokset-paneelit olivat tornin päällä
      (4:3-rajauksessa torni on vasemmalla kolmanneksella); kapeampi paneeli pysyy tornin oikealla puolella */
@media (max-width:1100px) and (min-width:768px) and (min-aspect-ratio:21/20){
  .panel.is-svc,.panel.is-res{width:min(34rem,54vw)}
}
/* 5. Tabletti pysty (768×1024): Työt-paneeli jäi desktopin 40vw-leveyteen (kapea palsta, nimet kolmella rivillä) */
@media (max-aspect-ratio:21/20) and (min-width:768px){
  #tyot .panel{width:100%}
}
/* 6. Matalat puhelimet (esim. 375×667): Palvelut ja Hinnat eivät mahtuneet navin ja reunarivin väliin (otsikko navin alla) */
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:720px){
  :root{--mb:4.1rem}
  :is(#palvelut,#hinnat) .panel>h2{font-size:clamp(1.65rem,7.6vw,1.95rem)}
  :is(#palvelut,#hinnat) .panel>.lead{margin-top:.55rem;font-size:.875rem;line-height:1.36}
  #palvelut .sgrid{margin-top:.8rem;row-gap:.35rem}
  #palvelut .sgrid>li{padding-top:.3rem;padding-bottom:.3rem}
  #palvelut .sgrid .sg_d{margin-top:.15rem;line-height:1.32}
  #palvelut .sg_more{margin-top:.6rem;font-size:.75rem;line-height:1.32}
  #palvelut .sg_more::before{top:-.4rem}
  :is(#palvelut,#hinnat) .btns.is-enter{margin-top:.8rem}
  #hinnat .plans{margin-top:.75rem}
  #hinnat .plans>li,#hinnat .plans>li.is-featured{padding:.85rem .95rem .85rem}
  #hinnat .pl_price{margin-top:.5rem}
  #hinnat .plans .d{margin-top:.4rem}
  #hinnat .plan_f{margin-top:.45rem}
  #hinnat .plans .btn{margin-top:.7rem;height:2.45rem}
  #hinnat .pl_foot{margin-top:.7rem}
}

/* kierros 21f (Alex 12.10.2026): sama padding joka pilleriin, Sivustudio ei leikkaudu */
@media (min-aspect-ratio:21/20){
  #hinnat .pl_foot>.enterwrap>.btn,#hinnat .pl_foot>.sivustudio.is-pill{padding-left:1.35rem;padding-right:1.35rem;height:3.1rem;overflow:visible;white-space:nowrap}
  #hinnat .pl_foot>.enterwrap>.btn{padding-right:.6rem}
  #hinnat .pl_foot>.sivustudio.is-pill{padding-right:.65rem;gap:.55rem}
  #hinnat .pl_foot>.sivustudio.is-pill .sv_go{margin-left:.35rem}
}
@media (min-aspect-ratio:21/20) and (max-width:1400px){
  #hinnat .pl_foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #hinnat .pl_foot>.sivustudio.is-pill{grid-column:1/-1;justify-content:center}
}

/* kierros 21g (Alex 12.10.2026): desktopilla Sivustudio yhdellä rivillä, leveimpänä; kaksi muuta jakavat loput */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  #hinnat .pl_foot>.sivustudio.is-pill{display:inline-flex;grid-template-columns:none;grid-template-rows:none;align-items:center;gap:.5rem;height:3.1rem;padding:0 .65rem 0 1.35rem;white-space:nowrap;width:auto;justify-self:stretch}
  #hinnat .pl_foot>.sivustudio.is-pill .sv_q,#hinnat .pl_foot>.sivustudio.is-pill .sv_a{display:inline;font-size:.875rem;line-height:1;overflow:visible}
  #hinnat .pl_foot>.sivustudio.is-pill .sv_go{margin-left:auto}
}

/* kierros 21h: reveal kaikille hinnaston alarivin pillereille (porrastettu) */
html.js #hinnat .pl_foot>.sivustudio.is-pill{opacity:0;transform:translateY(1rem);transition:opacity .7s var(--out),transform .8s var(--out)}
html.js.ready #hinnat.is-active .pl_foot>.sivustudio.is-pill{opacity:1;transform:none;transition:opacity var(--rv-o,.7s) var(--rv-e,var(--out)) .66s,transform var(--rv-t,.8s) var(--rv-e,var(--out)) .66s,translate .35s var(--out),background-color .35s var(--out),color .35s var(--out)}

/* ---------- kierros 22 (Alex 12.10.2026) ----------
   Hinnat-pysäkin alarivi ilman Varaa palaveri -nappia: desktopilla kaksi saraketta, Hinnat tarkemmin tarvitsemansa levyinen
   ja Sivustudio täyttää loput (samat paddingit kuin ennen). Mobiili ennallaan. */
@media (min-aspect-ratio:21/20){
  #hinnat .pl_foot{grid-template-columns:max-content minmax(0,1fr)}
  #hinnat .pl_foot>.sivustudio.is-pill{grid-column:auto}
}

/* ===== kierros SEO (12.10.2026) =====
   Kerrossivun oma kerrosfragmentti on HTML:ssä <main>in alussa (h1 ensimmäisenä hakukoneelle). js/floor.js siirtää sen
   kerrosnäkymään ennen avaamista; siihen asti se ei saa viedä tilaa tornin pysäkeiltä. Kerrossivulla heron otsikko on h2
   (ylempänä .panel h2 -säännöt rajattu :where(:not(.hero_title)), joten ulkoasu pysyy samana kuin h1:nä). */
main>.floors{display:none}

/* ===== kierros 23 (12.10.2026): navin oikean reunan välit tiiviimmiksi (Alex: Varaa puhelu, EN ja yö/päivä lähemmäs toisiaan) ===== */
@media (min-width:768px){.nav_r{gap:.75rem}.nav_r .nav_burger{margin-left:.5rem}}

/* kierros 23 (Alex 12.10.2026): Tulokset-pysäkin luvut 2022 / 350+ / 5 hieman pienemmiksi */
/* (tarkistus: 4.2vw oli 1440:lla 60 px eli isompi kuin aiempi 55 px; nyt noin 0,6 × otsikko joka näytöllä: 1440×900 ≈ 48 px, 1366×768 ≈ 38 px) */
.panel.is-res .stat_n{font-size:clamp(2.3rem,3.3vw,3.5rem)}
@media (max-height:820px) and (min-width:768px){.panel.is-res .stat_n{font-size:clamp(2rem,2.8vw,2.8rem)}}
@media (max-width:767px){.panel.is-res .stat_n{font-size:1.9rem}}

/* kierros 23 (Alex 12.10.2026): Hinnat-alarivin "Tutustu Sivustudioon" -pilleri normaalin levyinen, ei venytetty */
@media (min-aspect-ratio:21/20){
  #hinnat .pl_foot{grid-template-columns:max-content max-content;justify-content:start}
  #hinnat .pl_foot>.sivustudio.is-pill{justify-self:start;width:auto}
}

/* kierros 23 (Alex 12.10.2026): aulan lomakkeen rivien väliin lisää tilaa desktopilla (matalat läppärit ennallaan) */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (min-height:821px){
  .stop.is-lobby .stand_form{gap:1.5rem;margin-top:1.7rem}
  .stop.is-lobby .sf_end{margin-top:.45rem}
}

/* kierros 23 (Alex 12.10.2026): "Astu sisään" -ovinapin lasi näkyy heti revealin alusta.
   Syy: .tdoor häivytettiin opacity 0 → 1, ja opacity < 1 tekee elementistä backdrop rootin, jolloin lasten
   backdrop-filter ei näe tornia takanaan ennen kuin häivytys on valmis (blur "tuli hetken päästä").
   Nyt säiliön opacity on aina 1 ja reveal tehdään clip-pathilla (ei backdrop rootia): nappi aukeaa ympyränä, nimilappu pyyhkäisee. */
.tdoor{opacity:1;transition:visibility 0s .45s}
.tdoor.is-on{opacity:1;transition:visibility 0s}
.tdoor_b{clip-path:circle(0% at 50% 50%);transition:clip-path .45s var(--out),background-color .35s var(--out),border-color .35s var(--out),color .35s var(--out),transform .4s var(--out)}
.tdoor.is-on .tdoor_b{clip-path:circle(100% at 50% 50%)}
/* (tarkistus: site.js asettaa is-flipin samassa ruudussa kuin is-onin, jolloin siirtymä lähti aina vasemman puolen piilotilasta ja
   flip-pysäkeillä, esim. Työt, lappu pyyhkäisi väärään suuntaan. Nyt lappu avautuu keskeltä, suunnasta riippumatta. Alareunaan
   jätetään tilaa, jottei lapun varjo leikkaudu.) */
.tdoor_l{clip-path:inset(0 50% 0 50% round 100px);transition:clip-path .5s var(--out) .08s}
.tdoor.is-on .tdoor_l{clip-path:inset(-.5rem -.5rem -2rem -.5rem round 100px)}

/* ===== kierros 23 lasikortit (Alex 12.10.2026): Palvelut ja Valitut työt samoina läpinäkyvinä lasikortteina kuin hintakortit =====
   Sama lasi kuin #hinnat .plans>li (päivä: vaalea liukuväri + blur 22 px + kirkastus, yö: himmeämpi lasi, pystyruutu: huurrettu
   kortti ilman taustasumennusta). Esiintulo kuten hintakorteilla: kortti leikkautuu esiin alhaalta (lasi valmis heti), sisältö perässä.
   Paneeli ei koskaan häivy (läpinäkyvä vanhempi katkaisisi lasin sumennuksen), lennon ajaksi piiloutuvat sen lapset. */
:root{
  /* päivä: hintakorttien lasi, mutta kirkastus ja valkoisuus maltillisempia, koska nämä pysäkit ovat kirkkaan pilven päällä
     (brightness 1.22 + 26 % valkoista leikkasi pilven puhtaaksi valkoiseksi laatikoksi; nyt taivaan sävy ja pilven muoto kuultavat) */
  --gc-bg:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%),rgba(255,255,255,.14);
  --gc-bg-h:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),rgba(255,255,255,.3);
  --gc-bd:rgba(255,255,255,.38);--gc-bd-h:rgba(255,255,255,.8);
  --gc-sh:inset 0 1px 0 rgba(255,255,255,.45),0 18px 44px -30px rgba(18,28,58,.42);
  --gc-sh-h:inset 0 1px 0 rgba(255,255,255,.7),0 26px 56px -34px rgba(4,8,20,.55);
  --gc-bf:blur(22px) saturate(150%) brightness(1.1);
  --gc-fg:#0f1115;--gc-fg2:rgba(15,17,21,.86);--gc-tsh:none;
}
/* yön lasimuuttujat (--gc-bg, -bd, -sh, -bf): tiedoston lopun lohko "yö: mustat lasikortit (Revdot-tyyli)" */
html.is-night{
  --gc-fg:#f7f7f5;--gc-fg2:rgba(247,247,245,.86);--gc-tsh:0 1px 2px rgba(2,4,12,.35);
}
#palvelut .sgrid>li,#palvelut .sg_more,#tyot .works a{position:relative;border-radius:20px;color:var(--gc-fg);text-shadow:var(--gc-tsh);background:var(--gc-bg);border:1px solid var(--gc-bd);box-shadow:var(--gc-sh);-webkit-backdrop-filter:var(--gc-bf);backdrop-filter:var(--gc-bf)}
#palvelut .sgrid>li *,#palvelut .sg_more *,#tyot .works a *{text-shadow:var(--gc-tsh)!important}

/* --- Palvelut: 2×2 lasikorttia, ylläpito viidentenä matalana korttina koko leveydeltä --- */
#palvelut .sgrid{margin-top:1.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;border:0}
#palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){display:block;padding:1.15rem 1.3rem 1.25rem;border:1px solid var(--gc-bd)}
#palvelut .sgrid h3{font-size:clamp(1.2rem,1.5vw,1.5rem);line-height:1.08;letter-spacing:-.025em;color:inherit}
#palvelut .sgrid .sg_p{display:block;margin-top:.3rem;font-size:.75rem;font-weight:600;color:#1a3fb8}
html.is-night #palvelut .sgrid .sg_p{color:var(--nacc)}
#palvelut .sgrid .sg_d{margin-top:.55rem;max-width:none;font-size:.875rem;line-height:1.45;color:var(--gc-fg2)}
#palvelut .sg_more{margin-top:.85rem;padding:.9rem 1.3rem .95rem;border-radius:16px;color:var(--gc-fg)}
#palvelut .sg_more b{color:inherit}
html.is-night #palvelut .sg_more .sg_p{color:var(--nacc)}
#palvelut .sg_more .sg_t{color:var(--gc-fg2)}
#palvelut .sgrid>li::before,#palvelut .sg_more::before{display:none!important}

/* --- Valitut työt: 2×2 lasikorttia, kuva ylhäällä, nimi ja ala alla, nuoli oikeassa alakulmassa --- */
#tyot .works{display:grid;gap:.85rem}
#tyot .works>li{display:flex}
#tyot .works a{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:.75rem;row-gap:0;align-items:end;padding:.5rem .5rem .95rem;opacity:1;transition:background .45s var(--out),border-color .45s var(--out),box-shadow .45s var(--out)}
#tyot .works .w_thumb{grid-column:1/-1;grid-row:1;width:100%;aspect-ratio:16/9;max-height:max(6.25rem,calc(50svh - 19.5rem));border-radius:13px;overflow:hidden;background:rgba(247,247,245,.9);opacity:1}
#tyot .works .w_thumb::after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,17,21,.08)}
#tyot .works .w_thumb img,#tyot .works .w_thumb video{transition:transform .9s var(--out),opacity .5s var(--out)}
#tyot .works .w_t{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;padding:.85rem 0 0 .55rem!important;gap:.3rem!important}
#tyot .works h3{font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.1;letter-spacing:-.025em;color:inherit;transform:none!important}
#tyot .works .cap{font-size:.625rem;letter-spacing:.08em;line-height:1.35;color:var(--gc-fg2)}
#tyot .works .arr{grid-column:2;grid-row:2;align-self:end;margin:0 .45rem .1rem 0;width:1.15rem;height:1.15rem;opacity:.7;color:inherit}
#tyot .works_more{margin-top:1.15rem}
/* hover: kortti kirkastuu kuten korostettu hintakortti, kuva zoomaa hieman, nuoli liikahtaa yläoikealle; muita ei himmennetä */
.fine #tyot .works:hover a{opacity:1}
.fine #tyot .works a:hover .w_thumb{opacity:1}
#tyot .works a:hover,#tyot .works a:focus-visible{background:var(--gc-bg-h);border-color:var(--gc-bd-h);box-shadow:var(--gc-sh-h)}
#tyot .works a:hover h3,#tyot .works a:focus-visible h3,html.is-night #tyot .works a:hover h3,html.is-night #tyot .works a:focus-visible h3{color:inherit}
#tyot .works a:hover .arr,#tyot .works a:focus-visible .arr,html.is-night #tyot .works a:hover .arr{opacity:1;color:inherit;transform:translate(2px,-2px)}
.fine #tyot .works a:hover .w_thumb img,.fine #tyot .works a:hover .w_thumb video,#tyot .works a:focus-visible .w_thumb img{transform:scale(1.03)}
#tyot .works a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.is-night #tyot .works a:focus-visible{outline-color:var(--nacc)}

/* desktop vaaka ≥ 1100 px: 2×2, paneeli hieman leveämpi mutta torni ja sen Astu sisään -nappi näkyvät vierestä */
@media (min-aspect-ratio:21/20) and (min-width:1100px){
  #tyot .panel{width:min(38rem,42vw)}
  #tyot .works{margin-top:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* kapea vaaka (768–1099 px): yksi palsta, kuva vasemmalla */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-width:1099px){
  #tyot .works{margin-top:1.4rem;grid-template-columns:minmax(0,1fr);gap:.6rem}
  #tyot .works a{grid-template-columns:7.5rem minmax(0,1fr) auto;grid-template-rows:auto;column-gap:1rem;align-items:center;padding:.45rem}
  #tyot .works .w_thumb{grid-column:1;grid-row:1;max-height:none;border-radius:11px}
  #tyot .works .w_t{grid-column:2;grid-row:1;align-self:center;padding:0!important}
  #tyot .works .arr{grid-column:3;grid-row:1;align-self:center;margin-right:.5rem}
}
/* matalat läppärit (≤ 820 px korkea): kortit tiiviimmiksi */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:820px){
  #palvelut .sgrid{margin-top:1.3rem;gap:.7rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.85rem 1.05rem .95rem}
  #palvelut .sgrid h3{font-size:clamp(1.05rem,1.3vw,1.25rem)}
  #palvelut .sgrid .sg_p{margin-top:.2rem}
  #palvelut .sgrid .sg_d{margin-top:.35rem;font-size:.8125rem;line-height:1.4}
  #palvelut .sg_more{margin-top:.7rem;padding:.7rem 1.05rem .75rem}
  #tyot .works{margin-top:1.2rem;gap:.7rem}
  #tyot .works a{padding:.4rem .4rem .75rem}
  #tyot .works .w_thumb{border-radius:11px}
  #tyot .works .w_t{padding:.65rem 0 0 .45rem!important;gap:.2rem!important}
  #tyot .works h3{font-size:clamp(1rem,1.2vw,1.15rem)}
  #tyot .works .cap{font-size:.5625rem}
  #tyot .works_more{margin-top:.9rem}
}

/* pystyruutu (puhelin, tabletti pysty): huurrettu kortti ilman taustasumennusta kuten hintakorteissa, kuva vasemmalla */
@media (max-aspect-ratio:21/20){
  :root{--gc-bg:rgba(255,255,255,.6);--gc-bg-h:rgba(255,255,255,.8);--gc-bd:rgba(255,255,255,.95);--gc-sh:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -24px rgba(18,28,58,.4);--gc-bf:none}
  #tyot .works{margin-top:1.1rem;grid-template-columns:minmax(0,1fr);gap:.5rem}
  #tyot .works a{grid-template-columns:6.25rem minmax(0,1fr) auto;grid-template-rows:auto;column-gap:.85rem;align-items:center;padding:.4rem;border-radius:16px}
  #tyot .works .w_thumb{grid-column:1;grid-row:1;max-height:none;aspect-ratio:16/9;border-radius:10px}
  #tyot .works .w_t{grid-column:2;grid-row:1;align-self:center;padding:0!important;gap:.2rem!important}
  #tyot .works .arr{grid-column:3;grid-row:1;align-self:center;margin-right:.45rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px){
  #palvelut .sgrid{margin-top:1.1rem;grid-template-columns:minmax(0,1fr);gap:.5rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:.75rem;padding:.75rem .95rem .8rem;border-radius:16px}
  #palvelut .sgrid h3{font-size:1.0625rem;line-height:1.15}
  #palvelut .sgrid .sg_p{margin:0;font-size:.75rem}
  #palvelut .sgrid .sg_d{grid-column:1/-1;margin-top:.25rem;font-size:.8125rem;line-height:1.38}
  #palvelut .sg_more{margin-top:.5rem;padding:.7rem .95rem .75rem;gap:.1rem .55rem}
  #tyot .works a{grid-template-columns:5.5rem minmax(0,1fr) auto;padding:.35rem;border-radius:14px}
  #tyot .works .w_thumb{border-radius:9px}
  #tyot .works h3{font-size:1rem;line-height:1.12}
  #tyot .works .cap{font-size:.5625rem}
  #tyot .works .arr{width:1rem;height:1rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:800px){
  #palvelut .sgrid{gap:.4rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.55rem .85rem .6rem}
  #palvelut .sg_more{margin-top:.4rem;padding:.55rem .85rem .6rem}
}

/* esiintulo: kortti leikkautuu esiin alhaalta ylös (lasi valmis heti), sisältö häivytetään perään (kuten #hinnat .plans>li) */
html.js #palvelut .sgrid>li,html.js #tyot .works>li{opacity:1;clip-path:inset(100% -2rem -2rem -2rem round 20px);transform:translateY(var(--rv-y));transition:clip-path .45s var(--rv-e),transform .5s var(--rv-e)}
html.js #palvelut .sgrid>li>*,html.js #tyot .works>li>a>*{opacity:0;transition:opacity .3s var(--rv-e)}
html.js.ready #palvelut.is-active .sgrid>li:nth-child(n),html.js.ready #tyot.is-active .works>li:nth-child(n){opacity:1;clip-path:inset(-2rem -2rem -2rem -2rem round 20px);transform:none;transition:clip-path var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms),transform var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms)}
html.js.ready #palvelut.is-active .sgrid>li>*,html.js.ready #tyot.is-active .works>li>a>*{opacity:1;transition:opacity var(--rv-o) var(--rv-e) calc(.4s + var(--n,0) * 75ms)}
/* lennot ja kerrokset: paneeli pysyy (lasi ei katkea), lapset ja kortit piiloon */
html:is(.flying,.in-floor,.in-room) :is(#palvelut,#tyot) .panel{opacity:1!important;pointer-events:none!important}
html:is(.flying,.in-floor,.in-room) :is(#palvelut,#tyot) .panel>:not(.sgrid):not(.works),html:is(.flying,.in-floor,.in-room) #palvelut .sgrid>li,html:is(.flying,.in-floor,.in-room) #tyot .works>li{opacity:0!important;transition:opacity .4s var(--out)!important}
html:is(.flying,.in-floor,.in-room) :is(#palvelut,#tyot) .panel::before{opacity:0!important}
html.reduced #palvelut .sgrid>li,html.reduced #tyot .works>li{clip-path:none!important;transform:none!important}
/* ylläpitokortti: sama leikkausesiintulo kuin palvelukorteilla, viidentenä */
/* (yleinen paneelin lapsi -sääntö käyttää seitsemää :not()-valitsinta, joten tarkkuus nostetaan samalle tasolle) */
html.js #palvelut .panel>.sg_more:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){opacity:1;clip-path:inset(100% -2rem -2rem -2rem round 16px);transform:translateY(var(--rv-y));transition:clip-path .45s var(--rv-e),transform .5s var(--rv-e)}
html.js #palvelut .panel>.sg_more>*{opacity:0;transition:opacity .3s var(--rv-e)}
html.js.ready #palvelut.is-active .panel>.sg_more:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){opacity:1;clip-path:inset(-2rem -2rem -2rem -2rem round 16px);transform:none;transition:clip-path var(--rv-t) var(--rv-e) .5s,transform var(--rv-t) var(--rv-e) .5s}
html.js.ready #palvelut.is-active .panel>.sg_more>*{opacity:1;transition:opacity var(--rv-o) var(--rv-e) .7s}
html.reduced #palvelut .panel>.sg_more{clip-path:none!important}

/* kierros 24 (Alex 12.10.2026): Sivustudio-pillerin nuoliympyrä oli kiinni oikeassa reunassa (negatiivinen margin -.75rem
   peri vanhasta leveästä versiosta); nyt ympyrälle sama sisäväli kuin muillakin pillereillä */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  #hinnat .pl_foot>.sivustudio.is-pill{padding-right:.55rem}
  #hinnat .pl_foot>.sivustudio.is-pill .sv_go{margin:0 0 0 .55rem}
}

/* kierros 24 ovinappi (Alex 12.10.2026: "korjaa toi astu sisään nappi mobiilis palvelut pysäkil")
   site.js hakee napille lähimmän vapaan paikan kerroksen ikkunan vierestä (tdoorSpot). Jos täysikokoinen nappi ei mahdu mihinkään
   (esim. 360×780 Palvelut, 375×667), käytetään tiivistä muotoa: 2,75rem nappi (44 px kosketusalue) ja pelkkä "Astu sisään". */
.tdoor.is-compact{gap:.35rem;margin:-1.375rem 0 0 -1.375rem}
.tdoor.is-compact.is-flip{margin-left:1.375rem}
.tdoor.is-compact .tdoor_b{width:2.75rem;height:2.75rem}
.tdoor.is-compact .tdoor_b .btn_door{width:.9rem;height:1.05rem}
.tdoor.is-compact .tdoor_l{padding:.56rem .7rem .54rem}
.tdoor.is-compact .tdoor_l b{font-size:.875rem}
.tdoor.is-compact .tdoor_l>span{display:none}
/* Evästebanneri jäi suljettuna näkymättömäksi klikkiesteeksi: palikka piilottaa sen inline display:nonella, mutta cookies.css:n
   display:grid!important ohittaa sen. Banneri (opacity 0) peitti mobiilissa koko alareunan (pysäkin nappi, reunarivi) ja desktopilla
   vasemman alakulman (Tekijät-pysäkin ovinappi 1280×800). Suljettu banneri ei enää ota osumia eikä fokusta. */
#cc-root .cc-banner:not([data-cc-visible]),#cc-root .cc-banner:not([data-cc-visible]) *{pointer-events:none!important}
#cc-root .cc-banner:not([data-cc-visible]){visibility:hidden;transition:opacity .18s cubic-bezier(.4,0,1,1),transform .18s cubic-bezier(.4,0,1,1),visibility 0s .18s}

/* ===== kierros 25 matalat puhelimet (12.10.2026) =====
   Kierroksen 23 lasikortit veivät pinottuina enemmän tilaa kuin vanha lista: 375×667 Palvelut-paneelin eyebrow ja h2:n yläosa
   jäivät navin alle (paneeli alkoi 39 px navin yläpuolelta, 360×640 jopa 65 px), 360×640 myös Työt (9 px).
   Matalilla pystyruuduilla (≤ 720 px) kortit tiiviimmiksi niin, että koko pysäkki mahtuu navin ja reunarivin väliin.
   390×844, 360×780 ja isommat ennallaan. */
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:720px){
  #palvelut .panel>h2{font-size:clamp(1.55rem,7.2vw,1.8rem)}
  #palvelut .panel>.lead{margin-top:.5rem;font-size:.875rem;line-height:1.34}
  #palvelut .sgrid{margin-top:.7rem;gap:.3rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.42rem .8rem .46rem;border-radius:14px;column-gap:.6rem}
  #palvelut .sgrid h3{font-size:.96875rem;line-height:1.12}
  #palvelut .sgrid .sg_p{font-size:.6875rem}
  #palvelut .sgrid .sg_d{margin-top:.12rem;font-size:.78125rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #palvelut .sg_more{margin-top:.3rem;padding:.4rem .8rem .44rem;border-radius:14px;gap:0 .5rem;line-height:1.3}
  #palvelut .sg_more b{font-size:.96875rem}
  #palvelut .sg_more .sg_p{font-size:.6875rem}
  #palvelut .sg_more .sg_t{font-size:.78125rem}
  #palvelut .btns.is-enter{margin-top:.65rem}
  /* Työt: hieman pienemmät kuvat ja välit */
  #tyot .panel>.lead{margin-top:.6rem;font-size:.875rem;line-height:1.36}
  #tyot .works{margin-top:.8rem;gap:.4rem}
  #tyot .works a{grid-template-columns:5rem minmax(0,1fr) auto;padding:.3rem}
  #tyot .works_more{margin-top:.75rem;font-size:.875rem;line-height:1.36}
  #tyot .btns.is-enter{margin-top:.85rem}
}
/* hyvin matalat (360×640): esittelyteksti yhdelle riville ja kuvaukset hieman pienemmiksi, jolloin tornin ikkunan viereen
   jää tilaa myös tiiviille Astu sisään -napille (ilman tätä nappi ei mahtunut ja jäi pois) */
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:660px){
  #palvelut .panel>.lead{font-size:.8125rem}
  #palvelut .sgrid{gap:.26rem}
  #palvelut .sgrid .sg_d,#palvelut .sg_more .sg_t{font-size:.75rem}
}

/* ===== kierros 25 ovinappi (12.10.2026) =====
   Pyöreä lasinappi (valkoinen lasi .2 + valkoinen reuna + valkoinen ikoni) katosi päivällä vaaleaan pilveen ja vaaleaan lasiin.
   Päivällä nyt sama perhe kuin navin pyöreät napit ui-dark-tilassa: vaaleampi lasi, hento tumma reuna ja varjo, tumma ikoni.
   Ei tummaa laatikkoa; lasi pysyy läpikuultavana ja blur ennallaan. Rengasanimaatio tummana, jotta se näkyy vaalealla.
   Yö ennallaan. Koskee myös tiivistä muotoa (.is-compact). */
html:not(.is-night) .tdoor_b{color:#121316;background:rgba(255,255,255,.42);border-color:rgba(15,17,21,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px -8px rgba(10,14,30,.45)}
html:not(.is-night) .tdoor_b .btn_door{filter:none}
html:not(.is-night) .tdoor_b::before{border-color:rgba(15,17,21,.32)}
html:not(.is-night) .tdoor:hover .tdoor_b,html:not(.is-night) .tdoor:focus-visible .tdoor_b{background:#fff;border-color:rgba(15,17,21,.3);color:var(--ink)}
html.enter-hover:not(.is-night) .tdoor_b{border-color:rgba(15,17,21,.4)}
/* pystyruudun vaalealla pilvellä lasi vielä hieman vaaleampi (sama sävy kuin pysäkin lasikorteissa on .6) */
@media (max-aspect-ratio:21/20){
  html:not(.is-night) .tdoor_b{background:rgba(255,255,255,.5);border-color:rgba(15,17,21,.24)}
}

/* ===== kierros 26 navi (12.10.2026) =====
   Alex 27" UHD: navin napit (Varaa puhelu, FI/EN, yö/päivä, burger) olivat 2560×1440:lla vielä isot. Isoilla näytöillä noin
   10 % pienemmät ja välit tiiviimmät. 1440×900 ja pienemmät ennallaan (sama ehto kuin kierroksen 23 UHD-skaalassa). */
@media (min-width:1600px) and (min-height:960px){
  .nav_r{gap:.65rem}
  .nav .nav_cta{height:2.45rem;padding:0 .5rem 0 1.1rem;gap:.6rem;font-size:.79rem}
  .nav .nav_cta .btn_b{width:1.32rem;height:1.32rem}
  .nav .nav_lang{height:2.45rem;min-width:2.45rem;padding:0 .8rem;font-size:.625rem}
  .nav .nav_theme{width:2.45rem;height:2.45rem}
  .nav .nav_theme svg{width:1.1rem;height:1.1rem;margin:-.55rem 0 0 -.55rem}
  .nav .nav_burger{width:2.45rem;height:2.45rem}
  .nav .nav_burger_i{width:30px}
}

/* ===== kierros 27 (Alex 12.10.2026): lasikortit eivät näy ilman revealia, Sivustudio tekstilinkiksi =====
   Syy: piilotilan leikkaus oli inset(100% -2rem -2rem -2rem) (hinnoissa -3rem). Yläreuna 100 % sulki kortin, mutta negatiiviset
   sivu- ja alainsetit jättivät kortin alapuolelle 2–3 rem:n kaistan näkyviin. Kaistassa näkyi kortin varjo ja reunaviiva aina,
   kun pysäkki ei ollut aktiivinen (Palvelut, Työt, Hinnat, Tulokset, Tekijät). Hintakorttien kaistat ovat vierekkäin, joten
   ne muodostivat koko korttirivin levyisen vaakareunan (kuva 57). Lisäksi pysäkiltä poistuttaessa sisältö häivytettiin
   (.3 s) ennen kuin leikkaus sulkeutui (.45 s), jolloin hetken näkyi tyhjiä lasilaattoja.
   Korjaus: piilotila on nollapinta-alainen leikkaus inset(100% 0 0 0) ja visibility:hidden (ei lasia, varjoa eikä taustan
   sumennusta). Säiliön opacity pysyy 1:ssä koko ajan (ei backdrop rootia), joten lasi on valmis revealin ensimmäisestä
   ruudusta. Poistuessa sisältö pysyy näkyvissä ja kortti pyyhkiytyy kokonaisena pois; visibility vaihtuu vasta sen jälkeen. */
html.js body #palvelut .sgrid>li,html.js body #tyot .works>li,html.js body #hinnat .plans>li,html.js body #tekijat .team li,html.js body #tulokset .vq,
html.js body #palvelut .panel>.sg_more:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){
  clip-path:inset(100% 0 0 0 round 20px);visibility:hidden;transition:clip-path .4s var(--rv-e),transform .5s var(--rv-e),visibility 0s .4s}
html.js body #palvelut .sgrid>li>*,html.js body #tyot .works>li>a>*,html.js body #hinnat .plans>li>*,html.js body #tekijat .team li>*,html.js body #tulokset .vq>*,html.js body #palvelut .panel>.sg_more>*{
  transition:opacity 0s .4s}
/* esiintulo: näkyväksi heti (leikkaus on vielä kiinni), lasi pyyhkäisee esiin alhaalta, sisältö häivytetään perään lyhyellä viiveellä */
html.js.ready body #palvelut.is-active .sgrid>li:nth-child(n),html.js.ready body #tyot.is-active .works>li:nth-child(n),
html.js.ready body #hinnat.is-active .plans>li:nth-child(n),html.js.ready body #tekijat.is-active .team li:nth-child(n){
  visibility:visible;transition:clip-path var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms),transform var(--rv-t) var(--rv-e) calc(.2s + var(--n,0) * 75ms),visibility 0s}
html.js.ready body #palvelut.is-active .sgrid>li>*,html.js.ready body #tyot.is-active .works>li>a>*,html.js.ready body #hinnat.is-active .plans>li>*,html.js.ready body #tekijat.is-active .team li>*{
  opacity:1;transition:opacity var(--rv-o) var(--rv-e) calc(.32s + var(--n,0) * 75ms)}
html.js.ready body #tulokset.is-active .vq{visibility:visible;transition:clip-path var(--rv-t) var(--rv-e) .42s,transform var(--rv-t) var(--rv-e) .42s,visibility 0s}
html.js.ready body #tulokset.is-active .vq>*{opacity:1;transition:opacity var(--rv-o) var(--rv-e) .54s}
html.js.ready body #palvelut.is-active .panel>.sg_more:not(.plans):not(.team):not(.vq):not(.pl_foot):not(.sgrid):not(.works):not(.stats){
  visibility:visible;transition:clip-path var(--rv-t) var(--rv-e) .5s,transform var(--rv-t) var(--rv-e) .5s,visibility 0s}
html.js.ready body #palvelut.is-active .panel>.sg_more>*{opacity:1;transition:opacity var(--rv-o) var(--rv-e) .62s}

/* Hinnat-alarivi desktopilla: Hinnat tarkemmin ja Sivustudio-nappi vierekkäin (Sivustudion ulkoasu: lohko tiedoston lopussa) */
@media (min-aspect-ratio:21/20){
  #hinnat .pl_foot{grid-template-columns:max-content minmax(0,max-content);column-gap:.75rem;align-items:center}
}

/* kierros 29 (Alex 12.10.2026): mobiilin burger-valikossa linkit ja niiden edessä olevat pallot olivat kiinni vasemmassa reunassa */
@media (max-width:767px){
  .menu_links{padding-left:1.6rem}
  .menu_links a::before{left:-1rem}
  .menu_in>.menu_contact,.menu_in>.menu_foot{padding-left:1.6rem}
}

/* kierros 27 jatko (Alex 12.10.2026): mobiilissa Sivustudio jää pilleriksi. Kun rivi mahtuu (≥ 412 px leveät puhelimet; tarve 380 px + reunat 32 px), Hinnat
   tarkemmin ja pilleri samalle riville vierekkäin: pilleri yksirivisenä ("Tutustu Sivustudioon" + nuolipallo), sama korkeus kuin
   napilla. 360–411 px (esim. 390): ennallaan allekkain, pilleri kaksirivisenä kysymyksen kanssa. */
@media (max-aspect-ratio:21/20) and (min-width:412px) and (max-width:767px){
  #hinnat .panel>.pl_foot{flex-wrap:nowrap;align-items:center;column-gap:.5rem}
  #hinnat .panel>.pl_foot>.enterwrap{flex:none}
  #hinnat .panel>.pl_foot>.sivustudio.is-pill{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;height:2.85rem;min-height:0;padding:0 .4rem 0 1rem;column-gap:.5rem;white-space:nowrap}
  #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_q{display:none}
  #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_a{line-height:1}
  #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_go{margin:0;width:2rem;height:2rem}
}

/* ===== kierros 30 mobiili (Alex 12.10.2026) =====
   1) Palvelut-pysäkin lasikorteille enemmän sisätilaa pystyruudulla (noin +25–40 %), kuvauksille rivikorkeus 1,4.
      Paneeli mahtuu yhä navin ja reunarivin väliin: 360×780:lla välejä tiivistetään sen verran kuin padding kasvaa,
      matalilla puhelimilla (≤ 720 px) kasvatetaan vain tilan verran. */
@media (max-aspect-ratio:21/20) and (max-width:767px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.95rem 1.2rem 1rem}
  #palvelut .sg_more{padding:.92rem 1.2rem .97rem}
  #palvelut .sgrid .sg_d{line-height:1.4}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (min-height:900px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:1.05rem 1.3rem 1.1rem}
  #palvelut .sg_more{padding:1rem 1.3rem 1.05rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:800px){
  #palvelut .sgrid{margin-top:.8rem;gap:.34rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.7rem 1rem .72rem}
  #palvelut .sg_more{margin-top:.34rem;padding:.68rem 1rem .7rem}
  #palvelut .btns.is-enter{margin-top:1rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:720px){
  #palvelut .sgrid{margin-top:.7rem;gap:.3rem}
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.56rem 1rem .6rem}
  #palvelut .sg_more{margin-top:.3rem;padding:.54rem 1rem .58rem}
  #palvelut .sgrid .sg_d{line-height:1.36}
  #palvelut .btns.is-enter{margin-top:.65rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:660px){
  #palvelut .sgrid{gap:.26rem}
}

/* 3) Hinnat-pysäkin pyyhkäisyvihje: paneelin lapsi, täsmälleen ruudun keskellä vaakasuunnassa ja korttirivin keskellä
      pystysuunnassa (site.js placeSwipe asettaa left/top pikseleinä). 1,3 × isompi ohutviivainen käsi, molemmin puolin
      pienet nuolet ← →, harmaa (päivä rgba(15,17,21,.55), yö vaalea harmaa). Animoituu KERRAN: pehmeä esiin, yksi
      pyyhkäisy vasemmalle ja takaisin, nopea pois (kierros 39: 3,2 s; esiin 0,48 s, käsi 0,5–2,3 s, pois 2,8–3,2 s). Ei toistoa, ei vilkkumista (nuolet paikallaan). */
@media (max-aspect-ratio:21/20){
  #hinnat .panel>.pl_swipe2.pl_sw30{position:absolute;top:0;left:0;z-index:6;display:flex;align-items:center;justify-content:center;margin:0;padding:0;gap:0;
    background:none!important;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none;pointer-events:none;
    color:rgba(15,17,21,.55);transition:none}
  #hinnat .panel>.pl_swipe2.pl_sw30:not(.is-on){opacity:0!important}
  #hinnat .pl_sw30 svg{width:10.9rem;height:6.25rem;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 8px rgba(255,255,255,.65))}
  html.is-night #hinnat .panel>.pl_swipe2.pl_sw30{color:rgba(226,229,236,.62)}
  html.is-night #hinnat .pl_sw30 svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(0,0,0,.45))}
  #hinnat .pl_sw30 .sw_hand{transform-box:fill-box;transform-origin:50% 100%}
  #hinnat .panel>.pl_swipe2.pl_sw30.is-on{animation:sw30Fade 3.2s ease-in-out 1 both}
  #hinnat .pl_sw30.is-on .sw_hand{animation:sw30Hand 1.8s cubic-bezier(.45,0,.25,1) .5s 1 both}
  #hinnat .pl_sw30 .sw_al,#hinnat .pl_sw30 .sw_ar{animation:none!important}
  @keyframes sw30Fade{0%{opacity:0}15%{opacity:1}87.5%{opacity:1}100%{opacity:0}}
  @keyframes sw30Hand{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-12px) rotate(-5deg)}}
}
@media (prefers-reduced-motion:reduce){
  #hinnat .pl_sw30.is-on .sw_hand{animation:none!important}
  #hinnat .panel>.pl_swipe2.pl_sw30.is-on{animation:sw30Fade 3.2s linear 1 both!important}
}

/* 5) Aulan lomake pystyruudulla: ei häivy pysäkiltä lähdettäessä, vaan vierii normaalisti ruudulta footeriin mentäessä
      (site.js lisää .is-seen aulassa ja poistaa sen vasta ylemmällä pysäkillä). Sisääntulon reveal ennallaan. */
@media (max-aspect-ratio:21/20){
  html.js.ready .stop.is-lobby.is-seen .panel.stand{opacity:1;transform:none;filter:none;pointer-events:auto}
}

/* 6) Mobiilin footer ilmavammaksi: isommat pystyvälit, linkit kahteen palstaan, rivikorkeus 1,5–1,6, lisää ala- ja yläväliä */
@media (max-aspect-ratio:21/20) and (max-width:767px){
  .stop.is-foot .stop_pin{padding-bottom:calc(5.75rem + env(safe-area-inset-bottom,0px))}
  .panel.is-foot{padding-top:1rem}
  .foot_row{margin-top:2.1rem;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.6rem;padding-right:0}
  .foot_row>p:first-child{line-height:1.6;max-width:22rem}
  .foot_links{display:grid;grid-template-columns:repeat(2,max-content);gap:.85rem 2.5rem;line-height:1.5;padding-right:0}
  .foot_links>a,.foot_links>button{display:block;padding:.1rem 0;text-align:left;line-height:1.5}
}

/* kierros 30 mobiili, tarkennus mittausten jälkeen: vaakasuuntainen padding yli 1rem rivitti ensimmäisen kortin kuvauksen
   (390 px) ja ylläpitokortin (360 px) kahdelle riville, jolloin paneeli nousi navin alle. Vaakaväli 1rem / .85rem,
   pystyväli kasvaa (390×844 +27 %, 360×780 +20 %, ≤ 720 px +33 %). Mitattu: paneelin yläreuna navin alla 17 / 11 / 18 px. */
@media (max-aspect-ratio:21/20) and (max-width:767px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.95rem 1rem 1rem}
  #palvelut .sg_more{padding:.92rem 1rem .97rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (min-height:900px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:1.05rem 1.3rem 1.1rem}
  #palvelut .sg_more{padding:1rem 1.3rem 1.05rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:800px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.66rem .85rem .68rem}
  #palvelut .sg_more{padding:.64rem .85rem .66rem}
}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:720px){
  #palvelut .sgrid>li,#palvelut .sgrid>li:nth-child(2n){padding:.56rem .85rem .6rem}
  #palvelut .sg_more{padding:.54rem .85rem .58rem}
}

/* kierros 32 (13.10.2026): reunarivin nimilappu palautettu myös Tekijät-pysäkille (Alex: "se on se progress bar, unohda") */

/* ===== kierros 33 (Alex 13.10.2026): etusivun pysäkit matalammiksi desktopilla, työkuvat kokonaan näkyviin =====
   Alex: "kaikkia osioita vois hiukan pienentää etusivul ... tai siis madaltaa että ei veis niin paljon tilaa korkeussuunnassa"
   ja "saisko näis näkymään koko heron näist nettisivuista, nyt ne rajaantuu ärsyttävästi".
   Vain vaakaruutu ≥ 768 px (torninäkymä). Leveydet ja leipätekstin koot ennallaan, otsikot −4 %; madallus tulee pystyväleistä,
   korttien pystypaddingista, nappien korkeudesta ja tiimikuvien suhteesta (hero h1 −5 %). Paneeli matalampi noin 10–13 % joka pysäkillä.
   Työt: kuvakehys 16:10 (sama kuin poster ja hover-video), ei max-heightia, joten mitään ei leikkaudu; korttien leveys
   rajataan näkymän korkeuden mukaan, jotta paneeli ei kasva (kuvan korkeus T = 31svh − 7,6rem, vähintään 7,5rem,
   jotta nimet mahtuvat yhdelle riville; leveys 1,6 × T; leveillä näytöillä palsta rajaa ensin).
   Kaksi korkeustasoa, koska aiemmat säännöt eroavat (≥ 821 px ja ≤ 820 px). Aula (lomakestandi), nav, reunarivi,
   ovinappi, kerrosnäkymä ja pystyruutu eivät muutu. Valitsimet :root body -etuliitteellä, jotta ne voittavat aiemmat kierrokset. */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  /* yhteiset: otsakerivi → otsikko → ingressi → sisältö → nappi */
  :root body :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{margin-top:.65rem}
  :root body .stop.is-hero .hero_title{margin-top:.6rem;line-height:.94}
  :root body :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.lead{margin-top:.85rem}
  :root body .stop.is-hero .panel>.lead{margin-top:.75rem}
  :root body #yhteys .panel>.btns{margin-top:1.2rem}
  :root body #huippu .panel>.btns{margin-top:1.1rem}
  :root body :is(#palvelut,#tyot,#tulokset,#tekijat) .panel>.btns.is-enter{margin-top:1.3rem}
  :root body :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.btns .btn{height:2.8rem}
  :root body :is(#huippu,#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>.btns .btn.is-main.is-enter .btn_b{width:2.1rem;height:2.1rem}

  /* palvelut */
  :root body #palvelut .sgrid{margin-top:1.25rem;gap:.65rem}
  :root body #palvelut .sgrid>li,:root body #palvelut .sgrid>li:nth-child(2n){padding:.85rem 1.3rem .9rem}
  :root body #palvelut .sgrid .sg_p{margin-top:.2rem}
  :root body #palvelut .sgrid .sg_d{margin-top:.4rem}
  :root body #palvelut .sg_more{margin-top:.65rem;padding:.7rem 1.3rem .72rem}

  /* työt: koko kuva 16:10, kortin leveys näkymän korkeuden mukaan */
  :root body #tyot .works{margin-top:1.15rem;gap:.65rem}
  :root body #tyot .works .w_thumb{aspect-ratio:16/10;max-height:none}
  :root body #tyot .works .w_thumb img,:root body #tyot .works .w_thumb video{object-fit:cover;object-position:top}
  :root body #tyot .works_more{margin-top:.85rem}

  /* tulokset */
  :root body .panel.is-res .stats{margin-top:1.6rem}
  :root body .panel.is-res .stats li{padding-top:.8rem;gap:.3rem}
  :root body .panel.is-res .vq{margin-top:2rem;padding-top:1.15rem;padding-bottom:.7rem}
  :root body .panel.is-res .vq .q_mark{top:1.05rem}
  :root body .panel.is-res .vq .who{margin-top:.7rem}
  :root body .panel.is-res .vq_dots{margin-top:.45rem}

  /* hinnat */
  :root body #hinnat .plans{margin-top:1.9rem}
  :root body #hinnat .plans>li{padding-top:1.15rem;padding-bottom:1.1rem}
  :root body #hinnat .plans>li.is-featured{margin-top:-.8rem;padding-top:1.95rem}
  :root body #hinnat .pl_top{gap:.6rem}
  :root body #hinnat .pl_price{margin-top:1rem}
  :root body #hinnat .plans .d{margin-top:.85rem}
  :root body #hinnat .plan_f{margin-top:.85rem;gap:.4rem}
  :root body #hinnat .plans .btn{margin-top:1.05rem;height:2.75rem}
  :root body #hinnat .panel>.pl_foot{margin-top:1.3rem}
  :root body #hinnat .pl_foot>.enterwrap>.btn{height:2.8rem}

  /* tekijät */
  :root body #tekijat .team{margin-top:1.35rem}
  :root body #tekijat .team li{padding:.4rem .4rem .7rem}
  :root body #tekijat .team img{aspect-ratio:9/10}
  :root body #tekijat .team p{margin-top:.55rem}
}
/* ≥ 821 px korkeat: otsikot −4 %, hero h1 −5 % (kierros 21 R:n vh-katto säilyy) */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (min-height:821px){
  :root body :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{font-size:clamp(2.69rem,min(5.28vw,8.45vh),5.66rem)}
  :root body .stop.is-hero .hero_title{font-size:clamp(2.755rem,min(5.035vw,8.056vh),5.415rem)}
}
/* matalat läppärit (≤ 820 px: 1366×768, 1280×800, 1280×720): samat suhteet tiiviimmistä lähtöarvoista */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:820px){
  :root body :is(#palvelut,#tyot,#tulokset,#hinnat,#tekijat,#yhteys) .panel>h2{font-size:clamp(2.4rem,4.42vw,4.5rem)}
  :root body .stop.is-hero .hero_title{font-size:clamp(2.565rem,4.56vw,4.655rem)}
  :root body #hinnat .panel>.lead{margin-top:.65rem}

  :root body #palvelut .sgrid{margin-top:.95rem;gap:.55rem}
  :root body #palvelut .sgrid>li,:root body #palvelut .sgrid>li:nth-child(2n){padding:.62rem 1.05rem .68rem}
  :root body #palvelut .sgrid .sg_p{margin-top:.12rem}
  :root body #palvelut .sgrid .sg_d{margin-top:.26rem}
  :root body #palvelut .sg_more{margin-top:.55rem;padding:.55rem 1.05rem .58rem}

  :root body #tyot .works{margin-top:.9rem;gap:.55rem}
  :root body #tyot .works_more{margin-top:.7rem}

  :root body .panel.is-res .stats{margin-top:1.15rem}
  :root body .panel.is-res .stats li{padding-top:.65rem}
  :root body .panel.is-res .vq{margin-top:1.4rem;padding-top:.9rem;padding-bottom:.55rem}
  :root body .panel.is-res .vq .q_mark{top:.85rem}
  :root body .panel.is-res .vq .who{margin-top:.55rem}
  :root body .panel.is-res .vq_dots{margin-top:.35rem}

  :root body #hinnat .plans{margin-top:1.2rem}
  :root body #hinnat .plans>li{padding-top:.8rem;padding-bottom:.7rem}
  :root body #hinnat .plans>li.is-featured{margin-top:-.65rem;padding-top:1.45rem}
  :root body #hinnat .pl_top{gap:.45rem}
  :root body #hinnat .pl_price{margin-top:.6rem}
  :root body #hinnat .plans .d{margin-top:.5rem}
  :root body #hinnat .plan_f{margin-top:.5rem;gap:.15rem}
  :root body #hinnat .plans .btn{margin-top:.65rem;height:2.5rem}
  :root body #hinnat .panel>.pl_foot{margin-top:.9rem}

  :root body #tekijat .team{margin-top:1.1rem}
}
/* työt 2×2 (≥ 1100 px leveä vaaka): kortin leveys kuvan mukaan, kortin sisäiset välit tiiviimmiksi
   (768–1099 px:n yksipalstainen lista, kuva vasemmalla, pitää omat arvonsa; siellä vain kuvan suhde 16:10) */
@media (min-aspect-ratio:21/20) and (min-width:1100px){
  :root body #tyot .works{--wt:max(7.5rem,calc(31svh - 7.6rem));grid-template-columns:repeat(2,minmax(0,calc(1.6 * var(--wt) + .9rem)))}
  :root body #tyot .works a{padding:.45rem .45rem .7rem}
  :root body #tyot .works .w_t{padding:.6rem 0 0 .5rem!important;gap:.2rem!important}
}
@media (min-aspect-ratio:21/20) and (min-width:1100px) and (max-height:820px){
  :root body #tyot .works{grid-template-columns:repeat(2,minmax(0,calc(1.6 * var(--wt) + .76rem)))}
  :root body #tyot .works a{padding:.38rem .38rem .6rem}
  :root body #tyot .works .w_t{padding:.48rem 0 0 .42rem!important;gap:.15rem!important}
}
/* hyvin matalat (≤ 740 px, esim. 1280×720): Hinnat-otsikko kierroksen 21 R kohdan 3 arvosta −4 % */
@media (min-aspect-ratio:21/20) and (min-width:768px) and (max-height:740px){
  :root body #hinnat .panel>h2{font-size:clamp(2.1rem,3.75vw,3.36rem)}
}

/* kierros 34 (Alex 13.10.2026): Palvelut-pysäkin hintarivit ("alkaen 1 999 €") tiiviimmällä kirjainvälillä */
.sg_p,.sg_more .sg_p{letter-spacing:-.015em;font-variant-numeric:normal}

/* kierros 35 (Alex 13.10.2026): Valitut työt -korttien nimet yhdelle riville ("Invisible Forest Lodge" meni kahdelle) */
@media (min-aspect-ratio:21/20) and (min-width:1100px){
  #tyot .works h3{white-space:nowrap;font-size:clamp(.95rem,1.15vw,1.3rem);letter-spacing:-.03em}
}

/* ===== kierros 36 (Alex 13.10.2026): Valitut työt- ja Palvelut-pysäkin kortit pienemmiksi ja matalammiksi desktopilla =====
   Alex: "valitut työt korteista pitäs saada pienemmät matalammat"; Palvelut: padding ei pienene, vain tekstit ja välit.
   Työt (2×2, ≥ 1100 px vaaka): kuvan korkeus T = 25svh − 7rem, väh. 6,2rem (nimet mahtuvat yhdelle riville), enint. 8,2rem
   (leveät näytöt, joilla palsta rajasi ennen); kuva yhä 16:10 ilman rajausta, leveys 1,6 × T. Nuoli nostettu nimen riville,
   jotta ala-rivi (.cap) saa koko kortin leveyden eikä rivity kolmelle; nimi nowrap, padding-right varaa nuolen tilan.
   Palvelut: nimi −11 %, kuvaus −11 % (1366:lla 12,5 px:n lattia), rivikorkeus 1,45/1,4 → 1,36/1,32, tekstien välit pienemmiksi;
   ruudukko kapenee korkeintaan saman verran kuin teksti (92 % / 96,5 %), joten kuvaukset pysyvät kahdella rivillä.
   Paneelin leveyttä ei muuteta (otsikko rivittyisi 2560:lla uudelleen). Mobiili, 768–1099 px ja kerrosnäkymä eivät muutu. */
@media (min-aspect-ratio:21/20) and (min-width:1100px){
  :root body #tyot .works{--wt:clamp(6.2rem,calc(25svh - 7rem),8.2rem);grid-template-columns:repeat(2,minmax(0,calc(1.6 * var(--wt) + .76rem)))}
  :root body #tyot .works a{padding:.38rem .38rem .52rem;column-gap:0}
  :root body #tyot .works .w_t{grid-column:1/-1;padding:.42rem 0 0 .4rem!important;gap:.1rem!important}
  :root body #tyot .works h3{white-space:nowrap;font-size:clamp(.84rem,.98vw,1.2rem);letter-spacing:-.03em;line-height:1.1;padding-right:1.5rem}
  :root body #tyot .works .cap{line-height:1.25;letter-spacing:.06em}
  :root body #tyot .works .arr{grid-column:2;grid-row:2;align-self:start;width:1rem;height:1rem;margin:calc(.42rem + .5lh - .5rem) .22rem 0 0}

  :root body #palvelut .sgrid,:root body #palvelut .sg_more{width:92%}
  :root body #palvelut .sgrid .sg_p,:root body #palvelut .sg_more .sg_p{font-size:max(12.5px,.675rem)}
  :root body #palvelut .sgrid h3{font-size:clamp(1.07rem,1.335vw,1.335rem)}
  :root body #palvelut .sgrid .sg_p{margin-top:.14rem}
  :root body #palvelut .sgrid .sg_d{margin-top:.3rem;font-size:max(12.5px,.78rem);line-height:1.36}
  :root body #palvelut .sg_more{line-height:1.32}
  :root body #palvelut .sg_more b{font-size:.89rem}
  :root body #palvelut .sg_more .sg_t{font-size:max(12.5px,.78rem)}
}
@media (min-aspect-ratio:21/20) and (min-width:1100px) and (max-height:820px){
  :root body #palvelut .sgrid,:root body #palvelut .sg_more{width:96.5%}
  :root body #palvelut .sgrid h3{font-size:clamp(.94rem,1.157vw,1.11rem)}
  :root body #palvelut .sgrid .sg_p{margin-top:.08rem}
  :root body #palvelut .sgrid .sg_d{margin-top:.2rem;font-size:max(12.5px,.73rem);line-height:1.32}
}

/* yö: mustat lasikortit (Revdot-tyyli), 14.10.2026
   Revdot.ai:n in-page-kortin tapaan tasainen musta lasi: ei sinistä sävyä, ei sisäistä valkoista yläreunagradienttia eikä
   inset-valoviivaa, pelkkä 40 px sumennus ilman saturate/brightness-säätöä ja hento reuna. Korostettu hintakortti on hieman
   tummempi, reuna vahvempi ja sillä on pieni pudotusvarjo. Koskee vain yötilaa (html.is-night): päiväsäännöt eivät muutu.
   Työt-korttien hover (--gc-*-h) käyttää korostetun hintakortin arvoja. Sivustudio-nappi ei ole lasia (ks. lohko alla). */
html.is-night{
  --gc-bg:rgba(10,10,10,.55);--gc-bg-h:rgba(10,10,10,.68);
  --gc-bd:rgba(255,255,255,.12);--gc-bd-h:rgba(255,255,255,.28);
  --gc-sh:none;--gc-sh-h:0 26px 56px -34px rgba(0,0,0,.7);
  --gc-bf:blur(40px);
}
html.is-night #hinnat .plans>li,html.is-night #tekijat .team li,html.is-night #tulokset .panel.is-res .vq{
  background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.12);box-shadow:none;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
html.is-night #hinnat .plans>li.is-featured{background:rgba(10,10,10,.68);border-color:rgba(255,255,255,.28);box-shadow:0 26px 56px -34px rgba(0,0,0,.7)}
/* pystyruutu: kortit ovat tornin pilvien päällä ilman taustasumennusta kuten ennenkin (kevyempi ja valmis heti), sama musta lasi */
@media (max-aspect-ratio:21/20){
  html.is-night{--gc-bf:none}
  html.is-night #hinnat .plans>li,html.is-night #tekijat .team li,html.is-night #tulokset .panel.is-res .vq{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Hinnat: Sivustudio-nappi (14.10.2026): päivällä tumma, yöllä vaalea, ei varjoa
   Eelis: "varjo pois ja napiksi tää niinkun muut siin vieressä". Sama muoto kuin Hinnat tarkemmin -napilla (3.1rem, täysi
   pyöristys, pyöreä nuolikuplake oikealla); tasainen täyttö ilman lasia, varjoa, gradienttia tai usvaa joka leveydellä.
   Leveys-, grid- ja paddingsäännöt per breakpoint ennallaan ylempänä. Hover-nousu translate-ominaisuudella, koska esiintulo
   (kierros 21h) käyttää transformia. */
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill{background:#0f1115;color:#fff;border:0;box-shadow:none;text-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill::before,html body #hinnat .panel>.pl_foot>.sivustudio.is-pill::after{content:none}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_q{color:rgba(255,255,255,.72)}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_a{color:#fff;font-weight:500;background:none;padding-bottom:0;border:0;text-decoration:none}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_go{background:#fff;color:#0f1115}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill:is(:hover,:focus-visible){background:#1c1f26;translate:0 -1px}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill:is(:hover,:focus-visible) .sv_go{background:var(--accent);color:#fff}
html body #hinnat .panel>.pl_foot>.sivustudio.is-pill:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill{background:#f7f7f5;color:#0f1115}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_q{color:rgba(15,17,21,.7)}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_a{color:#0f1115}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_go{background:#0f1115;color:#fff}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill:is(:hover,:focus-visible){background:#fff}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill:is(:hover,:focus-visible) .sv_go{background:var(--nacc);color:#0f1115}
html.is-night body #hinnat .panel>.pl_foot>.sivustudio.is-pill:focus-visible{outline-color:var(--nacc)}
/* desktop: korkeus, oikea sisäväli ja nuolikuplake samat kuin Hinnat tarkemmin -napilla (:root body -tason 2.8rem ja .btn_b 2.1rem) */
@media (min-aspect-ratio:21/20) and (min-width:768px){
  :root body #hinnat .pl_foot>.sivustudio.is-pill{height:2.8rem;padding-right:.6rem}
  :root body #hinnat .pl_foot>.sivustudio.is-pill .sv_go{width:2.1rem;height:2.1rem}
}

/* ===== kierros 38 mobiili (Alex 14.10.2026) =====
   1) (kierros 39: poistettu, Revdot-linkki on nyt AI-chat-kortin kuvauksen perässä, floor.css kierros 28.)
   2) Hinnat-pysäkin Sivustudio-pilleri yksirivisenä ja sisällön levyisenä: vain "Tutustu Sivustudioon" + nuolipallo,
      kysymys (.sv_q) pois. Korkeus sama kuin Hinnat tarkemmin -napilla (2,875rem). Värit ennallaan (lohko yllä).
   3) Kysymys siirtyy Hinnat-pysäkin ingressin perään (.pl_sis, näkyy vain pystyruudulla ≤ 767 px). */
.pl_sis{display:none}
@media (max-aspect-ratio:21/20) and (max-width:767px){
  html body #hinnat .panel>.pl_foot>.sivustudio.is-pill{display:inline-flex;align-items:center;flex:0 0 auto;width:auto;max-width:100%;min-width:0;
    height:2.875rem;min-height:0;padding:0 .42rem 0 1rem;column-gap:.55rem;border-radius:100px;line-height:1;white-space:nowrap}
  html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_q{display:none}
  html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_a{line-height:1}
  html body #hinnat .panel>.pl_foot>.sivustudio.is-pill .sv_go{margin:0;width:2rem;height:2rem}
  #hinnat .panel>.lead .pl_sis{display:inline}
}

/* ===== kierros 39 (Alex 15.10.2026) =====
   1) Sisäänmenonapit (Palvelut tarkemmin, Kaikki referenssit, Lisää palautteita, Hinnat tarkemmin, Tutustu tiimiin):
      nappi ja sen varjo paljastuvat ja häviävät yhdessä.
      Syy: pystyruudulla reunarivin (nav.rail, fixed, z 30) tausta on liukuväri läpinäkyvästä 72 %:n vaaleaan. Kun pysäkki
      aktivoituu vierityksessä, nappi on vielä reunarivin alla (390×844: napin yläreuna 783 px, reunarivi alkaa 782 px), joten
      reveal (.5 s viive) tapahtui reunarivin alla: valkoinen pilleri, varjo ja harmaaksi vaalentunut ovipallo näkyivät haamuna
      ilman tekstiä ("varjo jää"), eikä napilla näyttänyt olevan revealia. site.js enterLow() merkitsee aktiivisen pysäkin
      nappirivin .is-low, kun nappi ei ole kokonaan reunarivin yläpuolella: rivi piiloon (opacity + visibility napille), ja se
      paljastuu vasta reunarivin yläpuolella (viive .05 s). Lisäksi napin oma box-shadow ja visibility kytketään samaan
      revealiin (piilotilassa visibility:hidden ja läpinäkyvä varjo, kuten kierroksen 27 lasikorteissa), joten erillistä
      varjoa ei voi jäädä näkyviin missään selaimessa, myös lennon ja kerrosnäkymän aikana.
   2) Revdot-linkki AI-chat-kortin kuvauksen perässä: matalien puhelinten (≤ 720 px) 2 rivin rajaus ei saa leikata linkkiä,
      joten tällä kortilla rajaus on 3 riviä.
   3) Tulokset-pysäkin palautteet pystyruudulla vaakakaruselliksi (alla oma lohko). */
html.js :is(#palvelut,#tyot,#tulokset,#tekijat) .panel>.btns.is-enter .btn.is-main.is-enter,
html.js #hinnat .pl_foot>.enterwrap>.btn.is-main.is-enter{
  visibility:hidden;box-shadow:0 0 0 1px rgba(15,17,21,0),0 14px 32px -18px rgba(8,12,28,0);
  transition:transform .4s var(--out),background-color .4s var(--out),color .4s var(--out),box-shadow .3s var(--rv-e),visibility 0s .35s}
html.js.ready:not(.flying):not(.in-floor):not(.in-room) :is(#palvelut,#tyot,#tulokset,#tekijat).is-active .panel>.btns.is-enter .btn.is-main.is-enter,
html.js.ready:not(.flying):not(.in-floor):not(.in-room) #hinnat.is-active .pl_foot>.enterwrap>.btn.is-main.is-enter{
  visibility:visible;box-shadow:0 0 0 1px rgba(15,17,21,.07),0 14px 32px -18px rgba(8,12,28,.55);
  transition:transform .4s var(--out),background-color .4s var(--out),color .4s var(--out),box-shadow var(--rv-o) var(--rv-e) var(--rd,.5s),visibility 0s}
/* reunarivin alla (site.js enterLow, vain pystyruudulla) */
html.js.ready body .stop.is-active .panel>.btns.is-enter.is-low{opacity:0!important;transform:translateY(var(--rv-y))!important;
  transition:opacity .25s var(--rv-e),transform .4s var(--rv-e)!important}
html.js.ready body .stop.is-active .panel>.btns.is-enter.is-low .btn.is-main.is-enter,
html.js.ready body .stop.is-active .panel>.btns.is-enter.is-low .sivustudio{visibility:hidden!important;
  transition:transform .4s var(--out),background-color .4s var(--out),color .4s var(--out),box-shadow .25s var(--rv-e),visibility 0s .25s!important}
html.js.ready body .stop.is-active .panel>.btns.is-enter.is-low .btn.is-main.is-enter{box-shadow:0 0 0 1px rgba(15,17,21,0),0 14px 32px -18px rgba(8,12,28,0)!important}
html.js.ready #hinnat.is-active .panel>.pl_foot[style*="--rd"]{transition-delay:.05s}
@media (max-aspect-ratio:21/20) and (max-width:767px) and (max-height:720px){
  #palvelut .sgrid .sg_d:has(>.sg_x){-webkit-line-clamp:3}
}

/* kierros 39, 3) Tulokset-pysäkin palautteet pystyruudulla (≤ 767 px) vaakakaruselliksi.
   Ennen yksi lasilaatikko, jossa palaute vaihtui 7 s välein (muut 3 palautetta piilossa päällekkäin). Nyt kaikki neljä
   laatikkoa vierekkäin: .vq_list on scroll-snap-säiliö ruudun reunasta reunaan, jokainen palaute 86 vw levyinen lasilaatikko
   keskelle napsahtaen, reunoilla kurkistus viereisiin. Lasi (päivä vaalea, yö tumma, sama kuin ennen .vq:lla) ja lainausmerkki
   siirtyvät laatikoihin, .vq itse on läpinäkyvä. Pisteet laatikoiden alla keskellä (site.js päivittää vierityskohdasta).
   Pystyvieritys toimii säiliön päällä (touch-action pan-x pan-y, Lenis ei ohjaa kosketusvieritystä). Reveal ennallaan
   (.vq leikkautuu esiin alhaalta, sisältö perässä). Desktop ennallaan. */
@media (max-width:767px) and (max-aspect-ratio:21/20){
  html:root body #tulokset .stop_pin>.panel.is-res>.vq{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));max-width:none;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #tulokset .vq>.q_mark{display:none}
  #tulokset .vq_list{display:flex;align-items:stretch;gap:.6rem;margin:0;padding:.1rem 7vw .2rem;overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 7vw;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y}
  #tulokset .vq_list::-webkit-scrollbar{display:none}
  #tulokset .vq_list>.vq_item,#tulokset .vq_list>.vq_item.is-on{grid-area:auto;flex:0 0 86vw;scroll-snap-align:center;scroll-snap-stop:always;
    position:relative;opacity:1;visibility:visible;transform:none;transition:none;padding:.95rem 1rem .8rem 2.6rem;border-radius:16px;
    background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -24px rgba(18,28,58,.4)}
  html.is-night #tulokset .vq_list>.vq_item{background:rgba(10,10,10,.55);border-color:rgba(255,255,255,.12);box-shadow:none}
  #tulokset .vq_item::before{content:"\201D";position:absolute;left:.75rem;top:.95rem;font-family:var(--gts);font-weight:300;font-size:3rem;line-height:.8;
    color:var(--accent);text-shadow:none;pointer-events:none}
  html.is-night #tulokset .vq_item::before{color:var(--nacc)}
  :root body #tulokset .panel.is-res .vq_dots{justify-content:center;margin:.4rem 0 0}
}

/* kierros 40 (Alex 17.10.2026): Valitut työt -korttien ala-rivi aina yhdellä rivillä (vuosiluvut poistettu HTML:stä) */
@media (max-aspect-ratio:21/20){
  #tyot .works .w_t .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
}

/* kierros 44 (Alex 20.10.2026): Valitut työt -korteissa nimen ja ala-rivin väliin 4 px lisää ilmaa */
#tyot .works .w_t .cap{margin-top:4px}