/* Layout: a calm sage page with small playful touches (handwritten notes, pastel doodle icons, a taped polaroid); the hero pairs a serif headline with a stack of real result "notifications"; campaign stories live on their own pages. */
:root{
  color-scheme:light;
  --terra:#D5896F;
  --paper:#F8F1E7;
  --sheet:#FFFAF3;
  --ink:#1A1414;
  --muted:#6A5B55;
  --rule:#E9DACC;
  --accent:#D23B2F;
  --on-accent:#FFFFFF;
  --pop:#F7D7CD;
  --brown:#3B2519;
  --butter:#F2D79E;
  --sky:#C6D9E8;
  --mint:#CFE2C4;
  --on-pastel:#1A1414;
  --f-hand:"Caveat", "Bradley Hand", cursive;
  --band:#1A1414;
  --on-band:#F8F1E7;
  --band-muted:#C2B0A6;

  --f-display:"DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body:"DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1:.8125rem; --s0:1.0625rem; --s1:1.25rem; --s2:1.6rem;
  --s3:clamp(1.9rem, 3.6vw, 2.8rem);
  --s4:clamp(2.5rem, 6.4vw, 5.2rem);
  --wrap:1180px;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--s0); line-height:1.6; padding-inline:20px; -webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin-inline:auto}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.015em}
p{margin:0}
.eyebrow{font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
mark{background:var(--pop); color:#17201B; padding:0 .12em; border-radius:4px}

/* Nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; margin-inline:-20px; padding:14px 20px; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.logo{display:inline-flex; align-items:baseline; gap:.2em; font-size:1.75rem; text-decoration:none; line-height:1; white-space:nowrap}
.logo .word{font-family:"Gloock", Georgia, serif; color:var(--ink)}
.logo .studio{font-family:"Bodoni Moda", Georgia, serif; font-style:italic; font-weight:400; font-size:.8em; color:var(--accent)}
.logo .studio::after{content:""; display:inline-block; width:.17em; height:.17em; border-radius:50%; background:var(--accent); margin-left:.06em}
.nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.nav ul a{text-decoration:none; font-weight:500; font-size:.95rem}
.nav ul a:hover{color:var(--accent)}
.btn{display:inline-flex; align-items:center; gap:.5em; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:600; padding:.8em 1.3em; border-radius:999px; transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.nav .btn{padding:.55em 1.1em; font-size:.92rem}

/* Hero */
.hero{padding-block:clamp(48px,8vw,96px) clamp(48px,7vw,88px)}
.hero .wrap{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{font-size:var(--s4); margin-block:18px 24px}
.hero h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:var(--s1); max-width:34ch; color:var(--muted)}
.lede strong{color:var(--ink); font-weight:600}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

.feed{display:flex; flex-direction:column; gap:14px; position:relative}
.feed-head{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:var(--s-1); color:var(--muted); padding-inline:4px}
.note{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; background:var(--sheet); border:1px solid var(--rule); border-radius:18px; padding:16px 18px; box-shadow:0 10px 30px -18px rgba(23,32,27,.45); animation:drop .6s cubic-bezier(.2,.8,.2,1) both}
.note:nth-child(2){margin-left:24px; animation-delay:.12s}
.note:nth-child(3){margin-left:8px; animation-delay:.24s}
.note:nth-child(4){margin-left:32px; animation-delay:.36s}
@keyframes drop{from{transform:translateY(-10px)} to{transform:none}}
.note .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-family:var(--f-body); font-weight:600; font-size:1rem; background:var(--accent); color:var(--on-accent)}
.note:nth-child(3) .ic{background:var(--pop); color:#17201B}
.note .big{font-family:var(--f-display); font-size:1.45rem; line-height:1.1; font-variant-numeric:tabular-nums}
.note .small{font-size:.9rem; color:var(--muted); line-height:1.35}

/* Sections */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:24px 64px; align-items:end; margin-bottom:48px}
.sec-head h2{font-size:var(--s3); margin-top:12px}
.sec-head p{color:var(--muted); max-width:46ch}

/* Services */
.services{display:grid; grid-template-columns:repeat(3,1fr); border-top:1.5px solid var(--ink)}
.svc{padding:28px 28px 32px 0; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:12px}
.svc:not(:nth-child(3n+1)){padding-left:28px; border-left:1px solid var(--rule)}
.svc h3{font-size:var(--s2)}
.svc p{color:var(--muted)}
.svc ul{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:6px}
.svc li{font-family:var(--f-mono); font-size:.75rem; padding:.3em .7em; border:1px solid var(--rule); border-radius:999px; color:var(--ink)}

/* Who for */
.who{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.who div{background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius); padding:22px}
.who b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.15rem; margin-bottom:6px}
.who p{color:var(--muted); font-size:.98rem}

/* Process band */
.band{background:var(--band); color:var(--on-band); margin-inline:-20px; padding-inline:20px; border-radius:0}
.band .eyebrow, .band .sec-head p{color:var(--band-muted)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; list-style:none; margin:0; padding:0; counter-reset:step}
.steps li{counter-increment:step; padding:28px 24px 8px 0; border-top:1.5px solid var(--on-band); position:relative}
.steps li+li{padding-left:24px}
.steps li::before{content:counter(step, decimal-leading-zero); display:block; font-family:var(--f-mono); font-size:var(--s-1); color:var(--band-muted); margin-bottom:18px}
.steps h3{font-size:1.4rem; margin-bottom:10px}
.steps p{color:var(--band-muted); font-size:.98rem}

/* Cases */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.case{background:var(--sheet); border:1px solid var(--rule); border-radius:22px; overflow:hidden; display:flex; flex-direction:column}
.case img{width:100%; aspect-ratio:16/10; object-fit:cover}
.case .body{padding:26px 28px 30px; display:flex; flex-direction:column; gap:14px; flex:1}
.case h3{font-size:1.6rem}
.case .did{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.case .did li{font-family:var(--f-mono); font-size:.75rem; padding:.3em .7em; border:1px solid var(--rule); border-radius:999px}
.case p{color:var(--muted)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; padding-top:10px}
.stats div{border-top:1.5px solid var(--ink); padding-top:10px}
.stats b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.55rem; font-variant-numeric:tabular-nums; line-height:1.1}
.stats span{font-size:.82rem; color:var(--muted); line-height:1.3; display:block; margin-top:4px}
.also{margin-top:28px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; border:1.5px dashed var(--rule); border-radius:var(--radius); padding:20px 24px}
.also p{flex:1 1 320px; color:var(--muted)}
.also strong{color:var(--ink)}

/* About */
.about .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:center}
.portrait{position:relative; max-width:420px}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px}
.portrait .tag{position:absolute; right:-14px; bottom:24px; background:var(--pop); color:#17201B; font-family:var(--f-mono); font-size:.8rem; padding:.55em .9em; border-radius:999px; transform:rotate(-4deg)}
.about h2{font-size:var(--s3); margin-block:12px 22px}
.about p+p{margin-top:14px}
.about .txt p{max-width:58ch}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:26px 28px; margin:32px 0 0; padding-top:26px; border-top:1.5px solid var(--ink); max-width:560px}
.facts div{display:grid; grid-template-columns:42px 1fr; column-gap:14px; align-items:center}
.facts .fi{grid-row:span 2; width:42px; height:42px; border-radius:50%; background:var(--pop); color:#17201B; display:grid; place-items:center}
.facts div:nth-child(even) .fi{background:var(--accent); color:var(--on-accent)}
.facts .fi svg{width:21px; height:21px}
.facts dt{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.facts dd{margin:0; font-family:var(--f-display); font-size:1.12rem; line-height:1.25}
@media (max-width:440px){.facts{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; font-family:var(--f-display); font-weight:400; font-size:1.2rem; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--accent); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding-bottom:22px; color:var(--muted); max-width:62ch}

/* Contact */
.contact{background:var(--accent); color:var(--on-accent); border-radius:28px; padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end}
.contact h2{font-size:var(--s4)}
.contact p{margin-top:18px; max-width:40ch; opacity:.9; font-size:var(--s1)}
.contact ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.contact a{display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; padding:16px 20px; border-radius:16px; background:color-mix(in srgb, var(--on-accent) 12%, transparent); font-weight:600; overflow-wrap:anywhere; transition:background .15s}
.contact a:hover{background:color-mix(in srgb, var(--on-accent) 22%, transparent)}
.contact a small{font-family:var(--f-mono); font-weight:400; font-size:.75rem; opacity:.75; text-transform:uppercase; letter-spacing:.08em; flex:none}


/* Packages */
.packs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pack{background:var(--sheet); border:1px solid var(--rule); border-radius:22px; padding:28px 26px; display:flex; flex-direction:column; gap:14px}
.pack.main{border:1.5px solid var(--ink)}
.pack .kind{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pack h3{font-size:var(--s2)}
.pack p{color:var(--muted)}
.pack ul{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.pack li{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:.98rem}
.pack li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:.6em}
.pack .price{margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pack .price span{font-family:var(--f-display); font-size:1.15rem}
.pack .btn{padding:.6em 1.1em; font-size:.92rem}
@media (max-width:960px){ .packs{grid-template-columns:1fr} }
footer{padding-block:36px 48px; color:var(--muted); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}

a[x-apple-data-detectors]{color:inherit!important; text-decoration:none!important}

@media (max-width: 960px){
  .hero .wrap, .about .wrap, .contact{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .svc, .svc:not(:nth-child(3n+1)){padding:24px 20px 28px 0; border-left:0}
  .svc:nth-child(2n){padding-left:20px; border-left:1px solid var(--rule)}
  .who{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr; row-gap:28px}
  .steps li+li{padding-left:0}
  .steps li:nth-child(2n){padding-left:24px}
  .cases{grid-template-columns:1fr}
  .portrait{max-width:360px}
}
@media (max-width: 620px){
  .nav ul{display:none}
  .services, .who, .steps{grid-template-columns:1fr}
  .svc, .svc:nth-child(2n), .svc:not(:nth-child(3n+1)){padding:22px 0 26px; border-left:0}
  .steps li:nth-child(2n){padding-left:0}
  .note:nth-child(n){margin-left:0}
  .portrait .tag{right:12px}
}

/* ---------- Leikkisät yksityiskohdat ---------- */
.hand{font-family:var(--f-hand); font-weight:700; color:var(--accent); line-height:1.1}
.hero h1 em{position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:-2%; right:-2%; bottom:-.12em; height:.22em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 30 4, 55 18, 82 10 S 135 4, 160 11 S 190 12, 197 7' fill='none' stroke='%23C24E28' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.feed-note{display:flex; align-items:flex-end; gap:6px; justify-content:flex-end; margin:-6px 8px -4px 0; font-size:1.45rem; transform:rotate(-3deg)}
.feed-note svg{width:34px; height:34px; flex:none; transform:translateY(10px)}
.note .ic{background:var(--butter); color:var(--on-pastel)}
.note:nth-child(3) .ic{background:var(--sky); color:var(--on-pastel)}
.note:nth-child(4) .ic{background:var(--pop); color:var(--on-pastel)}
.note:nth-child(5) .ic{background:var(--mint); color:var(--on-pastel)}
.note{transition:transform .2s}
.note:hover{transform:rotate(-1deg) translateX(-4px)}

.dood{width:52px; height:52px; border-radius:46% 54% 42% 58% / 55% 45% 55% 45%; display:grid; place-items:center; color:var(--on-pastel); margin-bottom:2px}
.dood svg{width:26px; height:26px}
.svc:nth-child(6n+1) .dood{background:var(--butter)}
.svc:nth-child(6n+2) .dood{background:var(--pop)}
.svc:nth-child(6n+3) .dood{background:var(--sky)}
.svc:nth-child(6n+4) .dood{background:var(--mint)}
.svc:nth-child(6n+5) .dood{background:var(--pop)}
.svc:nth-child(6n+6) .dood{background:var(--butter)}
.svc .dood{transition:transform .25s}
.svc:hover .dood{transform:rotate(-8deg) scale(1.06)}

.pack .kind{display:inline-block; align-self:flex-start; padding:.3em .8em; border-radius:999px; background:var(--sky); color:var(--on-pastel)}
.pack.main .kind{background:var(--butter)}
.pack{transition:transform .2s}
.pack:hover{transform:translateY(-4px) rotate(-.4deg)}

.who div{border:0; color:var(--on-pastel)}
.who div:nth-child(1){background:var(--butter)}
.who div:nth-child(2){background:var(--sky)}
.who div:nth-child(3){background:var(--pop)}
.who div:nth-child(4){background:var(--mint)}
.who div p{color:var(--on-pastel); opacity:.78}

.steps li::before{font-family:var(--f-hand); font-size:1.5rem; font-weight:700; letter-spacing:0; color:var(--accent)}
.steps li::before{content:counter(step)"."}

.sec-head .hand{display:block; font-size:1.5rem; transform:rotate(-2deg); margin-top:10px}

/* Polaroid */
.polaroid{position:relative; background:#FFFFFF; padding:14px 14px 0; border-radius:4px; box-shadow:0 18px 40px -22px rgba(23,32,27,.55); transform:rotate(-2.5deg); max-width:400px}
.polaroid img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px}
.polaroid figcaption{font-family:var(--f-hand); font-weight:700; font-size:1.7rem; color:#17201B; text-align:center; padding:10px 0 14px}
.tape{position:absolute; top:-14px; left:50%; width:120px; height:32px; transform:translateX(-50%) rotate(3deg); background:color-mix(in srgb, var(--butter) 80%, transparent); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.contact h2 .spark{display:inline-block; color:var(--butter); transform:translateY(-.35em) rotate(12deg); font-size:.5em; margin-left:.1em}

/* Kampanjat etusivulla */
.cases .case{text-decoration:none; color:inherit; transition:transform .2s}
.cases .case:hover{transform:translateY(-4px)}
.cases .case .imgwrap{overflow:hidden}
.cases .case img{transition:transform .5s}
.cases .case:hover img{transform:scale(1.04)}
.case .more{margin-top:auto; padding-top:8px; font-weight:600; color:var(--accent); display:inline-flex; gap:.4em; align-items:center}
.case .more::after{content:"→"; transition:transform .2s}
.cases .case:hover .more::after{transform:translateX(4px)}
.case .mini-stats{display:flex; gap:10px; flex-wrap:wrap}
.case .mini-stats span{font-size:.85rem; font-weight:600; padding:.35em .85em; border-radius:999px; background:var(--butter); color:var(--on-pastel)}
.case .mini-stats span:nth-child(2){background:var(--sky)}

/* ---------- Kampanjasivut ---------- */
.back{display:inline-flex; gap:.4em; font-weight:600; text-decoration:none; color:var(--muted); font-size:.95rem}
.back:hover{color:var(--accent)}
.c-hero{padding-block:clamp(32px,5vw,56px) clamp(40px,6vw,72px)}
.c-hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center}
.c-hero h1{font-size:clamp(2.2rem,5vw,3.9rem); margin-block:16px 20px}
.c-hero .lede{font-size:var(--s1); color:var(--muted); max-width:44ch}
.c-hero .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; list-style:none; padding:0}
.c-hero .tags li{font-family:var(--f-mono); font-size:.75rem; padding:.3em .8em; border-radius:999px; background:var(--sheet); border:1px solid var(--rule)}
.c-hero .polaroid{justify-self:center; transform:rotate(2deg)}

.results-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.results-row.two{grid-template-columns:repeat(2,1fr)}
.res{border-radius:20px; padding:22px 22px 24px; color:var(--on-pastel)}
.res:nth-child(1){background:var(--butter)} .res:nth-child(2){background:var(--sky)} .res:nth-child(3){background:var(--pop)} .res:nth-child(4){background:var(--mint)}
.res b{display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,3.6vw,2.8rem); line-height:1; font-variant-numeric:tabular-nums}
.res span{display:block; margin-top:10px; font-size:.95rem; line-height:1.4}

.story{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.story div{border-top:1.5px solid var(--ink); padding-top:18px}
.story .hand{font-size:1.6rem; display:block; margin-bottom:6px}
.story h2{font-size:var(--s2); margin-bottom:10px}
.story p{color:var(--muted)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.role{background:var(--sheet); border:1px solid var(--rule); border-radius:22px; padding:28px}
.role h2{font-size:var(--s2); margin-bottom:16px}
.role ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.role li{display:grid; grid-template-columns:22px 1fr; gap:8px}
.role li::before{content:"✦"; color:var(--accent); font-size:.85rem; margin-top:.2em}
.mats h2{font-size:var(--s2); margin-bottom:16px}
.mats ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.mats li{padding:.5em 1em; border-radius:999px; border:1px solid var(--rule); background:var(--sheet); font-size:.95rem}

.phone{width:min(280px,100%); margin-inline:auto; border-radius:34px; padding:10px; background:#17201B; box-shadow:0 24px 48px -26px rgba(23,32,27,.7)}
.phone video{width:100%; aspect-ratio:9/16; border-radius:26px; display:block; background:#000; object-fit:cover}
.reel{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,5vw,64px); align-items:center}
.reel h2{font-size:var(--s3); margin-bottom:14px}
.reel p{color:var(--muted); max-width:44ch}
.reel .btn{margin-top:22px}

.funnel{display:flex; flex-direction:column; gap:10px; align-items:center}
.funnel > div{width:100%; border-radius:20px; padding:20px 24px; display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:center; color:var(--on-pastel)}
.funnel > div:nth-child(1){background:var(--butter); width:100%}
.funnel > div:nth-child(2){background:var(--sky); width:86%}
.funnel > div:nth-child(3){background:var(--pop); width:72%}
.funnel b{font-family:var(--f-display); font-weight:400; font-size:1.35rem}
.funnel span{font-size:.98rem}

.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.gallery figure{margin:0; grid-column:span 2}
.gallery figure.wide{grid-column:span 3}
.gallery img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px}
.gallery figure.wide img{aspect-ratio:5/4}
.gallery figcaption{font-family:var(--f-hand); font-weight:700; font-size:1.3rem; margin-top:6px; color:var(--muted); line-height:1.15}

.next{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--rule); padding-top:28px}
.next a.case-link{text-decoration:none; font-family:var(--f-display); font-size:var(--s2)}
.next a.case-link:hover{color:var(--accent)}
.next small{display:block; font-family:var(--f-mono); font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}

@media (max-width:960px){
  .c-hero .wrap, .split, .reel{grid-template-columns:1fr}
  .results-row{grid-template-columns:1fr 1fr}
  .story{grid-template-columns:1fr}
  .gallery figure, .gallery figure.wide{grid-column:span 3}
  .funnel > div:nth-child(n){width:100%}
}
@media (max-width:560px){
  .results-row, .results-row.two{grid-template-columns:1fr}
  .gallery figure, .gallery figure.wide{grid-column:span 6}
  .funnel > div{grid-template-columns:1fr; gap:4px}
}

/* ---------- Hillitympi versio: leikkisyys vain muutamassa kohdassa ---------- */
.note .ic, .note:nth-child(n) .ic{background:var(--pop); color:var(--on-pastel)}
.note:hover{transform:translateX(-3px)}
.dood, .svc:nth-child(n) .dood{width:44px; height:44px; border-radius:50%; background:var(--pop)}
.dood svg{width:22px; height:22px}
.svc:hover .dood{transform:none}
.pack .kind, .pack.main .kind{background:none; padding:0; border-radius:0; color:var(--muted)}
.pack:hover{transform:translateY(-3px)}
.who div, .who div:nth-child(n){background:var(--sheet); border:1px solid var(--rule); color:var(--ink)}
.who div p{color:var(--muted); opacity:1}
.steps li::before{content:counter(step, decimal-leading-zero); font-family:var(--f-mono); font-size:var(--s-1); font-weight:400; color:var(--band-muted)}
.res, .res:nth-child(n){background:var(--sheet); border:1px solid var(--rule); color:var(--ink)}
.res b{color:var(--accent)}
.res span{color:var(--muted)}
.case .mini-stats span, .case .mini-stats span:nth-child(n){background:var(--paper); border:1px solid var(--rule); color:var(--ink)}
.story .eyebrow{display:block; margin-bottom:8px}
.gallery figcaption{font-family:var(--f-body); font-weight:400; font-size:.9rem}
.funnel > div:nth-child(n){background:var(--sheet); border:1px solid var(--rule); color:var(--ink)}
.funnel > div:nth-child(1){border-left:4px solid var(--accent)}
.funnel > div:nth-child(2){border-left:4px solid color-mix(in srgb, var(--accent) 65%, var(--paper))}
.funnel > div:nth-child(3){border-left:4px solid color-mix(in srgb, var(--accent) 35%, var(--paper))}
.c-hero .polaroid{transform:rotate(1.5deg)}
.polaroid{transform:rotate(-1.5deg)}

/* Korostustussi otsikoissa, kuten portfoliossa */
.hero h1 em, .c-hero h1 em{font-style:normal; color:var(--on-pastel); background:linear-gradient(transparent 14%, var(--butter) 14%, var(--butter) 90%, transparent 90%); padding:0 .12em; margin:0 -.04em; border-radius:.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone; white-space:normal}
.hero h1 em::after{content:none}

/* Henkilökohtainen etusivun aukeama */
.hero h1{font-size:clamp(2.3rem, 5vw, 4.1rem)}
.hero-photo{position:relative; justify-self:center; width:min(380px, 100%); padding-block:20px}
.hero-photo .polaroid{transform:rotate(2deg)}
.note.float{position:absolute; padding:10px 14px; gap:10px; grid-template-columns:34px 1fr; border-radius:14px; z-index:2; margin:0}
.note.float .ic{width:34px; height:34px; border-radius:10px; font-size:.85rem}
.note.float .big{font-size:1.05rem}
.note.float .small{font-size:.78rem}
.note.f1{left:-90px; top:12%}
.note.f2{right:-70px; top:46%}
.note.f3{left:-60px; bottom:14%}
.about .wrap{grid-template-columns:1fr}
.about .txt{max-width:820px}
@media (max-width:1100px){ .note.f1{left:-30px} .note.f2{right:-24px} .note.f3{left:-20px} }
@media (max-width:620px){
  .hero-photo{display:flex; flex-direction:column; gap:10px}
  .note.float{position:static; width:100%}
}
.hero .lede{max-width:44ch}

/* Leijuvat tuloskortit */
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.note.float{animation:bob 5.5s ease-in-out infinite; transition:scale .25s ease, rotate .25s ease, box-shadow .25s ease; cursor:default}
.note.float.f2{animation-duration:6.5s; animation-delay:-2s}
.note.float.f3{animation-duration:6s; animation-delay:-4s}
.note.float:hover{scale:1.07; rotate:-2deg; box-shadow:0 18px 36px -16px rgba(23,32,27,.5)}
.note.float.f2:hover{rotate:2deg}
@media (max-width:620px){ .note.float{animation:none} }
.note.float, .note.float.f2, .note.float.f3{animation:none}
.note.float:hover{translate:0 -6px}

/* Minusta-video */
.about .wrap{grid-template-columns:.8fr 1.2fr}
.about-video{justify-self:center; width:min(360px,100%)}
.about-video video{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block; background:#17201B}
@media (max-width:960px){ .about .wrap{grid-template-columns:1fr} .about-video{width:min(300px,100%)} }
.about-video video{filter:brightness(1.18) contrast(1.03)}
.about-video video{transition:opacity .45s ease}

/* Funnel: otsikko kanavien yläpuolella, kapeneva suppilo (kuten portfoliossa) */
.funnel{display:grid; gap:10px; justify-items:center}
.funnel > div, .funnel > div:nth-child(n){display:grid; grid-template-columns:1fr; gap:4px; text-align:center; justify-items:center; border-radius:20px; padding:14px 24px; background:var(--sheet); border:1px solid var(--rule); color:var(--ink)}
.funnel > div:nth-child(1){width:min(100%, 760px); border-left:4px solid var(--accent)}
.funnel > div:nth-child(2){width:min(100%, 660px); border-left:4px solid color-mix(in srgb, var(--accent) 65%, var(--paper))}
.funnel > div:nth-child(3){width:min(100%, 560px); border-left:4px solid color-mix(in srgb, var(--accent) 35%, var(--paper))}
.funnel span{font-family:var(--f-mono); font-size:.8rem; color:var(--muted)}
.funnel > div:nth-child(n){min-width:max-content}
@media (max-width:820px){
  .funnel > div:nth-child(n){width:100%; min-width:0}
}

/* Auna Agency -logo */
.logo-svg{height:46px; width:auto; display:block}
footer .logo-svg{height:56px}


/* ================= Auna Agency: Flourish-rakenne, TheRed-värit ================= */
h1,h2,h3{font-weight:400; letter-spacing:-.005em}
.btn{background:var(--ink); color:var(--paper); font-weight:500}
.btn.ghost{background:transparent; color:var(--ink)}
.eyebrow{font-family:var(--f-body); font-weight:600; letter-spacing:.14em; font-size:.75rem}

/* Nav: linkit vasemmalla, logo keskellä, painike oikealla */
.nav{background:color-mix(in srgb, var(--paper) 94%, transparent)}
.nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.nav ul{order:1; gap:24px}
.nav ul a{font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.nav .logo{order:2; justify-self:center}
.nav .btn{order:3; justify-self:end; background:var(--accent); color:#fff}
.logo-svg{height:48px; width:auto; display:block}
footer .logo-svg{height:56px}

/* Hero */
.hero3{padding-block:clamp(24px,4vw,48px) clamp(48px,7vw,88px)}
.hero3 .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.h3-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 35%}
.h3-text h1{font-family:var(--f-body); font-weight:500; font-size:clamp(1.9rem,3.3vw,2.9rem); line-height:1.15; letter-spacing:-.02em; margin-block:16px 20px}
.h3-text .lede{font-size:1.05rem; max-width:46ch; color:var(--muted)}
.h3-text .cta-row{margin-top:28px}
.h3-text .btn{background:var(--accent); color:#fff}
.h3-text .btn.ghost{background:transparent; color:var(--ink)}
.h3-stats{list-style:none; padding:22px 0 0; margin:32px 0 0; border-top:1px solid var(--rule); display:flex; gap:28px; flex-wrap:wrap}
.h3-stats li{display:flex; flex-direction:column}
.h3-stats b{font-family:var(--f-display); font-weight:400; font-size:1.7rem; color:var(--accent); line-height:1.1}
.h3-stats span{font-size:.85rem; color:var(--muted)}

/* Kelluva sivuvälilehti */
.side-tab{position:fixed; right:0; top:50%; z-index:9; transform:translateY(-50%); writing-mode:vertical-rl; rotate:180deg; background:var(--pop); color:var(--ink); text-decoration:none; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:18px 10px; border-radius:0 14px 14px 0; transition:padding .2s}
.side-tab:hover{padding-right:14px}

/* Palvelut: punainen kaista + kuvakortit */
.svc-band{margin-inline:-20px; padding-inline:20px; background:var(--accent); color:#fff; text-align:center}
.svc-band .eyebrow{color:#fff; opacity:.85}
.svc-band h2{font-size:var(--s3); margin-block:10px 14px}
.svc-band p{max-width:58ch; margin-inline:auto; opacity:.95}
.long-arrow{display:block; width:14px; height:56px; margin:26px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 56'%3E%3Cpath d='M7 0v52M1 46l6 6 6-6' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain}
.svc-cards{padding-top:clamp(36px,5vw,56px)}
.track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px)/4); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.scard{scroll-snap-align:start; display:flex; flex-direction:column; gap:12px}
.scard-img{margin:0; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--pop)}
.scard-img img, .scard-img video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.scard-img video{filter:brightness(1.15); transition:opacity .45s ease}
.scard:hover .scard-img img{transform:scale(1.04)}
.pill-row{display:flex; align-items:center; gap:10px}
.pill{display:inline-block; background:var(--pop); color:var(--ink); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.55em 1.1em; border-radius:999px}
.scard:nth-child(even) .pill{background:var(--accent); color:#fff}
.arr{font-size:1.3rem; line-height:1; transition:transform .2s}
.scard:hover .arr{transform:translateX(4px)}
.scard p{color:var(--muted); font-size:.95rem}
.scard .tags{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.scard .tags li{font-size:.72rem; padding:.3em .7em; border:1px solid var(--rule); border-radius:999px}
.statcard{height:100%; background:var(--ink); color:var(--paper); padding:26px; display:flex; flex-direction:column; gap:6px}
.statcard .eyebrow{color:var(--pop)}
.statcard b{font-family:var(--f-display); font-weight:400; font-size:3.4rem; line-height:1; color:#fff; margin-top:10px}
.statcard > span:not(.eyebrow){font-size:.9rem; opacity:.8}
.statcard .bars{margin-top:auto; height:45%; display:flex; align-items:flex-end; gap:10px}
.statcard .bars i{flex:1; background:var(--pop); border-radius:8px 8px 0 0}
.statcard .bars i:last-child{background:var(--accent)}
.car-nav{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}
.car-btn{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-size:1.1rem; cursor:pointer; transition:background .15s, color .15s}
.car-btn:hover{background:var(--ink); color:var(--paper)}

/* Linkkinauha */
.strip{display:block; margin-inline:-20px; background:var(--pop); color:var(--ink); text-decoration:none; overflow:hidden; padding:16px 0; margin-bottom:clamp(56px,8vw,104px)}
.strip-in{display:flex; gap:22px; width:max-content; white-space:nowrap; font-family:var(--f-display); font-style:italic; font-size:1.35rem}
.strip i{font-style:normal; color:var(--accent)}
.strip:hover{color:var(--accent)}

/* Kortit */
.pack{border-radius:22px}
.pack.main{background:var(--accent); color:#fff; border:0}
.pack.main p, .pack.main .kind, .pack.main .price span{color:#fff}
.pack.main li::before{background:#fff}
.pack.main .price{border-top-color:rgba(255,255,255,.35)}
.pack.main .btn{background:#fff; color:var(--ink)}
.who div, .who div:nth-child(n){border-radius:22px}
.steps li::before{font-family:var(--f-display); font-style:italic; font-size:1.3rem; letter-spacing:0; color:var(--pop)}
.case{border-radius:22px}
.case .mini-stats span, .case .mini-stats span:nth-child(n){background:var(--pop); border:0}
.dood, .svc:nth-child(n) .dood{background:var(--pop); color:var(--accent)}

/* Minusta: teksti vaaleanpunaisella pohjalla, kuva oikealla + tarra */
.about3{margin-inline:-20px; padding-inline:20px; background:var(--pop)}
.about3 .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,80px); align-items:center}
.about3 h2{font-size:var(--s3); margin-block:12px 22px}
.about3 .txt p{max-width:56ch}
.about3 .txt p + p{margin-top:14px}
.about3 .facts{border-top-color:var(--ink)}
.about3 .facts .fi, .about3 .facts div:nth-child(n) .fi{background:var(--paper); color:var(--accent)}
.a3-photo{position:relative; margin:0}
.a3-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px}
.sticker{position:absolute; top:-26px; left:-30px; background:var(--ink); color:var(--paper); font-family:var(--f-display); font-style:italic; font-size:1.5rem; line-height:1.05; text-align:center; padding:18px 22px; border-radius:18px; transform:rotate(-8deg); box-shadow:0 12px 26px -12px rgba(0,0,0,.5); outline:2px solid var(--ink); outline-offset:4px}
.about3 + section{padding-top:clamp(56px,8vw,104px)!important}

/* Yhteys */
.contact{background:var(--accent); color:#fff}
.contact a{background:rgba(255,255,255,.14)}
.contact a:hover{background:rgba(255,255,255,.24)}

/* Kampanjasivut */
.c-hero .polaroid{background:none; padding:0; box-shadow:none; transform:none}
.c-hero .polaroid .tape{display:none}
.c-hero .polaroid img{border-radius:22px}
.c-hero .polaroid figcaption{font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.1rem; color:var(--muted)}
.c-hero h1 em{background:none; color:var(--accent); font-style:italic; padding:0; margin:0}
.res b{color:var(--accent)}
.gallery img{border-radius:18px}

@media (max-width:1100px){ .track{grid-auto-columns:calc((100% - 40px)/3)} }
@media (max-width:960px){
  .hero3 .wrap, .about3 .wrap{grid-template-columns:1fr}
  .track{grid-auto-columns:calc((100% - 20px)/2)}
  .sticker{left:10px}
}
@media (max-width:620px){
  .nav .wrap{grid-template-columns:auto 1fr}
  .nav .logo{justify-self:start}
  .track{grid-auto-columns:78%}
  .side-tab{display:none}
}

/* Järjestys asiakkaan polun mukaan + tiiviimpi palvelukaista */
.svc-band{padding-block:clamp(36px,5vw,56px)}
.svc-band h2{margin-block:8px 10px}
.svc-cards{padding-top:clamp(28px,4vw,40px)}
.hero3 + .side-tab + section{padding-top:0}
.svc-cards + section{padding-top:clamp(24px,3vw,40px)}

/* Nauha puhelimella: yksi keskitetty, rivittyvä viesti */
@media (max-width:700px){
  .strip{padding:18px 20px}
  .strip-in{width:auto; flex-wrap:wrap; justify-content:center; gap:4px 10px; white-space:normal; text-align:center; font-size:1.25rem}
  .strip-in > :nth-child(n+4), .strip-in > :nth-child(2){display:none}
  .strip-in{flex-direction:column; align-items:center}
  .strip-in > :nth-child(3)::after{content:" →"; font-style:normal}
}
@media (max-width:620px){
  .contact a{flex-direction:column-reverse; align-items:flex-start; gap:2px; overflow-wrap:normal}
  .contact a span{font-size:1rem; white-space:nowrap}
  .sticker{top:14px; left:14px; font-size:1.2rem; padding:12px 16px}
  .a3-photo{margin-top:12px}
}