/*
 * Corecontrol Oy – lapsiteeman tyylit (Louhosteema).
 * Lähde: hyväksytty vedos design/konsepti-a (v4). Luokat cc-etuliitteellä, ettei Bootstrapin
 * .nav/.card/.menu-luokat törmää. Pääbundle (Bootstrap + Louhos-komponentit) latautuu ensin.
 */

@property --bl { syntax: "<length>"; inherits: false; initial-value: 10px; }

:root {
	/* Vedoksen arvot */
	--cc-bg: #0b0b0c;
	--cc-card: #121113;
	--cc-card-2: #171517;
	--cc-line: rgba(255, 255, 255, .07);
	--cc-line-2: rgba(255, 255, 255, .13);
	--cc-text: #f2f3f5;
	--cc-text-2: #b4b8c0;
	--cc-muted: #80848d;
	--cc-blue: #3374ba;   /* Moderate Blue */
	--cc-blue-p: #14499e; /* Blue (Primary) */
	--cc-blue-l: #5674d0; /* Blue (P – Light) */
	--cc-accent: #7395ee; /* tekstikorostus mustalla, 6,8:1 */
	--cc-signal: #9dbaf2;
	--cc-warn: #e4a948;
	--cc-display: "purista-web", "Saira", "Roboto", sans-serif;
	--cc-body: "Roboto", system-ui, sans-serif;
	--cc-ease: cubic-bezier(.22, .8, .24, 1);
	--cc-gutter: 64px;
	--cc-lg-box: #fff; --cc-lg-bar: #231f20; --cc-lg-dot: #3374ba; --cc-lg-core: #fff; --cc-lg-control: #fff;

	/* Louhos-tokenit (pääteeman komponentit ja Bootstrap-sillat) */
	--louhos-primary: #14499e;
	--louhos-primary-rgb: 20, 73, 158;
	--louhos-primary-dark: #0d3270;
	--louhos-accent: #7395ee;
	--louhos-link-color: #7395ee;
	--louhos-headings: #f2f3f5;
	--louhos-body-color: #b4b8c0;
	--louhos-grey: #121113;
	--louhos-border: #2a292c;
	--louhos-border-rgb: 42, 41, 44;
	--louhos-dark-1: #0b0b0c;
	--louhos-dark-1-rgb: 11, 11, 12;
	--louhos-dark-2: #121113;
	--louhos-dark-2-rgb: 18, 17, 19;
	--louhos-header-height: 108px;
	--louhos-radius: 14px;
	--louhos-radius-lg: 26px;
	--louhos-font-family: "Roboto", system-ui, sans-serif;
	--bs-body-bg: #0b0b0c;
}

/* ---------- Perusta ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cc-bg); color: var(--cc-text); font: 400 16px/1.6 var(--cc-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cc-display); font-weight: 500; color: #fff; }
:focus-visible { outline: 2px solid var(--cc-signal); outline-offset: 4px; }
.skip-link { background: var(--cc-blue-p); color: #fff; }
.cc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cc-wrap { width: min(1312px, calc(100% - 2 * var(--cc-gutter))); margin: 0 auto; position: relative; }

/* Vedoksen nollaukset vain sen omissa osioissa (.cc-x), jotta tavalliset lohkot ja sisältö toimivat */
.cc-x :where(ul, h1, h2, h3, p) { margin: 0; padding: 0; }
.cc-x :where(ul) { list-style: none; }
.cc-x :where(a) { color: inherit; text-decoration: none; }
.cc-x :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cc-x :where(img) { display: block; max-width: 100%; height: auto; }

.cc-box { fill: var(--cc-lg-box); } .cc-bar { fill: var(--cc-lg-bar); } .cc-dot { fill: var(--cc-lg-dot); }
.cc-core { fill: var(--cc-lg-core); } .cc-control { fill: var(--cc-lg-control); } .cc-sub { fill: var(--cc-lg-control); }

.cc-eyebrow { font: 500 12px/1 var(--cc-body); letter-spacing: .16em; text-transform: uppercase; color: var(--cc-muted); }
.cc-h2 { font: 500 clamp(36px, 3.9vw, 56px)/1.06 var(--cc-display); letter-spacing: -.015em; }
.cc-h2 em, .cc-hero-h em { font-style: normal; color: var(--cc-accent); }
.cc-sec-lead { font-size: 17px; line-height: 1.65; color: var(--cc-text-2); }

/* ---------- Hakasnappi: pelkkä teksti, kulmissa hakaset ---------- */
.cc-bb {
  --bc: var(--cc-blue-l);
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 30px;
  font: 500 13px/1 var(--cc-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; isolation: isolate;
}
.cc-bb::before, .cc-bb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; color: var(--bc);
  background:
    linear-gradient(currentColor, currentColor) left top / var(--bl) 1.5px, linear-gradient(currentColor, currentColor) left top / 1.5px var(--bl),
    linear-gradient(currentColor, currentColor) right top / var(--bl) 1.5px, linear-gradient(currentColor, currentColor) right top / 1.5px var(--bl),
    linear-gradient(currentColor, currentColor) left bottom / var(--bl) 1.5px, linear-gradient(currentColor, currentColor) left bottom / 1.5px var(--bl),
    linear-gradient(currentColor, currentColor) right bottom / var(--bl) 1.5px, linear-gradient(currentColor, currentColor) right bottom / 1.5px var(--bl);
  background-repeat: no-repeat;
  transition: inset .5s var(--cc-ease), --bl .5s var(--cc-ease), color .35s;
}
.cc-bb::after { opacity: 0; }
.cc-bb:hover::before, .cc-bb:focus-visible::before { inset: -7px; --bl: 18px; color: var(--cc-signal); }
.cc-bb:hover::after, .cc-bb:focus-visible::after { animation: echo .8s var(--cc-ease); }
@keyframes echo { from { inset: 0; opacity: .7; } to { inset: -18px; opacity: 0; } }
.cc-bb:focus-visible { outline: none; }
.cc-bb-sm { height: 42px; padding: 0 22px; font-size: 12px; }

/* ---------- Navigaatio ---------- */
.cc-nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .35s, backdrop-filter .35s; }
.cc-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cc-line); opacity: 0; transition: opacity .35s; }
.cc-nav.cc-scrolled, .cc-nav.cc-menu-open { background: rgba(11,11,12,.9); backdrop-filter: blur(16px); }
.cc-nav.cc-scrolled::after, .cc-nav.cc-menu-open::after { opacity: 1; }
.cc-nav-in { display: flex; align-items: center; height: 108px; position: static; }
.cc-nav-logo { margin-right: auto; }
.cc-logo { display: block; width: 252px; height: 51.5px; }
.cc-menu { display: flex; align-items: center; gap: 38px; margin-right: 48px; }
.cc-menu-btn, .cc-menu-a { position: relative; display: flex; align-items: center; gap: 8px; height: 108px; font-size: 15px; color: var(--cc-text-2); transition: color .25s; }
.cc-menu-btn:hover, .cc-menu-a:hover, .cc-has-mega.cc-open .cc-menu-btn { color: #fff; }
.cc-menu-btn::after, .cc-menu-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 1.5px; background: var(--cc-blue-l); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--cc-ease); }
.cc-menu-a:hover::after, .cc-has-mega.cc-open .cc-menu-btn::after { transform: scaleX(1); }
.cc-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--cc-ease); }
.cc-has-mega.cc-open .cc-caret { transform: translateY(1px) rotate(-135deg); }

/* Megavalikko */
.cc-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #0e0d0f; border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line);
  clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
  transition: clip-path .55s var(--cc-ease), opacity .3s, visibility 0s linear .55s;
}
.cc-mega::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 90% at 88% 0%, rgba(51,116,186,.16), transparent 70%); }
.cc-has-mega.cc-open .cc-mega { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path .55s var(--cc-ease), opacity .3s, visibility 0s; }
.cc-mega-in { display: grid; grid-template-columns: 290px 1fr 300px; gap: 56px; padding: 52px 0 60px; }
.cc-mega-in > * { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--cc-ease), transform .45s var(--cc-ease); }
.cc-has-mega.cc-open .cc-mega-in > * { opacity: 1; transform: none; }
.cc-has-mega.cc-open .cc-mega-in > :nth-child(2) { transition-delay: .07s; }
.cc-has-mega.cc-open .cc-mega-in > :nth-child(3) { transition-delay: .14s; }
.cc-mega-title { font: 500 24px/1.25 var(--cc-display); margin: 18px 0 30px; color: #fff; }
.cc-mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
.cc-mega-list a, .cc-mega-prods a { position: relative; display: block; padding: 16px 44px 16px 20px; border-radius: 14px; transition: background .3s; }
.cc-mega-list a::after, .cc-mega-prods a::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--cc-signal); border-right: 1.5px solid var(--cc-signal); transform: translate(-8px, -50%) rotate(45deg); opacity: 0; transition: transform .35s var(--cc-ease), opacity .3s; }
.cc-mega-list a:hover, .cc-mega-prods a:hover, .cc-mega-list a:focus-visible, .cc-mega-prods a:focus-visible { background: rgba(255,255,255,.045); outline: none; }
.cc-mega-list a:hover::after, .cc-mega-prods a:hover::after, .cc-mega-list a:focus-visible::after { transform: translate(0, -50%) rotate(45deg); opacity: 1; }
.cc-mega-list b { display: block; font: 500 16.5px/1.3 var(--cc-display); color: #fff; }
.cc-mega-list span, .cc-mega-prods a > span:last-child { display: block; margin-top: 5px; font-size: 13.5px; color: var(--cc-muted); }
.cc-mega-card { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 26px 28px; background: linear-gradient(160deg, #161a24, #111013 70%); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-mega-card p { font: 500 18px/1.35 var(--cc-display); margin: 14px 0 22px; }
.cc-mega-flow { width: 100%; height: 92px; }
.cc-mega-flow path { fill: none; stroke: var(--cc-blue-l); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 8; opacity: .55; animation: flow 2.6s linear infinite; }
.cc-mega-flow .cc-mf-hl { stroke: #fff; opacity: .9; stroke-dasharray: 0 8 0 8 0 212; animation: run 2.4s linear infinite; }
.cc-mega-flow circle { fill: #fff; filter: drop-shadow(0 0 6px var(--cc-blue-l)); }
.cc-mega-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
.cc-mega-prods a { padding-top: 20px; padding-bottom: 18px; }
.cc-lockup { display: block; width: 214px; }
.cc-lockup svg { display: block; width: 214px; height: 43.7px; }
.cc-lockup em { display: block; margin-left: 51%; width: 49%; text-align: center; font: 400 12.5px/1 var(--cc-display); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin-top: -1px; }
.cc-mega-common { padding-left: 28px; border-left: 1px solid var(--cc-line); }
.cc-mega-common a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cc-line); font: 500 17px var(--cc-display); color: var(--cc-text-2); transition: color .25s, padding .35s var(--cc-ease); }
.cc-mega-common .cc-eyebrow { margin-bottom: 14px; }
.cc-mega-common a::after { content: "→"; color: var(--cc-blue-l); transition: transform .35s var(--cc-ease); }
.cc-mega-common a:hover { color: #fff; padding-left: 6px; }
.cc-mega-common a:hover::after { transform: translateX(4px); }
.cc-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .4s; }
body.cc-menu-open .cc-scrim { opacity: 1; }

/* ---------- HERO ---------- */
.cc-hero { position: relative; height: 856px; overflow: hidden; }
.cc-hero-copy { padding-top: 180px; position: relative; z-index: 2; }
.cc-hero-h { margin: 22px 0 34px; font: 500 clamp(42px, 5.42vw, 78px)/1.02 var(--cc-display); letter-spacing: -.02em; }
.cc-hero-row { display: flex; justify-content: space-between; align-items: flex-end; }
.cc-hero-lead { width: 560px; font-size: 18px; line-height: 1.62; color: var(--cc-text-2); }
.cc-cta-row { display: flex; gap: 22px; }
.cc-h-in { animation: hIn 1s var(--cc-ease) both; animation-delay: var(--d, 0s); }
@keyframes hIn { from { opacity: 0; transform: translateY(16px); } }

.cc-merge { position: absolute; left: 0; right: 0; top: 448px; height: 388px; z-index: 1; }
.cc-merge canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Vierityspaljastus ---------- */
.cc-js .cc-rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--cc-ease), transform 1s var(--cc-ease); transition-delay: var(--rd, 0s); }
.cc-js .cc-rv.cc-in { opacity: 1; transform: none; }

/* ---------- Osioiden yhteinen otsake ---------- */
.cc-sec-head { display: grid; grid-template-columns: 1fr 440px; align-items: end; gap: 80px; margin-bottom: 72px; }
.cc-sec-head .cc-sec-lead { padding-bottom: 8px; }

/* ---------- Kortit ---------- */
.cc-card, .cc-use { position: relative; overflow: hidden; border-radius: 26px; background: var(--cc-card); box-shadow: inset 0 0 0 1px var(--cc-line); isolation: isolate; transition: box-shadow .5s var(--cc-ease); }
.cc-card::before, .cc-use::before { /* pehmeä brändisininen hehku */
  content: ""; position: absolute; z-index: -1; width: 560px; height: 420px; left: -200px; bottom: -240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(51,116,186,.42), rgba(20,73,158,.12) 60%, transparent); transition: transform .9s var(--cc-ease), opacity .6s;
}
.cc-card::after, .cc-use::after { /* pisterasteri */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 320px; height: 260px;
  background: radial-gradient(circle, rgba(115,149,238,.55) 1.1px, transparent 1.6px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  opacity: .7;
}
.cc-card:hover, .cc-use:hover { box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-card:hover::before, .cc-use:hover::before { transform: translate(60px, -40px) scale(1.1); }

.cc-products { padding: 170px 0 100px; }
.cc-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.cc-c-half { grid-column: span 6; min-height: 560px; display: flex; flex-direction: column; }
.cc-c-half:nth-child(even)::before { left: auto; right: -200px; }
.cc-c-half:nth-child(even)::after { right: auto; left: 0; -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 70%); }
.cc-card-art { flex: 1; display: grid; place-items: center; padding-top: 34px; }
.cc-card-art svg { width: 520px; height: 260px; overflow: visible; }
.cc-card-txt { padding: 0 48px 46px; }
.cc-card-txt h3 { font: 500 34px/1.1 var(--cc-display); margin: 14px 0 14px; }
.cc-prod-logo { margin: 22px 0 22px !important; }
.cc-prod-logo svg { display: block; width: 300px; height: 78.6px; overflow: hidden; }
.cc-card-txt p:not(.cc-eyebrow) { font-size: 16px; line-height: 1.62; color: var(--cc-text-2); max-width: 520px; }
.cc-ln, .cc-ln * { fill: none; stroke: var(--cc-accent); stroke-width: 1.6; }
.cc-glow, .cc-glow * { fill: none; stroke: var(--cc-blue); stroke-width: 10; opacity: .22; filter: blur(6px); }
.cc-dots { fill: none; stroke: var(--cc-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 8; animation: flow 2.4s linear infinite; }
.cc-dots.cc-dim { opacity: .35; animation-duration: 3.6s; }
@keyframes flow { to { stroke-dashoffset: -16; } }
@keyframes run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -228; } }
.cc-pt { fill: #fff; filter: drop-shadow(0 0 8px var(--cc-blue-l)); animation: ptPulse 2.6s ease-in-out infinite; }
.cc-pt.cc-warn { fill: var(--cc-warn); filter: drop-shadow(0 0 8px rgba(228,169,72,.8)); }
@keyframes ptPulse { 50% { opacity: .55; } }
.cc-leds circle { fill: var(--cc-accent); animation: ptPulse 1.8s ease-in-out infinite; }
.cc-leds circle:nth-child(2n) { animation-delay: -.6s; } .cc-leds circle:nth-child(3n) { animation-delay: -1.1s; }

.cc-c-vis { grid-column: span 12; height: 500px; display: grid; grid-template-columns: 520px 1fr; align-items: center; }
.cc-c-vis::before { left: auto; right: 80px; bottom: -280px; width: 760px; height: 520px; }
.cc-c-vis::after { right: auto; left: 0; -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 65%); }
.cc-c-vis .cc-card-txt { padding: 0 0 0 56px; }
.cc-c-vis .cc-bb { margin-top: 32px; }
.cc-vis-img { align-self: end; justify-self: end; width: 700px; margin: 0 -40px -120px 0; transition: transform .9s var(--cc-ease); }
.cc-vis-img img { filter: drop-shadow(0 40px 60px rgba(0,0,0,.7)); }
.cc-c-vis:hover .cc-vis-img { transform: translateY(-10px); }

.cc-gw-note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; font-size: 15.5px; color: var(--cc-muted); }
.cc-gw-note b { color: var(--cc-text); font-weight: 500; }
.cc-gw-ic { display: flex; gap: 4px; }
.cc-gw-ic i { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-blue); }

/* ---------- KÄYTTÖKOHTEET ---------- */
.cc-uses { padding: 120px 0 120px; }
.cc-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cc-use { padding: 36px 38px 42px; }
.cc-use::before { width: 420px; height: 340px; left: -160px; bottom: -220px; }
.cc-use::after { width: 240px; height: 200px; }
.cc-use-art { display: block; width: 100%; height: 150px; margin-bottom: 34px; overflow: visible; }
.cc-use-art .cc-lim { stroke: rgba(255,255,255,.22); stroke-dasharray: 4 6; fill: none; }
.cc-use-art .cc-bars circle { fill: var(--cc-accent); }
.cc-use-art .cc-bars circle.cc-w { fill: var(--cc-warn); }
.cc-use .cc-eyebrow { min-height: 26px; line-height: 1.1; }
.cc-use h3 { font: 500 30px/1.12 var(--cc-display); margin: 14px 0 16px; letter-spacing: -.01em; }
.cc-use > p:not(.cc-eyebrow) { font-size: 15.5px; line-height: 1.62; color: var(--cc-text-2); }
.cc-use ul { margin-top: 26px; }
.cc-use li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--cc-line); font-size: 14.5px; color: var(--cc-text); }
.cc-use li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-blue-l); }

/* ---------- CTA + pisteaalto ---------- */
.cc-cta { position: relative; padding: 170px 0 0; height: 720px; overflow: hidden; }
.cc-cta-in { text-align: center; position: relative; z-index: 2; }
.cc-cta-h { font: 500 clamp(36px, 4.45vw, 64px)/1.08 var(--cc-display); letter-spacing: -.015em; }
.cc-cta-lead { max-width: 640px; margin: 26px auto 0; font-size: 18px; line-height: 1.62; color: var(--cc-text-2); }
.cc-cta .cc-cta-row { justify-content: center; margin-top: 48px; }
.cc-wave { position: absolute; left: 0; bottom: -40px; width: 100%; height: 440px; z-index: 1;
  /* aalto liukenee nappien kohdalta, ettei nappien taustaa tarvita (maskin y = nappien keskikohta canvaksessa) */
  -webkit-mask-image: radial-gradient(ellipse 300px 78px at 50% 77px, transparent 45%, #000 100%); mask-image: radial-gradient(ellipse 300px 78px at 50% 77px, transparent 45%, #000 100%); }

/* ---------- FOOTER ---------- */
.cc-foot { padding: 30px 0 44px; }
.cc-foot-top { display: flex; align-items: center; gap: 64px; padding-bottom: 40px; }
.cc-foot-logo { width: 220px; height: 45px; }
.cc-foot-nav { display: flex; gap: 40px; margin-right: auto; font-size: 15px; color: var(--cc-text-2); }
.cc-foot-nav a { transition: color .25s; }
.cc-foot-nav a:hover { color: #fff; }
.cc-foot-bot { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--cc-line); font-size: 14px; color: var(--cc-muted); }
.cc-slot { color: var(--cc-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   WordPress-toteutuksen lisäykset (vedoksen ulkopuoliset tilat ja sivupohjat)
   ===================================================================== */
.cc-menu-btn.is-current, .cc-menu-a.is-current { color: #fff; }
.cc-menu-a.is-current::after { transform: scaleX(1); }
.cc-mega-prod-name { display: block; font: 500 18px/1.3 var(--cc-display); color: #fff; }
.cc-mega-list a[aria-current], .cc-mega-prods a[aria-current] { background: rgba(255,255,255,.045); }
.cc-mega-common a[aria-current] { color: #fff; }
.cc-use-grid.cc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-use h3 a { color: inherit; text-decoration: none; transition: color .25s; }
.cc-use h3 a:hover { color: var(--cc-signal); }
.cc-use h3 a::after { content: ""; position: absolute; inset: 0; } /* koko kortti linkkinä */
.cc-card-txt .cc-bb { margin-top: 22px; }
.cc-c-half .cc-card-txt:has(.cc-bb) { padding-bottom: 60px; }
.cc-foot-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-style: normal; }
.cc-foot-contact a, .cc-foot-legal a { transition: color .25s; }
.cc-foot-contact a:hover, .cc-foot-legal a:hover { color: #fff; }
.cc-foot-legal { margin: 0; }

/* Alasivun hero: ei animaatiota, matalampi */
.cc-hero--page { height: auto; padding-bottom: 90px; }
.cc-hero--page .cc-hero-h { font-size: clamp(38px, 4.2vw, 60px); }
.cc-hero--page .cc-hero-row { margin-top: 0; }

/* CTA ilman aaltoa */
.cc-cta--plain { height: auto; padding: 120px 0 140px; }

/* Sivut, joiden alussa ei ole heroa (arkisto, yksittäinen, haku, 404) */
.cc-page-top { padding-top: 180px; }
.error404 .site-main, .search .site-main { padding-top: 140px; }

/* Tavallinen sisältö (lakisivut ym.) */
.entry-content > :where(p, ul, ol, h2, h3, h4, table, blockquote) { color: var(--cc-text-2); }
.entry-content > :where(p, ul, ol, table, blockquote) a:not([class]) { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content > :where(p, ul, ol, table, blockquote) a:not([class]):hover { color: #fff; }
.entry-content > :not(section):last-child { margin-bottom: 140px; }
.entry-content > h2 { margin-top: 2.2em; font-size: 32px; color: #fff; }
.entry-content > h3 { margin-top: 1.8em; font-size: 24px; color: #fff; }

/* Louhosteeman valmiit lohkot tummina */
.louhos-ti, .louhos-accordion, .louhos-contact { color: var(--cc-text-2); background: transparent; }
.louhos-ti.bg--white, .louhos-ti.bg--grey { background: transparent; }
.louhos-ti__content { padding: clamp(24px, 4vw, 56px); }
.louhos-ti__title, .louhos-accordion__title, .louhos-contact__title { font: 500 clamp(30px, 3vw, 44px)/1.1 var(--cc-display); color: #fff; letter-spacing: -.01em; }
.louhos-ti__body { font-size: 17px; line-height: 1.65; }
.louhos-ti__media img { border-radius: 26px; }
.louhos-ti__media { position: relative; }
.louhos-accordion .accordion { --bs-accordion-bg: var(--cc-card); --bs-accordion-color: var(--cc-text-2); --bs-accordion-border-color: var(--cc-line); --bs-accordion-btn-color: #fff; --bs-accordion-active-bg: var(--cc-card-2); --bs-accordion-active-color: #fff; --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--cc-signal); --bs-accordion-border-radius: 18px; --bs-accordion-inner-border-radius: 18px; }
.louhos-accordion .accordion-button { font: 500 19px/1.3 var(--cc-display); }
.louhos-accordion .accordion-button::after { filter: invert(1) brightness(1.4); }
.louhos-contact__card { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 26px; color: var(--cc-text-2); }
.louhos-contact a { color: var(--cc-accent); }

/* =====================================================================
   Responsiivisuus (lisätty vedokseen; 1440 px:n näkymä pysyy mallin mukaisena)
   ===================================================================== */
.cc-nav-toggle, .cc-menu-cta { display: none; }

/* ---------- Kapea työpöytä ---------- */
@media (max-width: 1360px) {
  .cc-menu { gap: 28px; margin-right: 32px; }
  .cc-logo { width: 220px; height: 45px; }
  .cc-mega-in { grid-template-columns: 240px 1fr 260px; gap: 40px; }
  .cc-c-vis { grid-template-columns: 440px 1fr; }
}

/* ---------- Tabletti ja mobiili: valikko paneeliin ---------- */
@media (max-width: 1100px) {
  :root { --cc-gutter: 32px; }
  .cc-nav-in { height: 76px; gap: 20px; }
  .cc-logo { width: 176px; height: 36px; }
  .cc-nav-cta { order: 2; }
  .cc-nav-toggle { order: 3; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 4px; font: 500 12px/1 var(--cc-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
  .cc-nav-toggle-ic { position: relative; width: 22px; height: 12px; }
  .cc-nav-toggle-ic i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--cc-ease), top .4s var(--cc-ease); }
  .cc-nav-toggle-ic i:first-child { top: 0; } .cc-nav-toggle-ic i:last-child { top: 10.5px; }
  .cc-nav.cc-nav-open .cc-nav-toggle-ic i:first-child { top: 5.25px; transform: rotate(45deg); }
  .cc-nav.cc-nav-open .cc-nav-toggle-ic i:last-child { top: 5.25px; transform: rotate(-45deg); }
  /* backdrop-filter tekisi navista fixed-paneelin sijoittelupohjan → pois mobiilissa */
  .cc-nav.cc-scrolled, .cc-nav.cc-menu-open { backdrop-filter: none; background: rgba(11,11,12,.96); }
  .cc-nav.cc-nav-open { background: var(--cc-bg); }
  .cc-nav.cc-nav-open::after { opacity: 1; }

  .cc-nav-menu {
    position: fixed; left: 0; right: 0; top: 76px; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--cc-bg); padding: 12px var(--cc-gutter) 48px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .35s var(--cc-ease), transform .35s var(--cc-ease), visibility 0s linear .35s;
  }
  .cc-nav.cc-nav-open .cc-nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--cc-ease), transform .35s var(--cc-ease), visibility 0s; }
  .cc-menu { display: block; margin: 0; }
  .cc-menu > li { border-bottom: 1px solid var(--cc-line); }
  .cc-menu-btn, .cc-menu-a { width: 100%; height: auto; padding: 22px 0; justify-content: space-between; font: 500 22px/1.2 var(--cc-display); color: #fff; }
  .cc-menu-btn::after, .cc-menu-a::after { display: none; }
  .cc-menu-cta { display: block; border: 0 !important; padding-top: 36px; }

  /* megavalikot haitareiksi */
  .cc-mega { position: static; clip-path: none; opacity: 1; visibility: visible; display: none; background: none; border: 0; transition: none; }
  .cc-mega::before { display: none; }
  .cc-has-mega.cc-open .cc-mega { display: block; }
  .cc-mega .cc-wrap { width: auto; }
  .cc-mega-in { display: block; padding: 0 0 22px; }
  .cc-mega-in > * { opacity: 1; transform: none; }
  .cc-mega-intro, .cc-mega-card { display: none; }
  .cc-mega-list, .cc-mega-prods { grid-template-columns: 1fr; gap: 2px; }
  .cc-mega-list a, .cc-mega-prods a { padding: 12px 40px 12px 0; border-radius: 0; }
  .cc-mega-list a:hover, .cc-mega-prods a:hover, .cc-mega-list a:focus-visible, .cc-mega-prods a:focus-visible { background: none; }
  .cc-mega-list a:focus-visible, .cc-mega-prods a:focus-visible { outline: 1px solid var(--cc-signal); outline-offset: 2px; }
  .cc-mega-list a::after, .cc-mega-prods a::after { right: 6px; opacity: .8; transform: translate(0, -50%) rotate(45deg); }
  .cc-lockup, .cc-lockup svg { width: 180px; height: 36.8px; }
  .cc-mega-common { border: 0; padding: 18px 0 0; }
  .cc-scrim { display: none; }
  body.cc-nav-lock { overflow: hidden; }

  /* hero */
  .cc-hero { height: auto; padding-bottom: 40px; }
  .cc-hero-copy { padding-top: 150px; }
  .cc-hero-row { flex-direction: column; align-items: flex-start; gap: 36px; }
  .cc-hero-lead { width: auto; max-width: 600px; }
  .cc-merge { position: relative; top: auto; height: 320px; margin-top: 40px; }

  /* osiot */
  .cc-sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .cc-sec-head .cc-sec-lead { max-width: 600px; padding: 0; }
  .cc-products { padding: 110px 0 80px; }
  .cc-c-half { min-height: 500px; }
  .cc-card-art svg { width: 100%; height: auto; max-width: 520px; }
  .cc-card-txt { padding: 0 36px 38px; }
  .cc-c-vis { height: auto; grid-template-columns: 1fr; align-items: start; }
  .cc-c-vis .cc-card-txt { padding: 44px 36px 0; }
  .cc-vis-img { width: min(640px, 92%); margin: 36px -24px -90px auto; }
  .cc-uses { padding: 80px 0 100px; }
  .cc-use-grid { grid-template-columns: 1fr 1fr; }
  .cc-use-grid.cc-cols-3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .cc-cta { height: auto; padding: 120px 0 380px; }
  .cc-wave { bottom: 20px; height: 340px; -webkit-mask-image: none; mask-image: none; }
  .cc-foot-top { flex-wrap: wrap; gap: 28px 40px; }
  .cc-foot-nav { flex-wrap: wrap; gap: 14px 28px; }
}

/* ---------- Mobiili ---------- */
@media (max-width: 720px) {
  :root { --cc-gutter: 20px; }
  .cc-nav-in { height: 68px; }
  .cc-nav-menu { top: 68px; }
  .cc-nav-cta { display: none; }
  .cc-logo { width: 156px; height: 32px; }
  .cc-hero-copy { padding-top: 124px; }
  .cc-hero-h { margin: 18px 0 24px; }
  .cc-hero-lead { font-size: 17px; }
  .cc-cta-row { flex-wrap: wrap; gap: 14px; }
  .cc-bb { height: 48px; padding: 0 22px; }
  .cc-merge { height: 220px; margin-top: 28px; }
  .cc-h2 br, .cc-hero-h br { display: none; }
  .cc-h2 em, .cc-hero-h em { display: block; }
  .cc-sec-lead { font-size: 16px; }
  .cc-products { padding: 80px 0 64px; }
  .cc-bento { gap: 16px; }
  .cc-c-half { grid-column: 1 / -1; height: auto; min-height: 0; }
  .cc-c-half .cc-card-txt:has(.cc-bb) { padding-bottom: 40px; }
  .cc-card, .cc-use { border-radius: 20px; }
  .cc-card-art { padding: 26px 18px 0; }
  .cc-card-txt { padding: 0 24px 30px; }
  .cc-prod-logo { margin: 14px 0 14px !important; }
  .cc-prod-logo svg { width: 230px; height: 60.3px; }
  .cc-c-vis .cc-card-txt { padding: 30px 24px 0; }
  .cc-vis-img { width: 100%; margin: 28px -20px -60px 20px; }
  .cc-gw-note { align-items: flex-start; justify-content: flex-start; text-align: left; font-size: 14.5px; }
  .cc-gw-ic { padding-top: 9px; }
  .cc-uses { padding: 64px 0 80px; }
  .cc-use-grid { grid-template-columns: 1fr; gap: 16px; }
  .cc-use { padding: 28px 24px 30px; }
  .cc-use-art { height: 120px; margin-bottom: 24px; }
  .cc-use h3 { font-size: 26px; }
  .cc-cta { padding: 90px 0 270px; }
  .cc-cta-lead { font-size: 16px; }
  .cc-wave { bottom: 10px; height: 250px; }
  .cc-foot-top { flex-direction: column; align-items: flex-start; }
  .cc-foot-nav { flex-direction: column; gap: 12px; }
  .cc-foot-bot { flex-direction: column; gap: 10px; }
}

@media (max-width: 1100px) {
  .cc-page-top { padding-top: 150px; }
}
@media (max-width: 720px) {
  .cc-use-grid.cc-cols-2 { grid-template-columns: 1fr; }
  .cc-hero--page { padding-bottom: 56px; }
  .cc-page-top { padding-top: 120px; }
  .cc-cta--plain { padding: 80px 0 96px; }
}

/* ---------- Yhteydenotto ---------- */
.cc-contact { padding: 40px 0 140px; }
.cc-contact-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.cc-contact-info .cc-sec-lead { margin-top: 22px; }
.cc-contact-list { margin: 40px 0 0; font-style: normal; display: grid; gap: 22px; }
.cc-contact-list p { color: var(--cc-text); font-size: 16px; line-height: 1.55; }
.cc-contact-list .cc-eyebrow { display: block; margin-bottom: 8px; }
.cc-contact-list a { color: var(--cc-accent); transition: color .25s; }
.cc-contact-list a:hover { color: #fff; }
.cc-form { padding: 40px 42px 44px; }
.cc-form::before { left: auto; right: -220px; }
.cc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cc-field--wide { grid-column: 1 / -1; }
.cc-field label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--cc-text-2); }
.cc-field input, .cc-field textarea { width: 100%; padding: 13px 16px; font: inherit; color: #fff; background: rgba(255,255,255,.035); border: 1px solid var(--cc-line-2); border-radius: 12px; transition: border-color .25s, background .25s; }
.cc-field input:hover, .cc-field textarea:hover { border-color: rgba(255,255,255,.24); }
.cc-field input:focus-visible, .cc-field textarea:focus-visible { outline: 2px solid var(--cc-signal); outline-offset: 2px; border-color: var(--cc-blue-l); background: rgba(255,255,255,.05); }
.cc-field textarea { resize: vertical; min-height: 140px; }
.cc-required-note, .cc-form-privacy { font-size: 13.5px; color: var(--cc-muted); }
.cc-required-note { margin-bottom: 18px; }
.cc-form-privacy { margin: 20px 0 26px; }
.cc-form-privacy a { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cc-form-msg { margin-bottom: 22px; padding: 14px 18px; border-radius: 12px; font-size: 15px; }
.cc-form-msg.is-ok { background: rgba(115,149,238,.12); color: #dfe7ff; box-shadow: inset 0 0 0 1px rgba(115,149,238,.35); }
.cc-form-msg.is-error { background: rgba(228,169,72,.1); color: #f5d9a8; box-shadow: inset 0 0 0 1px rgba(228,169,72,.4); }

/* ---------- Asiakastarinat ---------- */
.cc-stories { padding: 0 0 140px; }
.cc-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cc-story-card { display: flex; flex-direction: column; }
.cc-story-img { margin: -36px -38px 28px; width: calc(100% + 76px); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; }
.cc-story-title { margin: 14px 0 14px; font: 500 26px/1.15 var(--cc-display); }
.cc-story-title a::after { content: ""; position: absolute; inset: 0; }
.cc-story-title a:hover { color: var(--cc-signal); }
.cc-story-card > p:not(.cc-eyebrow) { font-size: 15.5px; color: var(--cc-text-2); }
.cc-story-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.cc-story-tags li { padding: 6px 12px 6px 25px; border-top: 0; font-size: 12.5px; line-height: 1.4; border-radius: 99px; color: var(--cc-text); box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-story-tags li::before { left: 12px; top: 50%; transform: translateY(-50%); }
.cc-story-body { display: grid; grid-template-columns: 300px 1fr; gap: 72px; padding-bottom: 140px; }
.cc-story-facts dl { margin: 0; }
.cc-story-facts dt { font: 500 12px/1 var(--cc-body); letter-spacing: .16em; text-transform: uppercase; color: var(--cc-muted); margin-top: 22px; }
.cc-story-facts dd { margin: 8px 0 0; color: var(--cc-text); }
.cc-story-facts h2 { margin-top: 36px; }
.cc-story-results li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--cc-line); font-size: 15px; color: var(--cc-text); }
.cc-story-results li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-blue-l); }
.cc-story-content > * { max-width: 46rem; margin-inline: 0; }
.cc-story-content p { font-size: 17px; line-height: 1.7; }
.cc-story-quote { margin: 48px 0 0; padding: 32px 36px; border-left: 2px solid var(--cc-blue-l); background: var(--cc-card); border-radius: 0 20px 20px 0; }
.cc-story-quote blockquote { margin: 0; }
.cc-story-quote p { font: 500 24px/1.35 var(--cc-display); color: #fff; }
.cc-story-quote figcaption { margin-top: 16px; font-size: 14px; color: var(--cc-muted); }
.cc-hero-copy .cc-eyebrow a { color: var(--cc-accent); }
.nav-links { display: flex; gap: 18px; justify-content: center; margin-top: 48px; }
.nav-links a, .nav-links span { color: var(--cc-text-2); }
.nav-links .current { color: #fff; }

@media (max-width: 1100px) {
  .cc-contact-in, .cc-story-body { grid-template-columns: 1fr; gap: 44px; }
  .cc-story-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cc-form { padding: 28px 22px 30px; }
  .cc-form-grid, .cc-story-grid { grid-template-columns: 1fr; }
  .cc-story-img { margin: -28px -24px 24px; width: calc(100% + 48px); }
  .cc-contact { padding-bottom: 90px; }
}

/* QA: ?cc-still näyttää animaatiot lopputilassa (kuvakaappaukset) */
.cc-still *, .cc-still *::before, .cc-still *::after { animation: none !important; transition: none !important; }

/* ---------- Sivut ilman heroa (Complianz-selosteet ym.) ---------- */
.cc-hero--title { padding-bottom: 48px; }
.entry-content .cmplz-document { color: var(--cc-text-2); font-size: 16px; line-height: 1.7; }
.entry-content .cmplz-document :is(h2, h3, h4) { margin: 2em 0 .6em; color: #fff; font-family: var(--cc-display); }
.entry-content .cmplz-document a { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content .cmplz-document a:hover { color: #fff; }
.entry-content .cmplz-document table { width: 100%; border-collapse: collapse; color: var(--cc-text-2); }
.entry-content .cmplz-document :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--cc-line-2); text-align: left; }
.entry-content > .cmplz-document { margin-bottom: 140px; }
.cc-hero--title .cc-hero-h { text-align: left; }
/* Complianzin evästetaulukko: lisäosa käyttää ID-valitsimia, joten ohitus samalla tasolla */
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown { margin: 0 0 8px; background-color: var(--cc-card); border: 1px solid var(--cc-line-2); border-radius: 12px; overflow: hidden; }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary { margin: 0; padding: 12px 16px; background-color: var(--cc-card-2); color: #fff; }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary :is(h3, p) { margin: 0; color: inherit; }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary p { color: var(--cc-text-2); }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary div::after { filter: invert(1); }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown summary:focus-visible { outline: 2px solid var(--cc-signal); outline-offset: -2px; }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose { border-color: var(--cc-line-2); background-color: var(--cc-line-2); }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown .cookies-per-purpose div { background-color: var(--cc-card); color: var(--cc-text-2); }
:is(#cmplz-document, #cmplz-cookies-overview) .cmplz-dropdown > :not(summary) { color: var(--cc-text-2); }