:root{--ink:#172b3b;--muted:#586775;--blue:#30576b;--line:#dce2e5;--paper:#fafbfb;--soft:#edf2f4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-underline-offset:4px}button{font:inherit}img{max-width:100%;display:block}p,h1,h2,h3{margin:0}p{color:var(--muted)}h2{font-size:29px;line-height:1.25;letter-spacing:-.7px;font-weight:600}h3{font-size:17px;line-height:1.4;font-weight:600}.wrap{max-width:1080px;margin:auto;padding:0 32px}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:30}.skip:focus{top:0}header{background:rgba(250,251,251,.97);position:sticky;top:0;border-bottom:1px solid var(--line);z-index:5}.nav{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:24px}.brand{font-weight:600;text-decoration:none;letter-spacing:-.3px}.navlinks{display:flex;gap:25px;flex-wrap:wrap}.navlinks a{font-size:13px;color:var(--muted);text-decoration:none}.navlinks a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:1fr 248px;gap:68px;align-items:center;padding-top:48px;padding-bottom:48px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--blue);margin-bottom:13px}.hero h1{font-size:clamp(42px,5.4vw,68px);font-weight:500;line-height:1.1;letter-spacing:-2.8px;margin-bottom:22px}.hero p.lead{max-width:540px;font-size:17px;line-height:1.8}.portrait{width:248px;height:302px;object-fit:cover;object-position:50% 28%;border-radius:5px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border:1px solid var(--line);border-radius:3px;text-decoration:none;font-size:13px;background:white}.button.primary{background:var(--ink);border-color:var(--ink);color:white}.button:hover{box-shadow:0 2px 8px #172b3b15}.section{border-top:1px solid var(--line);padding:36px 0}.split{display:grid;grid-template-columns:220px 1fr;gap:44px}.copy p+p{margin-top:12px}.career{margin-top:23px;padding:19px 22px;border-left:2px solid #7b99a9;background:var(--soft)}.career h3{margin-bottom:7px}.career p{font-size:14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}.education+.education{margin-top:19px}.date,.role{font-size:13px}.date{color:#6e7b85;margin-top:3px}.skills{margin:0;padding:0;list-style:none}.skills li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.skills li:first-child{padding-top:0}.job{display:grid;grid-template-columns:225px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--line)}.job:first-child{padding-top:0}.job:last-child{padding-bottom:0;border:0}.job p{font-size:14px}.job .date{font-size:12px}.project{background:white;border:1px solid var(--line);border-radius:4px;padding:23px}.project h3{font-size:21px;margin-bottom:7px}.project .small{font-size:12px;color:var(--blue);margin-bottom:8px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}.project-grid h4{font-size:12px;margin:0 0 6px;text-transform:uppercase;letter-spacing:1px}.project-grid p{font-size:14px}.creative-intro{margin-bottom:16px}details{border:1px solid var(--line);border-radius:4px;background:white}summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;padding:17px}summary::-webkit-details-marker{display:none}.folder{width:43px;height:32px;background:#e2eaee;border:1px solid #b7c8d2;border-radius:3px;position:relative;flex-shrink:0}.folder:before{content:"";position:absolute;left:-1px;top:-7px;width:21px;height:8px;background:#e2eaee;border:1px solid #b7c8d2;border-bottom:0;border-radius:3px 3px 0 0}.folder-title{font-weight:600;font-size:14px;line-height:1.4}.folder-title small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:4px}.plus{margin-left:auto;font-size:23px;font-weight:400}details[open] .plus{transform:rotate(45deg)}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 17px 17px}.art{text-decoration:none;min-width:0}.art img{width:100%;height:125px;object-fit:contain;background:var(--soft);border-radius:2px}.art span{font-size:12px;display:block;line-height:1.5;margin-top:7px}.art small{font-size:10px;display:block;color:var(--muted)}.contact{display:grid;grid-template-columns:1fr 1fr;gap:32px}.contact a{overflow-wrap:anywhere}.contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.refs{font-size:12px;margin-top:18px;color:var(--muted)}footer{padding:20px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer .wrap{display:flex;justify-content:space-between;gap:12px}dialog{border:0;padding:16px;border-radius:6px;background:white;max-width:min(94vw,900px);max-height:94vh}dialog::backdrop{background:#0b1728d9}dialog img{max-height:76vh;max-width:100%;width:auto;margin:auto;object-fit:contain}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.close{border:1px solid var(--line);border-radius:3px;background:white;cursor:pointer;min-width:44px;min-height:44px}.dialog-title{font-size:13px}a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #4c819c;outline-offset:4px}
@media(max-width:850px){.split{grid-template-columns:170px 1fr;gap:26px}.hero{gap:32px}.job{grid-template-columns:1fr;gap:9px}.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.wrap{padding:0 21px}.nav{min-height:88px;gap:8px;flex-direction:column;align-items:flex-start;justify-content:center}.navlinks{gap:19px}.navlinks a{font-size:12px}.hero{grid-template-columns:1fr 110px;gap:18px;padding-top:29px;padding-bottom:31px;align-items:start}.hero h1{font-size:39px;letter-spacing:-1.5px;margin-bottom:16px}.eyebrow{font-size:9px;letter-spacing:1.3px}.hero p.lead{font-size:14px;line-height:1.7}.portrait{width:110px;height:145px;margin-top:5px}.actions{gap:8px;margin-top:20px}.button{padding:9px 12px;font-size:12px}.split{grid-template-columns:1fr;gap:20px}.section{padding:28px 0}h2{font-size:25px}.two{gap:24px}.career{padding:15px 17px}.project{padding:18px}.project-grid{gap:18px}.gallery{grid-template-columns:repeat(2,1fr)}.art img{height:145px}.contact{grid-template-columns:1fr;gap:18px}.folder-title{font-size:12px}summary{padding:15px;gap:12px}}
@media(max-width:380px){.hero{grid-template-columns:1fr}.portrait{grid-row:1;width:100px;height:120px}.two,.project-grid{grid-template-columns:1fr}.navlinks{gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Visual identity: editorial navy, cobalt details and a creative signature. */
:root{--ink:#102b42;--blue:#275bd9;--muted:#526776;--paper:#f7f9fc;--soft:#edf2fb;--line:#dce4ed}
body{background:radial-gradient(ellipse at 95% 12%,#e5edfc 0,transparent 32%),var(--paper);font-family:"Avenir Next","Segoe UI",Arial,sans-serif}
.wrap{max-width:1160px}.nav{min-height:80px}.brand{display:flex;align-items:center;gap:12px}.monogram{background:var(--ink);color:white;width:43px;height:43px;display:grid;place-content:center;position:relative;font-size:16px;letter-spacing:-1px;border-radius:12px 3px 12px 3px}.monogram span{position:absolute;bottom:6px;right:6px;color:#77acff}.navlinks a{position:relative}.navlinks a:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--blue);transition:width .2s}.navlinks a:hover:after{width:100%}
.hero{grid-template-columns:1fr 340px;gap:65px;padding-top:58px;padding-bottom:58px;min-height:540px}.hero h1{font-weight:650;font-size:clamp(58px,7vw,88px);letter-spacing:-4px;line-height:1.02;margin-bottom:21px}.hero h1>span{color:var(--blue)}.name-dot{color:#6b96a5}.eyebrow{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:2px}.status-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 5px #275bd90c}.hero p.lead{max-width:510px;font-size:16px}.button{border-radius:6px;gap:8px;padding:11px 20px;transition:transform .2s,box-shadow .2s}.button.primary{background:var(--blue);border-color:var(--blue);box-shadow:0 6px 20px #275bd922}.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #102b4215}.actions .primary:after{content:"↗";font-size:18px}
.portrait-stage{position:relative;padding:16px 17px 28px 12px}.portrait-frame{position:relative;overflow:hidden;border-radius:70px 8px 70px 8px;box-shadow:0 18px 45px #173c5520;transform:rotate(2deg);border:5px solid white}.portrait{width:100%;height:357px;object-position:50% 28%;border-radius:0;margin:0}.portrait-frame:after{content:"";position:absolute;bottom:0;height:100px;width:100%;background:linear-gradient(transparent,#061e38cc);pointer-events:none}.portrait-caption{position:absolute;bottom:23px;left:24px;color:white;z-index:1;font-size:9px;letter-spacing:1.4px}.orbit{position:absolute;border:1px solid #9bb9e5;border-radius:50%;pointer-events:none}.orbit-one{width:325px;height:325px;top:0;right:-8px}.orbit-two{width:260px;height:260px;bottom:0;left:-20px}.hero-spark{position:absolute;right:-12px;top:-21px;font-size:72px;line-height:1;color:var(--blue);z-index:2}.creative-note{position:absolute;left:-45px;bottom:4px;display:flex;gap:11px;align-items:center;background:white;padding:14px 18px;box-shadow:0 8px 30px #102b4212;border:1px solid var(--line);border-radius:8px;z-index:2;font-size:12px;line-height:1.6;transform:rotate(-3deg)}.creative-note svg{width:30px;height:30px;color:var(--blue)}.creative-note strong{font-weight:600}.stage-dots{position:absolute;bottom:-12px;right:0;width:70px;height:50px;background-image:radial-gradient(#5a86b6 1.5px,transparent 1.5px);background-size:11px 11px;z-index:-1}
.intro-strip{display:flex;gap:22px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:12px;letter-spacing:.4px}.intro-strip i{font-style:normal;color:#5b81bd}.intro-strip a{margin-left:auto;font-size:11px;text-decoration:none;color:var(--blue)}.intro-strip+.section{border-top:0}.section{padding:42px 0}.split{grid-template-columns:210px 1fr;gap:48px}.section-heading{position:relative;align-self:start}.section-icon{display:inline-flex;width:42px;height:42px;border:1px solid #cfdbed;border-radius:12px;align-items:center;justify-content:center;background:#edf2fb;color:var(--blue);margin-bottom:14px}.section-icon svg{width:22px;height:22px}.section-number{font-size:10px;color:#6f8295;letter-spacing:1px;margin-left:12px}h2{font-size:29px;letter-spacing:-.8px}.career{border:1px solid #d4e0f2;border-left:3px solid var(--blue);border-radius:0 10px 10px 0;background:linear-gradient(115deg,#edf2fc,#f8fbff);padding:20px 24px}.career h3{display:flex;align-items:center;gap:9px;color:var(--blue)}.career h3 svg{width:20px;height:20px}.education{position:relative;padding-left:19px;border-left:2px solid #c0d0e9}.education:before{content:"";position:absolute;width:8px;height:8px;left:-5px;top:6px;border-radius:50%;background:var(--blue)}.skills li{padding:10px 0 10px 22px;position:relative}.skills li:before{content:"↗";position:absolute;left:0;color:var(--blue)}.skills li:first-child{padding-top:0}
.job{position:relative;border-bottom:0;border-left:1px solid #cad8e9;padding:0 0 27px 25px;grid-template-columns:205px 1fr;gap:24px;margin-left:5px}.job:before{content:"";width:9px;height:9px;border-radius:50%;position:absolute;top:7px;left:-5px;background:var(--blue);box-shadow:0 0 0 4px var(--paper)}.job:last-child{border-left:1px solid #cad8e9;padding-left:25px}.job h3{font-size:16px}.job .role{color:#315778}.job .date{font-size:11px;margin-top:6px}.project{border-radius:12px;padding:27px;background:linear-gradient(140deg,#fff 65%,#ecf2fb);position:relative;overflow:hidden;box-shadow:0 7px 25px #16395806}.project-brand{display:flex;gap:14px;align-items:center;margin:13px 0}.project-brand h3{margin:0}.lumeo-mark{width:50px;height:50px;border-radius:12px;background:var(--ink);color:white;position:relative;display:grid;place-content:center;font-size:31px;font-weight:600}.lumeo-mark span{position:absolute;right:8px;top:0;color:#92b9ff;font-size:25px}.project-grid h4{color:var(--blue)}
details{border-radius:12px;box-shadow:0 6px 22px #14365008;overflow:hidden}summary{padding:22px;min-height:110px}.folder-preview{display:block;position:relative;width:96px;height:71px;flex-shrink:0}.folder-preview img{position:absolute;width:54px;height:66px;object-fit:cover;border:3px solid white;border-radius:5px;box-shadow:0 3px 8px #102b4225}.folder-preview img:first-child{transform:rotate(-10deg);left:3px;top:0}.folder-preview img:last-child{transform:rotate(9deg);left:35px;top:4px}.plus{color:var(--blue);width:30px;text-align:center}.gallery{gap:14px;padding:0 22px 22px}.art img{border-radius:5px;transition:transform .25s}.art:hover img{transform:translateY(-4px)}.art small{color:var(--blue)}.contact-list a{font-size:14px}.contact-list a:before{content:"↗";margin-right:9px;color:var(--blue)}.refs{padding-top:15px;border-top:1px solid var(--line)}footer{background:var(--ink);color:#c9d9e8}.section{animation:arrive .6s ease both}@keyframes arrive{from{opacity:.7;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.hero{grid-template-columns:1fr 280px;gap:35px}.portrait{height:325px}.orbit-one{width:270px;height:270px}.creative-note{left:-18px}.hero-spark{font-size:57px}.split{grid-template-columns:170px 1fr;gap:28px}.job{grid-template-columns:1fr;gap:8px}.intro-strip{gap:14px}.hero h1{font-size:70px}}
@media(max-width:620px){.nav{min-height:100px;gap:10px;padding-top:12px;padding-bottom:12px;align-items:flex-start}.brand{gap:9px}.monogram{width:33px;height:33px;font-size:13px;border-radius:9px 3px}.navlinks{gap:20px}.hero{grid-template-columns:1fr;gap:30px;padding-top:35px;padding-bottom:37px;min-height:0}.hero h1{font-size:66px;letter-spacing:-3px;margin-bottom:17px}.hero p.lead{font-size:15px}.portrait-stage{width:260px;justify-self:center;padding:10px 12px 25px;margin:0 0 10px}.portrait{width:100%;height:270px}.orbit-one{width:250px;height:250px}.orbit-two{width:205px;height:205px}.portrait-frame{border-radius:50px 6px 50px 6px}.hero-spark{right:-10px;top:-17px;font-size:55px}.creative-note{left:-15px;font-size:11px;padding:11px 13px}.portrait-caption{font-size:7px;left:14px;bottom:19px}.intro-strip{gap:11px;justify-content:space-between;font-size:10px;flex-wrap:wrap}.intro-strip a{width:100%;margin:2px 0 0;font-size:11px}.split{grid-template-columns:1fr;gap:23px}.section{padding:31px 0}.section-heading{display:flex;align-items:center;gap:10px}.section-icon{width:34px;height:34px;margin:0;border-radius:10px}.section-icon svg{width:18px;height:18px}.section-heading h2{font-size:25px}.section-number{order:3;margin-left:auto}.career{padding:17px 19px}.job{padding-left:20px}.job:last-child{padding-left:20px}.project{padding:21px}.folder-preview{width:78px}.folder-preview img{width:48px;height:59px}.folder-preview img:last-child{left:25px}summary{padding:17px;gap:12px}.gallery{padding:0 17px 17px}.two{gap:19px}.contact{gap:16px}.hero .eyebrow{font-size:10px}.actions{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.section{animation:none}*,*:before,*:after{transition:none!important}}

/* Section surfaces and a clear closing panel. Header and hero unchanged. */
#kokemus .job{background:#fff;border:1px solid #d9e3ee;border-left:3px solid #83a6d8;border-radius:0 9px 9px 0;padding:20px 22px;margin:0 0 13px 5px;box-shadow:0 3px 12px #102b4204;gap:22px}
#kokemus .job:nth-child(even){background:#edf2f8}
#kokemus .job:before{left:-7px;top:26px;background:#3263a2;box-shadow:0 0 0 4px var(--paper)}
#kokemus .job:last-child{margin-bottom:0}
#kokemus .job h3{font-size:17px;margin-bottom:3px}
#kokemus .job .role{font-size:13px;font-weight:500}
#kokemus .job .date{display:inline-block;background:#e1eaf5;color:#385778;padding:4px 8px;border-radius:4px;font-size:11px;line-height:1.6;margin-top:9px}
#luovat{position:relative;background:#e8f0fc;box-shadow:0 0 0 100vmax #e8f0fc;clip-path:inset(0 -100vmax);border-top:1px solid #d2def0;padding-top:40px;padding-bottom:42px}
#luovat .section-icon{background:#f7faff;border-color:#bfd0e8}
#luovat .creative-intro{color:#425a70}
#luovat details{border-color:#c9d8ed;box-shadow:0 7px 24px #16365008}
#yhteys{background:#102b42;color:#f1f6fc;box-shadow:0 0 0 100vmax #102b42;clip-path:inset(0 -100vmax);border:0;padding-top:46px;padding-bottom:39px}
#yhteys h2,#yhteys h3{color:#f5f8ff}
#yhteys p{color:#c2d2e1}
#yhteys .section-icon{color:#afceff;border-color:#426079;background:#203f58}
#yhteys .section-number{color:#a2b9ce}
#yhteys .contact-list a{color:#f2f7ff;text-decoration-color:#688aa8}
#yhteys .contact-list a:before{color:#92bcff}
#yhteys .contact-list a:hover{color:#b8d5ff}
#yhteys .refs{margin-top:26px;padding-top:22px;border-top:1px solid #39566e}
#yhteys .refs h3{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:15px}
#yhteys .ref-people{display:grid;grid-template-columns:1fr 1fr;gap:25px}
#yhteys .ref-person{font-size:15px;font-weight:600;color:#f2f7ff;margin-bottom:2px}
#yhteys .ref-company{font-size:13px;color:#b4cada}
#yhteys .ref-note{font-size:12px;color:#a9bfd1;margin-top:14px}
#yhteys a:focus-visible{outline-color:#bbd6ff}
footer{background:#0c2236;color:#a9bfd1;border-top:1px solid #294459}
@media(max-width:620px){
#kokemus .job{padding:17px 17px 18px 21px;gap:12px;margin-bottom:14px}
#kokemus .job:before{top:23px}
#kokemus .job .date{margin-top:7px}
#luovat{padding-top:31px;padding-bottom:32px}
#yhteys{padding-top:34px;padding-bottom:29px}
#yhteys .ref-people{gap:15px}
}
@media(max-width:360px){#yhteys .ref-people{grid-template-columns:1fr;gap:13px}}