/* Sane Ads, motion draft. Shared by index.html (FI) and index-en.html (EN). */
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-medium.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-extrabold.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: Playball; src: url("fonts/playball.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #202722;
  --muted: #5e6960;
  --line: #dce4dc;
  --green: #208354;
  --green-dark: #245b3c;
  --lime: #d7efb0;
  --lime-bright: #c8ec8e;
  --mist: #f4f7f2;
  --sage: #eef2ed;
  --night: #161b18;
  --night-2: #1f2621;
  --sans: "DM Sans", Arial, sans-serif;
  --script: Playball, Georgia, cursive;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-draw: cubic-bezier(.65, .05, .25, 1);
  font-family: var(--sans);
  color: var(--ink);
  background: white;
  color-scheme: light;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.65; -webkit-font-smoothing: antialiased; background: white; overflow-x: clip; }
main { container: page / inline-size; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; text-wrap: balance; }
h2 { font-size: 3.25rem; line-height: 1.16; letter-spacing: -.025em; }
h3 { font-size: 1.5rem; line-height: 1.3; }
em { font-family: var(--script); font-weight: 400; font-style: normal; color: var(--green); letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
::selection { color: var(--ink); background: var(--lime); }
[hidden] { display: none !important; }
.wrap { width: min(1248px, calc(100% - 112px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; background: white; padding: 14px 20px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Icons */
.icon { flex: 0 0 auto; display: inline-block; width: 22px; height: 22px; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.icon-arrow-up-right { --icon: url("icons/arrow-up-right.svg"); }
.icon-pause { --icon: url("icons/pause.svg"); }
.icon-play { --icon: url("icons/play.svg"); }
.icon-x { --icon: url("icons/x.svg"); }
.icon-copy { --icon: url("icons/copy.svg"); }
.icon-message-circle { --icon: url("icons/message-circle.svg"); }
.icon-check { --icon: url("icons/check.svg"); }
.icon-button { width: 46px; height: 46px; flex: 0 0 auto; padding: 11px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: 50%; }
.icon-button:hover { background: #2027220c; }

/* Glass */
.glass-surface {
  background: #ffffffe6;
  border: 1px solid #ffffff;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 5px #20272206, 0 0 0 1px #2027220b, 0 6px 22px #20272208;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* Buttons */
.button { position: relative; min-height: 56px; padding: 15px 26px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 100px; font-size: 1rem; line-height: 1.4; font-weight: 700; text-align: center; transition: background 220ms, color 220ms, border-color 220ms, transform 450ms var(--ease-out); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--green-dark); }
.button-light { background: white; color: var(--ink); }
.button-light:hover { background: var(--lime); }
.button-outline { background: transparent; color: var(--ink); border-color: #2027222e; }
.button-outline:hover { background: white; border-color: var(--ink); }
/* The arrow leaves up-right and a twin arrives from bottom-left on hover. */
.arrow { position: relative; flex: 0 0 auto; width: 20px; height: 20px; overflow: hidden; }
.arrow .icon { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 480ms var(--ease-out); }
.arrow .icon + .icon { transform: translate(-130%, 130%); }
a:hover > .arrow .icon:first-child { transform: translate(130%, -130%); }
a:hover > .arrow .icon + .icon { transform: none; }

/* ---------- Header ---------- */
.topbar { position: sticky; top: 16px; z-index: 30; width: min(1000px, calc(100% - 112px)); margin: 16px auto 0; border-radius: 24px; background: #fffffff0; border-color: #ffffffd9; box-shadow: inset 0 1px 1px #ffffff, 0 0 0 1px #2027220a, 0 10px 32px -16px #20272230; -webkit-backdrop-filter: blur(28px) saturate(125%); backdrop-filter: blur(28px) saturate(125%); }
.topbar, .topbar .brand img, .topbar .languages a, .topbar .nav-contact { transition: background 300ms, color 300ms, border-color 300ms, box-shadow 300ms, filter 300ms, transform 700ms var(--ease-out); }
.topbar.is-scrolled { background: #fffffff2; box-shadow: inset 0 1px 1px #ffffff, 0 0 0 1px #2027220c, 0 12px 36px -16px #20272238; }
.topbar.on-dark { background: #1a201cc2; border-color: #ffffff1c; color: #eef2ee; box-shadow: inset 0 1px 0 #ffffff14, 0 0 0 1px #00000033, 0 14px 40px -18px #000000a6; }
.topbar.on-dark .brand img { filter: invert(1); }
.topbar.on-dark .languages a { color: #9aa79c; }
.topbar.on-dark .languages [aria-current] { color: #ffffff; }
.topbar.on-dark .languages span { color: #56615a; }
.topbar.on-dark .nav-contact { border-color: #ffffff30; }
.topbar.on-dark .nav-contact:hover { background: #ffffff14; border-color: var(--lime-bright); }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 24px; }
.brand { width: 44px; min-height: 44px; flex: 0 0 44px; display: flex; align-items: center; }
.brand img { width: 36px; height: auto; }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-actions { display: flex; flex-shrink: 0; align-items: center; gap: 24px; }
.nav-link { font-size: .9375rem; font-weight: 700; padding-block: 10px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 calc(100% - 6px); background-repeat: no-repeat; transition: background-size 400ms var(--ease-out), color 200ms; }
.nav-link:hover { background-size: 100% 1px; }
.languages { display: flex; align-items: center; gap: 2px; font-size: .8125rem; }
.languages a { padding: 12px 6px; color: var(--muted); }
.languages span { color: #b7beba; }
.languages [aria-current] { color: var(--ink); font-weight: 800; }
.nav-contact { display: inline-flex; align-items: center; padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; font-size: .9375rem; font-weight: 700; }
.nav-contact:hover { border-color: var(--green); background: #ffffff; }

/* ---------- Motion primitives (armed only when JavaScript and motion are available) ---------- */
html.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 800ms var(--ease-out) var(--d, 0ms), transform 800ms var(--ease-out) var(--d, 0ms); }
html.js-motion [data-reveal].is-in, html.js-motion [data-reveal]:focus-within { opacity: 1; transform: none; }

/* ---------- Hero: centered headline, one sentence, one button ---------- */
.hero { position: relative; overflow: clip; min-height: calc(100svh - 90px); display: flex; flex-direction: column; justify-content: center; background: white; }
/* A fine dot grid behind the hero text (assets/hero-dots.js); one mask fades it toward every edge. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, #0000 100%); mask-image: radial-gradient(closest-side, #000 55%, #0000 100%); }
.hero-bg canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-main { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: clamp(48px, 9vh, 112px) clamp(32px, 6vh, 72px); }
.hero h1 { font-size: clamp(3rem, min(8vw, 12vh), 6.25rem); line-height: 1.04; letter-spacing: -.04em; }
.hero h1 > .line { display: block; }
.hero h1 em { font-size: 1.12em; line-height: 1; letter-spacing: 0; padding-inline: .03em; }
.hero-copy { margin-top: 28px; max-width: 560px; font-size: 1.1875rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.hero-actions { margin-top: 36px; }
/* The hero simply fades in: headline first, then the line and the button. */
html.js-motion :is(.hero-main > *, .hero-bg, .hero-brands) { opacity: 0; }
html.js-motion .hero.is-revealing :is(.hero-main > *, .hero-bg, .hero-brands) { animation: hero-fade 1200ms ease-out var(--hd, 0ms) both; }
.hero h1, .hero-bg { --hd: 120ms; }
.hero .hero-copy { --hd: 420ms; }
.hero .hero-actions { --hd: 560ms; }
.hero .hero-brands { --hd: 760ms; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Work ---------- */
.work { background: var(--sage); }
.work-layout { max-width: 1440px; padding-block: 104px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.work-story { min-width: 0; }
.work-story h2 { font-size: clamp(2rem, 3vw, 3.125rem); line-height: 1.14; letter-spacing: -.035em; text-wrap: initial; }
.work-story h2 .line { display: block; }
.work-description { max-width: 460px; margin-top: 24px; font-size: 1.0625rem; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.work-cta { margin-top: 30px; max-width: 100%; }
.work-visual { min-width: 0; margin: 0; }
.work-media { --u: 0; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 26px; background: #e3eadf; box-shadow: 0 30px 70px -36px #2027223d; clip-path: inset(calc(var(--u) * 7%) calc(var(--u) * 9%) round 26px); }
.product-video { width: 100%; height: 100%; object-fit: contain; transform: scale(calc(1 + var(--u) * .14)); }
.video-toggle { position: absolute; right: 18px; bottom: 18px; color: var(--ink); opacity: clamp(0, calc(1 - var(--u) * 6), 1); }
.video-toggle:hover { background: #ffffff; }


/* ---------- Ads showcase (dark band that opens to full width) ---------- */
/* While the panel is still inset, its corners show the sage above and the mist below. */
.showreel-frame { background: linear-gradient(var(--sage) 0 50%, var(--mist) 50%); }
.showreel { --u: 0; position: relative; background: var(--night); color: #e8ede8; padding-block: 104px; clip-path: inset(0 calc(var(--u) * 2.6vw) round calc(var(--u) * 44px)); overflow: clip; }
.showreel::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(50% 60% at 20% 0%, #2f4a3a66, transparent 70%), radial-gradient(40% 50% at 90% 10%, #3b4a2a40, transparent 70%); pointer-events: none; }
.showreel-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.showreel h2 { color: white; font-size: 3.25rem; line-height: 1.16; }
.marquee-toggle { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid #ffffff26; border-radius: 100px; background: transparent; color: #dfe6df; font-size: .8125rem; font-weight: 700; transition: background 200ms, border-color 200ms; }
.marquee-toggle:hover { background: #ffffff12; border-color: #ffffff45; }
.marquee-toggle .icon { width: 16px; height: 16px; }
.marquee { position: relative; overflow: hidden; contain: paint; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee.is-dragging { cursor: grabbing; }
.marquee-track { display: flex; gap: 22px; width: max-content; margin: 0; padding: 14px 22px 30px; list-style: none; will-change: transform; }
.showreel-card { position: relative; flex: 0 0 auto; width: clamp(196px, 18.5vw, 290px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--night-2); box-shadow: 0 34px 60px -34px #000000d9, 0 0 0 1px #ffffff0f; transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.showreel-card img, .showreel-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.showreel-card.is-low { margin-top: 36px; }
.showreel-card:hover { transform: translate3d(0, -14px, 0) scale(1.025); box-shadow: 0 44px 70px -34px #000000f0, 0 0 0 1px #ffffff26; }
html.js-motion .showreel .marquee { opacity: 0; transition: opacity 1000ms var(--ease-out); }
html.js-motion .showreel .marquee.is-in { opacity: 1; transform: none; }

/* ---------- Section headings ---------- */
.section-heading { text-align: center; margin-bottom: 52px; }
.section-heading h2 { font-size: 3.25rem; line-height: 1.16; }
.section-heading h2 em { font-size: 1.13em; }
.section-heading > p { max-width: 620px; margin: 18px auto 0; font-size: 1.0625rem; color: var(--muted); text-wrap: pretty; }

/* ---------- Process: a centred, numbered line that draws itself ---------- */
.process { background: var(--mist); padding-block: 104px; }
.steps { --gap: 28px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); }
.step { position: relative; min-width: 0; text-align: center; }
.step-illustration { aspect-ratio: 1; overflow: hidden; border-radius: 24px; background: white; box-shadow: 0 0 0 1px #e3e9e0; }
.step-illustration img { width: 100%; height: 100%; object-fit: cover; }
.step-rail { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; margin: 26px 0 18px; }
/* Each step draws half a gap past its own edges, so the segments meet exactly between the dots. */
.step-rail::after { content: ""; position: absolute; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); top: 50%; height: 2px; margin-top: -1px; background: #cbd7c7; transform-origin: 0 50%; }
.step:first-child .step-rail::after { left: 50%; }
.step:last-child .step-rail::after { right: 50%; }
.step-dot { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: .9375rem; font-weight: 800; box-shadow: 0 0 0 6px var(--mist); }
.step-copy h3 { font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.01em; }
.step-copy p { max-width: 32ch; margin: 8px auto 0; font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
html.js-motion .step :is(.step-illustration, .step-copy) { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 800ms var(--ease-out) calc(var(--i) * 200ms), transform 800ms var(--ease-out) calc(var(--i) * 200ms); }
html.js-motion .step .step-dot { opacity: 0; transition: opacity 600ms var(--ease-out) calc(var(--i) * 200ms + 140ms); }
html.js-motion .step .step-rail::after { transform: scaleX(0); transition: transform 600ms var(--ease-draw) calc(var(--i) * 200ms + 100ms); }
html.js-motion .steps.is-in .step :is(.step-illustration, .step-copy) { opacity: 1; transform: none; }
html.js-motion .steps.is-in .step .step-dot, html.js-motion .steps.is-in .step .step-rail::after { transform: none; }
html.js-motion .steps.is-in .step .step-dot { opacity: 1; }

/* ---------- Pricing: dark like the ads section. A comparison table from 641 px, two plan cards below. ---------- */
.pricing {
  scroll-margin-top: -108px;
  --p-text: #e3e9e3;
  --p-muted: #9aa79c;
  --p-line: #ffffff17;
  --p-panel-text: #cfe3c9;
  --p-panel-line: #ffffff1f;
  --p-quiet-tick: #c9d3ca;
  --p-cross: #6b766e;
  --panel: linear-gradient(180deg, #286443 0%, var(--green-dark) 38%, #20523a 100%);
  position: relative;
  overflow: clip;
  padding-block: 104px;
  background: var(--night);
  color: var(--p-text);
}
/* The same soft light as the ads section, falling from the top right onto the green panel. */
.pricing::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(45% 60% at 72% 0%, #2f4a3a59, transparent 70%); pointer-events: none; }
.pricing > .wrap { position: relative; }
.pricing :focus-visible { outline-color: var(--lime-bright); }
.pricing h2 { color: white; }
.price-heading, .price-cards { display: none; }
.price-table-wrap { --label: 40%; --plan: calc((100% - var(--label)) / 2); --amount: 2.5rem; position: relative; isolation: isolate; max-width: 1000px; margin-inline: auto; }
/* One green panel behind the whole Growth column, so it runs without seams from top to bottom. */
.price-table-wrap::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--label) + var(--plan)); width: var(--plan); border-radius: 26px; background: var(--panel); box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px #ffffff0a, 0 50px 90px -50px #000000cc; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.price-table col.col-label { width: var(--label); }
.price-table :is(th, td) { padding: 16px 24px; text-align: center; vertical-align: middle; font-weight: 500; border-bottom: 1px solid var(--p-line); }
/* The label column starts flush with the hairlines. */
.price-table :is(.price-corner, tbody th, tfoot td:first-child) { padding-left: 0; text-align: left; }
.price-table .is-growth { color: white; border-bottom-color: var(--p-panel-line); }
.price-table tbody th { font-size: 1rem; line-height: 1.5; color: var(--p-text); text-wrap: balance; }
/* Header: each plan name with its price right under it, no row label. */
.row-plans :is(th, td) { padding-block: 40px 0; border-bottom: 0; vertical-align: bottom; }
.row-plans .price-corner { padding-bottom: 32px; border-bottom: 1px solid var(--p-line); }
/* The heading sits on the same baseline as the last price line. */
.price-corner h2 { margin-bottom: calc(6.2px - .159em); font-size: 3.25rem; line-height: 1; letter-spacing: -.03em; }
.plan-name { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: white; text-wrap: balance; }
.row-price td { padding-block: 14px 32px; vertical-align: top; }
.plan-label { display: block; font-size: .8125rem; line-height: 1.4; font-weight: 700; color: var(--p-muted); }
.plan-amount { display: block; margin-top: 2px; font-size: var(--amount); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; color: white; }
/* "Perusmaksu" is set smaller than "3 000 €" but shares its baseline, so the unit lines stay level too. */
.plan-amount-text { padding-top: calc(var(--amount) * .25 - 1px + (var(--amount) * .7 - 1em) * .68); font-size: calc(var(--amount) * .7); line-height: calc(var(--amount) * .9 + 1px - (var(--amount) * .7 - 1em) * .68); letter-spacing: -.02em; }
.plan-unit { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--p-muted); white-space: nowrap; }
.is-growth :is(.plan-label, .plan-unit) { color: var(--p-panel-text); }
.price-table .icon-check { width: 20px; height: 20px; color: var(--p-quiet-tick); vertical-align: middle; }
.price-table .is-growth .icon-check { color: var(--lime-bright); }
.price-table .icon-x { width: 16px; height: 16px; color: var(--p-cross); vertical-align: middle; }
.price-table tfoot :is(th, td) { padding-block: 28px 24px; border-bottom: 0; }
.plan-cta { width: 100%; min-height: 50px; padding: 12px 16px; font-size: .9375rem; }
/* Buttons on dark: a quiet outline for Creative, white on the green panel for Growth. */
.pricing .button-outline { color: #f1f4f1; border-color: #ffffff5c; }
.pricing .button-outline:hover { background: #ffffff12; border-color: var(--lime-bright); }
.pricing .button-light { background: white; color: var(--ink); }
.pricing .button-light:hover { background: var(--lime); }
.nowrap { white-space: nowrap; }
@media (max-width: 1200px) {
  .price-table-wrap { --amount: 2.25rem; }
}
@media (max-width: 971px) and (min-width: 901px) {
  .price-table-wrap { --label: 360px; }
  .plan-name { font-size: 1.25rem; }
  .plan-amount-text { font-size: min(calc(var(--amount) * .7), 2.25vw); }
}
@media (max-width: 700px) {
  .marquee-toggle { padding: 13px; }
  .marquee-toggle .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Tablets: the label column keeps the longest feature on one line down to 761 px. */
@media (max-width: 900px) and (min-width: 641px) {
  .price-table-wrap { --label: 350px; --amount: 2rem; }
  .price-table :is(th, td) { padding-inline: 12px; }
  .price-table :is(.price-corner, tbody th, tfoot td:first-child) { padding-left: 0; }
  .plan-name { font-size: 1.125rem; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .plan-amount-text { font-size: min(calc(var(--amount) * .7), 2.35vw); }
}
/* Small tablets: the plan columns need the room, so features take two lines on even rows. */
@media (max-width: 760px) and (min-width: 641px) {
  .price-table-wrap { --label: 34%; --amount: 1.75rem; }
  .price-table tbody :is(th, td) { height: calc(3em + 33px); }
}
/* Phones: the table becomes two plan cards. */
@media (max-width: 640px) {
  .price-heading { display: block; }
  .price-table-wrap { display: none; }
  .price-cards { --amount: 2rem; display: grid; gap: 16px; max-width: 480px; margin-inline: auto; }
  .price-card { padding: 28px 24px 24px; border-radius: 28px; background: #ffffff05; box-shadow: inset 0 0 0 1px #ffffff1a; color: var(--p-text); }
  .price-card.is-growth { background: var(--panel); box-shadow: inset 0 1px 0 #ffffff24; }
  /* Name and price read as one block; a single hairline then opens the list. */
  .plan-price { margin: 14px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--p-line); }
  .is-growth .plan-price { border-color: var(--p-panel-line); }
  .plan-list { list-style: none; display: grid; gap: 12px; margin: 20px 0 24px; padding: 0; font-size: .9375rem; line-height: 1.45; color: var(--p-text); }
  .is-growth .plan-list { color: white; }
  .plan-list li { display: flex; align-items: flex-start; gap: 12px; text-wrap: balance; }
  .plan-list .icon-check { width: 18px; height: 18px; margin-top: 2px; color: var(--p-quiet-tick); }
  .is-growth .plan-list .icon-check { color: var(--lime-bright); }
}

/* ---------- Contact ---------- */
.contact { background: var(--mist); padding-block: 104px; }
.contact-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: clamp(48px, 7vw, 96px); max-width: 1000px; }
.portrait { margin: 0; }
.portrait-frame { overflow: hidden; border-radius: 160px 160px 28px 28px; aspect-ratio: 4 / 5; background: #e4ebe1; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.portrait figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; font-size: .875rem; text-align: center; }
.portrait figcaption strong { font-weight: 700; }
.portrait figcaption span { color: var(--muted); }
.contact-copy h2 { font-size: 3.25rem; margin-bottom: 26px; }
.contact-copy h2 em { font-size: 1.18em; }
.contact-copy > p { max-width: 480px; font-size: 1.0625rem; color: var(--muted); text-wrap: pretty; }
.contact-copy > p + p { margin-top: 12px; }
.contact-actions { display: grid; justify-items: start; gap: 16px; margin-top: 30px; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9375rem; color: var(--muted); }
.email-link { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 500ms var(--ease-out), color 200ms; }
.email-link:hover { color: var(--green); background-size: 0% 1px; background-position: 100% 100%; }
.copy-email { width: 40px; height: 40px; padding: 10px; }
.copy-email .icon { width: 18px; height: 18px; }
.copy-email.is-copied { color: var(--green); }
.footer .email-row { gap: 4px; }
.footer .email-link { font-weight: 500; }
.footer .copy-email { color: #dfe6df; }
.footer .copy-email:hover { background: #ffffff14; }
.footer .copy-email.is-copied { color: var(--lime-bright); }

/* ---------- Floating contact button: out of the way in the hero, the about section and the footer ---------- */
.contact-bubble { position: fixed; z-index: 35; right: 24px; bottom: 24px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; box-shadow: inset 0 0 0 1px #ffffff33, 0 12px 30px -10px #20835499; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), background 200ms, visibility 0s linear 0s; }
.contact-bubble .icon { width: 28px; height: 28px; }
.contact-bubble:hover { background: var(--green-dark); transform: scale(1.05); }
/* Hidden means out of the tab order too; visibility waits for the fade before it switches off. */
html.js-motion .contact-bubble, html.reduced .contact-bubble:not(.is-in) { opacity: 0; transform: scale(.85); pointer-events: none; visibility: hidden; }
html.js-motion .contact-bubble.is-in { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
html.js-motion .contact-bubble.is-in:hover { transform: scale(1.05); }
.contact-bubble:is(.in-hero, .is-away), html.js-motion .contact-bubble.is-in:is(.in-hero, .is-away) { opacity: 0; transform: scale(.85); pointer-events: none; visibility: hidden; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), visibility 0s linear 400ms; }

/* ---------- Footer: contact on the left, the wordmark signs off on the right ---------- */
.footer { position: relative; overflow: clip; background: var(--night); color: #cdd5ce; padding-block: clamp(72px, 12vh, 120px) 28px; }
.footer-top { display: grid; justify-items: start; gap: 8px; }
.footer-label { font-size: 1rem; color: #aab5ab; }
.footer-big { white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; margin-top: 4px; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; color: white; transition: color 250ms; }
.footer-big .arrow { width: .55em; height: .55em; }
.footer-big:hover { color: var(--lime-bright); }
.footer-mail { font-size: 1.125rem; color: #dfe6df; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; }
.footer-mail:hover { color: var(--lime-bright); }
.footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: clamp(80px, 14vh, 160px); }
.footer-meta { display: grid; gap: 8px; font-size: .875rem; color: #97a399; }
.footer-meta a { color: #dfe6df; width: fit-content; }
.footer-meta a:hover { color: var(--lime-bright); text-decoration: underline; }

/* The footer wordmark, plain and still. */
.footer-mark { flex: 0 0 auto; width: min(58%, 760px); aspect-ratio: 4594 / 622; background: #f2f5f1; -webkit-mask: url("img/sane-ads-wordmark.svg") 0 0 / 100% 100% no-repeat; mask: url("img/sane-ads-wordmark.svg") 0 0 / 100% 100% no-repeat; }

/* ---------- Floating WhatsApp ---------- */

/* ---------- Large screens ---------- */
@media (min-width: 1600px) {
  .wrap { width: min(1400px, calc(100% - 160px)); }
  .section-heading h2, .contact-copy h2, .price-corner h2, .showreel h2 { font-size: 3.75rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .topbar { width: calc(100% - 72px); }
  .nav, .nav-actions { gap: 16px; }
  .contact-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 1280px) and (min-width: 1201px) {
  .steps { --gap: 20px; }
  .step-copy h3 { font-size: 1.1875rem; }
}
@media (max-width: 1100px) and (min-width: 901px) {
}
@media (max-width: 1200px) and (min-width: 641px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; max-width: 760px; margin-inline: auto; }
  .step:nth-child(2n) .step-rail::after { right: 50%; }
  .step:nth-child(2n + 1) .step-rail::after { left: 50%; }
  .step-illustration { aspect-ratio: 16 / 10; }
  .step-illustration img { object-fit: contain; }
}
@media (max-width: 900px) {
  .work-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 48px; }
  .footer-mark { width: 100%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  html { scroll-padding-top: 90px; }
  .pricing { scroll-margin-top: -90px; }
  .topbar { top: 10px; width: min(640px, calc(100% - 48px)); margin-top: 10px; border-radius: 22px; }
  .nav { min-height: 64px; gap: 18px; padding-inline: 18px; }
  .wrap { width: calc(100% - 48px); }
  .nav-contact { padding: 8px 16px; }
  .work-layout { gap: 36px; padding-block: 80px; }
  .work-story { max-width: 600px; }
  .work-story h2 { font-size: 2.5rem; }
  .work-visual { max-width: 720px; }
  .showreel { padding-block: 80px; }
  .showreel-head { margin-bottom: 28px; }
  .section-heading h2, .showreel h2, .contact-copy h2, .price-corner h2 { font-size: 2.75rem; }
  .process, .pricing, .contact { padding-block: 80px; }
  .contact-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 560px) {
  .topbar { width: calc(100% - 40px); border-radius: 20px; }
  .nav { gap: 12px; padding-inline: 16px; }
  .wrap { width: calc(100% - 40px); }
  .nav-actions { gap: 14px; }
  .languages { gap: 0; font-size: .75rem; }
  .languages a { min-width: 24px; padding-inline: 0; text-align: center; }
  .hero { min-height: calc(100svh - 76px); }
  .hero h1 { font-size: min(2.75rem, 10.5vw); line-height: 1.08; }
  .hero-copy { margin-top: 20px; font-size: 1.0625rem; max-width: 330px; }
  .hero-actions { margin-top: 30px; width: 100%; }
  .hero-actions .button { width: 100%; }
  .work-layout { padding-block: 64px; gap: 30px; }
  .work-story h2 { font-size: clamp(1.75rem, 7.5vw, 2.375rem); }
  .work-description { margin-top: 20px; font-size: 1rem; }
  .work-cta { margin-top: 24px; width: 100%; }
  .work-media { border-radius: 18px; clip-path: inset(calc(var(--u) * 5%) calc(var(--u) * 6%) round 18px); }
  .video-toggle { right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 10px; }
  .marquee-track { gap: 14px; padding-inline: 14px; }
  .showreel-card { width: 176px; border-radius: 16px; }
  .showreel-card.is-low { margin-top: 24px; }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2, .showreel h2 { font-size: 2.125rem; line-height: 1.24; }
  .section-heading > p { margin-top: 14px; font-size: 1rem; }
  .process, .pricing, .contact, .showreel { padding-block: 64px; }
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .portrait { width: 200px; max-width: 100%; margin-inline: auto; }
  .portrait figcaption { font-size: .8125rem; }
  .contact-copy h2 { font-size: 2.125rem; margin-bottom: 20px; }
  .contact-copy > p { font-size: 1rem; }
  .contact-actions, .contact-actions .button { width: 100%; }
  .footer { padding-block: 64px; }
  .contact-bubble { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .footer-big { font-size: min(2.25rem, 9vw); }
}
/* ---------- Brands at the foot of the hero: one slow loop ---------- */
/* With motion the logos are spaced so that one copy of the row is always wider than the row
   itself (logo widths plus ten paddings >= row width + 120px): no logo is ever in view twice.
   On desktops the row is at most 1080 px wide, which keeps the gaps near 100 px on any screen.
   It moves about 25 px/s on desktops and 20 px/s on phones (app.js sets the duration), fades out
   softly at both ends (no blur: it smeared the logos), pauses under the pointer or a finger, rests
   off screen and becomes a still, wrapped row without motion. */
.hero-brands { position: relative; z-index: 1; padding-bottom: clamp(24px, 4.5vh, 48px); text-align: center; }
.logo-marquee { position: relative; overflow: hidden; padding-block: 10px; }
.logo-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.logo-track li { flex: 0 0 auto; padding-inline: 36px; }
.logo-track [aria-hidden] { display: none; }
.logo-track img { display: block; width: auto; height: 36px; opacity: .72; }
.logo-track .logo-pwolle, .logo-track .logo-banaani { height: 38px; }
.logo-track .logo-nopeet { height: 33px; }
.logo-track .logo-greengo { height: 24px; }
html.js-motion .logo-marquee { width: min(100%, 1080px); margin-inline: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
html.js-motion .logo-track { flex-wrap: nowrap; width: max-content; animation: logo-run var(--logo-duration, 60s) linear infinite; }
html.js-motion .logo-track li { padding-inline: max(36px, calc((min(100vw, 1080px) + 120px - 690px) / 10)); }
html.js-motion .logo-track [aria-hidden] { display: block; }
html.js-motion .logo-marquee:is(:hover, :active, .is-off) .logo-track { animation-play-state: paused; }
@media (max-width: 900px) {
  .logo-track li { padding-inline: 24px; }
  .logo-track img { height: 28px; }
  .logo-track .logo-pwolle, .logo-track .logo-banaani { height: 30px; }
  .logo-track .logo-nopeet { height: 26px; }
  .logo-track .logo-greengo { height: 19px; }
  html.js-motion .logo-marquee { width: 100%; }
  html.js-motion .logo-track li { padding-inline: max(24px, calc((100vw + 120px - 541px) / 10)); }
}
@keyframes logo-run { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 360px) {
  .nav { padding-inline: 12px; }
  .button { padding-inline: 16px; gap: 10px; }
  .nav { gap: 12px; }
  .nav-actions { gap: 12px; }
  .nav-contact { padding-inline: 12px; }
  .hero h1 { font-size: min(2.5rem, 10vw); }
}
@media (max-width: 340px) {
  .brand { width: 36px; flex-basis: 36px; }
  .nav-actions { gap: 8px; }
  .nav-contact { padding-inline: 9px; }
}
/* Phones and small tablets: a vertical numbered line without the illustrations. */
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; }
  .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; text-align: left; }
  .step:last-child { padding-bottom: 0; }
  .step-illustration { display: none; }
  .step-rail { grid-row: 1; align-self: stretch; align-items: flex-start; height: auto; margin: 0; }
  .step-rail::after, .step:nth-child(2n) .step-rail::after, .step:nth-child(2n + 1) .step-rail::after, .step:first-child .step-rail::after { display: block; left: 21px; right: auto; top: 50px; bottom: -22px; width: 2px; height: auto; margin: 0; transform-origin: 50% 0; }
  .step:last-child .step-rail::after { display: none; }
  html.js-motion .step .step-rail::after { transform: scaleY(0); }
  .step-copy { padding-top: 9px; }
  .step-copy h3 { font-size: 1.1875rem; }
  .step-copy p { max-width: none; margin: 4px 0 0; font-size: .9375rem; }
}
@media (max-width: 380px) {
  .price-card { padding-inline: 20px; }
}
/* Large text settings: long Finnish words may break rather than be cut off. */
.hero h1, .section-heading h2, .showreel h2, .work-story h2, .contact-copy h2, .footer-big { overflow-wrap: anywhere; }
@container page (max-width: 27rem) {
  .price-cards { overflow-wrap: break-word; }
  .email-row { flex-wrap: wrap; }
}

/* ---------- Privacy notice and 404 page ---------- */
.doc-page { background: white; }
.doc { max-width: 680px; padding-block: 64px 96px; }
.doc-back { display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.doc-back img { width: 30px; height: auto; }
.doc h1 { margin-top: 56px; font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1.1; letter-spacing: -.035em; }
.doc .doc-intro { margin-top: 20px; font-size: 1.125rem; }
.doc h2 { margin-top: 36px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.doc p { margin-top: 8px; color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.doc .doc-updated { margin-top: 48px; font-size: .875rem; }
.doc p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc-404 { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 64px; }
.doc-404 .doc-mark { width: 52px; height: auto; }
.doc-404 h1 { margin-top: 32px; }
.doc .doc-links { display: flex; justify-content: center; gap: 28px; margin-top: 28px; font-weight: 700; }

/* ---------- Forced colours (Windows contrast themes): icons are masks, so paint them in the system text colour ---------- */
@media (forced-colors: active) {
  .icon { forced-color-adjust: none; background: CanvasText; }
  .price-table-wrap::before { border: 2px solid CanvasText; }
  .brand img { forced-color-adjust: none; padding: 3px; border-radius: 8px; background: white; }
}

/* ---------- Static fallback (no JavaScript, or the script was blocked, failed or loaded too late): everything readable and still ---------- */
html:not(.js-motion) .marquee { overflow-x: auto; cursor: auto; touch-action: pan-x pan-y; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scroll-padding-inline: 22px; scrollbar-width: thin; }
html:not(.js-motion) .showreel-card { scroll-snap-align: start; }
html:not(.js-motion) .marquee-toggle { display: none; }

/* Without JavaScript: hide controls that need it, keep section navigation reachable on phones. */
html:not(.js-motion):not(.reduced) :is(.video-toggle, .copy-email) { display: none; }