@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#f2f0eb;--ink:#222220}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit}header{position:absolute;z-index:3;top:0;left:0;right:0;padding:26px 5%;display:flex;justify-content:space-between;align-items:center;color:white}header a{text-decoration:none}header .brand{font-weight:700;letter-spacing:.16em;font-size:17px}.langs{display:flex;gap:14px;font-size:12px;letter-spacing:.1em}.langs a{opacity:.7}.langs a[aria-current]{opacity:1;border-bottom:1px solid}.hero{height:100svh;min-height:550px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;color:#fff;background:linear-gradient(135deg,#181c1a 0%,#343a35 45%,#121513 100%);overflow:hidden}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0007)}.hero .mark{z-index:1;font-size:clamp(68px,15vw,220px);font-weight:700;letter-spacing:-.075em;line-height:1}.hero .tag{z-index:1;letter-spacing:.28em;font-size:clamp(10px,1.4vw,14px);margin-top:22px;text-transform:uppercase}.scroll{position:absolute;bottom:28px;z-index:1;font-size:10px;letter-spacing:.25em;text-transform:uppercase}.hero.has-photo{background-image:linear-gradient(#0004,#0007),url('assets/hero.jpg');background-size:cover;background-position:center}main{max-width:1480px;margin:auto}.intro{padding:120px 7% 75px}.intro p{font-size:clamp(28px,4.5vw,65px);line-height:1.15;letter-spacing:-.045em;max-width:900px;margin:0}.service{padding:55px 7% 120px;display:grid;grid-template-columns:minmax(220px, .8fr) minmax(0,1.4fr);gap:8%}.service:nth-of-type(odd){background:#e9e7e1}.number{font-size:12px;letter-spacing:.16em;margin-bottom:36px}.service h2{font-size:clamp(33px,4vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.055em;margin:0 0 30px}.service p{font-size:16px;line-height:1.75;max-width:410px}.gallery{min-width:0}.frame{height:clamp(300px,43vw,650px);background:linear-gradient(145deg,#d2cec5,#8b8981);display:flex;align-items:center;justify-content:center;text-align:center;color:#494841;font-size:12px;letter-spacing:.13em;text-transform:uppercase;padding:25px}.frame[data-slide='1']{background:linear-gradient(135deg,#aaa69d,#e0dbd0)}.frame[data-slide='2']{background:linear-gradient(135deg,#777a75,#b6b0a4)}.frame img{width:100%;height:100%;object-fit:cover}.controls{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:12px;letter-spacing:.1em}.arrows{display:flex;gap:22px}.arrows button{border:0;background:transparent;font-size:25px;cursor:pointer;color:var(--ink)}.about,.contact{padding:100px 7%;border-top:1px solid #d4d0c7}.about h2,.contact h2{font-size:clamp(38px,6vw,90px);letter-spacing:-.06em;font-weight:500;margin:0 0 28px}.about p{max-width:700px;font-size:clamp(18px,2.2vw,27px);line-height:1.5}.contact a.email{font-size:clamp(27px,5vw,72px);letter-spacing:-.04em;text-decoration:none;border-bottom:1px solid}footer{padding:35px 7%;display:flex;justify-content:space-between;font-size:12px;color:#77746e}@media(max-width:760px){header{padding:22px 6%}.hero .mark{font-size:18vw}.intro{padding:90px 6% 40px}.service{display:block;padding:65px 6% 70px}.service .copy{margin-bottom:35px}.number{margin-bottom:24px}.frame{height:110vw;max-height:580px}.about,.contact{padding:75px 6%}footer{padding:25px 6%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Puutöiden materiaalitausta – vaihdettavissa myöhemmin */
#work-1{background-image:linear-gradient(rgba(246,243,236,.70),rgba(246,243,236,.70)),url("/assets/puutyot-tausta.webp");background-size:cover;background-position:center center;}

/* KAIKAI logo: rauhallinen etusivu, verstaan valokuva lisätään myöhemmin */
.hero{background:#f2f0eb;color:#222220;}
.hero:after{display:none;}
header{color:#222220;}
.hero-logo{display:block;width:clamp(145px,29vmin,330px);height:auto;position:relative;z-index:1;}
.scroll{display:flex;align-items:center;justify-content:center;bottom:20px;width:48px;height:48px;font-family:Arial,sans-serif;font-size:25px;font-weight:400;letter-spacing:0;text-decoration:none;text-transform:none;color:inherit;}
.hero.has-photo{background-image:linear-gradient(rgba(242,240,235,.50),rgba(242,240,235,.50)),url('/assets/hero.jpg');}

/* 2026-10-28: navigointi, galleriat ja KAIKAI-esittely */
html{scroll-snap-type:y proximity;scroll-padding-top:0}
.hero,.service,.about,.contact{scroll-snap-align:start;scroll-snap-stop:normal}
.service{min-height:100svh;align-items:center}
.scroll .triangle{display:block;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:15px solid currentColor}
.frame{height:auto;aspect-ratio:4 / 3;min-height:0;max-height:none;cursor:pointer;user-select:none;touch-action:pan-y}
.frame img{display:block;object-fit:cover}
.about h2{font-size:clamp(48px,9vw,126px);letter-spacing:.16em;font-weight:400;line-height:1.1}
@media(max-width:760px){.service{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch}.frame{height:auto;max-height:none;aspect-ratio:4 / 3}.about h2{font-size:clamp(40px,11vw,76px);letter-spacing:.14em}}
/* Osio kerrallaan: liikkeen hoitaa script.js, ei selaimen vapaa snap-vieritys. */
html{scroll-snap-type:none;overscroll-behavior-y:contain}
.hero,.service,.about,.contact{scroll-snap-align:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Liukuvan osion animointi tehdään JavaScriptillä; ei CSS smooth -kaksoisanimaatiota. */
html{scroll-behavior:auto}

/* v5: aito, näkyvä liuku kokonaisilla paneeleilla. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:relative}
.kaikai-track{position:fixed;inset:0;width:100%;will-change:transform;transition:transform 780ms cubic-bezier(.22,.8,.22,1)}
.kaikai-panel{height:100dvh!important;min-height:0!important;width:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-align:none!important}
.kaikai-panel::-webkit-scrollbar{display:none}
.kaikai-track main{max-width:none;margin:0;display:contents}
.kaikai-panel.service{padding-top:75px;padding-bottom:75px}
.kaikai-panel.about,.kaikai-panel.contact{display:flex;flex-direction:column;justify-content:center}
.kaikai-panel.hero{min-height:0}
body>header{position:fixed;z-index:20;pointer-events:none}
body>header a{pointer-events:auto}
.kaikai-panel footer{margin-top:40px}
@media(max-width:760px){.kaikai-panel.service{justify-content:center;padding-top:70px;padding-bottom:45px}.kaikai-panel .frame{max-height:34dvh;aspect-ratio:4/3}.kaikai-panel .copy{margin-bottom:16px}.kaikai-panel .number{margin-bottom:14px}.kaikai-panel h2{margin-bottom:12px}.kaikai-panel p{margin-top:0;margin-bottom:12px}.kaikai-panel.about,.kaikai-panel.contact{padding-top:80px;padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.kaikai-track{transition-duration:450ms}}

/* Material backgrounds, with the same light overlay as wood. */
#work-2{background-image:linear-gradient(rgba(246,243,236,.70),rgba(246,243,236,.70)),url("/assets/mineraalipinnoitteet-tausta.webp");background-size:cover;background-position:center center;}
#work-3{background-image:linear-gradient(rgba(246,243,236,.70),rgba(246,243,236,.70)),url("/assets/betonityot-tausta.webp");background-size:cover;background-position:center center;}

/* Kuvagalleriat */
.frame{overflow:hidden;padding:0!important;position:relative}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.about-gallery{width:min(100%,620px);margin-top:clamp(18px,3vh,34px)}
.about-gallery .frame{aspect-ratio:4/3;max-height:35dvh}
.about-gallery .controls{margin-top:9px}
.about{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
@media(max-width:760px){.about-gallery{margin-top:16px}.about-gallery .frame{max-height:32dvh}}

/* Rakentamisen tausta: CLT-rakenne ja kattoikkuna */
#work-4{background-image:linear-gradient(rgba(246,243,236,.76),rgba(246,243,236,.76)),url("/assets/rakentaminen-tausta.webp");background-size:cover;background-position:center 38%;}

/* KAIKAI introduction uses the same body typography as service descriptions. */
.about p{font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.75;letter-spacing:normal;font-weight:400;max-width:700px}

/* Gallery sizing fix: fill the content width on mobile, no height cap shrinking width. */
.kaikai-panel.service .gallery{width:100%;min-width:0;max-width:none;align-self:stretch}
.kaikai-panel.service .frame{width:100%;height:auto;max-height:none;aspect-ratio:4 / 3;margin-inline:auto}
.kaikai-panel.service .frame img{width:100%;height:100%;object-fit:cover}
.kaikai-panel.service .controls{width:100%;justify-content:flex-start}
@media(max-width:760px){
 .kaikai-panel.service .gallery{flex:0 0 auto;width:100%;max-width:100%}
 .kaikai-panel.service .frame{width:100%;max-height:none;aspect-ratio:4 / 3}
 .kaikai-panel.service{padding-left:6%;padding-right:6%}
}

/* Gallery framing: 4:3 desktop, 3:4 mobile; never crop source photos. */
.kaikai-panel.service .frame,
.about-gallery .frame{aspect-ratio:4 / 3;max-height:none;background:#e7e4dd!important}
.kaikai-panel.service .frame img,
.about-gallery .frame img{width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:760px){
 .kaikai-panel.service .frame,
 .about-gallery .frame{aspect-ratio:3 / 4;max-height:none}
 .about-gallery{width:100%;max-width:100%}
}