@font-face{font-family:Inter;src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --mist:#EEF4F6; --mist-2:#E2ECEF; --white:#FFFFFF; --sea:#0E3242; --sea-deep:#0A2735;
  --muted:#466C7B; --on-dark:#C9DBE2; --sand:#D6B48A;
  --gut:clamp(20px,5vw,72px); --max:1360px; --r:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{background:var(--mist);color:var(--sea);font:400 18px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg.i{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(36px,4.8vw,64px)}
h3{font-size:clamp(21px,1.7vw,24px);letter-spacing:-.015em;line-height:1.2}
p{color:var(--muted);max-width:58ch}
.sec{padding:clamp(80px,10vw,140px) 0}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55}

.logo{font-size:21px;letter-spacing:.2em;white-space:nowrap}
.logo span{font-weight:300}.logo b{font-weight:800;letter-spacing:.12em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:2px;font-weight:600;font-size:15.5px;letter-spacing:.01em;white-space:nowrap;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),background-color .25s,color .25s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,50,66,.18)}
.btn:active{transform:translateY(0) scale(.99);box-shadow:none}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 12px 28px rgba(14,50,66,.18)}
.btn-sea{background:var(--sea);color:#fff}.btn-sea:hover{background:var(--sea-deep)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--sea);color:var(--sea);background:transparent}.btn-line:hover{background:var(--sea);color:#fff}
.btn-white{background:#fff;color:var(--sea)}.btn-white:hover{background:var(--mist)}
.btn-line-w{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);color:#fff;background:transparent}.btn-line-w:hover{background:#fff;color:var(--sea)}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(238,244,246,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;max-width:none}
.nav ul{display:flex;gap:30px;list-style:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav ul a:hover{color:var(--sea)}
.nav{transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px rgba(14,50,66,.08)}
.nav .btn{height:40px;padding:0 16px;font-size:15px}

/* Hero: koko leveä kuva. Kuvaa on jatkettu vasemmalle sinisellä taivaalla (hero_extend.py). */
.hero{position:relative;height:calc(100dvh - 78px);min-height:520px;max-height:1000px;container:hero/size;background:#2B6FB8 url(img/hero-reuna.webp) 0 0/100% 100% no-repeat;overflow:hidden;color:#fff}
/* Ensinäkymä: syvyys ja yksi ilmava painike */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,30,44,.68) 0%,rgba(8,30,44,.4) 38%,rgba(8,30,44,0) 62%),linear-gradient(0deg,rgba(8,30,44,.4) 0%,rgba(8,30,44,0) 35%)}
.hero h1 .a{color:#fff;opacity:.78}
.cta-air{display:inline-flex;align-items:center;gap:16px;height:62px;padding:0 34px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);text-shadow:none;transition:background-color .35s,color .35s,box-shadow .35s}
.cta-air span{font-size:20px;letter-spacing:0;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cta-air:hover{background:#fff;color:var(--sea)}
.cta-air:hover span{transform:translateX(6px)}
.cta-air:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero figure{position:absolute;inset:0}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:right top}
/* Leveä näyttö: koko kuva oikealla, vasen reuna jatkuu kuvan omalla taivaalla ja rannalla */
@container hero (min-aspect-ratio: 1672/941){.hero figure img{object-fit:contain;object-position:right center;-webkit-mask:linear-gradient(90deg,transparent 0,#000 14%) right top/177.7cqh 100% no-repeat;mask:linear-gradient(90deg,transparent 0,#000 14%) right top/177.7cqh 100% no-repeat}}
.hero .copy{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:var(--eaves,120px) var(--gut) 0;height:100%;display:flex;flex-direction:column;justify-content:flex-start;text-shadow:0 1px 18px rgba(10,50,90,.28)}
.hero .btn{text-shadow:none}
.hero .copy>*{max-width:640px}
.hero .copy>h1{max-width:none}
.hero .area{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#DCEBF5;margin-bottom:24px}
.hero h1{font-size:clamp(58px,8.2vw,132px);letter-spacing:-.045em;line-height:.96;color:#fff}
.hero h1 .a{display:block;color:#CFE3F2;font-weight:600}
.hero .lead{margin:28px 0 38px;color:#E6F0F7}
.hero .lead strong{color:#fff;font-weight:600;display:block;font-size:1.12em;margin-bottom:10px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}

/* Services */
.svc h2{max-width:13em}
.svc .intro{margin-top:22px}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(28px,3vw,44px) 24px;margin-top:clamp(48px,6vw,80px)}
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(32px,3vw,44px) 22px!important}
.svc-item,.svc-item.wide{grid-column:span 1}
.svc-item .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--mist-2)}
.svc-item.wide .ph{aspect-ratio:4/3}
.svc-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.svc-item:hover .ph img{transform:scale(1.035)}
.svc-item h3{margin-top:16px;font-size:20px}
.svc-item p{margin-top:4px;font-size:16px}

/* Heights */
.heights{background:var(--white)}
.heights .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.heights h2 em{font-style:normal;color:var(--muted)}
.heights .lead{margin-top:26px}
.benefits{display:grid;gap:26px;margin-top:44px}
.benefits b{display:block;font-size:19px;font-weight:600;color:var(--sea);margin-bottom:4px}
.benefits p{font-size:16.5px}
.heights .pics{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.heights .pics div{border-radius:var(--r);overflow:hidden}
.heights .pics img{width:100%;height:100%;object-fit:cover}
.heights .p1{aspect-ratio:3/4}
.heights .p2{aspect-ratio:3/4}
.heights .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}

/* Gallery */
.gal-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:38px;padding:0 14px;border-radius:4px;border:0;background:var(--mist-2);color:var(--muted);font-size:15px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s}
.chip:hover{color:var(--sea)}
.chip[aria-pressed="true"]{background:var(--sea);color:#fff}
.masonry{columns:3 300px;column-gap:16px}
.masonry button{all:unset;display:block;width:100%;margin-bottom:16px;cursor:zoom-in;break-inside:avoid;border-radius:3px;overflow:hidden;background:var(--mist-2)}
.masonry button:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.masonry img{width:100%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.masonry button:hover img{transform:scale(1.03)}
.masonry button[hidden]{display:none}
.gal-more{display:flex;justify-content:center;margin-top:32px}
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh}
dialog.lb::backdrop{background:rgba(8,26,35,.94)}
.lb .in{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 16px 24px}
.lb img{max-width:min(1400px,100%);max-height:calc(100dvh - 130px);object-fit:contain}
.lb p{color:var(--on-dark);font-size:15px}
.lb .x{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:4px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);border:0;cursor:pointer}

/* Reviews */
.reviews{background:var(--white)}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-top:44px;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev{scroll-snap-align:start;background:var(--mist);border-radius:var(--r);padding:32px}
.rev .stars{color:#E2A93B;font-size:20px;letter-spacing:3px}
.rev blockquote{font-size:18px;line-height:1.55;margin:16px 0 20px;color:var(--sea)}
.rev cite{font-style:normal;font-weight:600;font-size:15px;color:var(--muted)}
.rev-empty{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rev-empty h2{font-size:clamp(30px,3.4vw,46px)}
.rev-empty p{margin-top:12px}
.rev-nav{display:flex;gap:10px}
.rev-nav button{width:44px;height:44px;border-radius:4px;border:0;background:var(--mist);cursor:pointer;display:grid;place-items:center}
.rev-nav button:hover{background:var(--sea);color:#fff}
.rev-nav .prev svg{transform:rotate(180deg)}
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}

/* About */
.about .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:center}
.about figure{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--mist-2)}
.about figure img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about .lead{margin-top:24px}
.about p+p{margin-top:18px}

/* Housing */
.housing .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.housing figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.housing figure img{width:100%;height:100%;object-fit:cover}
.housing .lead{margin-top:24px}
.housing ul{list-style:none;margin-top:30px;display:grid;gap:12px}
.housing li{font-size:18px;font-weight:500;color:var(--sea)}
.housing .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}

/* Contact */
.contact .box{background:var(--white);border-radius:4px;padding:clamp(40px,7vw,104px) clamp(24px,7vw,104px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
.contact h2{font-size:clamp(40px,5.6vw,80px);letter-spacing:-.04em}
.contact .lead{margin-top:26px}
.contact .side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.contact .side .btn{height:52px;padding:0 24px;font-size:17px}
.contact .side a.line{display:flex;gap:12px;align-items:center;font-size:18px;font-weight:600}
.contact .side a.line:hover{color:var(--muted)}

/* Footer */
footer{padding:72px 0 120px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;font-size:15.5px;color:var(--muted)}
footer b{display:block;color:var(--sea);font-weight:600;margin-bottom:10px}
footer a:hover{color:var(--sea)}
footer .slog{margin-top:14px}
footer .logo{display:inline-block}
footer .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:32px;font-size:14px}

.mbar{display:none}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  .rise.d1{animation-delay:.07s}.rise.d2{animation-delay:.14s}.rise.d3{animation-delay:.21s}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero figure img{animation:settle 1.8s cubic-bezier(.16,1,.3,1) both,breathe 22s ease-in-out 1.8s infinite alternate;transform-origin:85% 0}
  @keyframes breathe{from{transform:scale(1)}to{transform:scale(1.03) translateX(-.8%)}}
  /* Otsikon rivit nousevat esiin verhon takaa */
  .hero h1.rise{animation:none}
  .hero h1 .a,.hero h1 em{display:block}
  /* Kirjaimet putoavat ja välkähtävät paikalleen */
  .hero h1 .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(-.45em);animation:wordIn 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.05s + var(--i) * 28ms)}
  /* Avaus: iso RAKENNUS VUOLIJOKI, joka väistyy otsikon tieltä */
  .hero-intro{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;pointer-events:none;text-shadow:0 2px 30px rgba(8,30,44,.35);animation:introOut .5s cubic-bezier(.7,0,.2,1) .85s forwards}
  .hero-intro .r{display:block;font-weight:300;font-size:clamp(16px,2.6vw,42px);letter-spacing:.62em;margin:0 0 .55em .62em;white-space:nowrap}
  .hero-intro .v{display:block;font-weight:800;font-size:min(14vw,210px);letter-spacing:-.02em;line-height:.85;white-space:nowrap}
  .hero-intro .sw{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.3em);animation:wordIn 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.05s + var(--i) * 25ms)}
  @keyframes introOut{to{opacity:0;transform:translateY(-8%) scale(.94);filter:blur(8px)}}
  .hero .copy{animation:none}
  @keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}
  /* Valoheijastus kulkee otsikon yli ja seuraa hiirtä */
  .hero h1 .a,.hero h1 em{position:relative}
  .hero h1 .a::after,.hero h1 em::after{content:attr(data-t);position:absolute;left:0;top:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(22% 130% at var(--gx,-30%) 50%,rgba(255,236,196,.95) 0%,rgba(255,236,196,0) 70%);white-space:nowrap}
  .hero h1 .a::after,.hero h1 em::after{opacity:0;animation:sheenIn .8s ease 2.4s forwards}
  @keyframes sheenIn{to{opacity:1}}
  @keyframes lineUp{from{clip-path:inset(0 -12% 100% -6%);transform:translateY(40%)}to{clip-path:inset(-20% -12% -25% -6%);transform:none}}
  /* Napin teksti tiivistyy paikalleen ja reunus piirtyy esiin */
  .cta-air{animation:ctaIn 1s cubic-bezier(.16,1,.3,1) 1.6s both}
  @keyframes ctaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .hero .lead.rise{animation-delay:1.45s}
  @keyframes settle{from{transform:scale(1.04)}to{transform:none}}
  /* Liike: osiot nousevat esiin kun ne tulevat näkyviin */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
  .reveal.in{opacity:1;transform:none}
  /* Ensinäkymä: kuva lähenee ja teksti liukuu kevyesti vierittäessä */
  @supports (animation-timeline: scroll()){
    .hero figure{animation:heroZoom linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hero .copy{animation:heroText linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    @keyframes heroZoom{to{transform:scale(1.06)}}
    .hero figure{transform-origin:85% 0}
    @keyframes heroText{to{transform:translateY(-70px);opacity:.15}}
  }
}

@media (max-width:1120px){.nav ul{display:none}}
@media (max-width:900px){
  body{font-size:17px}
  .nav .wrap{height:66px}.logo{font-size:17px;letter-spacing:.16em}
  .nav .btn{display:none}
  .hero{height:auto;aspect-ratio:auto;min-height:0;max-height:none;display:flex;flex-direction:column;background:#1E5A8F;container-type:normal}
  .hero h1{font-size:clamp(48px,13vw,72px)}
  .hero::after{display:none}
  .cta-air{width:100%;justify-content:center}
  .hero figure,.hero .copy{animation:none!important}
  .hero .copy{padding:36px var(--gut) 32px;order:1}
  .hero figure{position:relative;order:2;width:100%;height:auto;inset:auto}
  .hero figure img{height:auto}
  .hero .area{font-size:13px;letter-spacing:.12em}
  .ctas .btn{flex:1 1 100%}
  .svc-item,.svc-item.wide{grid-column:auto}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 12px!important}
  .svc-item p{display:block;font-size:13.5px;line-height:1.4}
  .svc-item .ph,.svc-item.wide .ph{aspect-ratio:1/1}
  .svc-item h3{font-size:17px;margin-top:12px}
  .heights{margin:0;border-radius:0}
  .heights .grid,.about .grid,.housing .grid,.contact .box{grid-template-columns:1fr}
  .heights .p2{transform:none}
  .masonry{columns:2 150px;column-gap:10px}.masonry button{margin-bottom:10px;border-radius:3px}
  .rev-track{grid-auto-columns:86%}
  .contact .side .btn{width:100%}
  footer .wrap{grid-template-columns:1fr}
  .mbar{display:grid;grid-template-columns:1fr 50px;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(238,244,246,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .mbar .btn{height:50px;padding:0 14px}
  .mbar .call{padding:0}
}
@media (prefers-reduced-motion:reduce){.hero-intro{display:none}}
@media (max-width:900px){.hero-intro{justify-content:flex-start;padding-top:96px}}

/* ===== Ilme 4.11: klassinen otsikkofontti, pehmeät napit, Apple-mainen liike, mobiili ===== */
@font-face{font-family:Gambetta;src:url(fonts/gambetta-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-600i.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}
body{font-family:Satoshi,system-ui,sans-serif;font-feature-settings:normal}
.logo,.hero-intro{font-family:Inter,system-ui,sans-serif}
h1,h2{font-family:Gambetta,Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.02}
h1 em,h2 em{font-weight:500}
h3{font-family:Satoshi,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
.hero h1{letter-spacing:-.025em;line-height:.98;font-weight:600}
.hero h1 .a{font-weight:500}
.cmp-table .h,.hero .area{font-family:Satoshi,system-ui,sans-serif}

/* Napit: pehmeät ja kutsuvat */
.btn{height:56px;padding:0 26px;border-radius:14px;font-family:Satoshi,system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:.005em;gap:12px;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}
.btn-sea{background:linear-gradient(180deg,#17506A,#0E3242);box-shadow:0 12px 28px -10px rgba(14,50,66,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-sea .i,.btn-white .i{width:32px;height:32px;padding:7px;border-radius:50%;margin-left:-10px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.btn-sea .i{background:rgba(255,255,255,.16)}
.btn-white{box-shadow:0 14px 34px -12px rgba(6,24,36,.45)}
.btn-white .i{background:#E6F0F5}
.btn-line{border-radius:14px}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn-sea:hover{box-shadow:0 20px 40px -12px rgba(14,50,66,.7),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn:hover .i{transform:scale(1.1) rotate(-8deg)}
}
.cta-air{height:62px;padding:0 36px;border-radius:14px;background:#fff;color:var(--sea);box-shadow:0 22px 48px -16px rgba(0,0,0,.5);font-family:Satoshi,system-ui,sans-serif;font-weight:700;letter-spacing:.14em;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.cta-air:hover{background:#fff;color:var(--sea)}
@media (hover:hover){.cta-air:hover{transform:translateY(-3px);box-shadow:0 30px 60px -16px rgba(0,0,0,.55)}}

/* Apple-mainen esiinnousu */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(46px);filter:blur(8px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform 1.3s cubic-bezier(.22,1,.36,1) var(--d,0ms),filter 1.1s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal .ph img,figure.reveal img{transform:scale(1.14);transition:transform 1.8s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
  .reveal.in .ph img,figure.reveal.in img{transform:none}
}
html.nointro .hero-intro{display:none}
html.nointro .hero h1 .ch{animation-delay:calc(.05s + var(--i) * 18ms)}
html.nointro .hero .lead.rise{animation-delay:.35s}
html.nointro .cta-air{animation-delay:.5s}
html.nointro .hero h1 .a::after,html.nointro .hero h1 em::after{animation-delay:1.2s}

/* Mustavalkoinen JP */
.about figure img{filter:grayscale(1) contrast(1.05)}

/* Köysityöt: iso kuva taustalla, otsikko liukuu */
.heights{position:relative;overflow:hidden;background:#0B2A38;color:#fff;padding:clamp(120px,15vw,220px) 0}
.heights .hbg{position:absolute;inset:-8% 0;z-index:0}
.heights .hbg img{width:100%;height:100%;object-fit:cover;object-position:62% 35%}
.heights::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,30,44,.9) 0%,rgba(8,30,44,.68) 42%,rgba(8,30,44,.12) 78%)}
.heights .wrap{position:relative;z-index:2}
.heights .grid{grid-template-columns:minmax(0,660px)}
.heights h2{color:#fff;font-size:clamp(46px,6.4vw,96px)}
.heights h2 em{color:#BFD8E3}
.heights p{color:#D6E6EC}
.heights .benefits b{color:#fff}
.heights .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.heights .btn-sea{background:#fff;color:var(--sea)}
.heights .btn-sea .i{background:#E6F0F5}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){
  .heights .hbg{animation:hpar linear both;animation-timeline:view()}
  @keyframes hpar{from{transform:translateY(-7%)}to{transform:translateY(7%)}}
  .heights h2{animation:hslide linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes hslide{from{transform:translateX(-14%);opacity:.15}to{transform:none;opacity:1}}
}}

/* ===== Mobiili ===== */
@media (max-width:900px){
  .sec{padding:76px 0}
  h2{font-size:clamp(34px,9.5vw,46px)}
  .lead{font-size:17.5px}
  .hero{height:calc(100svh - 66px);min-height:600px;max-height:none;display:block;background:#123A55}
  .hero figure{position:absolute;inset:0;height:100%;width:100%;margin:0}
  .hero figure img{height:100%;object-fit:cover;object-position:80% 0}
  .hero::after{display:block;background:linear-gradient(180deg,rgba(8,30,44,0) 30%,rgba(8,30,44,.72) 62%,rgba(8,30,44,.94) 100%)}
  .hero .copy{position:absolute;left:0;right:0;bottom:0;top:auto;height:auto;padding:0 22px 104px;justify-content:flex-end}
  .hero h1{font-size:clamp(46px,13.5vw,64px)}
  .hero .lead{margin:16px 0 22px;font-size:16.5px}
  .hero .lead strong{font-size:1.06em;margin-bottom:6px}
  .cta-air{width:100%;justify-content:center;height:58px}
  .hero-intro{justify-content:center;padding:0}
  .hero-intro .v{font-size:17vw}
  .heights{padding:96px 0}
  .heights::before{background:linear-gradient(180deg,rgba(8,30,44,.55) 0%,rgba(8,30,44,.88) 55%,rgba(8,30,44,.95) 100%)}
  .heights .hbg img{object-position:70% 30%}
  .about figure{aspect-ratio:4/3.4}
  .mbar{gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
  .mbar .btn{height:54px;border-radius:14px}
  .mbar .btn-sea .i{margin-left:-4px}
  .track a{height:240px}
  .cmp-table>div{padding:14px 12px;font-size:14.5px}
  footer{padding-bottom:120px}
}

/* Rytmi: sama välistys kaikissa osioissa */
h2+.lead,h2+p{margin-top:20px}
.benefits{gap:clamp(22px,2.2vw,30px);margin-top:clamp(32px,3vw,44px)}
.benefits b{font-size:clamp(18px,1.4vw,20px)}
.benefits p{margin-top:6px}
.about .lead{margin-top:20px}
.about p+p{margin-top:14px}
.housing ul{margin-top:28px;gap:12px}
.heights .actions,.housing .actions{margin-top:clamp(32px,3vw,44px)}
.svc .intro{margin-top:20px}
.svc-grid{margin-top:clamp(40px,4.5vw,64px)}
.gal-head{margin-bottom:clamp(28px,3vw,40px)}

/* Linja: kuvan yläreuna = otsikon yläreuna, otsikot samaa kokoluokkaa */
.about .grid,.housing .grid{align-items:start}
.about h2,.housing h2,.reasons h2{margin-top:-.12em}
.heights h2{font-size:clamp(40px,5vw,72px)}
.heights .grid{grid-template-columns:minmax(0,720px)}

/* Yhtenäinen värimaailma palvelukuviin */
.svc-item .ph img,.more-svc .ph img{filter:saturate(.9) contrast(1.04) brightness(1.02)}

@font-face{font-family:Inter;src:url(fonts/inter-var-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
/* Etusivun premium-osiot */
.hero h1 em{font-style:italic;font-weight:700;letter-spacing:-.04em}
.stats{background:var(--white);position:relative;z-index:2}
.stats .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);padding:clamp(30px,4vw,48px) 0}
.stats b{display:block;font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--sea)}
.stats span{display:block;margin-top:6px;font-size:16px;color:var(--muted)}
.reasons .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.reasons h2{margin-top:-.12em}
.reasons .rfig{position:sticky;top:110px;display:grid;gap:16px}
.reasons figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.2}
.reasons figure.map{aspect-ratio:auto}
.reasons figure.map img{height:auto}
.reasons figure img{width:100%;height:100%;object-fit:cover}
.reasons h2 em,.cmp h2 em,.gal-strip h2 em{font-style:italic}
.reason{padding:0;margin-top:clamp(26px,2.4vw,34px)}
.reasons h2+.reason{margin-top:clamp(32px,3vw,44px)}
.reasons .btn{margin-top:clamp(32px,3vw,44px)}
.reason h3{font-size:clamp(21px,1.7vw,24px);letter-spacing:-.015em;line-height:1.25}
.reason p{margin-top:8px;font-size:17px;line-height:1.6}
.cmp{background:var(--white)}
.cmp .intro{margin-top:20px}
.cmp-table{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);margin-top:clamp(40px,5vw,64px);border-radius:var(--r);overflow:hidden}
.cmp-table>div{padding:22px 26px;font-size:17px;line-height:1.45}
.cmp-table .h{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding-top:26px;padding-bottom:18px}
.cmp-table .l{font-weight:600;color:var(--sea);background:var(--mist)}
.cmp-table .k{background:var(--sea);color:#fff;font-weight:500}
.cmp-table .t{background:var(--mist);color:var(--muted)}
.cmp-table .h.k{color:#fff}.cmp-table .h.t,.cmp-table .h.l{color:var(--muted)}
.gal-strip{overflow:hidden}
.gal-strip .gal-head{margin-bottom:36px}
.gal-strip .tools{display:flex;gap:10px;align-items:center}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:16px;width:max-content}
.track a{display:block;height:clamp(260px,32vw,420px);border-radius:var(--r);overflow:hidden;flex:none}
.track img{height:100%;width:auto;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.track a:hover img{transform:scale(1.04)}
.pause{height:44px;padding:0 16px;border-radius:2px;border:0;background:var(--mist-2);color:var(--sea);font-weight:600;font-size:14px;cursor:pointer}
.pause:hover{background:var(--sea);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .track{animation:slide 70s linear infinite}
  .marquee:hover .track,.marquee.paused .track{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(calc(-50% - 8px))}}
  @supports (animation-timeline: view()){
    .about figure img,.reasons figure img,.heights .pics img,.housing figure img{animation:drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes drift{from{transform:translateY(-5%) scale(1.1)}to{transform:translateY(5%) scale(1.1)}}
  }
  .stats .row>div{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  .stats .row>div:nth-child(2){animation-delay:.35s}.stats .row>div:nth-child(3){animation-delay:.45s}.stats .row>div:nth-child(1){animation-delay:.25s}
}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}.pause{display:none}}
@media (max-width:900px){
  .stats .row{grid-template-columns:1fr;gap:18px}
  .reasons .grid{grid-template-columns:1fr}
  .reasons .rfig{position:relative;top:0}
  .reasons figure{aspect-ratio:4/3}
  .cmp-table{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)}
  .cmp-table>div{padding:14px 12px;font-size:14.5px}
  .cmp-table .h{font-size:12px}
}
/* Monisivuinen versio */
.nav ul a[aria-current="page"]{color:var(--sea);font-weight:600}
.menu{display:none}
.nav .main{display:flex;align-items:center;gap:34px;font-size:15.5px;font-weight:500;color:var(--muted)}
.nav .main>a:hover,.dd summary:hover{color:var(--sea)}
.nav .main a[aria-current],.dd summary.on{color:var(--sea);font-weight:700}
.dd{position:relative}
.dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
.dd summary::-webkit-details-marker{display:none}
.dd summary svg{width:11px;height:8px;transition:transform .3s}
.dd[open] summary svg{transform:rotate(180deg)}
.dd ul{position:absolute;left:-18px;top:calc(100% + 18px);min-width:240px;list-style:none;background:#fff;border-radius:14px;padding:10px;box-shadow:0 24px 50px -14px rgba(14,50,66,.3);display:grid!important;gap:0!important}
.dd li a{display:block;padding:11px 14px;border-radius:9px;color:var(--sea);font-weight:500}
.dd li a:hover,.dd li a[aria-current]{background:var(--mist)}
.dd li.sep,.menu li.sep{margin-top:6px;padding-top:6px;border-top:1px solid var(--mist-2)}
.navcta{height:46px!important;padding:0 22px!important;font-size:15px!important}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--sea)}
.phero{padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,96px)}
.phero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.phero h1{font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1}
.phero .lead{margin:20px 0 32px}
.phero figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--mist-2)}
.phero figure img{width:100%;height:100%;object-fit:cover}
.phero figure.wide{aspect-ratio:16/10}
.photo-row .pr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(160px,15vw,230px);gap:16px}
.photo-row figure{position:relative;border-radius:var(--r);overflow:hidden;margin:0}
.photo-row figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.photo-row figure:nth-child(6),.photo-row figure:nth-child(7){grid-column:span 2;grid-row:span 2}
.photo-row img{width:100%;height:100%;object-fit:cover}
.photo-row figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;color:#fff;font-size:14.5px;font-weight:500;background:linear-gradient(transparent,rgba(8,30,44,.7))}
.map-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:center}
.map-sec figure{border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(14,50,66,.06)}
.map{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);display:block;width:0;height:0}
.pin .dot{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:#0E3242;box-shadow:0 0 0 5px #fff,0 8px 20px rgba(14,50,66,.4)}
.pin .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #0E3242;animation:pinPulse 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes pinPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.pin .tag{position:absolute;right:24px;bottom:16px;white-space:nowrap;background:#fff;color:var(--muted);font-size:13px;line-height:1.3;padding:10px 14px;border-radius:12px;box-shadow:0 14px 30px -10px rgba(14,50,66,.35)}
.pin .tag b{display:block;color:var(--sea);font-size:16px;font-family:Gambetta,Georgia,serif;font-weight:600}
@media (prefers-reduced-motion:reduce){.pin .dot::after{animation:none;opacity:0}}
.tasks{background:var(--white)}
.tasks .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px)}
.tasks ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;padding-top:.5em}
.tasks li{font-size:19px;font-weight:600;color:var(--sea)}
.tasks .note{margin-top:20px}
.more-svc .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.more-svc a .ph{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden}
.more-svc a .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.more-svc a:hover .ph img{transform:scale(1.035)}
.more-svc a h3{margin-top:14px;font-size:20px}
.faq{background:var(--white)}
.faq .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px)}
.faq details{padding:22px 0}
.faq details+details{border-top:1px solid var(--mist-2)}
.faq summary{cursor:pointer;font-size:19px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:12px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:28px}
.link-arrow:hover{color:var(--muted)}
@media (max-width:900px){
  .nav .main{display:none}
  .navcta{display:none!important}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;height:40px;padding:0 14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--sea);display:flex;align-items:center;font-weight:600;font-size:15px}
  .menu summary::-webkit-details-marker{display:none}
  .menu ul{display:grid!important;position:absolute;right:0;top:48px;background:#fff;border-radius:4px;box-shadow:0 18px 40px rgba(14,50,66,.16);padding:10px;min-width:230px;gap:0;list-style:none}
  .menu li a{display:block;padding:11px 14px;font-weight:500;color:var(--sea)}
  .menu ul{gap:0!important;border-radius:14px!important;min-width:250px!important}
  .menu li a:hover{background:var(--mist)}
  .nav .right{display:flex;gap:10px;align-items:center}
}
@media (max-width:900px){
  .phero .grid,.tasks .grid,.faq .grid{grid-template-columns:1fr}
  .phero figure{aspect-ratio:4/3}
  .tasks ul{grid-template-columns:1fr}
  .more-svc .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-row .pr{grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:auto}
  .photo-row figure{aspect-ratio:4/3}
  .photo-row figure:nth-child(6),.photo-row figure:nth-child(7){grid-column:span 1;grid-row:auto}
  .photo-row figure:nth-child(1){grid-row:auto}
  .photo-row figure,.photo-row figure:nth-child(1),.photo-row figure:nth-child(3){grid-column:span 1}
  .photo-row figure:nth-child(1){grid-column:span 2}
  .photo-row figure:nth-child(4){grid-row:auto;aspect-ratio:4/3}
  .photo-row figcaption{font-size:12.5px;padding:24px 10px 8px}
  .map-grid{grid-template-columns:1fr}
}

.prices{padding-top:clamp(40px,5vw,64px)}
.plist{border-top:1px solid rgba(14,50,66,.16)}
.prow{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,3vw,48px);padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid rgba(14,50,66,.16);align-items:start}
.prow .pn{font-family:Gambetta,serif;font-style:italic;font-size:20px;color:var(--muted);padding-top:.35em}
.prow h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1.1;color:var(--sea)}
.prow .pt p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--muted);max-width:34em}
.prow .pt .pnote{color:var(--sea);font-weight:600;margin-top:10px}
.prow .pp{display:grid;gap:18px;justify-items:end;text-align:right}
.prow .pp dt{font-size:15px;color:var(--muted)}
.prow .pp dd{font-family:Gambetta,serif;font-weight:500;font-size:clamp(30px,3vw,42px);letter-spacing:-.02em;line-height:1.1;color:var(--sea);margin-top:4px;white-space:nowrap}
.prices .vat{margin-top:22px;font-size:16px;font-weight:600;color:var(--sea)}
.vatbadge{display:inline-block;margin-top:-8px;padding:8px 14px;border:1px solid var(--sea);border-radius:var(--r);font-size:16px;font-weight:600;color:var(--sea)}
.prow .pp .pvat{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.hows{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px) clamp(28px,4vw,56px);padding-top:.5em}
.hows b{display:block;font-size:19px;font-weight:600;color:var(--sea)}
.hows p{margin-top:6px;font-size:16.5px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){
 .prow{grid-template-columns:1fr;gap:14px}
 .prow .pn{padding-top:0}
 .prow .pp{justify-items:start;text-align:left;margin-top:6px}
 .hows{grid-template-columns:1fr;padding-top:12px}
}

.partner .pgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center;border-top:1px solid rgba(14,50,66,.16);padding-top:clamp(36px,4vw,56px)}
.partner .eyebrow{font-size:15px;color:var(--muted);margin-bottom:14px}
.partner .lead{margin-top:20px;color:var(--muted)}
.partner .plogo{justify-self:center;display:block;padding:12px;transition:opacity .25s}
.partner .plogo img{width:clamp(220px,24vw,320px);height:auto}
@media (hover:hover){.partner .plogo:hover{opacity:.7}}
@media (max-width:900px){.partner .pgrid{grid-template-columns:1fr}.partner .plogo{justify-self:start;padding:0}}