/* Demo ads: pure HTML/CSS. Every ad scales with its own width (container query units), so type and layout stay in proportion at any size. */
.ad{position:relative;overflow:hidden;container-type:inline-size;width:100%;isolation:isolate;color:#fff;line-height:1}
.ad>*{position:absolute;margin:0;white-space:nowrap}
.ad .cta{display:block;font-weight:700}
.ad .x{font-size:max(9px,3.3cqw)}
.r11{aspect-ratio:1/1}.r916{aspect-ratio:9/16}.r65{aspect-ratio:6/5}.r43{aspect-ratio:4/3}

/* gallery chrome */
.ex{display:flex;flex-direction:column;gap:12px;min-width:0}
.ex[hidden]{display:none}
.ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;font-family:var(--f-mono,monospace);font-weight:800;font-size:.78rem;letter-spacing:.02em}
.chip.konsepti{background:var(--gold,#e3b23c);color:#120203}
.chip.fikt{background:#efe4d2;color:#120203}
.ch .typ{font-family:var(--f-mono,monospace);font-size:.8rem;color:var(--mute,#dcc6b8)}
.ex figcaption{font-size:.95rem;color:var(--mute,#dcc6b8);display:grid;gap:3px}
.ex figcaption b{color:var(--bone,#efe4d2);font-size:1.02rem}
.ex figcaption .dis{color:var(--gold,#e3b23c);font-weight:700}

/* 01 Kelo Kauppa: Meta 1:1, forest + birch + orange */
.a-kelo{background:#14352b;color:#f1efe6;font-family:'Figtree',sans-serif}
.a-kelo .blk{right:-14cqw;bottom:-16cqw;width:60cqw;height:60cqw;background:#1d4a3a;transform:rotate(14deg)}
.a-kelo .w{left:6cqw;top:5.5cqw;font-weight:700;font-size:5cqw;letter-spacing:.05em}
.a-kelo .n{left:5cqw;top:12cqw;font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:37cqw;line-height:.9;color:#ff7a1a}
.a-kelo .bf{left:6cqw;top:47cqw;font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:13cqw;letter-spacing:.02em}
.a-kelo .d{left:6cqw;top:63cqw;font-weight:500;font-size:4.8cqw;color:#cfd8cf}
.a-kelo .cta{left:6cqw;bottom:7cqw;overflow:hidden;padding:3cqw 6cqw;font-size:5cqw;background:#f1efe6;color:#14352b}
.a-kelo .cta::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:rgba(255,122,26,.35);transform:skewX(-20deg);animation:kelo-shine 3.6s ease-in-out infinite}
@keyframes kelo-shine{0%,55%{left:-40%}100%{left:140%}}

/* 02 Havu Studio: Story 9:16, spruce + gold, serif + geometric */
.a-havu{background:#0b3d2e;font-family:'Jost',sans-serif;color:#f3e6c4}
.a-havu .snow{inset:0;opacity:.55;background-image:radial-gradient(circle,#fff 0 .55cqw,transparent .65cqw),radial-gradient(circle,#fff 0 .4cqw,transparent .5cqw);background-size:23cqw 31cqw,37cqw 41cqw;background-position:0 0,11cqw 17cqw;animation:havu-snow 11s linear infinite;z-index:0}
@keyframes havu-snow{to{background-position:0 31cqw,11cqw 58cqw}}
.a-havu .w{left:0;right:0;top:9cqw;text-align:center;font-weight:500;font-size:5cqw;letter-spacing:.34em;color:#d9b45a}
.a-havu .h{left:0;right:0;top:21cqw;text-align:center;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:17cqw;line-height:.95}
.a-havu .s{left:10cqw;right:10cqw;top:76cqw;text-align:center;white-space:normal;font-size:5.8cqw;line-height:1.25}
.a-havu .tree{left:50%;top:102cqw;width:0;height:0}
.a-havu .tree i{position:absolute;left:0;transform:translateX(-50%);background:#1a6b4c;clip-path:polygon(50% 0,0 100%,100% 100%)}
.a-havu .tree i:nth-child(1){top:0;width:28cqw;height:22cqw}
.a-havu .tree i:nth-child(2){top:11cqw;width:38cqw;height:24cqw;background:#168054}
.a-havu .tree i:nth-child(3){top:23cqw;width:48cqw;height:24cqw;background:#1a9262}
.a-havu .tree u{position:absolute;left:-3cqw;top:46cqw;width:6cqw;height:7cqw;background:#6b4426}
.a-havu .tree b{position:absolute;left:-2cqw;top:-4cqw;width:4cqw;height:4cqw;background:#d9b45a;clip-path:polygon(50% 0,62% 38%,100% 38%,70% 60%,82% 100%,50% 76%,18% 100%,30% 60%,0 38%,38% 38%);animation:havu-star 2.8s ease-in-out infinite}
@keyframes havu-star{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
.a-havu .cta{left:50%;bottom:9cqw;transform:translateX(-50%);padding:3.2cqw 7cqw;font-size:5.4cqw;background:#d9b45a;color:#0b3d2e;letter-spacing:.04em}

/* 03 Pulse: Google Display 300x250, black + red, condensed display */
.a-pulse{background:#0c0c10;font-family:'Barlow Condensed',sans-serif;color:#fff}
.a-pulse .w{left:6cqw;top:5cqw;font-family:'Anton',sans-serif;font-size:17cqw;color:#ff3b1d;letter-spacing:.02em}
.a-pulse .h{left:6cqw;top:27cqw;font-weight:600;font-size:9cqw;line-height:1.05}
.a-pulse svg{left:0;top:52cqw;width:100cqw;height:14cqw}
.a-pulse svg path{fill:none;stroke:#ff3b1d;stroke-width:3;stroke-linejoin:round;stroke-dasharray:380;stroke-dashoffset:380;animation:pulse-ecg 3s linear infinite}
@keyframes pulse-ecg{0%{stroke-dashoffset:380}70%,100%{stroke-dashoffset:0}}
.a-pulse .cta{left:6cqw;bottom:5.5cqw;padding:2.2cqw 5cqw;font-weight:600;font-size:6cqw;background:#fff;color:#0c0c10;letter-spacing:.03em}

/* 04 Laskuvirta: TikTok 9:16, mustard + navy, wide display */
.a-lasku{background:#f2c230;color:#10243e;font-family:'Manrope',sans-serif}
.a-lasku .w{left:7cqw;top:8cqw;font-family:'Unbounded',sans-serif;font-weight:700;font-size:5.2cqw}
.a-lasku .h{left:7cqw;top:18cqw;font-family:'Unbounded',sans-serif;font-weight:700;font-size:11cqw;line-height:1.08}
.a-lasku .list{left:7cqw;right:7cqw;top:64cqw;height:58cqw;overflow:hidden;background:#10243e;border-radius:3cqw}
.a-lasku .rows{display:block;animation:lasku-scroll 9s linear infinite}
.a-lasku .rows b{display:flex;align-items:center;justify-content:space-between;height:11.6cqw;padding:0 4.5cqw;color:#f2c230;font-weight:500;font-size:4.6cqw}
.a-lasku .rows b em{font-style:normal;background:#f2c230;color:#10243e;font-weight:800;font-size:3.6cqw;padding:1cqw 2.4cqw;border-radius:1cqw}
@keyframes lasku-scroll{to{transform:translateY(-50%)}}
.a-lasku .s{left:7cqw;top:131cqw;font-weight:700;font-size:5.2cqw}
.a-lasku .cta{left:7cqw;bottom:9cqw;padding:3.4cqw 6cqw;font-family:'Unbounded',sans-serif;font-size:4.8cqw;background:#10243e;color:#f2c230}

/* 05 Siivoo: landing page 4:3, sky blue + yellow, rounded display */
.a-siivoo{background:#cfe8ff;font-family:'Nunito',sans-serif;color:#0a3a7a}
.a-siivoo .win{left:5cqw;top:5cqw;right:5cqw;bottom:5cqw;background:#fff;border-radius:2cqw;overflow:hidden;white-space:normal}
.a-siivoo .win>*{position:absolute;white-space:nowrap}
.a-siivoo .bar{left:0;right:0;top:0;height:7.5cqw;background:#e3eefc}
.a-siivoo .bar::before{content:"";position:absolute;left:2.4cqw;top:2.7cqw;width:2cqw;height:2cqw;border-radius:50%;background:#9bb8e0;box-shadow:3.2cqw 0 #9bb8e0,6.4cqw 0 #9bb8e0}
.a-siivoo .url{left:15cqw;top:2cqw;font-size:3.4cqw;font-weight:600;color:#4a6a99}
.a-siivoo .h{left:5cqw;top:12cqw;font-family:'Fredoka',sans-serif;font-weight:600;font-size:8.6cqw;line-height:1.05}
.a-siivoo .s{left:5cqw;top:31cqw;white-space:normal;width:50cqw;font-weight:600;font-size:3.9cqw;line-height:1.3;color:#3a5a8a}
.a-siivoo .cta{left:5cqw;top:46cqw;padding:2.3cqw 4.6cqw;font-family:'Fredoka',sans-serif;font-weight:500;font-size:4.4cqw;background:#ffc92e;color:#0a3a7a;border-radius:1.6cqw}
.a-siivoo .bub{border:.6cqw solid #7ab6f5;border-radius:50%;animation:siivoo-up 6s ease-in infinite}
.a-siivoo .bub:nth-of-type(1){left:66cqw;top:44cqw;width:7cqw;height:7cqw}
.a-siivoo .bub:nth-of-type(2){left:76cqw;top:40cqw;width:4cqw;height:4cqw;animation-delay:-2s}
.a-siivoo .bub:nth-of-type(3){left:70cqw;top:46cqw;width:5.5cqw;height:5.5cqw;animation-delay:-4s}
@keyframes siivoo-up{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-28cqw);opacity:0}}
.a-siivoo .spk{left:70cqw;top:16cqw;width:6cqw;height:6cqw;background:#ffc92e;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:siivoo-tw 2.6s ease-in-out infinite}
.a-siivoo .spk.b{left:80cqw;top:26cqw;width:4cqw;height:4cqw;animation-delay:-1.3s}
@keyframes siivoo-tw{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.2);opacity:1}}

/* 06 Vaihda: webshop 4:3, cobalt + white, grotesk + mono */
.a-vaihda{background:#1f3fff;color:#fff;font-family:'Space Mono',monospace}
.a-vaihda .w{left:6cqw;top:5cqw;font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:8cqw;letter-spacing:-.01em}
.a-vaihda .tg{right:6cqw;top:6.5cqw;background:#fff;color:#1f3fff;font-size:max(9px,3.4cqw);padding:1.2cqw 2.4cqw;font-weight:700}
.a-vaihda .tiles{left:6cqw;right:6cqw;top:21cqw;bottom:6cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;white-space:normal}
.a-vaihda .t{position:relative;background:#fff;color:#12206b;overflow:hidden;animation:vaihda-pick 8s ease-in-out infinite}
.a-vaihda .t:nth-child(2){animation-delay:2s}.a-vaihda .t:nth-child(3){animation-delay:4s}.a-vaihda .t:nth-child(4){animation-delay:6s}
.a-vaihda .t i{position:absolute;left:14%;right:14%;top:12%;height:56%}
.a-vaihda .t:nth-child(1) i{background:#ff6b57;transform:rotate(8deg)}
.a-vaihda .t:nth-child(2) i{background:#ffd23f;border-radius:50% 50% 0 0}
.a-vaihda .t:nth-child(3) i{background:#12206b}
.a-vaihda .t:nth-child(4) i{background:#37d6a4;clip-path:polygon(50% 0,0 100%,100% 100%)}
.a-vaihda .t span{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-size:max(9px,3.1cqw);font-weight:700}
@keyframes vaihda-pick{0%,20%{transform:translateY(-2cqw);background:#fff3a8}26%,100%{transform:none;background:#fff}}
@keyframes mari-slide{to{background-position-x:12cqw}}
@keyframes finn-tw{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes finn-fly{0%{transform:translate(-14cqw,26cqw) rotate(-10deg)}100%{transform:translate(104cqw,-12cqw) rotate(-10deg)}}
@keyframes hes-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}
@keyframes ik-tw{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spo-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes nik-run{to{transform:translateX(200cqw)}}
@keyframes bk-snow{to{background-position:0 24cqw,9cqw 46cqw}}
@keyframes bk-glow{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes sam-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}
@keyframes sam-bar{0%,100%{transform:translateX(0)}50%{transform:translateX(5%)}}

@media (prefers-reduced-motion:reduce){.ad,.ad *,.ad *::before,.ad *::after{animation:none!important}}