/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/page.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Palvelusivujen pohja (1.10.2026): etusivun tokenit ja komponentit (style.css) + alasivujen osiot.
   Pintarytmi vuorottelee paperi / navy / sävy, eikä kahta samaa tule peräkkäin. Jokaisessa
   tekstiosiossa on kuva. Navy-pintojen hehku on radial-gradient, ei blur-suodinta (WebKit). */

html.theme-nox-visual-v3 body.sub main { position: relative; z-index: 2; }
html.theme-nox-visual-v3 body.sub .footer { position: relative; z-index: 2; }

/* ── Pinnat ── */
html.theme-nox-visual-v3 .sub main > section { position: relative; padding: clamp(110px, 10vw, 170px) 0; }
/* body[data-surface] kääntää navin värit; osion omat värit eivät saa seurata sitä */
/* Myös color: body perii värin --fg:stä, joka on jo valkoinen navin ollessa navy-osion kohdalla */
html.theme-nox-visual-v3 .sub main > section:not(.is-navy) { --fg: var(--navy); --fg-2: var(--ink-2); color: var(--fg); }
html.theme-nox-visual-v3 .sub main > section.is-navy { --fg: var(--white); --fg-2: var(--grey-300); color: var(--fg); }
html.theme-nox-visual-v3 .sub .is-tint { background: var(--paper-2); }
html.theme-nox-visual-v3 .sub .is-navy { background: radial-gradient(90% 60% at 70% 115%, rgb(46 94 158 / 45%), transparent 70%), var(--navy); color: var(--white); }
html.theme-nox-visual-v3 .sub .is-navy .eyebrow { color: var(--grey-300); }
html.theme-nox-visual-v3 .sub .is-navy .p-body, html.theme-nox-visual-v3 .sub .is-navy p { color: var(--grey-300); }
html.theme-nox-visual-v3 .sub .is-navy .p-h2, html.theme-nox-visual-v3 .sub .is-navy h3 { color: var(--white); }
html.theme-nox-visual-v3 .sub .is-navy .p-num { color: var(--blue-300); }

html.theme-nox-visual-v3 .p-head { max-width: 54rem; margin-bottom: clamp(56px, 6vw, 88px); }
html.theme-nox-visual-v3 .p-h2 { margin-top: 16px; font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: 1; letter-spacing: -0.045em; }
html.theme-nox-visual-v3 .p-body { margin-top: 24px; max-width: 36rem; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .p-num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--blue-600); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
html.theme-nox-visual-v3 .p-split.is-flip { grid-template-columns: 0.85fr 1.15fr; }
html.theme-nox-visual-v3 .p-tall { margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .p-tall img { width: 100%; height: 100%; object-fit: cover; }

/* ── 1 · Hero ── */
html.theme-nox-visual-v3 .p-hero.p-hero { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 100px; overflow: clip; }
html.theme-nox-visual-v3 .p-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
html.theme-nox-visual-v3 .p-crumb a { transition: color 0.3s; }
html.theme-nox-visual-v3 .p-crumb a:hover { color: var(--navy); }
/* Rivit ovat lukittuja (Mika 1.10.: "Ei" jäi omalle rivilleen isolla näytöllä) → ei rivitystä rivin sisällä.
   Koko mitoitetaan pisimmän rivin ("Ei aloitusmaksua." ≈ 7,6 em) ja sarakkeen mukaan, katto 5 rem. */
html.theme-nox-visual-v3 .p-h1 { margin-top: 22px; font-size: clamp(2.8rem, 5.2vw, 5rem); line-height: 0.98; letter-spacing: -0.048em; }
html.theme-nox-visual-v3 .p-h1 .line { display: block; overflow: clip; overflow-clip-margin: 0.1em; padding-bottom: 0.06em; white-space: nowrap; }
html.theme-nox-visual-v3 .p-h1 .line > span { display: inline-block; }
html.theme-nox-visual-v3 .p-lead { margin-top: 28px; max-width: 34rem; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); }
html.theme-nox-visual-v3 .p-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* Työpinta: etusivun verkkosivut-luvun leiska tasona kuvan takana. Palaset leijuvat erillään
   (räjäytyskuva) ja asettuvat tasoon vieritettäessä. Reunat häivytetään, ettei taso kilpaile kuvan kanssa. */
html.theme-nox-visual-v3 .p-hero-visual { position: relative; aspect-ratio: 1 / 1.08; }
html.theme-nox-visual-v3 .p-wire { position: absolute; inset: -18% -22% -12% -26%; perspective: 1200px; perspective-origin: 50% 30%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 46% 48% at 58% 56%, #000 55%, transparent); mask-image: radial-gradient(ellipse 46% 48% at 58% 56%, #000 55%, transparent); }
html.theme-nox-visual-v3 .p-wire-frame { position: absolute; left: 50%; top: 58%; width: 112%; aspect-ratio: 16 / 10; translate: -50% -50%; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-26deg); }
html.theme-nox-visual-v3 .p-wire-frame > i { position: absolute; display: block; border-radius: 8px; background: rgb(46 94 158 / 6%); border: 2px solid rgb(46 94 158 / 34%); will-change: transform, opacity; }
html.theme-nox-visual-v3 .p-wire-frame > i.w-pill { border-radius: 999px; }
html.theme-nox-visual-v3 .p-wire-frame > i.w-line { border: 0; background: rgb(46 94 158 / 22%); border-radius: 999px; }
html.theme-nox-visual-v3 .p-wire-frame > i.w-solid { background: rgb(46 94 158 / 12%); border-color: rgb(46 94 158 / 30%); }
html.theme-nox-visual-v3 .p-wire-frame > i.w-dot { border-radius: 50%; background: rgb(46 94 158 / 22%); border: 0; }
html.theme-nox-visual-v3 .p-wire-frame > i.w-img { background: linear-gradient(to top right, transparent calc(50% - 0.8px), rgb(46 94 158 / 20%) 50%, transparent calc(50% + 0.8px)), linear-gradient(to bottom right, transparent calc(50% - 0.8px), rgb(46 94 158 / 20%) 50%, transparent calc(50% + 0.8px)), rgb(46 94 158 / 4%); }
html.theme-nox-visual-v3 .p-hero-photo { position: absolute; z-index: 2; right: 8%; top: 4%; width: 64%; margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); will-change: transform; }
html.theme-nox-visual-v3 .p-hero-photo img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }

/* ── 2 · Nopeus ── */
html.theme-nox-visual-v3 .p-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 56px 0 0; padding-top: 32px; border-top: 1px solid rgb(255 255 255 / 14%); }
html.theme-nox-visual-v3 .p-stats dt { font-size: clamp(2rem, 3vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-stats dd { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--grey-300); }

/* ── 3 · Vakiona ── */
html.theme-nox-visual-v3 .p-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
html.theme-nox-visual-v3 .p-feat-stage { position: sticky; top: 16vh; align-self: start; }
html.theme-nox-visual-v3 .p-feat-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .p-feat-frame img, html.theme-nox-visual-v3 .p-feat-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.8s var(--ease-out), transform 1.4s var(--ease-out); }
html.theme-nox-visual-v3 .p-feat-frame img.is-active, html.theme-nox-visual-v3 .p-feat-frame video.is-active { opacity: 1; transform: none; }
html.theme-nox-visual-v3 .p-feat-count { margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--grey-400); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-feat-count b { color: var(--navy); }
html.theme-nox-visual-v3 .p-feat-list { margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .p-feat-list li { display: grid; grid-template-columns: 56px 1fr; padding: 7vh 0; border-top: 1px solid var(--line); opacity: 0.38; transition: opacity 0.6s var(--ease-out); }
html.theme-nox-visual-v3 .p-feat-list li:last-child { border-bottom: 1px solid var(--line); }
html.theme-nox-visual-v3 .p-feat-list li.is-active { opacity: 1; }
html.theme-nox-visual-v3 .p-feat-list .p-num { padding-top: 0.5em; }
html.theme-nox-visual-v3 .p-feat-list h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.035em; }
html.theme-nox-visual-v3 .p-feat-list p { margin-top: 14px; max-width: 30rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .p-feat-inline { display: none; }

/* ── 4 · Livenä ── */
html.theme-nox-visual-v3 .p-site { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(40px, 5vw, 80px); align-items: center; padding: 48px 0; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .p-site.is-flip { grid-template-columns: 0.7fr 1.3fr; }
html.theme-nox-visual-v3 .p-site.is-flip .p-screen { order: 2; }
html.theme-nox-visual-v3 .p-screen { position: relative; display: block; aspect-ratio: 16 / 10.5; border-radius: 20px; overflow: hidden; }
html.theme-nox-visual-v3 .p-site-copy h3 { font-size: clamp(2rem, 3vw, 3rem); font-weight: 500; letter-spacing: -0.04em; }
html.theme-nox-visual-v3 .p-site-copy blockquote { margin: 22px 0 0; }
html.theme-nox-visual-v3 .p-site-copy blockquote p { font-size: 17px; line-height: 1.6; color: var(--navy); }
html.theme-nox-visual-v3 .p-site-copy blockquote footer { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); }
html.theme-nox-visual-v3 .p-site-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-weight: 500; }
html.theme-nox-visual-v3 .p-site-links a:not(.link-arrow) { color: var(--ink-2); transition: color 0.3s; }
html.theme-nox-visual-v3 .p-site-links a:hover { color: var(--navy); }

/* ── 5 · Miksi oma alusta: reittikilpa ── */
html.theme-nox-visual-v3 .p-why-list { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
html.theme-nox-visual-v3 .p-why-list li { display: grid; grid-template-columns: 44px 1fr; }
html.theme-nox-visual-v3 .p-why-list p { font-size: 16px; line-height: 1.6; max-width: 34rem; }
html.theme-nox-visual-v3 .p-race { margin-top: 48px; display: grid; gap: 14px; }
html.theme-nox-visual-v3 .p-lane { position: relative; padding: 18px 20px 22px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; background: rgb(255 255 255 / 3%); }
html.theme-nox-visual-v3 .p-lane-name { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
html.theme-nox-visual-v3 .p-lane-name b { font-weight: 600; color: var(--white); }
html.theme-nox-visual-v3 .p-lane-name span { color: var(--grey-300); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-hops { position: relative; margin: 16px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; }
html.theme-nox-visual-v3 .p-hops::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: rgb(255 255 255 / 18%); }
html.theme-nox-visual-v3 .p-hops li { position: relative; padding-top: 22px; font-size: 12.5px; color: var(--grey-300); }
html.theme-nox-visual-v3 .p-hops li::before { content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); border: 1.5px solid rgb(255 255 255 / 35%); transition: background-color 0.25s, border-color 0.25s; }
html.theme-nox-visual-v3 .p-hops li:last-child { text-align: right; }
html.theme-nox-visual-v3 .p-hops li:last-child::before { left: auto; right: 0; }
html.theme-nox-visual-v3 .p-hops li.is-hit::before { background: var(--blue-300); border-color: var(--blue-300); }
html.theme-nox-visual-v3 .p-lane[data-lane='nox'] .p-hops li.is-hit::before { background: var(--edge-core); border-color: var(--edge-core); box-shadow: 0 0 0 5px rgb(157 191 232 / 18%); }
html.theme-nox-visual-v3 .p-runner { position: absolute; left: 20px; top: 52px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-300); opacity: 0; }

/* ── 6 · Hinta-arvio ── */
html.theme-nox-visual-v3 .p-calc-intro { max-width: 46rem; font-size: 15.5px; }
html.theme-nox-visual-v3 .p-calc-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
html.theme-nox-visual-v3 .p-calc-form fieldset { margin: 0 0 40px; padding: 0; border: 0; }
html.theme-nox-visual-v3 .p-calc-form legend { display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; padding: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
html.theme-nox-visual-v3 .p-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
html.theme-nox-visual-v3 .p-seg button { height: 48px; border: 0; border-radius: 10px; background: transparent; font: 500 15px/1 'General Sans', sans-serif; color: var(--ink-2); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
html.theme-nox-visual-v3 .p-seg button:hover { color: var(--navy); }
html.theme-nox-visual-v3 .p-seg button[aria-checked='true'] { background: var(--navy); color: var(--white); }
html.theme-nox-visual-v3 .p-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.theme-nox-visual-v3 .p-extras label { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); cursor: pointer; font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; }
html.theme-nox-visual-v3 .p-extras input { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background-color 0.25s, border-color 0.25s; }
html.theme-nox-visual-v3 .p-extras input::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.25s var(--ease-out); }
html.theme-nox-visual-v3 .p-extras input:checked { background: var(--navy); border-color: var(--navy); }
html.theme-nox-visual-v3 .p-extras input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
html.theme-nox-visual-v3 .p-extras label:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
html.theme-nox-visual-v3 .p-extras input:focus-visible, html.theme-nox-visual-v3 .p-seg button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
html.theme-nox-visual-v3 .p-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.theme-nox-visual-v3 .p-fields label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
html.theme-nox-visual-v3 .p-fields .is-wide { grid-column: 1 / -1; }
html.theme-nox-visual-v3 .p-fields input, html.theme-nox-visual-v3 .p-fields textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--white); font: 400 15px/1.4 'General Sans', sans-serif; color: var(--navy); resize: vertical; transition: border-color 0.3s, box-shadow 0.3s; }
html.theme-nox-visual-v3 .p-fields input:focus, html.theme-nox-visual-v3 .p-fields textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgb(46 94 158 / 14%); }
html.theme-nox-visual-v3 .p-submit { margin-top: 22px; }
html.theme-nox-visual-v3 .p-fine { margin-top: 18px; max-width: 40rem; font-size: 13px; line-height: 1.55; color: var(--grey-400); }
html.theme-nox-visual-v3 .p-proto { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--blue-600); }
html.theme-nox-visual-v3 .p-quote { position: sticky; top: 14vh; padding: 32px; border-radius: 20px; background: var(--navy); color: var(--white); box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .p-quote .eyebrow { color: var(--grey-300); }
html.theme-nox-visual-v3 .p-price { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; }
html.theme-nox-visual-v3 .p-price-num { font-size: clamp(2.8rem, 4.4vw, 4.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-price-unit { font-size: 18px; color: var(--grey-300); }
html.theme-nox-visual-v3 .p-price-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--grey-300); }
html.theme-nox-visual-v3 .p-price-picks { margin: 20px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 14%); display: grid; gap: 8px; font-size: 14px; color: var(--white); }
html.theme-nox-visual-v3 .p-price-picks li { display: flex; gap: 10px; align-items: center; }
html.theme-nox-visual-v3 .p-price-picks li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); }

/* ── 7 · Näin se etenee ── */
html.theme-nox-visual-v3 .p-portrait { align-self: stretch; aspect-ratio: auto; max-height: 86vh; }
html.theme-nox-visual-v3 .p-timeline { --draw: 0; position: relative; margin: 48px 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .p-timeline::before { content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); transform-origin: top; transform: scaleY(var(--draw, 0)); }
html.theme-nox-visual-v3 .p-timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr; padding: 0 0 36px; }
html.theme-nox-visual-v3 .p-timeline .p-num { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line-strong); font-size: 11.5px; }
html.theme-nox-visual-v3 .p-timeline h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
html.theme-nox-visual-v3 .p-timeline h3 em { margin-left: 10px; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--blue-600); white-space: nowrap; }
html.theme-nox-visual-v3 .p-timeline p { margin-top: 8px; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ── 8 · Tilanteesi mukaan ── */
html.theme-nox-visual-v3 .p-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
html.theme-nox-visual-v3 .p-rel { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; min-height: 280px; border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: box-shadow 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.theme-nox-visual-v3 .p-rel:hover { box-shadow: var(--shadow-frame); transform: translateY(-4px); }
html.theme-nox-visual-v3 .p-rel-img { overflow: hidden; }
html.theme-nox-visual-v3 .p-rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .p-rel:hover .p-rel-img img { transform: scale(1.04); }
html.theme-nox-visual-v3 .p-rel-copy { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
html.theme-nox-visual-v3 .p-rel-copy b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
html.theme-nox-visual-v3 .p-rel-copy > span:not(.link-arrow) { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
html.theme-nox-visual-v3 .p-rel-copy .link-arrow { margin-top: auto; }
html.theme-nox-visual-v3 .p-rel:hover .link-arrow span { transform: translateX(4px); }

/* ── 9 · Usein kysyttyä ── */
html.theme-nox-visual-v3 .p-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
html.theme-nox-visual-v3 .p-faq-grid .p-head { position: sticky; top: 16vh; margin-bottom: 0; }
html.theme-nox-visual-v3 .p-faq-list details { border-top: 1px solid rgb(255 255 255 / 14%); }
html.theme-nox-visual-v3 .p-faq-list details:last-child { border-bottom: 1px solid rgb(255 255 255 / 14%); }
html.theme-nox-visual-v3 .p-faq-list summary { position: relative; display: grid; grid-template-columns: 44px 1fr 24px; align-items: baseline; padding: 24px 0; list-style: none; cursor: pointer; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -0.01em; color: var(--white); }
html.theme-nox-visual-v3 .p-faq-list summary::-webkit-details-marker { display: none; }
html.theme-nox-visual-v3 .p-faq-list summary i { position: relative; width: 14px; height: 14px; align-self: center; justify-self: end; }
html.theme-nox-visual-v3 .p-faq-list summary i::before, html.theme-nox-visual-v3 .p-faq-list summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--blue-300); transition: transform 0.45s var(--ease-out); }
html.theme-nox-visual-v3 .p-faq-list summary i::after { transform: rotate(90deg); }
html.theme-nox-visual-v3 .p-faq-list details[open] summary i::after { transform: rotate(0deg); }
html.theme-nox-visual-v3 .p-faq-list summary:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 4px; }
html.theme-nox-visual-v3 .p-faq-list details p { padding: 0 32px 26px 44px; max-width: 46rem; font-size: 16px; line-height: 1.65; }
html.theme-nox-visual-v3 .p-faq-list details a { color: var(--white); text-decoration: underline; text-decoration-color: rgb(157 191 232 / 60%); text-underline-offset: 3px; }
/* Natiivi avautuminen pehmeästi siellä, missä selain tukee */
@supports (interpolate-size: allow-keywords) {
  html.theme-nox-visual-v3 .p-faq-list { interpolate-size: allow-keywords; }
  html.theme-nox-visual-v3 .p-faq-list details::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-out), content-visibility 0.5s allow-discrete; }
  html.theme-nox-visual-v3 .p-faq-list details[open]::details-content { height: auto; }
}

/* ── 10 · Loppu-CTA ── */
html.theme-nox-visual-v3 .p-cta-card { position: relative; min-height: 480px; display: flex; align-items: flex-end; border-radius: 24px; overflow: hidden; background: var(--navy-990); color: var(--white); }
html.theme-nox-visual-v3 .p-cta-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
html.theme-nox-visual-v3 .p-cta-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(7 18 34 / 88%) 0%, rgb(7 18 34 / 40%) 55%, transparent); }
html.theme-nox-visual-v3 .p-cta-copy { position: relative; z-index: 1; padding: clamp(32px, 5vw, 72px); max-width: 44rem; }
html.theme-nox-visual-v3 .p-cta-copy .p-h2 { margin: 0; color: var(--white); }
html.theme-nox-visual-v3 .p-cta-copy p { margin: 20px 0 30px; font-size: 17px; line-height: 1.6; color: var(--grey-300); }

/* ── Kapeat ruudut ── */
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .p-hero-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .p-hero-visual { max-width: 560px; width: 100%; justify-self: center; }
  html.theme-nox-visual-v3 .p-calc-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .p-quote { position: relative; top: 0; order: -1; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .p-hero.p-hero { min-height: 0; padding: 110px 0 70px; }
  html.theme-nox-visual-v3 .p-h1 { font-size: calc((100vw - 2 * var(--gutter)) / 7.9); }
  html.theme-nox-visual-v3 .p-split, html.theme-nox-visual-v3 .p-split.is-flip, html.theme-nox-visual-v3 .p-feat-grid, html.theme-nox-visual-v3 .p-site, html.theme-nox-visual-v3 .p-site.is-flip, html.theme-nox-visual-v3 .p-related-grid, html.theme-nox-visual-v3 .p-faq-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .p-split.is-flip > figure { order: 2; }
  html.theme-nox-visual-v3 .p-site.is-flip .p-screen { order: 0; }
  html.theme-nox-visual-v3 .p-tall { aspect-ratio: 4 / 5; }
  html.theme-nox-visual-v3 .p-stats { grid-template-columns: 1fr; gap: 22px; }
  html.theme-nox-visual-v3 .p-feat-stage { display: none; }
  html.theme-nox-visual-v3 .p-feat-list li { opacity: 1; padding: 36px 0; }
  html.theme-nox-visual-v3 .p-feat-inline { display: block; margin-top: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
  html.theme-nox-visual-v3 .p-extras, html.theme-nox-visual-v3 .p-fields { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .p-seg { grid-template-columns: 1fr 1fr; }
  html.theme-nox-visual-v3 .p-rel { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .p-rel-img { aspect-ratio: 16 / 9; }
  html.theme-nox-visual-v3 .p-faq-grid .p-head { position: static; }
  html.theme-nox-visual-v3 .p-faq-list details p { padding-left: 0; padding-right: 0; }
  html.theme-nox-visual-v3 .p-portrait { max-height: none; aspect-ratio: 4 / 5; }
  html.theme-nox-visual-v3 .p-cta-card { min-height: 520px; }
  html.theme-nox-visual-v3 .p-cta-card::after { background: linear-gradient(0deg, rgb(7 18 34 / 92%) 10%, rgb(7 18 34 / 30%) 70%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .p-feat-frame img, html.theme-nox-visual-v3 .p-rel, html.theme-nox-visual-v3 .p-rel-img img { transition: none; }
  html.theme-nox-visual-v3 .p-timeline { --draw: 1; }
}

/* ═════════════ Videotuotanto (1.10.2026) ═════════════ */

/* ── Herotaso: leikkauspöytä (timeline.js). Sama sinisävy kuin verkkosivujen leiskassa. ── */
html.theme-nox-visual-v3 .p-wire-frame > i.tl-ruler { border: 0; border-radius: 0; background:
  repeating-linear-gradient(90deg, rgb(46 94 158 / 40%) 0 2px, transparent 2px 10%) left bottom / 100% 46% no-repeat,
  repeating-linear-gradient(90deg, rgb(46 94 158 / 22%) 0 1px, transparent 1px 2.5%) left bottom / 100% 22% no-repeat,
  linear-gradient(rgb(46 94 158 / 30%), rgb(46 94 158 / 30%)) left bottom / 100% 2px no-repeat; }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-ruler span { position: absolute; top: 4%; font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: 0.04em; color: rgb(46 94 158 / 55%); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-v { background:
  linear-gradient(rgb(46 94 158 / 16%), rgb(46 94 158 / 16%)) top / 100% 18% no-repeat,
  repeating-linear-gradient(90deg, transparent 0 calc(18% - 1px), rgb(46 94 158 / 14%) calc(18% - 1px) 18%), rgb(46 94 158 / 5%); }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-a { overflow: hidden; background: rgb(46 94 158 / 4%); }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-a canvas { position: absolute; inset: 8% 2%; width: 96%; height: 84%; }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-sel { border-color: rgb(46 94 158 / 62%); background-color: rgb(46 94 158 / 12%); }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-head { border: 0; border-radius: 1px; background: var(--blue-600); box-shadow: 0 0 0 3px rgb(46 94 158 / 10%); animation: tl-play 16s linear infinite; }
html.theme-nox-visual-v3 .p-wire-frame > i.tl-head::before { content: ''; position: absolute; left: 50%; top: -1%; width: 900%; aspect-ratio: 1.2; translate: -50% 0; border-radius: 3px 3px 50% 50%; background: var(--blue-600); }
@keyframes tl-play { from { left: 6%; } to { left: 95%; } }

/* ── Showreel ── */
html.theme-nox-visual-v3 .v-reel-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
html.theme-nox-visual-v3 .v-reel-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .v-reel-head .p-h2 { max-width: 15em; }
html.theme-nox-visual-v3 .v-reel-aside p { font-size: 16px; line-height: 1.6; color: var(--grey-300); max-width: 24rem; }
html.theme-nox-visual-v3 .v-reel-aside .link-arrow { margin-top: 18px; color: var(--white); }
html.theme-nox-visual-v3 .v-reel-frame { width: 100%; box-shadow: 0 60px 120px -50px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 8%); }
html.theme-nox-visual-v3 .v-reel-frame video { width: 100%; height: 100%; object-fit: cover; }
html.theme-nox-visual-v3 .v-reel-frame .reel-play:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 4px; }

/* ── Miksi NOX: otsikolliset kohdat ── */
html.theme-nox-visual-v3 .v-why-list li > div h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; color: var(--navy); }
html.theme-nox-visual-v3 .v-why-list li > div p { margin-top: 6px; color: var(--ink-2); }

/* ── Tuotanto: kalusto neljänä lyhyenä kohtana ── */
html.theme-nox-visual-v3 .v-gear-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin: 44px 0 0; }
html.theme-nox-visual-v3 .v-gear-list > div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .v-gear-list dt { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .v-gear-list dd { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 600px) { html.theme-nox-visual-v3 .v-gear-list { grid-template-columns: 1fr; gap: 22px; } }

/* ── Näin se etenee: vaiheet leikkeinä aikajanalla ── */
html.theme-nox-visual-v3 .v-tl { position: relative; padding-top: 44px; }
html.theme-nox-visual-v3 .v-tl-ruler { position: absolute; left: 0; right: 0; top: 0; height: 30px; background:
  repeating-linear-gradient(90deg, rgb(157 191 232 / 45%) 0 1.5px, transparent 1.5px 10%) left bottom / 100% 14px no-repeat,
  repeating-linear-gradient(90deg, rgb(157 191 232 / 22%) 0 1px, transparent 1px 2.5%) left bottom / 100% 7px no-repeat,
  linear-gradient(rgb(157 191 232 / 30%), rgb(157 191 232 / 30%)) left bottom / 100% 1px no-repeat; }
html.theme-nox-visual-v3 .v-tl-ruler span { position: absolute; top: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--grey-400); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .v-tl-clips { display: grid; grid-template-columns: 22fr 22fr 34fr 22fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .v-clip { display: flex; gap: 12px; align-items: baseline; height: 76px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgb(157 191 232 / 22%); background:
  repeating-linear-gradient(90deg, transparent 0 calc(64px - 1px), rgb(157 191 232 / 8%) calc(64px - 1px) 64px), rgb(255 255 255 / 3%);
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
html.theme-nox-visual-v3 .v-clip b { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; letter-spacing: -0.015em; color: var(--grey-300); transition: color 0.5s; }
html.theme-nox-visual-v3 .v-tl-clips p { margin-top: 18px; padding-right: 12px; font-size: 15.5px; line-height: 1.6; color: var(--grey-400); transition: color 0.5s; }
html.theme-nox-visual-v3 .v-tl-clips li.is-on .v-clip { border-color: var(--blue-300); background-color: rgb(157 191 232 / 14%); box-shadow: 0 0 0 4px rgb(157 191 232 / 10%); }
html.theme-nox-visual-v3 .v-tl-clips li.is-on .v-clip b, html.theme-nox-visual-v3 .v-tl-clips li.is-done .v-clip b { color: var(--white); }
html.theme-nox-visual-v3 .v-tl-clips li.is-on p { color: var(--grey-300); }
html.theme-nox-visual-v3 .v-tl-clips li.is-done .v-clip { border-color: rgb(157 191 232 / 40%); background-color: rgb(157 191 232 / 7%); }
/* Toistopää päättyy leikkeiden alareunaan, ettei se kulje kuvaustekstin yli */
html.theme-nox-visual-v3 .v-tl-head { position: absolute; top: 18px; height: 112px; left: 0; width: 2px; background: #eaf2fb; border-radius: 1px; box-shadow: 0 0 18px rgb(157 191 232 / 60%); will-change: transform; pointer-events: none; }
html.theme-nox-visual-v3 .v-tl-head span { position: absolute; bottom: 100%; left: 50%; translate: -50% -4px; padding: 3px 8px; border-radius: 6px; background: #eaf2fb; color: var(--navy); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  html.theme-nox-visual-v3 .v-reel-head { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .v-tl { padding-top: 0; }
  html.theme-nox-visual-v3 .v-tl-ruler, html.theme-nox-visual-v3 .v-tl-head { display: none; }
  html.theme-nox-visual-v3 .v-tl-clips { grid-template-columns: 1fr; gap: 28px; }
  html.theme-nox-visual-v3 .v-tl-clips li .v-clip { height: auto; }
  html.theme-nox-visual-v3 .v-tl-clips p { margin-top: 12px; color: var(--grey-300); }
  html.theme-nox-visual-v3 .v-tl-clips li .v-clip b { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .p-wire-frame > i.tl-head { animation: none; }
}

/* ═════════════ Työnäytteet-hubi (1.10.2026) ═════════════ */

/* ── Hero: valopöytä työpintana. Kontaktiarkin kehykset leijuvat tason yllä ja asettuvat riveihin. ── */
html.theme-nox-visual-v3 .t-h1 { font-size: clamp(2.8rem, 5vw, 4.9rem); }
html.theme-nox-visual-v3 .t-table { position: absolute; inset: -16% -24% -14% -26%; perspective: 1300px; perspective-origin: 50% 30%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 47% 49% at 56% 56%, #000 52%, transparent); mask-image: radial-gradient(ellipse 47% 49% at 56% 56%, #000 52%, transparent); }
html.theme-nox-visual-v3 .t-table-frame { position: absolute; left: 50%; top: 58%; width: 108%; aspect-ratio: 16 / 10.4; translate: -50% -50%; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-24deg);
  border-radius: 14px; background: radial-gradient(70% 70% at 50% 50%, rgb(255 255 255 / 92%), rgb(255 255 255 / 30%) 70%, transparent), rgb(157 191 232 / 10%); box-shadow: inset 0 0 0 2px rgb(46 94 158 / 18%); }
html.theme-nox-visual-v3 .t-table-frame > i { position: absolute; display: block; padding: 3.2%; border-radius: 5px; background: var(--white); box-shadow: 0 1px 0 rgb(46 94 158 / 18%), 0 18px 30px -18px rgb(10 27 49 / 30%); will-change: transform, opacity; }
html.theme-nox-visual-v3 .t-table-frame > i > b { display: block; width: 100%; height: 100%; border-radius: 2px; background: center / cover no-repeat; filter: saturate(0.5) brightness(1.04); opacity: 0.8; }

/* Otsikoissa ei orpoja sanoja ("tarina." jäi yksin riville 1568 px:ssä) */
html.theme-nox-visual-v3 [data-page='tyonaytteet'] .p-h2 { text-wrap: balance; }

/* ── Caset ── */
html.theme-nox-visual-v3 .t-cases .work-grid { row-gap: clamp(56px, 6vw, 88px); }

/* ── Sivustot livenä: kolme ikkunaa, keskimmäinen alempana ── */
html.theme-nox-visual-v3 .t-live-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(56px, 6vw, 88px); }
html.theme-nox-visual-v3 .t-live-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .t-live-aside p { font-size: 16px; line-height: 1.6; color: var(--grey-300); max-width: 26rem; }
html.theme-nox-visual-v3 .t-live-aside .link-arrow { margin-top: 18px; color: var(--white); }
html.theme-nox-visual-v3 .t-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
html.theme-nox-visual-v3 .t-win:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
html.theme-nox-visual-v3 .t-win-screen { display: block; border-radius: 14px; overflow: hidden; background: #0d1d33; box-shadow: 0 50px 90px -40px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 9%); transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out); }
html.theme-nox-visual-v3 .t-win-screen:hover { transform: translateY(-6px); box-shadow: 0 60px 100px -40px rgb(0 0 0 / 80%), 0 0 0 1px rgb(157 191 232 / 30%); }
html.theme-nox-visual-v3 .t-win-bar { display: flex; justify-content: center; padding: 10px 14px; background: rgb(255 255 255 / 5%); border-bottom: 1px solid rgb(255 255 255 / 7%); }
html.theme-nox-visual-v3 .t-win-bar span { padding: 4px 14px; border-radius: 999px; background: rgb(255 255 255 / 7%); font-size: 12px; letter-spacing: 0.02em; color: var(--grey-300); }
html.theme-nox-visual-v3 .t-win-view { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--white); }
html.theme-nox-visual-v3 .t-win-view img { display: block; width: 100%; height: auto; will-change: transform; }
html.theme-nox-visual-v3 .t-win-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; font-size: 15px; }
html.theme-nox-visual-v3 .t-win-meta b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 500; letter-spacing: -0.03em; color: var(--white); }
html.theme-nox-visual-v3 .t-win-meta a { color: var(--grey-300); transition: color 0.3s; }
html.theme-nox-visual-v3 .t-win-meta a:hover { color: var(--white); }

/* Toimintorivi gallerioiden otsikoissa */
html.theme-nox-visual-v3 .t-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
html.theme-nox-visual-v3 .t-actions button.link-arrow { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
html.theme-nox-visual-v3 .t-count { font-variant-numeric: tabular-nums; opacity: 0.55; }
html.theme-nox-visual-v3 .t-actions .btn:focus-visible, html.theme-nox-visual-v3 .t-actions .link-arrow:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
html.theme-nox-visual-v3 .is-navy .t-actions .link-arrow { color: var(--white); }
html.theme-nox-visual-v3 .is-navy .t-actions .link-arrow:focus-visible { outline-color: var(--blue-300); }

/* ── 3D: pinnattu filmiliuska ── */
html.theme-nox-visual-v3 .sub main > section.t-strip-sec { padding: 0; }
html.theme-nox-visual-v3 .t-strip-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 4.5vh, 64px); padding: clamp(96px, 12vh, 140px) 0 clamp(56px, 8vh, 96px); overflow: hidden; }
html.theme-nox-visual-v3 .t-strip-head { display: grid; grid-template-columns: 1fr auto; gap: 24px 64px; align-items: end; }
html.theme-nox-visual-v3 .t-strip-head .p-h2 { max-width: 15em; }
html.theme-nox-visual-v3 .t-strip { overflow: hidden; }
html.theme-nox-visual-v3 .t-strip-track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; margin: 0; padding: 0 var(--gutter); list-style: none; will-change: transform; }
html.theme-nox-visual-v3 .t-strip-track li { width: clamp(300px, 36vw, 620px); flex: none; }
html.theme-nox-visual-v3 .t-strip-track button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: zoom-in; }
html.theme-nox-visual-v3 .t-strip-track button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; border-radius: 16px; }
html.theme-nox-visual-v3 .t-frame { --skew: 0deg; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--paper-2); transform: skewX(var(--skew)); }
html.theme-nox-visual-v3 .t-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .t-strip-track button:hover .t-frame img { scale: 1.02; }
html.theme-nox-visual-v3 .t-cap { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font-size: 15px; color: var(--ink-2); }
html.theme-nox-visual-v3 .t-cap b { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .t-strip-foot { display: flex; align-items: center; gap: 24px; }
html.theme-nox-visual-v3 .t-strip-count { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--grey-400); font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .t-strip-count b { color: var(--navy); }
html.theme-nox-visual-v3 .t-strip-bar { position: relative; flex: 1; max-width: 360px; height: 1px; background: var(--line-strong); }
html.theme-nox-visual-v3 .t-strip-bar i { position: absolute; inset: 0; background: var(--navy); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ── Graafinen: kolme saraketta, työt omassa kuvasuhteessaan ── */
html.theme-nox-visual-v3 .t-graphic-head { display: grid; grid-template-columns: 1fr auto; gap: 24px 64px; align-items: end; margin-bottom: clamp(56px, 6vw, 88px); }
html.theme-nox-visual-v3 .t-graphic-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .t-mason { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(18px, 2vw, 28px); align-items: start; }
html.theme-nox-visual-v3 .t-mason-col { display: grid; gap: clamp(18px, 2vw, 28px); will-change: transform; }
html.theme-nox-visual-v3 .t-piece { margin: 0; }
html.theme-nox-visual-v3 .t-piece button { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--white); cursor: zoom-in; box-shadow: 0 30px 60px -36px rgb(10 27 49 / 35%); }
html.theme-nox-visual-v3 .t-piece button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; }
html.theme-nox-visual-v3 .t-piece img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .t-piece button:hover img { transform: scale(1.03); }
html.theme-nox-visual-v3 .t-piece figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
html.theme-nox-visual-v3 .t-piece figcaption b { font-weight: 600; color: var(--navy); }
html.theme-nox-visual-v3 .t-piece figcaption a { flex: none; font-weight: 500; color: var(--navy); }
html.theme-nox-visual-v3 .t-piece figcaption a span { display: inline-block; transition: transform 0.4s var(--ease-out); }
html.theme-nox-visual-v3 .t-piece figcaption a:hover span { transform: translateX(4px); }

/* ── Valokuvaus: aiheet + näyttämö ── */
html.theme-nox-visual-v3 .t-photo-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(48px, 6vw, 110px); }
html.theme-nox-visual-v3 .t-photo-grid .p-head { margin-bottom: clamp(36px, 4vw, 56px); }
html.theme-nox-visual-v3 .t-topics { margin: 0 0 44px; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 12%); }
html.theme-nox-visual-v3 .t-topics li { border-bottom: 1px solid rgb(255 255 255 / 12%); }
html.theme-nox-visual-v3 .t-topic { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; width: 100%; padding: 22px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--grey-300); cursor: zoom-in; transition: color 0.4s; }
html.theme-nox-visual-v3 .t-topic .p-num { transition: color 0.4s; }
html.theme-nox-visual-v3 .t-topic-name { font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
html.theme-nox-visual-v3 .t-topic-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--grey-400); }
html.theme-nox-visual-v3 .t-topics li.is-active .t-topic, html.theme-nox-visual-v3 .t-topic:hover { color: var(--white); }
html.theme-nox-visual-v3 .t-topic:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 4px; }
html.theme-nox-visual-v3 .t-topic-thumbs { display: none; }
html.theme-nox-visual-v3 .t-photo-stage { position: sticky; top: 18vh; align-self: start; aspect-ratio: 1 / 0.9; }
html.theme-nox-visual-v3 .t-stack { position: absolute; inset: 0; }
html.theme-nox-visual-v3 .t-stack > img { position: absolute; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 50px 90px -40px rgb(0 0 0 / 75%), 0 0 0 1px rgb(255 255 255 / 8%); will-change: transform, opacity; }

/* ── Asiakkaat + loppu-CTA: rulla osion alussa (ei etusivun ylämarginaalia), väli ennen korttia ── */
html.theme-nox-visual-v3 .t-end .logos { margin-top: 0; }
html.theme-nox-visual-v3 .t-end .logos + .container { margin-top: clamp(88px, 8vw, 140px); }

/* ── Galleria koko ruudulla ── */
html.theme-nox-visual-v3 .t-lb { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgb(4 10 20 / 97%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); opacity: 0; transition: opacity 0.35s; }
html.theme-nox-visual-v3 .t-lb[hidden], html.theme-nox-visual-v3 .t-lb-one[hidden], html.theme-nox-visual-v3 .t-lb-sheet[hidden], html.theme-nox-visual-v3 .t-lb-grid-btn[hidden] { display: none; }
html.theme-nox-visual-v3 .t-lb.is-open { opacity: 1; }
html.theme-nox-visual-v3 .t-lb-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gutter); }
html.theme-nox-visual-v3 .t-lb-title { font-size: 15px; color: var(--grey-300); }
html.theme-nox-visual-v3 .t-lb-title b { font-weight: 600; color: var(--white); }
html.theme-nox-visual-v3 .t-lb-tools { display: flex; gap: 10px; }
html.theme-nox-visual-v3 .t-lb button { border: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 6%); color: var(--white); border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; padding: 10px 18px; transition: background-color 0.3s; }
html.theme-nox-visual-v3 .t-lb button:hover { background: rgb(255 255 255 / 14%); }
html.theme-nox-visual-v3 .t-lb button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
html.theme-nox-visual-v3 .t-lb-sheet { position: relative; flex: 1; overflow-y: auto; padding: 8px var(--gutter) 64px; overscroll-behavior: contain; }
html.theme-nox-visual-v3 .t-lb-sheet h3 { margin: 36px 0 14px; display: flex; gap: 12px; align-items: baseline; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
html.theme-nox-visual-v3 .t-lb-sheet h3:first-child { margin-top: 8px; }
html.theme-nox-visual-v3 .t-lb-sheet h3 small { font-size: 13px; color: var(--grey-400); }
html.theme-nox-visual-v3 .t-lb-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 44vw), 1fr)); gap: 10px; }
html.theme-nox-visual-v3 .t-lb .t-lb-thumbs button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 2; background: rgb(255 255 255 / 4%); cursor: zoom-in; }
html.theme-nox-visual-v3 .t-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out), opacity 0.4s; }
html.theme-nox-visual-v3 .t-lb-thumbs.is-whole img { object-fit: contain; }
html.theme-nox-visual-v3 .t-lb-thumbs button:hover img { transform: scale(1.04); }
html.theme-nox-visual-v3 .t-lb-one { flex: 1; min-height: 0; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 0 2vw 32px; }
html.theme-nox-visual-v3 .t-lb-one figure { margin: 0; display: grid; justify-items: center; gap: 16px; min-height: 0; max-height: 100%; }
html.theme-nox-visual-v3 .t-lb-one img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 8px; }
html.theme-nox-visual-v3 .t-lb-one figcaption { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--grey-300); }
html.theme-nox-visual-v3 .t-lb-cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-300); }
html.theme-nox-visual-v3 .t-lb-alt { color: var(--white); }
html.theme-nox-visual-v3 .t-lb-n { font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .t-lb .t-lb-prev, html.theme-nox-visual-v3 .t-lb .t-lb-next { width: 52px; height: 52px; padding: 0; font-size: 20px; justify-self: center; }
html.theme-nox-visual-v3.t-locked { overflow: hidden; }

/* ═════════════ Palvelut-hubi (1.10.2026): karttapolku koko sivuna ═════════════ */
/* Reitti kulkee vasemmassa ja oikeassa kaistassa (--lane) ja ylittää sivun vain osioiden välissä,
   joten se ei koskaan kulje tekstin tai kuvan yli. Koordinaatit lasketaan solmuista (page.js). */
html.theme-nox-visual-v3 [data-page='palvelut'] main { --lane: clamp(44px, 5vw, 88px); --gap: clamp(28px, 3.6vw, 64px); }
html.theme-nox-visual-v3 [data-page='palvelut'] .p-h2 { text-wrap: balance; }
html.theme-nox-visual-v3 .s-map { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
html.theme-nox-visual-v3 .s-base { fill: none; stroke: url(#s-grad-base); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
html.theme-nox-visual-v3 .s-line { fill: none; stroke: url(#s-grad); stroke-width: 3; stroke-linecap: round; }
html.theme-nox-visual-v3 .s-trail { fill: none; stroke: #9dbfe8; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
html.theme-nox-visual-v3 .s-dot { fill: var(--blue-600); transition: fill 0.4s; }
html.theme-nox-visual-v3 .s-halo { fill: rgb(46 94 158 / 18%); transform-box: fill-box; transform-origin: center; animation: jm-pulse 1.6s ease-in-out infinite; transition: fill 0.4s; }
html.theme-nox-visual-v3 .s-map.on-navy .s-dot { fill: #eaf2fb; }
html.theme-nox-visual-v3 .s-map.on-navy .s-halo { fill: rgb(157 191 232 / 30%); }
html.theme-nox-visual-v3 [data-page='palvelut'] main > section > .container { position: relative; z-index: 2; }

html.theme-nox-visual-v3 .s-node { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
html.theme-nox-visual-v3 .is-tint .s-node { background: var(--paper-2); }
html.theme-nox-visual-v3 .is-navy .s-node { background: var(--navy); border-color: rgb(255 255 255 / 26%); }
html.theme-nox-visual-v3 .is-reached .s-node, html.theme-nox-visual-v3 .s-node.is-reached { background: var(--blue-600); border-color: var(--blue-600); box-shadow: 0 0 0 6px rgb(46 94 158 / 14%); }
html.theme-nox-visual-v3 .is-navy .is-reached .s-node, html.theme-nox-visual-v3 .is-navy .s-node.is-reached { background: #eaf2fb; border-color: #eaf2fb; box-shadow: 0 0 0 6px rgb(157 191 232 / 22%); }

/* ── Hero: otsikko + palvelut selausjärjestyksessä ── */
html.theme-nox-visual-v3 .sub main > section.s-hero { min-height: 100vh; padding: clamp(130px, 15vh, 170px) 0 clamp(64px, 8vh, 100px); }
html.theme-nox-visual-v3 .s-h1 { font-size: clamp(2.8rem, 6.6vw, 6.6rem); }
html.theme-nox-visual-v3 .s-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: start; margin-top: clamp(40px, 5vh, 72px); }
/* Lähtöpiste DOMissa luettelon jälkeen, jotta mobiilissa reitti alkaa vasta sen alta */
html.theme-nox-visual-v3 .s-hero-copy { grid-column: 1; grid-row: 1; }
html.theme-nox-visual-v3 .s-index { grid-column: 2; grid-row: 1 / span 2; }
/* Lähtösolmu samaan kaistaan kuin vaiheiden solmut → reitti lähtee suoraan alas */
html.theme-nox-visual-v3 .s-start { grid-column: 1; grid-row: 2; align-self: start; display: flex; align-items: center; gap: 14px; margin-left: calc(var(--lane) / 2 - 7px); margin-top: clamp(16px, 4vh, 60px); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .s-node-start { background: var(--blue-600); border-color: var(--blue-600); box-shadow: 0 0 0 6px rgb(46 94 158 / 14%); }
html.theme-nox-visual-v3 .s-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
html.theme-nox-visual-v3 .s-index li { border-bottom: 1px solid var(--line); }
html.theme-nox-visual-v3 .s-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 12px 14px 12px 0; border-radius: 14px; transition: background-color 0.4s, padding 0.5s var(--ease-out); }
html.theme-nox-visual-v3 .s-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; }
html.theme-nox-visual-v3 .s-row b { display: block; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -0.015em; }
html.theme-nox-visual-v3 .s-row small { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-2); }
html.theme-nox-visual-v3 .s-row i { font-style: normal; color: var(--grey-400); transition: transform 0.4s var(--ease-out), color 0.3s; }
html.theme-nox-visual-v3 .s-row:hover { background: rgb(255 255 255 / 70%); padding-left: 12px; }
html.theme-nox-visual-v3 .s-row:hover i { transform: translateX(4px); color: var(--navy); }
html.theme-nox-visual-v3 .s-row:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ── Vaiheet ja pysäkit ── */
/* Vaiheen alussa tilaa kaistanvaihdon kaarelle, joka tehdään osion puolella eikä rajalla */
html.theme-nox-visual-v3 .sub main > section.s-phase { padding-top: clamp(150px, 15vw, 240px); }
html.theme-nox-visual-v3 .s-phase-head { position: relative; padding-left: calc(var(--lane) + var(--gap)); margin-bottom: clamp(130px, 13vw, 210px); }
html.theme-nox-visual-v3 .s-phase-head .p-head, html.theme-nox-visual-v3 .s-phase-head > div { max-width: 46rem; }
html.theme-nox-visual-v3 .s-station { position: absolute; left: calc(var(--lane) / 2); top: 7px; width: 22px; height: 22px; translate: -50% -50%; }
html.theme-nox-visual-v3 .s-stop { --side: 1; display: grid; grid-template-columns: var(--lane) 1fr 1fr var(--lane); column-gap: var(--gap); align-items: start; }
html.theme-nox-visual-v3 .s-stop + .s-stop { margin-top: clamp(150px, 15vw, 240px); }
html.theme-nox-visual-v3 .s-copy { grid-column: 2; position: relative; isolation: isolate; max-width: 34rem; opacity: 0.5; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out); }
html.theme-nox-visual-v3 .s-media { grid-column: 3; justify-self: center; width: min(100%, 420px); margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); opacity: 0.82; transform: scale(0.96); transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .s-media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
/* Kuvaan poltettu AI-merkki (AI Act) ei saa rajautua pois: ei ylikorkeutta eikä sisäistä parallaksia (page.js) */
html.theme-nox-visual-v3 .p-hero-photo img[data-ai-mark], html.theme-nox-visual-v3 .s-media img[data-ai-mark] { height: 100%; }
html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-copy { grid-column: 3; grid-row: 1; }
html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-media { grid-column: 2; grid-row: 1; }
html.theme-nox-visual-v3 .s-stop.is-reached .s-copy { opacity: 1; transform: none; }
html.theme-nox-visual-v3 .s-stop.is-reached .s-media { opacity: 1; transform: none; }
html.theme-nox-visual-v3 .s-copy > .s-node { position: absolute; top: 24px; left: calc(-1 * (var(--gap) + var(--lane) / 2)); translate: -50% -50%; }
html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-copy > .s-node { left: auto; right: calc(-1 * (var(--gap) + var(--lane) / 2)); translate: 50% -50%; }
html.theme-nox-visual-v3 .s-big { position: absolute; z-index: -1; top: -0.22em; right: -0.08em; font-size: clamp(140px, 15vw, 240px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgb(10 27 49 / 7%); pointer-events: none; will-change: transform; transition: -webkit-text-stroke-color 0.8s; }
html.theme-nox-visual-v3 .is-reached .s-big { -webkit-text-stroke-color: rgb(46 94 158 / 16%); }
html.theme-nox-visual-v3 .is-navy .s-big { -webkit-text-stroke-color: rgb(255 255 255 / 7%); }
html.theme-nox-visual-v3 .is-navy .is-reached .s-big { -webkit-text-stroke-color: rgb(157 191 232 / 20%); }
html.theme-nox-visual-v3 .s-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-600); }
html.theme-nox-visual-v3 .s-kicker img { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; }
html.theme-nox-visual-v3 .s-kicker span { font-variant-numeric: tabular-nums; color: var(--grey-400); }
html.theme-nox-visual-v3 .is-navy .s-kicker { color: var(--blue-300); }
html.theme-nox-visual-v3 .s-copy h3 { margin-top: 22px; font-size: clamp(2.1rem, 3.4vw, 3.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
html.theme-nox-visual-v3 .s-desc { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .s-copy dl { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
html.theme-nox-visual-v3 .s-copy dl > div { display: grid; grid-template-columns: 56px 1fr; }
html.theme-nox-visual-v3 .s-copy dt { font-weight: 600; color: var(--navy); }
html.theme-nox-visual-v3 .s-copy dd { margin: 0; }
html.theme-nox-visual-v3 .s-links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 28px; }
html.theme-nox-visual-v3 .s-case { font-weight: 500; color: var(--ink-2); transition: color 0.3s; }
html.theme-nox-visual-v3 .s-case:hover { color: var(--navy); }
html.theme-nox-visual-v3 .s-case span { display: inline-block; transition: transform 0.4s var(--ease-out); }
html.theme-nox-visual-v3 .s-case:hover span { transform: translateX(4px); }
html.theme-nox-visual-v3 .is-navy .s-desc, html.theme-nox-visual-v3 .is-navy .s-copy dl { color: var(--grey-300); }
html.theme-nox-visual-v3 .is-navy .s-copy dl { border-top-color: rgb(255 255 255 / 12%); }
html.theme-nox-visual-v3 .is-navy .s-copy dt { color: var(--white); }

/* ── Kierros: polku päättyy renkaaseen ── */
html.theme-nox-visual-v3 .s-loop { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; margin-top: clamp(130px, 14vw, 220px); padding-left: calc(var(--lane) + var(--gap)); }
html.theme-nox-visual-v3 .s-loop .p-h2 { margin-top: 18px; }
html.theme-nox-visual-v3 .s-metrics { margin: 40px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 12%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
html.theme-nox-visual-v3 .s-metrics b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 600; color: var(--white); }
html.theme-nox-visual-v3 .s-metrics span { font-size: 14px; line-height: 1.5; color: var(--grey-300); }
html.theme-nox-visual-v3 .s-ring-wrap { display: flex; justify-content: center; }
html.theme-nox-visual-v3 .s-ring { width: min(100%, 480px); }

/* ── Kapeat ruudut: reitti vasemmassa kaistassa, pysäkit allekkain ── */
@media (max-width: 900px) {
  html.theme-nox-visual-v3 [data-page='palvelut'] main { --lane: 40px; --gap: 12px; }
  html.theme-nox-visual-v3 .s-hero-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .s-h1 { font-size: calc((100vw - 2 * var(--gutter)) / 10.4); }
  html.theme-nox-visual-v3 .s-hero-copy, html.theme-nox-visual-v3 .s-index, html.theme-nox-visual-v3 .s-start { grid-column: 1; grid-row: auto; }
  html.theme-nox-visual-v3 .s-start { margin-top: 8px; }
  html.theme-nox-visual-v3 .s-ring-wrap { order: -1; }
  html.theme-nox-visual-v3 .s-stop, html.theme-nox-visual-v3 .s-stop[data-side='r'] { grid-template-columns: var(--lane) 1fr; row-gap: 32px; }
  html.theme-nox-visual-v3 .s-stop .s-copy, html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-copy { grid-column: 2; grid-row: 1; }
  html.theme-nox-visual-v3 .s-stop .s-media, html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-media { grid-column: 2; grid-row: 2; justify-self: start; width: min(100%, 360px); }
  html.theme-nox-visual-v3 .s-stop[data-side='r'] .s-copy > .s-node { left: calc(-1 * (var(--gap) + var(--lane) / 2)); right: auto; translate: -50% -50%; }
  html.theme-nox-visual-v3 .s-big { font-size: 120px; }
  html.theme-nox-visual-v3 .s-loop { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .s-metrics { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .s-copy, html.theme-nox-visual-v3 .s-media { opacity: 1; transform: none; transition: none; }
  html.theme-nox-visual-v3 .s-halo { animation: none; }
}

/* ── Hubi kapeilla ruuduilla ── */
@media (max-width: 1280px) {
  html.theme-nox-visual-v3 .t-strip-head, html.theme-nox-visual-v3 .t-graphic-head { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .t-photo-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .t-photo-stage { display: none; }
  html.theme-nox-visual-v3 .t-topic { grid-template-columns: 44px 1fr auto; row-gap: 14px; }
  html.theme-nox-visual-v3 .t-topic-thumbs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  html.theme-nox-visual-v3 .t-topic-thumbs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .t-live-head, html.theme-nox-visual-v3 .t-strip-head, html.theme-nox-visual-v3 .t-graphic-head { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .t-live-grid { grid-template-columns: 1fr; gap: 48px; }
  html.theme-nox-visual-v3 .t-win:nth-child(2) { margin-top: 0; }
  html.theme-nox-visual-v3 .t-win-view { aspect-ratio: 4 / 3.4; }
  html.theme-nox-visual-v3 .t-strip-pin { min-height: 0; padding: 96px 0 64px; }
  html.theme-nox-visual-v3 .t-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html.theme-nox-visual-v3 .t-strip::-webkit-scrollbar { display: none; }
  html.theme-nox-visual-v3 .t-strip-track li { width: 78vw; scroll-snap-align: center; }
  html.theme-nox-visual-v3 .t-strip-foot { display: none; }
  html.theme-nox-visual-v3 .t-lb-one { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 0 12px 20px; }
  html.theme-nox-visual-v3 .t-lb-one figure { grid-column: 1 / -1; }
  html.theme-nox-visual-v3 .t-lb .t-lb-prev, html.theme-nox-visual-v3 .t-lb .t-lb-next { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .t-frame img, html.theme-nox-visual-v3 .t-piece img, html.theme-nox-visual-v3 .t-win-screen, html.theme-nox-visual-v3 .t-lb-thumbs img { transition: none; }
  /* Ei pinnausta → liuska selataan itse */
  html.theme-nox-visual-v3 .t-strip { overflow-x: auto; scroll-snap-type: x mandatory; }
  html.theme-nox-visual-v3 .t-strip-track li { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  html.theme-nox-visual-v3 .t-strip-foot { display: none; }
}

/* ═════════════ 3D-visualisoinnit (1.10.2026) ═════════════ */

/* ── Herotaso: etusivun 3D-luvun renderikorttien kaari kuvan takana (asento page.js:ssä).
   Mallikortit (.d-clay) renderöityvät kuvan takana kulkiessaan. Blueprint-ruudukko kuten etusivulla. ── */
html.theme-nox-visual-v3 .d-orbit { position: absolute; inset: -14% -30% -14% -30%; perspective: var(--persp, 1000px); pointer-events: none; }
html.theme-nox-visual-v3 .d-orbit-grid { position: absolute; inset: 0; background:
  linear-gradient(rgb(46 94 158 / 9%) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgb(46 94 158 / 9%) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 40% 42% at 60% 47%, #000 30%, transparent); mask-image: radial-gradient(ellipse 40% 42% at 60% 47%, #000 30%, transparent); }
html.theme-nox-visual-v3 .d-orbit-ring { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
/* Keskitys marginaaleilla, ei translatella: translate tehtäisiin kierron jälkeen ja siirtäisi kortin pois kaarelta */
html.theme-nox-visual-v3 .d-card { position: absolute; left: calc(var(--cw, 360px) / -2); top: calc(var(--cw, 360px) * -9 / 32); width: var(--cw, 360px); aspect-ratio: 16 / 9; margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 30px 60px -30px rgb(10 27 49 / 35%); opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
html.theme-nox-visual-v3 .d-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.theme-nox-visual-v3 .d-card .d-clay { clip-path: inset(0 0 0 var(--wipe, 0%)); }
html.theme-nox-visual-v3 .d-scan { position: absolute; top: 0; bottom: 0; left: var(--wipe, 0%); width: 2px; translate: -1px 0; background: var(--blue-300); box-shadow: 0 0 0 4px rgb(157 191 232 / 22%); opacity: var(--scan, 0); }

/* ── Työnäytteet: kuvat renderöityvät ruuduittain (Cyclesin tapaan keskeltä kierukkana) ── */
html.theme-nox-visual-v3 .d-gal-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
html.theme-nox-visual-v3 .d-gal-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .d-gal-aside { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: flex-end; }
html.theme-nox-visual-v3 .d-gal-aside .link-arrow { color: var(--white); }
html.theme-nox-visual-v3 .d-gal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 4vw, 56px) clamp(16px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .d-gal-grid li { grid-column: span var(--span, 4); min-width: 0; }
html.theme-nox-visual-v3 .d-gal-grid button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html.theme-nox-visual-v3 .d-gal-frame { position: relative; display: block; height: clamp(220px, 23vw, 400px); border-radius: 16px; overflow: hidden; background: var(--navy-990); isolation: isolate; }
html.theme-nox-visual-v3 .d-gal-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.04; transition: scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .d-gal-grid button:hover .d-gal-frame img { scale: 1; }
html.theme-nox-visual-v3 .d-gal-grid button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 6px; border-radius: 16px; }
html.theme-nox-visual-v3 .d-gal-grid .t-cap { color: var(--grey-300); }
html.theme-nox-visual-v3 .d-gal-grid .t-cap b { color: var(--blue-300); }
html.theme-nox-visual-v3 .d-buckets { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); pointer-events: none; }
html.theme-nox-visual-v3 .d-buckets i { background: var(--navy-990); }
html.theme-nox-visual-v3 .d-gal-frame.is-rendering .d-buckets i { animation: d-bucket 0.5s linear forwards; animation-delay: calc(var(--o) * 34ms); }
html.theme-nox-visual-v3 .d-gal-frame.is-rendered .d-buckets { display: none; }
@keyframes d-bucket {
  0% { background-color: var(--navy-990); box-shadow: inset 0 0 0 1px rgb(157 191 232 / 0%); }
  12% { background-color: rgb(7 18 34 / 72%); box-shadow: inset 0 0 0 1px rgb(157 191 232 / 70%); }
  70% { background-color: rgb(7 18 34 / 0%); box-shadow: inset 0 0 0 1px rgb(157 191 232 / 30%); }
  100% { background-color: rgb(7 18 34 / 0%); box-shadow: inset 0 0 0 1px rgb(157 191 232 / 0%); }
}

/* ── Mallista kuvaksi: jakoviiva ── */
html.theme-nox-visual-v3 .d-cmp-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 5vw, 64px); }
html.theme-nox-visual-v3 .d-cmp-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .d-cmp-head .p-body { margin-top: 0; }
html.theme-nox-visual-v3 .d-cmp-frame { --x: 50; position: relative; aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-frame); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
html.theme-nox-visual-v3 .d-cmp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: opacity 0.45s var(--ease-out); }
html.theme-nox-visual-v3 .d-cmp-frame.is-swapping img { opacity: 0; }
html.theme-nox-visual-v3 .d-cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc((100 - var(--x)) * 1%) 0 0); }
html.theme-nox-visual-v3 .d-cmp-handle { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 44px; translate: -50% 0; padding: 0; border: 0; background: none; cursor: ew-resize; }
html.theme-nox-visual-v3 .d-cmp-handle::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -1px 0; background: var(--white); box-shadow: 0 0 0 1px rgb(10 27 49 / 10%); }
html.theme-nox-visual-v3 .d-cmp-handle i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -10px rgb(10 27 49 / 40%); transition: scale 0.4s var(--ease-out); }
html.theme-nox-visual-v3 .d-cmp-handle i::before, html.theme-nox-visual-v3 .d-cmp-handle i::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border: solid var(--navy); border-width: 0 0 1.5px 1.5px; }
html.theme-nox-visual-v3 .d-cmp-handle i::before { left: 15px; transform: translateY(-50%) rotate(45deg); }
html.theme-nox-visual-v3 .d-cmp-handle i::after { right: 15px; transform: translateY(-50%) rotate(-135deg); }
html.theme-nox-visual-v3 .d-cmp-frame:hover .d-cmp-handle i, html.theme-nox-visual-v3 .d-cmp-frame.is-drag .d-cmp-handle i { scale: 1.08; }
html.theme-nox-visual-v3 .d-cmp-handle:focus-visible { outline: none; }
html.theme-nox-visual-v3 .d-cmp-handle:focus-visible i { outline: 2px solid var(--blue-600); outline-offset: 3px; }
html.theme-nox-visual-v3 .d-cmp-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 22px; }
html.theme-nox-visual-v3 .d-cmp-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-400); }
html.theme-nox-visual-v3 .d-cmp-label b { font-weight: 600; color: var(--navy); }
html.theme-nox-visual-v3 .d-cmp-label.is-after { text-align: right; }
html.theme-nox-visual-v3 .d-cmp-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 60%); border: 1px solid var(--line); }
html.theme-nox-visual-v3 .d-cmp-tabs button { display: flex; gap: 8px; align-items: baseline; padding: 10px 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background 0.3s, color 0.3s; }
html.theme-nox-visual-v3 .d-cmp-tabs button .p-num { font-size: 11px; color: var(--grey-400); transition: color 0.3s; }
html.theme-nox-visual-v3 .d-cmp-tabs button:hover { color: var(--navy); }
html.theme-nox-visual-v3 .d-cmp-tabs button[aria-pressed='true'] { background: var(--navy); color: var(--white); }
html.theme-nox-visual-v3 .d-cmp-tabs button[aria-pressed='true'] .p-num { color: var(--blue-300); }
html.theme-nox-visual-v3 .d-cmp-tabs button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ── Miksi NOX: leveä kuva + viisi kohtaa rinnakkain ── */
html.theme-nox-visual-v3 .d-why-img { margin: 0; aspect-ratio: 21 / 8; border-radius: 20px; overflow: hidden; box-shadow: 0 60px 120px -50px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 8%); }
html.theme-nox-visual-v3 .d-why-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 50% 60%; will-change: transform; }
html.theme-nox-visual-v3 .d-why-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px clamp(20px, 2.4vw, 40px); margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .d-why-list li { padding-top: 20px; border-top: 1px solid rgb(157 191 232 / 24%); }
html.theme-nox-visual-v3 .d-why-list h3 { margin-top: 14px; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
html.theme-nox-visual-v3 .d-why-list p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }

/* ── Näin se etenee: viivapiirros piirtyy ylhäältä alas ── */
/* Pohja = piirroksen paperin sävy (mitattu kuvasta), jotta piirtymätön osa on samaa arkkia */
html.theme-nox-visual-v3 .d-flow-img { aspect-ratio: 4 / 5; background: #e6e1dd; }
html.theme-nox-visual-v3 .d-flow-img img { clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0); }
html.theme-nox-visual-v3 .d-flow .p-timeline { margin-top: 44px; }

@media (max-width: 1280px) {
  html.theme-nox-visual-v3 .d-why-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .d-orbit { inset: -12% -24%; }
  html.theme-nox-visual-v3 .d-gal-head, html.theme-nox-visual-v3 .d-cmp-head { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .d-gal-aside { justify-content: flex-start; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .d-gal-grid { grid-template-columns: 1fr 1fr; gap: 36px 14px; }
  html.theme-nox-visual-v3 .d-gal-grid li { grid-column: span 1; }
  html.theme-nox-visual-v3 .d-gal-grid li:nth-child(5n + 1) { grid-column: 1 / -1; }
  html.theme-nox-visual-v3 .d-gal-frame { height: auto; aspect-ratio: 4 / 3; }
  html.theme-nox-visual-v3 .d-gal-grid li:nth-child(5n + 1) .d-gal-frame { aspect-ratio: 16 / 9; }
  html.theme-nox-visual-v3 .d-gal-grid .t-cap { flex-direction: column; gap: 4px; font-size: 14px; }
  html.theme-nox-visual-v3 .d-cmp-frame { aspect-ratio: 4 / 3; }
  html.theme-nox-visual-v3 .d-cmp-bar { grid-template-columns: 1fr 1fr; }
  /* Neljä paria 2 × 2 -ruudukkona: vaakavieritteinen rivi piilotti viimeisen parin */
  html.theme-nox-visual-v3 .d-cmp-tabs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; }
  html.theme-nox-visual-v3 .d-cmp-tabs button { justify-content: center; padding: 10px 12px; }
  html.theme-nox-visual-v3 .d-why-img { aspect-ratio: 4 / 3; }
  html.theme-nox-visual-v3 .d-why-list { grid-template-columns: 1fr; gap: 0; }
  html.theme-nox-visual-v3 .d-why-list li { display: grid; grid-template-columns: 44px 1fr; column-gap: 0; padding: 22px 0; }
  html.theme-nox-visual-v3 .d-why-list li .p-num { grid-row: 1 / 3; padding-top: 0.35em; }
  html.theme-nox-visual-v3 .d-why-list h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .d-gal-frame img, html.theme-nox-visual-v3 .d-cmp-frame img { transition: none; }
  html.theme-nox-visual-v3 .d-buckets { display: none; }
}