@import url("tokens.css");
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-brand);color:var(--ink);background:var(--cream);font-size:17px;line-height:1.55;padding-top:64px}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:600;color:var(--forest);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,8vw,64px);letter-spacing:-.025em}
h2{font-size:clamp(28px,5vw,40px);letter-spacing:-.015em}
h3{font-size:19px}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:64px 0;scroll-margin-top:64px}
.lead{font-size:18px;color:var(--moss-gray);margin-top:12px;max-width:560px}
.small{font-size:14px;color:var(--moss-gray)}
.sec-head{margin-bottom:28px}
.alt{background:var(--paper);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.card{background:var(--paper);border:1px solid var(--sand);border-radius:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--clay);color:#fff;text-decoration:none;font:600 17px/1 var(--font-brand);padding:0 26px;height:56px;border-radius:12px;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#a9542f}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--forest);border:1.5px solid var(--forest)}
.btn-ghost:hover{background:var(--paper)}
.btn:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* header */
header{position:fixed;top:0;left:0;right:0;height:64px;z-index:40;background:var(--cream);border-bottom:1px solid var(--sand)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.nav .logo img{width:140px;height:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none}
.nav ul a:hover,.nav ul a.on{color:var(--clay)}
.nav .btn{height:44px;font-size:15px;padding:0 18px}

/* forest hero */
.hero{background:var(--forest);color:var(--cream);position:relative;overflow:hidden;padding:56px 0 64px}
.hero h1{color:var(--cream)}
.hero .lead{color:var(--sage)}
.hero .bigmark{position:absolute;right:-60px;bottom:-30px;width:640px;aspect-ratio:4020/882;background:var(--deep-pine);-webkit-mask:url(../img/mikko-wordmark.svg) no-repeat center/contain;mask:url(../img/mikko-wordmark.svg) no-repeat center/contain;pointer-events:none}
.hero .wrap{position:relative}

/* inputs */
label{display:block;font-size:15px;font-weight:500;color:var(--forest);margin-bottom:6px}
label span{font-weight:400;color:var(--moss-gray)}
input{width:100%;font:17px var(--font-brand);padding:0 16px;height:56px;border:1.5px solid var(--sand);border-radius:12px;background:#fff;color:var(--ink)}
input:focus{border-color:var(--forest);outline:none}
.err{color:var(--problem-text);font-size:14px;margin-top:6px;display:none}
.bad .err{display:block}
.bad input{border-color:var(--problem)}

/* badges + audit rows */
.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.b-problem{background:var(--problem-bg);color:var(--problem-text)}
.b-warning{background:var(--warning-bg);color:var(--warning-text)}
.b-good{background:var(--good-bg);color:var(--good-text)}
.audit{padding:8px 20px 20px}
.audit .top{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 12px;border-bottom:1px solid var(--sand)}
.audit .top b{color:var(--forest);font-size:18px}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--moss-gray)}
.audit details{border-bottom:1px solid var(--sand)}
.audit summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;cursor:pointer;font-size:16px}
.audit summary::-webkit-details-marker{display:none}
.audit summary .r{display:flex;align-items:center;gap:10px}
.audit summary .r:after{content:"";width:8px;height:8px;border-right:2px solid var(--moss-gray);border-bottom:2px solid var(--moss-gray);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.audit details[open] summary .r:after{transform:rotate(-135deg)}
.audit details p{padding:0 0 14px;font-size:15px;color:var(--moss-gray)}
.audit .foot{margin-top:14px;background:var(--cream);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.audit .foot b{color:var(--forest)}

/* swipe cards (phone) / grid (laptop) */
.swipe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{padding:24px;display:flex;flex-direction:column;gap:8px}
.svc .ico{width:44px;height:44px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--clay);margin-bottom:6px}
.svc .ico svg{width:22px;height:22px}
.svc p{color:var(--moss-gray);font-size:16px}
.price{font-weight:600;color:var(--forest);margin-top:auto;padding-top:8px;white-space:nowrap}
.price small{font-weight:400;color:var(--moss-gray);font-size:14px}
.dots{display:none;justify-content:center;gap:6px;margin-top:16px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--sand);transition:background .2s,width .2s}
.dots i.on{background:var(--clay);width:20px;border-radius:4px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{counter-increment:s}
.step:before{content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--forest);color:var(--cream);font-weight:600;margin-bottom:14px}
.step p{color:var(--moss-gray);margin-top:6px}

/* faq */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--sand)}
.faq details:first-child{border-top:1px solid var(--sand)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:600;color:var(--forest);font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:13px;font-size:26px;font-weight:400;color:var(--clay);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--moss-gray)}

.record{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.record .card{padding:22px}
.record .card p{color:var(--moss-gray);margin-top:6px;font-size:16px}

footer{background:var(--forest);color:var(--sage);padding:32px 0;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer img{width:130px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--cream);text-decoration:none}

.preview-tag{position:fixed;left:12px;top:72px;z-index:30;background:#3b2fb5;color:#fff;font:600 12px system-ui;padding:6px 10px;border-radius:999px;text-decoration:none;opacity:.9}

@media (max-width:860px){
  section{padding:52px 0}
  .nav ul,.nav .btn.hide-m{display:none}
  .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 84%;scroll-snap-align:center}
  .dots{display:flex}
  .steps,.record{grid-template-columns:1fr;gap:20px}
  .hero .bigmark{width:380px;right:-50px;bottom:-14px}
}

/* ---------- Door 1: main site ---------- */
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn-light{background:transparent;color:var(--cream);border:1.5px solid var(--sage)}
.btn-light:hover{background:var(--deep-pine)}
.hero .note{margin-top:18px;font-size:14px;color:var(--sage)}
.hero .note a{color:var(--cream)}
.svc.feat{background:var(--forest);border-color:var(--forest)}
.svc.feat h3,.svc.feat .price{color:var(--cream)}
.svc.feat p,.svc.feat .price small{color:var(--sage)}
.svc.feat .ico{background:var(--deep-pine)}
.pill{align-self:flex-start;font-size:12px;font-weight:600;background:var(--clay);color:#fff;border-radius:999px;padding:3px 10px}
.swipe-hint{display:none;font-size:14px;color:var(--moss-gray);margin:-16px 0 16px}
.sample-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.promises{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px;color:var(--forest);font-weight:500}
.promises span:before{content:"✓";color:var(--good);margin-right:8px;font-weight:600}

/* contact */
.contact{background:var(--forest)}
.contact h2{color:var(--cream)}
.contact .lead{color:var(--sage)}
.contact .lead a{color:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form{background:var(--paper);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.form textarea{width:100%;font:17px var(--font-brand);padding:14px 16px;min-height:96px;border:1.5px solid var(--sand);border-radius:12px;background:#fff;color:var(--ink);resize:vertical}
.form textarea:focus{border-color:var(--forest);outline:none}
.check-row{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border-radius:12px;padding:14px;cursor:pointer;font-size:16px;color:var(--forest);font-weight:500;margin:0}
.check-row input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--forest)}
.check-row small{display:block;font-weight:400;color:var(--moss-gray);font-size:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%}
.done{text-align:center;padding:20px 6px}
.done h3{font-size:24px;margin-bottom:8px}
.done[hidden],.form [hidden]{display:none}

/* phone tab bar: always shows where you are */
.tabbar{display:none}
@media (max-width:860px){
  body.has-tabs{padding-bottom:76px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--sand);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:11px;font-weight:500;color:var(--moss-gray);padding:6px 0;border-radius:12px;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:22px;height:22px}
  .tabbar a.on{color:var(--forest);background:var(--cream)}
  .tabbar a.cta{color:#fff;background:var(--clay)}
  .tabbar a.cta.on{background:#a9542f}
  .swipe-hint{display:block}
  .sample-grid,.contact-grid{grid-template-columns:1fr;gap:28px}
  .hero .actions .btn{flex:1 1 100%}
}

/* bridge: back to your audit */
.bridge{position:fixed;top:64px;left:0;right:0;z-index:35;background:var(--clay);color:#fff}
.bridge[hidden]{display:none}
.bridge .wrap{display:flex;align-items:center;gap:12px;height:48px}
.bridge a{color:#fff;font-weight:600;text-decoration:none;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bridge a span{font-weight:400;opacity:.9}
.bridge button{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;width:40px;height:40px;cursor:pointer;flex:none}
body.bridged{padding-top:112px}
body.bridged section{scroll-margin-top:112px}

/* ---------- Door 2: audit page ---------- */
body.audit-page{padding-bottom:96px}
.a-hero{padding:36px 0 28px}
.a-hero .tag{display:block;margin-bottom:10px}
.a-hero h1{font-size:clamp(32px,6vw,52px)}
.score{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.score div{background:var(--paper);border:1px solid var(--sand);border-radius:12px;padding:12px 16px;min-width:120px}
.score b{display:block;font-size:24px;color:var(--forest)}
.score span{font-size:13px;color:var(--moss-gray)}
.finds{display:flex;flex-direction:column;gap:14px;max-width:760px}
.find{padding:20px;display:flex;flex-direction:column;gap:10px}
.find .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.find h3{font-size:20px}
.find .what{color:var(--ink)}
.find .cost{background:var(--problem-bg);color:var(--problem-text);border-radius:10px;padding:10px 12px;font-size:15px}
.find .cost.warn{background:var(--warning-bg);color:var(--warning-text)}
.find .fixrow{display:flex;align-items:center;gap:12px;border-top:1px solid var(--sand);padding-top:12px;margin-top:2px;cursor:pointer}
.find .fixrow input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--clay)}
.find .fixrow span{flex:1;font-weight:500;color:var(--forest)}
.find .fixrow b{color:var(--forest);white-space:nowrap}
.find.good .what{color:var(--moss-gray)}
.goods{margin-top:28px;max-width:760px}
.goods h3{margin-bottom:10px}
.goods li{margin:6px 0;color:var(--moss-gray)}
.goods ul{padding-left:20px;margin:0}
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--sand);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.paybar .wrap{display:flex;align-items:center;gap:14px}
.paybar .sum{flex:1;min-width:0}
.paybar .sum b{display:block;font-size:20px;color:var(--forest)}
.paybar .sum span{font-size:13px;color:var(--moss-gray)}
.paybar .save{color:var(--good-text);font-weight:600}
.paybar .btn{flex:none}
.sheet-bg{position:fixed;inset:0;background:rgba(30,36,32,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg[hidden]{display:none}
.sheet{background:var(--cream);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto}
.sheet .x{float:right;background:var(--paper);border:1px solid var(--sand);border-radius:999px;width:40px;height:40px;font-size:22px;cursor:pointer;color:var(--forest)}
.sheet h2{font-size:26px;margin:4px 0 6px}
.sheet .recap{background:var(--paper);border:1px solid var(--sand);border-radius:12px;padding:12px 14px;margin:14px 0;font-size:15px}
.sheet .recap li{margin:2px 0}
.sheet .recap ul{margin:6px 0 0;padding-left:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips label{margin:0}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;border:1.5px solid var(--sand);background:#fff;border-radius:999px;padding:9px 16px;font-size:15px;color:var(--forest);cursor:pointer}
.chips input:checked+span{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.chips input:focus-visible+span{outline:3px solid var(--clay);outline-offset:2px}
.ask{margin-top:28px;max-width:760px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (min-width:861px){
  .sheet-bg{align-items:center}
  .sheet{border-radius:20px}
}
.mt24{margin-top:24px}.mt10{margin-top:10px}
.rcard{padding:22px}
.rcard p{color:var(--moss-gray);margin-top:6px;font-size:16px}
.plain{border:0;padding:0;margin-left:0;margin-right:0}
.full{width:100%}
.score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:520px}
.score div{min-width:0}
@media (max-width:860px){.score div{padding:10px 12px}.score b{font-size:20px}.score span{font-size:12px;display:block;line-height:1.3}}
@keyframes arrive{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
.arrive .wrap{animation:arrive .28s ease-out}
h2:focus{outline:none}
.sample-bar{position:fixed;top:64px;left:0;right:0;z-index:35;background:var(--forest);color:var(--cream);font-size:14px}
.sample-bar[hidden]{display:none}
.sample-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding-top:6px;padding-bottom:6px}
.sample-bar a{color:var(--cream);font-weight:600;white-space:nowrap}
body.is-sample{padding-top:108px}

/* round 3: hero card, why strip, before/after, stats */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.live{padding:6px 20px 18px;color:var(--ink);box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
.ltop{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 10px;border-bottom:1px solid var(--sand)}
.ltop b{color:var(--forest)}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--sand);font-size:15px}
.lfoot{margin-top:12px;background:var(--cream);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;font-size:15px}
.lfoot b{color:var(--forest)}
/* rows tick in one by one; without JS (or if timers stall) they're simply visible */
.live.pre .lrow,.live.pre .lfoot{opacity:0;transform:translateY(6px);transition:opacity .35s ease-out,transform .35s ease-out}
.live.pre .lrow .badge{opacity:0;transform:scale(.7);transition:opacity .3s .15s,transform .3s .15s cubic-bezier(.3,1.5,.6,1)}
.live.pre .on,.live.pre .on .badge{opacity:1;transform:none}

.why{padding:28px 0;background:var(--paper);border-bottom:1px solid var(--sand)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why h3{font-size:17px;display:flex;align-items:center;gap:8px}
.why h3:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none}
.why p{font-size:15px;color:var(--moss-gray);margin-top:4px}

.ba{margin-top:24px;background:var(--paper);border:1px solid var(--sand);border-radius:14px;padding:16px 18px}
.ba-title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss-gray);margin-bottom:6px}
.ba-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--sand);font-size:15px}
.ba-row:first-of-type{border-top:0}
.ba-row s{color:var(--problem-text);text-decoration-thickness:1.5px}
.ba-row b{color:var(--good-text)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stats div{border-left:3px solid var(--clay);padding:4px 0 4px 14px}
.stats b{display:block;font-size:30px;color:var(--forest);line-height:1.1}
.stats span{font-size:15px;color:var(--moss-gray)}
.proof{grid-template-columns:repeat(3,1fr)}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .why-grid{grid-template-columns:1fr 1fr;gap:18px 16px}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .stats div{padding-left:10px}
  .stats b{font-size:22px}
  .stats span{font-size:13px;display:block;line-height:1.3}
  .ba-row{grid-template-columns:1fr auto auto;gap:10px;font-size:14px}
}

/* no stranded last words: even lines on headings, smarter breaks on body text */
h1,h2,h3,summary,.stats span,.why h3{text-wrap:balance}
p,li,label,.lrow span,.ba-row span{text-wrap:pretty}

/* audit finding: problem, cost, fix + price; details behind a tap */
.find h3{font-size:20px}
.find .cost{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:500}
.find .cost span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.find .more summary{list-style:none;cursor:pointer;font-size:15px;color:var(--moss-gray);display:inline-flex;align-items:center;gap:8px;padding:2px 0}
.find .more summary::-webkit-details-marker{display:none}
.find .more summary:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.find .more[open] summary:after{transform:rotate(-135deg)}
.find .more p{font-size:15px;color:var(--moss-gray);margin-top:6px}
.proof{grid-template-columns:repeat(4,1fr)}
.find .cost{display:block}
.find .cost span{display:block;margin-bottom:2px}
@media (min-width:861px){
  #services .swipe{grid-template-columns:1.15fr 1fr 1fr}
  #services .svc.feat{grid-row:span 2;justify-content:flex-start}
  #services .svc.feat h3{font-size:26px}
  #services .svc.feat p{font-size:17px}
}
/* audit page reads like a one-page document: one centered column, total bar aligned with it */
body.audit-page .wrap{max-width:800px}
body.audit-page .finds,body.audit-page .goods,body.audit-page .ask{max-width:none}
.send-err{color:var(--problem-text);background:var(--problem-bg);border-radius:10px;padding:10px 12px;font-size:15px}
.send-err[hidden]{display:none}
.send-err a{color:inherit;font-weight:600}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}