/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/svc-seo-verkkosivut.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Verkkosivujen hakukonesivut (2.10.2026): verkkosivu-uudistus ja verkkosivut-tampere page.css-pohjan päälle.
   Etuliite sw-. Työpinnat: osoitekartta (parts-seo-uudistus.js) ja palvelualuekartta (parts-seo-tampere.js),
   sama sininen viivakieli kuin verkkosivujen leiskassa. */

/* ── Murupolku kolmella tasolla: kapealla rivittyy sanojen välistä ── */
html.theme-nox-visual-v3 nav.p-crumb { display: block; line-height: 1.7; }
html.theme-nox-visual-v3 nav.p-crumb [aria-current] { color: var(--ink-2); }

/* ── Herotasot: yhteiset SVG-palaset ── */
html.theme-nox-visual-v3 .p-wire-frame[data-parts^='seo-'] > i:first-child { border: 0; background: radial-gradient(circle, rgb(46 94 158 / 16%) 1px, transparent 1.4px) 0 0 / 2.5% 4%; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts^='seo-'] svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--blue-600); stroke-linecap: round; stroke-linejoin: round; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts^='seo-'] svg * { vector-effect: non-scaling-stroke; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts^='seo-'] svg text { fill: var(--blue-600); stroke: none; font-family: 'General Sans', 'General Sans Fallback', sans-serif; font-weight: 600; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts^='seo-'] > i.sw-label { border: 0; background: none; }
html.theme-nox-visual-v3 .sw-label text { font-size: 2.6px; letter-spacing: 0.5px; fill-opacity: 0.6; }

/* Osoitekartta: vanha sivusto katkoviivoin ja haaleampana, uusi sivusto verkkosivujen leiskan tyylillä */
html.theme-nox-visual-v3 .p-wire-frame > i.sw-old { background: none; border: 1.5px dashed rgb(46 94 158 / 40%); border-radius: 3px; }
html.theme-nox-visual-v3 .p-wire-frame > i.sw-old-img { background:
  linear-gradient(to top right, transparent calc(50% - 0.6px), rgb(46 94 158 / 18%) 50%, transparent calc(50% + 0.6px)),
  linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgb(46 94 158 / 18%) 50%, transparent calc(50% + 0.6px)); }
html.theme-nox-visual-v3 .p-wire-frame > i.sw-old-tab { background: rgb(46 94 158 / 5%); border: 1px dashed rgb(46 94 158 / 30%); border-radius: 2px; }
html.theme-nox-visual-v3 .p-wire-frame > i.sw-old-line { border: 0; border-radius: 1px; background: rgb(46 94 158 / 22%); }
html.theme-nox-visual-v3 .p-wire-frame > i.sw-arcs { border: 0; background: none; }
html.theme-nox-visual-v3 .sw-arc { stroke-width: 1.6px; stroke-opacity: 0.5; stroke-dasharray: 5 4; animation: sw-flow 1.6s linear infinite; }
html.theme-nox-visual-v3 .sw-arc-from { fill: var(--paper); stroke-width: 1.4px; stroke-opacity: 0.6; }
html.theme-nox-visual-v3 .sw-arc-to, html.theme-nox-visual-v3 .sw-arc-dot { fill: var(--blue-600); stroke: none; }
html.theme-nox-visual-v3 .sw-301 { font-size: 2.1px; letter-spacing: 0.2px; fill-opacity: 0.8; }
@keyframes sw-flow { to { stroke-dashoffset: -9; } }

/* ── Yhteiset osiorakenteet ── */
html.theme-nox-visual-v3 .sw-wide-head, html.theme-nox-visual-v3 .sw-audit-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 .sw-wide-head .p-head, html.theme-nox-visual-v3 .sw-audit-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .sw-aside { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 26rem; }
html.theme-nox-visual-v3 .is-navy .sw-aside { color: var(--grey-300); }
html.theme-nox-visual-v3 .sw-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html.theme-nox-visual-v3 .sw-links .link-arrow:focus-visible, html.theme-nox-visual-v3 .sw-cases .link-arrow:focus-visible, html.theme-nox-visual-v3 .sw-sched-link .link-arrow:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
html.theme-nox-visual-v3 .is-navy .link-arrow { color: var(--white); }
html.theme-nox-visual-v3 .is-navy .link-arrow:focus-visible { outline-color: var(--blue-300); }

/* Leveä kuva + kohdat rinnakkain (lähenee vierittäessä) */
html.theme-nox-visual-v3 .sw-wide { margin: 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .sw-wide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; will-change: transform; }
html.theme-nox-visual-v3 .sw-platform .sw-wide { aspect-ratio: 2 / 1; }
html.theme-nox-visual-v3 .sw-platform .sw-wide img { object-position: 50% 45%; }
html.theme-nox-visual-v3 .sw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 5vw, 80px); margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .sw-cols li { display: grid; grid-template-columns: 44px 1fr; padding-top: 20px; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .sw-cols .p-num { grid-row: 1 / 3; padding-top: 0.35em; }
html.theme-nox-visual-v3 .sw-cols h3 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.015em; }
html.theme-nox-visual-v3 .sw-cols p { margin-top: 10px; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .is-navy .sw-cols li { border-top-color: rgb(157 191 232 / 24%); }
html.theme-nox-visual-v3 .is-navy .sw-cols p { color: var(--grey-300); }

/* UKK: kysymys on h3 (otsikkorakenne), ulkoasu kuten pohjassa */
html.theme-nox-visual-v3 .sw-faq summary h3 { font: inherit; letter-spacing: inherit; line-height: 1.35; color: inherit; }

/* ═════════════ Verkkosivu-uudistus ═════════════ */

/* ── 2 · Auditointi: kaksi kohdetta, kuva skannautuu näkyviin kerran ── */
html.theme-nox-visual-v3 .sw-audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
html.theme-nox-visual-v3 .sw-check:nth-child(2) { margin-top: clamp(48px, 7vw, 120px); }
html.theme-nox-visual-v3 .sw-scan { --scan: 1; position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--navy-990); box-shadow: 0 50px 100px -50px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 8%); }
html.theme-nox-visual-v3 .sw-scan img { width: 100%; height: 100%; object-fit: cover; }
/* Skannaamaton osa: tumma verho ruudukolla, vetäytyy viivan mukana oikealle */
html.theme-nox-visual-v3 .sw-scan::after { content: ''; position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--scan) * 100%)); background:
  linear-gradient(rgb(157 191 232 / 10%) 1px, transparent 1px) 0 0 / 100% 12.5%,
  linear-gradient(90deg, rgb(157 191 232 / 10%) 1px, transparent 1px) 0 0 / 8.33% 100%,
  rgb(7 18 34 / 86%); }
html.theme-nox-visual-v3 .sw-scan-line { position: absolute; top: 0; bottom: 0; left: calc(var(--scan) * 100%); width: 2px; translate: -1px 0; background: var(--edge-core); box-shadow: 0 0 0 5px rgb(157 191 232 / 16%), 0 0 24px rgb(157 191 232 / 55%); opacity: calc((1 - var(--scan)) * 40); z-index: 1; }
html.theme-nox-visual-v3 .sw-check-copy { display: grid; grid-template-columns: 44px 1fr; margin-top: 28px; }
html.theme-nox-visual-v3 .sw-check-copy .p-num { padding-top: 0.45em; }
html.theme-nox-visual-v3 .sw-check h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.035em; }
html.theme-nox-visual-v3 .sw-check p { margin-top: 12px; max-width: 30rem; font-size: 16px; line-height: 1.6; }

/* ── 3 · Sisällöt ja osoitteet: vaiheet + kuva ja ohjauskaari ── */
html.theme-nox-visual-v3 .sw-move-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(48px, 6vw, 110px); align-items: start; }
html.theme-nox-visual-v3 .sw-steps { margin: 44px 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .sw-steps li { display: grid; grid-template-columns: 56px 1fr; padding: 30px 0; border-top: 1px solid var(--line); }
html.theme-nox-visual-v3 .sw-steps li:last-child { border-bottom: 1px solid var(--line); }
html.theme-nox-visual-v3 .sw-steps .p-num { padding-top: 0.4em; }
html.theme-nox-visual-v3 .sw-steps h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.12; letter-spacing: -0.03em; }
html.theme-nox-visual-v3 .sw-steps p { margin-top: 12px; max-width: 32rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .sw-move-visual { position: sticky; top: 14vh; }
html.theme-nox-visual-v3 .sw-move-img { margin: 0; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .sw-move-img img { width: 100%; height: 100%; object-fit: cover; }
html.theme-nox-visual-v3 .sw-rail { --p: 1; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; margin-top: 30px; padding-top: 34px; }
html.theme-nox-visual-v3 .sw-rail-node { position: relative; z-index: 1; padding: 9px 14px; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--paper); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: border-color 0.5s, background-color 0.5s, color 0.5s; }
html.theme-nox-visual-v3 .sw-rail-node.is-old { grid-column: 1; }
html.theme-nox-visual-v3 .sw-rail-node.is-new { grid-column: 3; border-style: solid; }
html.theme-nox-visual-v3 .sw-rail.is-arrived .sw-rail-node.is-new { border-color: var(--blue-600); background: var(--white); color: var(--navy); box-shadow: 0 0 0 4px rgb(46 94 158 / 10%); }
html.theme-nox-visual-v3 .sw-rail-arc { position: absolute; left: 4%; right: 4%; top: 0; height: calc(100% - 19px); width: 92%; overflow: visible; fill: none; }
html.theme-nox-visual-v3 .sw-rail-arc path { vector-effect: non-scaling-stroke; }
html.theme-nox-visual-v3 .sw-rail-base { stroke: var(--line-strong); stroke-width: 1.5px; stroke-dasharray: 4 5; }
html.theme-nox-visual-v3 .sw-rail-line { stroke: var(--blue-600); stroke-width: 2px; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p)); }
html.theme-nox-visual-v3 .sw-rail-tag { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 3px 9px; border-radius: 6px; background: var(--navy); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .sw-rail-dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 5px rgb(46 94 158 / 14%); opacity: 0; will-change: transform; }

/* ── 5 · Aikataulu: kaksi raitaa rinnakkain, toistopää vaihtohetkeen ── */
html.theme-nox-visual-v3 .sw-lanes { --lane-name: 168px; position: relative; display: grid; gap: 14px; padding: 40px 0 6px; }
html.theme-nox-visual-v3 .sw-lane { display: grid; grid-template-columns: var(--lane-name) 1fr; align-items: center; gap: 20px; }
html.theme-nox-visual-v3 .sw-lane-name { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--white); }
html.theme-nox-visual-v3 .sw-lane.is-old .sw-lane-name { color: var(--grey-300); }
html.theme-nox-visual-v3 .sw-track { position: relative; height: 64px; border-radius: 12px; background: rgb(255 255 255 / 3%); border: 1px solid rgb(157 191 232 / 12%); }
html.theme-nox-visual-v3 .sw-seg { position: absolute; top: 6px; bottom: 6px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); display: flex; align-items: center; padding: 0 14px; border-radius: 8px; border: 1px solid rgb(157 191 232 / 22%); background: rgb(255 255 255 / 3%); font-style: normal; overflow: hidden; transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s; }
html.theme-nox-visual-v3 .sw-seg span { font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 500; letter-spacing: -0.005em; color: var(--grey-400); white-space: nowrap; transition: color 0.5s; }
html.theme-nox-visual-v3 .sw-seg.is-on { border-color: var(--blue-300); background-color: rgb(157 191 232 / 14%); box-shadow: 0 0 0 4px rgb(157 191 232 / 9%); }
html.theme-nox-visual-v3 .sw-seg.is-on span, html.theme-nox-visual-v3 .sw-seg.is-done span { color: var(--white); }
html.theme-nox-visual-v3 .sw-seg.is-done { border-color: rgb(157 191 232 / 40%); background-color: rgb(157 191 232 / 7%); }
/* Nykyinen sivusto palvelee koko rakentamisen ajan; vaihtohetken jälkeen raita hiljenee */
html.theme-nox-visual-v3 .sw-lane.is-old .sw-seg.is-live { border-style: solid; }
html.theme-nox-visual-v3 .sw-lanes.is-switched .sw-lane.is-old .sw-seg { opacity: 0.4; border-style: dashed; box-shadow: none; }
html.theme-nox-visual-v3 .sw-switch { position: absolute; top: 4px; bottom: 0; left: calc(var(--lane-name) + 20px + (100% - var(--lane-name) - 20px) * var(--x) / 100); width: 0; border-left: 1.5px dashed rgb(157 191 232 / 45%); }
html.theme-nox-visual-v3 .sw-switch span { position: absolute; top: 0; left: 0; translate: -50% -100%; padding: 3px 9px; border-radius: 6px; background: rgb(157 191 232 / 14%); color: var(--blue-300); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background-color 0.5s, color 0.5s; }
html.theme-nox-visual-v3 .sw-lanes.is-switched .sw-switch span { background: var(--edge-core); color: var(--navy); }
html.theme-nox-visual-v3 .sw-head { position: absolute; top: 30px; bottom: 0; left: calc(var(--lane-name) + 20px); width: 2px; background: var(--edge-core); border-radius: 1px; box-shadow: 0 0 18px rgb(157 191 232 / 60%); will-change: transform; pointer-events: none; }
html.theme-nox-visual-v3 .sw-sched-cols { margin-top: clamp(48px, 5vw, 72px); }
html.theme-nox-visual-v3 .sw-sched-link { margin-top: 40px; }

/* ── 6 · Jatka tästä: caset linkkirivinä korttien alla ── */
html.theme-nox-visual-v3 .sw-cases { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
html.theme-nox-visual-v3 .sw-cases > span { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-400); margin-right: 8px; }

/* ═════════════ Verkkosivut Tampere ═════════════ */

/* ── Herotaso: palvelualuekartta. Järvet, kolme kehää ja neula; etäyhteys katkoviivana ulos kartalta ── */
html.theme-nox-visual-v3 .p-wire-frame > i.st-lake, html.theme-nox-visual-v3 .p-wire-frame > i.st-ring, html.theme-nox-visual-v3 .p-wire-frame > i.st-pin, html.theme-nox-visual-v3 .p-wire-frame > i.st-remote, html.theme-nox-visual-v3 .p-wire-frame > i.st-pulse { border: 0; background: none; border-radius: 0; }
html.theme-nox-visual-v3 .st-lake .st-water { fill: var(--blue-300); fill-opacity: 0.16; stroke: none; }
html.theme-nox-visual-v3 .st-lake .st-shore { stroke-width: 1.4px; stroke-opacity: 0.42; }
html.theme-nox-visual-v3 .st-lake .st-contour { fill: none; stroke-width: 1px; stroke-opacity: 0.24; stroke-dasharray: 3 4; }
html.theme-nox-visual-v3 .st-lake ellipse { fill: var(--paper); stroke-width: 1px; stroke-opacity: 0.38; }
html.theme-nox-visual-v3 .st-ring circle { stroke-width: 1.4px; stroke-opacity: 0.4; }
html.theme-nox-visual-v3 .st-ring.is-far circle { stroke-dasharray: 2 5; stroke-opacity: 0.36; }
html.theme-nox-visual-v3 .st-ring text { font-size: 2.3px; letter-spacing: 0.45px; fill-opacity: 0.62; }
html.theme-nox-visual-v3 .st-river { stroke-width: 1.6px; stroke-opacity: 0.5; }
html.theme-nox-visual-v3 .st-pin path { fill: var(--blue-600); stroke: none; }
html.theme-nox-visual-v3 .st-pin circle { fill: var(--paper); stroke: none; }
html.theme-nox-visual-v3 .st-pin text { font-size: 2.4px; letter-spacing: 0.5px; fill: var(--navy); }
html.theme-nox-visual-v3 .st-pulse b { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(46 94 158 / 50%); animation: st-pulse 2.8s var(--ease-out) infinite; }
html.theme-nox-visual-v3 .st-pulse b + b { animation-delay: 1.4s; }
@keyframes st-pulse { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
html.theme-nox-visual-v3 .st-remote path { stroke-width: 1.5px; stroke-opacity: 0.5; stroke-dasharray: 3 4; animation: sw-flow 1.4s linear infinite reverse; }
html.theme-nox-visual-v3 .st-remote circle { fill: var(--paper); stroke-width: 1.4px; stroke-opacity: 0.6; }
html.theme-nox-visual-v3 .st-remote circle.st-dot { fill: var(--blue-600); stroke: none; }
html.theme-nox-visual-v3 .st-remote text { font-size: 2.3px; letter-spacing: 0.45px; fill-opacity: 0.66; }

/* ── 2 · Paikallinen tekijä: ilmakuva Tampereesta + kaksi kohtaa ── */
html.theme-nox-visual-v3 .sw-aerial { aspect-ratio: 21 / 9; 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 .sw-aerial img { object-position: 50% 42%; }
html.theme-nox-visual-v3 .sw-cap { margin-top: 14px; font-size: 13px; letter-spacing: 0.02em; color: var(--grey-400); }

/* ── 3 · Suunnittelusta ylläpitoon: tekijä keskellä, neljä tehtävää ympärillä ── */
html.theme-nox-visual-v3 .sw-hub-grid { position: relative; display: grid; grid-template-columns: 1fr minmax(260px, 0.78fr) 1fr; grid-template-areas: 'a face b' 'c face d'; gap: clamp(48px, 6vw, 96px) clamp(36px, 5vw, 88px); align-items: center; }
html.theme-nox-visual-v3 .sw-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
html.theme-nox-visual-v3 .sw-hub-lines path { stroke: var(--line-strong); stroke-width: 1.5px; stroke-dasharray: 4 5; }
html.theme-nox-visual-v3 .sw-hub-lines .sw-hub-draw { stroke: var(--blue-600); stroke-width: 2px; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--k, 1)); }
html.theme-nox-visual-v3 .sw-hub-lines circle { fill: var(--paper); stroke: var(--blue-600); stroke-width: 2px; }
html.theme-nox-visual-v3 .sw-hub-face { grid-area: face; position: relative; z-index: 1; margin: 0; }
html.theme-nox-visual-v3 .sw-hub-face > span { display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .sw-hub-face img { width: 100%; height: 100%; object-fit: cover; }
html.theme-nox-visual-v3 .sw-hub-face figcaption { margin-top: 14px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-400); }
html.theme-nox-visual-v3 .sw-hub-item { position: relative; z-index: 1; max-width: 26rem; }
html.theme-nox-visual-v3 .sw-hub-item[data-area='a'] { grid-area: a; justify-self: end; }
html.theme-nox-visual-v3 .sw-hub-item[data-area='b'] { grid-area: b; }
html.theme-nox-visual-v3 .sw-hub-item[data-area='c'] { grid-area: c; justify-self: end; }
html.theme-nox-visual-v3 .sw-hub-item[data-area='d'] { grid-area: d; }
html.theme-nox-visual-v3 .sw-hub-item h3 { margin-top: 12px; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.12; letter-spacing: -0.03em; }
html.theme-nox-visual-v3 .sw-hub-item p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ── 4 · Hinta: hinta ei katkea rivinvaihtoon ("99" ja "€/kk" eri riveillä) ── */
html.theme-nox-visual-v3 .sw-nw { white-space: nowrap; }
html.theme-nox-visual-v3 .sw-price .p-h2 { max-width: 12em; }
html.theme-nox-visual-v3 .sw-price .sw-links { margin-top: 36px; }
html.theme-nox-visual-v3 .sw-also { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .sw-also .link-arrow:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }

/* ── 5 · Toteutukset: kaksi sivustoa kannettavalla, jälkimmäinen alempana ── */
html.theme-nox-visual-v3 .sw-works-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
html.theme-nox-visual-v3 .sw-work:nth-child(2) { margin-top: clamp(48px, 7vw, 120px); }
html.theme-nox-visual-v3 .sw-work-img { display: block; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .sw-work-img img { width: 100%; height: 112%; object-fit: cover; will-change: transform; transition: scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .sw-work-img:hover img { scale: 1.03; }
html.theme-nox-visual-v3 .sw-work-img:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; }
html.theme-nox-visual-v3 .sw-work h3 { margin-top: 22px; font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 500; letter-spacing: -0.03em; }
html.theme-nox-visual-v3 .sw-work-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 14px; font-weight: 500; }
html.theme-nox-visual-v3 .sw-work-links a:not(.link-arrow) { color: var(--ink-2); transition: color 0.3s; }
html.theme-nox-visual-v3 .sw-work-links a:hover { color: var(--navy); }
html.theme-nox-visual-v3 .sw-work-links a:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }

/* ── Kapeat ruudut ── */
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .sw-move-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .sw-move-visual { position: relative; top: 0; max-width: 640px; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .sw-wide-head, html.theme-nox-visual-v3 .sw-audit-head { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .sw-audit-grid, html.theme-nox-visual-v3 .sw-works-grid { grid-template-columns: 1fr; gap: 56px; }
  html.theme-nox-visual-v3 .sw-check:nth-child(2), html.theme-nox-visual-v3 .sw-work:nth-child(2) { margin-top: 0; }
  html.theme-nox-visual-v3 .sw-cols { grid-template-columns: 1fr; gap: 0; }
  html.theme-nox-visual-v3 .sw-cols li { padding: 22px 0; }
  html.theme-nox-visual-v3 .sw-wide { aspect-ratio: 4 / 3; }
  html.theme-nox-visual-v3 .sw-aerial { aspect-ratio: 4 / 3; }
  /* Raidat pystyyn: vaiheet allekkain, toistopää kulkee ylhäältä alas */
  html.theme-nox-visual-v3 .sw-lanes { --lane-name: 0px; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 0; }
  html.theme-nox-visual-v3 .sw-lane { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; }
  html.theme-nox-visual-v3 .sw-track { height: 440px; }
  html.theme-nox-visual-v3 .sw-seg { top: calc(var(--a) * 1%); bottom: auto; height: calc((var(--b) - var(--a)) * 1% - 6px); left: 6px; right: 6px; width: auto; padding: 12px; align-items: flex-start; }
  html.theme-nox-visual-v3 .sw-seg span { white-space: normal; font-size: 14px; line-height: 1.3; }
  html.theme-nox-visual-v3 .sw-switch { left: 0; right: 0; top: calc(30px + 12px + (100% - 42px) * var(--x) / 100); bottom: auto; width: auto; height: 0; border-left: 0; border-top: 1.5px dashed rgb(157 191 232 / 45%); }
  html.theme-nox-visual-v3 .sw-switch span { left: 50%; translate: -50% -50%; }
  html.theme-nox-visual-v3 .sw-head { left: 0; right: 0; top: 42px; bottom: auto; width: auto; height: 2px; }
  html.theme-nox-visual-v3 .sw-hub-grid { grid-template-columns: 1fr; grid-template-areas: 'face' 'a' 'b' 'c' 'd'; gap: 0; }
  html.theme-nox-visual-v3 .sw-hub-lines { display: none; }
  html.theme-nox-visual-v3 .sw-hub-face { max-width: 360px; margin-bottom: 24px; }
  html.theme-nox-visual-v3 .sw-hub-item, html.theme-nox-visual-v3 .sw-hub-item[data-area] { justify-self: start; max-width: none; padding: 24px 0 24px 24px; border-left: 1.5px solid var(--line-strong); }
}
@media (max-width: 600px) {
  html.theme-nox-visual-v3 .sw-rail-node { font-size: 13px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .sw-arc, html.theme-nox-visual-v3 .st-remote path { animation: none; }
  html.theme-nox-visual-v3 .st-pulse b { animation: none; transform: scale(0.6); opacity: 0.5; }
  html.theme-nox-visual-v3 .sw-work-img img { transition: none; }
}