/* Geometrics Lab — site.css · Style System LOCKED 2026-09-21 (05 - Design/03) evolved for production.
   Design Amendments 004–006 applied. One stylesheet for every page and both languages. Generated tokens: see build/tokens.json. */

/* ---------- fonts: Inter 4 (variable, opsz + wght), self-hosted; a size-adjusted fallback keeps the hero's lines stable while it loads ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/inter-latin.dd8a4575be.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/inter-latin-ext.8bc9dee39d.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:104%;ascent-override:93%;descent-override:23%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --gl-ink:#111111; --gl-paper:#F6F4EF; --gl-surface:#ECE9E2; --gl-line:#D6D2CA;
  --gl-text-2:#4F4C46; --gl-text-3:#67635C; --gl-text-3-inv:#9A968F; --gl-f3:#E4E1DA; --gl-dusk:#B5B1AA;
  --u:8px;
  --margin:clamp(24px,6vw,96px); --gutter:24px; --maxw:1360px;
  --t-fast:120ms; --t-normal:240ms; --t-long:360ms;
  --ease-in:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.4,0,1,1);
  --fs-h1:clamp(2.75rem,1rem + 7.2vw,7.5rem);
  --fs-stmt:clamp(2rem,1rem + 3.2vw,4rem);
  --fs-h2:clamp(1.75rem,1rem + 1.8vw,2.75rem);
  --fs-h3:1.25rem; --fs-lede:1.25rem; --fs-body:1.125rem; --lh-body:28px;
  --fs-label:.75rem; --fs-ui:.9375rem; --fs-cap:.875rem;
  --hdr:72px;
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:1ms;--t-normal:1ms;--t-long:1ms}}
@media (max-width:899px){:root{--gutter:16px;--fs-body:1.0625rem;--lh-body:26px;--fs-lede:1.125rem;--fs-h1:clamp(3.25rem,1rem + 11vw,5rem);--hdr:64px}}
@media (max-width:359px){:root{--fs-h1:clamp(2.75rem,1rem + 10vw,5rem)}}
*{box-sizing:border-box}
html{background:var(--gl-paper);color:var(--gl-ink);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;font-family:Inter,"Inter Fallback","Helvetica Neue",Arial,sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);font-feature-settings:"kern","liga";overflow-x:hidden}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-thickness var(--t-fast) var(--ease-in)}
a:hover,a:focus-visible{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--gl-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:60}
.skip:focus{left:var(--margin);background:var(--gl-paper);padding:10px 14px;outline:2px solid var(--gl-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- grid = datum: governs placement, never announces itself ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--margin)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-8{grid-column:1/9}.c1-9{grid-column:1/10}.c1-10{grid-column:1/11}.c1-12{grid-column:1/-1}
.c2-8{grid-column:2/9}.c2-9{grid-column:2/10}.c4-9{grid-column:4/10}.c4-10{grid-column:4/11}.c4-11{grid-column:4/12}.c4-12{grid-column:4/-1}.c5-11{grid-column:5/12}.c6-12{grid-column:6/-1}.c7-12{grid-column:7/-1}.c8-12{grid-column:8/-1}.c9-12{grid-column:9/-1}
@media (max-width:899px){.g{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:calc(var(--u)*2)}.g>[class*="c"]{grid-column:1/-1}.hero .g,.invite .g{row-gap:0}}

/* ---------- type roles (three heading levels) ---------- */
.h1{font-weight:700;font-size:var(--fs-h1);line-height:.96;letter-spacing:-.02em;text-wrap:balance;hyphens:manual}
.h1--en{font-size:clamp(2.5rem,1rem + 6vw,6.25rem);line-height:.98}
.h1--page{font-size:var(--fs-stmt);line-height:1.02;letter-spacing:-.015em}
.stmt{font-weight:700;font-size:var(--fs-stmt);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.h2{font-weight:600;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.h3{font-weight:600;font-size:var(--fs-h3);line-height:1.3}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--gl-text-2);text-wrap:pretty}
.body{max-width:36rem;text-wrap:pretty}
.t2{color:var(--gl-text-2)}.t3{color:var(--gl-text-3)}
.label{font-weight:500;font-size:var(--fs-label);line-height:1.2;letter-spacing:.10em;text-transform:uppercase;color:var(--gl-text-3)}
.measure{font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--gl-text-3)}
.cap{font-size:var(--fs-cap);line-height:1.45;color:var(--gl-text-3)}
.stack>*+*{margin-top:calc(var(--u)*3)}

/* ---------- header: three links, one button; the ask visible on every width; symbol-only mark under 480 px ---------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--gl-paper);border-bottom:1px solid transparent;transition:border-color var(--t-normal) var(--ease-in)}
.hdr[data-scrolled="1"]{border-bottom-color:var(--gl-line)}
.hdr .wrap{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr .brand{display:block;line-height:0}
.hdr .brand:focus-visible{outline-offset:6px}
.hdr img{height:22px;width:auto;display:block}
.hdr .mark{display:none}
.nav{display:flex;align-items:center;gap:32px;font-weight:500;font-size:var(--fs-ui);line-height:1}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--gl-ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--gl-ink)}
.nav .switch{color:var(--gl-text-2)}
.hdr .right{display:flex;align-items:center;gap:20px}
.btn{display:inline-block;font-weight:500;font-size:var(--fs-ui);line-height:1;padding:14px 20px;background:var(--gl-ink);color:var(--gl-paper);text-decoration:none;border:1px solid var(--gl-ink);border-radius:0;font-family:inherit;cursor:pointer;transition:outline-offset var(--t-fast) var(--ease-in),background var(--t-fast) var(--ease-in)}
.btn:hover,.btn:focus-visible{outline:1px solid var(--gl-ink);outline-offset:2px;text-decoration:none}
.btn:active{background:#000}
.on-ink .btn{background:var(--gl-paper);color:var(--gl-ink);border-color:var(--gl-paper)}
.on-ink .btn:hover,.on-ink .btn:focus-visible{outline-color:var(--gl-paper)}
.menu-btn{display:none;font-weight:500;font-size:var(--fs-ui);background:none;border:0;padding:12px 0;color:inherit;font-family:inherit;cursor:pointer;min-height:44px}
@media (max-width:899px){
  .hdr .btn{font-size:.875rem;padding:12px 14px}
  .menu-btn{display:block}
  .nav{display:none}
  /* the menu: the page's own paper, the three links at heading scale, the language switch and the ask — no drawer, no theatre */
  .nav.is-open{display:flex;position:fixed;left:0;right:0;top:var(--hdr);bottom:0;flex-direction:column;align-items:stretch;gap:0;background:var(--gl-paper);padding:calc(var(--u)*4) var(--margin) calc(var(--u)*6);overflow:auto;z-index:29;animation:menu-in var(--t-normal) var(--ease-in) both}
  .nav.is-open a{font-weight:600;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em;padding:calc(var(--u)*3) 0;border:0;border-top:1px solid var(--gl-line)}
  .nav.is-open a[aria-current="page"]{color:var(--gl-text-3)}
  .nav.is-open a:hover,.nav.is-open a:focus-visible{border-bottom-color:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
  .nav.is-open .switch{font-weight:500;font-size:var(--fs-lede);color:var(--gl-text-2);margin-top:auto;border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*4)}
  body[data-menu="open"]{overflow:hidden}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:479px){/* Mobile header (2026-10-04, founder option 1): the official horizontal lockup stays on phones and takes the width left beside the CTA and menu control, never above its desktop size (146.5 × 22 px); internal gap 16 px */.hdr .wrap{gap:16px}.hdr .right,.hdr .btn,.hdr .menu-btn{flex:0 0 auto}.hdr .brand{flex:1 1 auto;min-width:0;max-width:146.5px}.hdr .lock{display:block;width:100%;height:auto}.hdr .mark{display:none}.hdr .wrap{padding-inline:16px}.hdr .right{gap:14px}}
@media (prefers-reduced-motion:reduce){.nav.is-open{animation:none}}

/* ---------- sections: rhythm varies by stage — no two adjacent tops equal ---------- */
main{position:relative;z-index:1;display:block}
.s{padding-block:calc(var(--u)*12)}
.s--breathe{padding-top:calc(var(--u)*20);padding-bottom:calc(var(--u)*16)}
.s--tall{padding-top:calc(var(--u)*28);padding-bottom:calc(var(--u)*20)}
.s--dense{padding-block:calc(var(--u)*8)}
.s--band{background:transparent}
.s--ink{background:var(--gl-ink);color:var(--gl-paper);position:relative}
.s--ink .t2{color:var(--gl-line)}.s--ink .t3,.s--ink .label{color:var(--gl-text-3-inv)}
main > section.s{background:transparent;position:relative}
@media (max-width:899px){.s{padding-block:calc(var(--u)*8)}.s--breathe{padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*10)}.s--tall{padding-top:calc(var(--u)*16);padding-bottom:calc(var(--u)*12)}.s--dense{padding-block:calc(var(--u)*6)}}

/* ---------- hero (image-free; no perimeter lines): H1 top-left, situation line lower right ---------- */
.hero{position:relative;min-height:min(calc(100svh - var(--hdr)),880px);display:grid;grid-template-rows:auto 1fr auto;padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*8)}
.hero .h1{position:relative;z-index:1;font-variation-settings:"wght" var(--w,700),"opsz" 32;letter-spacing:-.02em}
.hero .h1 .w{display:inline-block;font-variation-settings:"wght" var(--w,700),"opsz" 32}
.hero .h1 .w:not(:last-child){margin-right:var(--wsp,.28em)}
.hero .h1 .dot{display:inline;font-variation-settings:"wght" var(--w,700),"opsz" 32}
.hero .sub{align-self:end;will-change:transform}
.hero .sub .lede{max-width:34rem}
html.js.opening-pending .hero .h1,html.js.opening-pending .hero .sub .lede{visibility:hidden}
@media (max-width:899px){.hero{min-height:min(calc(100svh - var(--hdr)),640px);padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*6)}}
/* subpage title */
.title{padding-top:calc(var(--u)*16);padding-bottom:calc(var(--u)*12)}
@media (max-width:899px){.title{padding-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*8)}}

/* ---------- rules and lists (L1 material) ---------- */
.symptoms li{padding:calc(var(--u)*2) 0;border-top:1px solid var(--gl-line);font-size:var(--fs-lede);line-height:1.4}
.symptoms li:last-child{border-bottom:1px solid var(--gl-line)}
.list li{padding:calc(var(--u)*1.5) 0;border-top:1px solid var(--gl-line)}.list li:last-child{border-bottom:1px solid var(--gl-line)}
.list--quiet li{color:var(--gl-text-2)}
.pairs{margin:0;border-top:1px solid var(--gl-line)}
.pairs div{padding:calc(var(--u)*2) 0;border-bottom:1px solid var(--gl-line)}
.pairs dt{font-weight:600}.pairs dd{margin:0;color:var(--gl-text-2)}
.pairs--grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);border-top:0}
.pairs--grid div{border-bottom:0;border-top:1px solid var(--gl-line)}
.pairs--plain{border-top:0}.pairs--plain div{border-bottom:0;padding:calc(var(--u)*1) 0}
@media (max-width:899px){.pairs--grid{grid-template-columns:1fr}}
/* rules draw as their content arrives (scroll-linked, no clocks); static without JS or under reduced motion */
html.js .symptoms li,html.js .list li,html.js .pairs div,html.js .qa,html.js .principles>div,html.js .trip>div,html.js .step{border-top-color:transparent;position:relative}
html.js .symptoms li::before,html.js .list li::before,html.js .pairs div::before,html.js .qa::before,html.js .principles>div::before,html.js .trip>div::before,html.js .step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gl-line);transform:scaleX(var(--d,1));transform-origin:0 0}
html.js .symptoms li:last-child,html.js .list li:last-child{border-bottom-color:transparent}
html.js .symptoms li:last-child::after,html.js .list li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gl-line);transform:scaleX(var(--d2,1));transform-origin:0 0}
html.js .pairs--grid div::before{top:-1px}
html.rm-forced .symptoms li::before,html.rm-forced .list li::before,html.rm-forced .pairs div::before,html.rm-forced .qa::before,html.rm-forced .principles>div::before,html.rm-forced .trip>div::before,html.rm-forced .step::before,html.rm-forced .symptoms li:last-child::after,html.rm-forced .list li:last-child::after{transform:none}

/* ---------- cta rows ---------- */
.cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta .exp{color:var(--gl-text-3);font-size:var(--fs-cap)}
.s--ink .cta .exp{color:var(--gl-text-3-inv)}
.s-ask{position:relative}
.path-arrive{position:absolute;width:1px;background:var(--gl-ink);transform:scaleY(var(--d,1));transform-origin:50% 0;pointer-events:none}
.path-arrive::after{content:"";position:absolute;left:-4px;bottom:-1px;width:8px;height:1px;background:var(--gl-ink);transform:rotate(45deg);opacity:var(--d3,1)}
/* page-end ask: the button becomes the only ink as it arrives */
.ask .lede{max-width:34rem}

/* ---------- programs: a descending stair on the datum (P1 largest) ---------- */
.steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:calc(var(--u)*8)}
.step{border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*3);will-change:transform,opacity;transform-origin:0 0}
.step .name{font-weight:600;font-size:var(--fs-h3);line-height:1.3}
.step .snum{display:none}
.step .promise{margin-top:calc(var(--u)*2);text-wrap:balance}
.step-1{grid-column:1/8;grid-row:1}.step-1 .promise{font-weight:700;font-size:var(--fs-stmt);line-height:1.02;letter-spacing:-.015em}
.step-2{grid-column:4/11;grid-row:2}.step-2 .promise,.step-3 .promise{font-weight:600;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em}
.step-3{grid-column:7/13;grid-row:3}
.step .sit{margin-top:calc(var(--u)*1.5);max-width:30rem;font-size:var(--fs-lede);line-height:1.4;font-weight:500;color:var(--gl-ink)}.step .promise{margin-top:calc(var(--u)*2.5)}.step .ach{margin-top:calc(var(--u)*2);max-width:30rem;color:var(--gl-text-2)}
.step .go{margin-top:calc(var(--u)*3)}
@media (max-width:899px){.steps{row-gap:calc(var(--u)*5)}.step-1,.step-2,.step-3{grid-column:1/-1;grid-row:auto}.step-2{margin-left:calc(var(--u)*4)}.step-3{margin-left:calc(var(--u)*8)}}

/* ---------- the aperture (Gate 003 architecture F; Level 3 spatial event) ---------- */
.journey{position:relative;height:clamp(440px,72vh,760px);margin-top:calc(var(--u)*-2)}
.journey[hidden]{display:none}
.journey .jf{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 var(--jr,var(--margin)) 0 var(--jl,var(--margin)));background:var(--gl-surface)}
.journey .jf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--jy,55%);display:block;transform:translateZ(0)}
.journey .jf::after{content:"";position:absolute;inset:0;background:var(--gl-paper);opacity:var(--jv,0);pointer-events:none;z-index:2}
.journey .jf .cut{position:absolute;pointer-events:none;z-index:3;display:none}
html[data-cut="1"] .journey .jf .cut{display:block}
.journey .jf .cut-t{left:0;right:0;top:0;height:36px;background:linear-gradient(to bottom,rgba(17,17,17,.20),rgba(17,17,17,0))}
.journey .jf .cut-l{top:0;bottom:0;left:var(--jl,0px);width:22px;background:linear-gradient(to right,rgba(17,17,17,.22),rgba(17,17,17,0))}
.journey .jf .cut-r{top:0;bottom:0;right:var(--jr,0px);width:22px;background:linear-gradient(to left,rgba(17,17,17,.22),rgba(17,17,17,0))}
html[data-apd="1"] .journey{perspective:1200px;perspective-origin:50% var(--po,50%)}
html[data-apd="1"] .journey .jf{transform-style:preserve-3d}
html[data-apd="1"] .journey .jf img{transform:translateZ(-180px) scale(1.16);transform-origin:50% 50%}
@media (max-width:899px){.journey{height:clamp(380px,60vh,560px);margin-top:calc(var(--u)*-1)}}

/* ---------- the attention light (Level 2 spatial: paper and light) ---------- */
.light{display:none;position:fixed;left:0;top:0;width:var(--lr,700px);height:var(--lr,700px);border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 100%);will-change:transform;opacity:var(--lo,1)}
html[data-light="1"] .light{display:block}
/* the ink slab under the ending (Level 1 material): its shadow on the paper grows as the ending approaches */
.slab-edge{position:relative}
html[data-cut="1"] .slab-edge::before{content:"";position:absolute;left:0;right:0;top:-64px;height:64px;background:linear-gradient(to bottom,rgba(17,17,17,0),rgba(17,17,17,.16));opacity:var(--ss,0);pointer-events:none}
html[data-cut="1"] .slab-edge::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(246,244,239,.22);opacity:var(--ss,0);pointer-events:none;z-index:1}

/* ---------- bookend: the invitation in ink ---------- */
.invite{position:relative;min-height:min(80svh,760px);display:grid;grid-template-rows:auto 1fr auto;padding-top:calc(var(--u)*14);padding-bottom:calc(var(--u)*10)}
.invite .h1{color:var(--gl-paper);font-size:clamp(2.5rem,1rem + 6vw,6.25rem);line-height:.98;font-variation-settings:"wght" var(--bw,700),"opsz" var(--bo,32)}
.invite .sub{align-self:end}
.invite .lede{color:var(--gl-line);max-width:30rem}
.invite .cta .exp a{color:var(--gl-paper)}
@media (max-width:899px){.invite{min-height:min(70svh,600px);padding-top:calc(var(--u)*10)}}

/* ---------- footer: the functional conclusion after the emotional one ---------- */
.ftr{background:var(--gl-ink);color:var(--gl-paper);padding-block:calc(var(--u)*8) calc(var(--u)*6);font-size:var(--fs-cap);position:relative}
.ftr .g{row-gap:calc(var(--u)*3)}
.ftr a{text-decoration:none}.ftr a:hover,.ftr a:focus-visible{text-decoration:underline}
.ftr .t3{color:var(--gl-text-3-inv)}
.ftr .links{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2) calc(var(--u)*3)}
.ftr .stack>*+*{margin-top:16px}
.ftr .logo{height:18px;width:auto;display:block}
.ftr .meta{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2) calc(var(--u)*3);margin-top:calc(var(--u)*4);color:var(--gl-text-3-inv)}
.s--ink :focus-visible,.ftr :focus-visible{outline-color:var(--gl-paper)}
.ftr a{min-height:44px;display:inline-flex;align-items:center}
.ftr .links a{padding:0}

/* ---------- Palvelut: program chapters — wide / centred-quiet / mirrored; boundaries vary ---------- */
.spread{padding-block:calc(var(--u)*12);border-top:1px solid var(--gl-line)}
.spread--primary{border-top:0;padding-top:calc(var(--u)*6)}
.spread--2{border-top:0;padding-top:calc(var(--u)*24);padding-bottom:calc(var(--u)*8)}
.spread--3{border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*14)}
@media (max-width:899px){.spread{padding-block:calc(var(--u)*8)}.spread--2{padding-top:calc(var(--u)*12)}.spread--3{padding-top:calc(var(--u)*6)}.spread .g>*{grid-row:auto!important}.spread .g>*+*{margin-top:calc(var(--u)*3)}}
/* core vs context: two registers, one principle */
.run{margin-top:calc(var(--u)*3);max-width:44rem;text-wrap:pretty}
.run--core{font-weight:600;font-size:var(--fs-lede);line-height:1.45;color:var(--gl-ink)}
.run--ctx{font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gl-text-2)}
.core .stmt{text-wrap:balance}

/* ---------- Uudistus: movement passages ---------- */
.move{padding-block:calc(var(--u)*10);border-top:1px solid var(--gl-line)}
.move .h2{grid-column:1/4}.move .txt{grid-column:4/11}
.move .txt p+p{margin-top:calc(var(--u)*3)}
.move--last{border-bottom:1px solid var(--gl-line)}
@media (max-width:899px){.move .h2,.move .txt{grid-column:1/-1}.move .txt{margin-top:calc(var(--u)*2)}}
.qa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:calc(var(--u)*3) 0;border-top:1px solid var(--gl-line)}
.qa dt{grid-column:1/5;font-weight:600}.qa dd{grid-column:5/11;margin:0;color:var(--gl-text-2)}
.qa--last{border-bottom:1px solid var(--gl-line)}
@media (max-width:899px){.qa dt,.qa dd{grid-column:1/-1}.qa dd{margin-top:calc(var(--u)*1)}}

/* ---------- Näin: passages stepping across the datum; on the phone the headings step and the space compresses ---------- */
.time{padding-block:calc(var(--u)*6)}
.time .blk{grid-column:var(--col)/span 7}
.time .blk .body{margin-top:calc(var(--u)*2);max-width:34rem}
@media (max-width:899px){
  .time{padding-block:0}
  .time .blk{grid-column:1/-1}
  .time .blk .h2{margin-left:calc((var(--col) - 1) * 24px)}
  .time:nth-child(1){padding-top:0}.time:nth-child(2){padding-top:80px}.time:nth-child(3){padding-top:64px}.time:nth-child(4){padding-top:48px}.time:nth-child(5){padding-top:40px}
}

/* ---------- Studio: principles as a typographic index ---------- */
.principles{display:grid;grid-template-columns:1fr;row-gap:calc(var(--u)*5)}
.principles>div{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);align-items:baseline;padding-top:calc(var(--u)*3);border-top:1px solid var(--gl-line)}
.principles>div:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.principles>div:nth-child(even) .h2{grid-column:2;grid-row:1}.principles>div:nth-child(even) .body{grid-column:1;grid-row:1}
@media (max-width:899px){.principles>div,.principles>div:nth-child(even){grid-template-columns:1fr}.principles>div:nth-child(even) .h2{grid-column:1;grid-row:1;text-align:right}.principles>div:nth-child(even) .body{grid-column:1;grid-row:2;margin-left:calc(var(--u)*4)}.principles .body{margin-top:calc(var(--u)*1)}}
/* Studio: examinable structure (S1) */
.examine{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}
.forms{width:100%;height:auto;display:block}
.forms line,.forms path,.forms rect{stroke-width:1;vector-effect:non-scaling-stroke}
.forms .lyr{transition:opacity var(--t-normal) var(--ease-in)}
.layers{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:calc(var(--u)*2)}
.layers button{font:inherit;font-weight:500;font-size:var(--fs-label);letter-spacing:.10em;text-transform:uppercase;background:none;border:0;padding:12px 0;min-height:44px;color:var(--gl-text-3);border-bottom:1px solid transparent;cursor:pointer}
.layers button[aria-pressed="true"]{color:var(--gl-ink);border-bottom-color:var(--gl-ink)}
.dims{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2) calc(var(--u)*5);padding-top:calc(var(--u)*3);margin-top:calc(var(--u)*3);border-top:1px solid var(--gl-line)}
.dims div{position:relative;padding-left:14px}
.dims div::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--gl-text-3);transform:rotate(45deg)}
.dims dt{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--gl-text-3);font-weight:500}
.dims dd{font-variant-numeric:tabular-nums;font-weight:500}
.aspects{display:grid;row-gap:calc(var(--u)*5)}
.aspect{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);column-gap:var(--gutter);padding-top:calc(var(--u)*2);border-top:1px solid var(--gl-line)}
.aspect .body{max-width:none}
@media (max-width:899px){.examine{position:static}.forms{max-width:320px}.aspect{grid-template-columns:1fr}.aspect .body{margin-top:calc(var(--u)*1)}.s1{display:grid}.s1 .examine{order:6;margin-top:calc(var(--u)*4)}.s1 .aspects{display:contents}.s1 .aspect[data-layer]{order:1}.s1 .aspect:not([data-layer]){order:7}.s1 .examine,.s1 .aspect{grid-column:1/-1}}
/* Studio: identity object */
.identity{display:grid;row-gap:calc(var(--u)*3);border-top:1px solid var(--gl-ink);padding-top:calc(var(--u)*3)}

/* ---------- Varaa kartoitus: facts, triptych, the booking region, the note ---------- */
.facts{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1) calc(var(--u)*3);margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*2);border-top:1px solid var(--gl-line);font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;color:var(--gl-text-3);text-transform:uppercase}
.facts li{position:relative}
.facts li+li::before{content:"·";position:absolute;left:calc(var(--u)*-2);color:var(--gl-line)}
.trip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.trip>div{border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*2)}
.trip .body{margin-top:calc(var(--u)*1.5);max-width:none}
.trip .t-a{grid-column:1/4}.trip .t-b{grid-column:4/10}.trip .t-c{grid-column:10/13}
.trip .t-b .h3{font-size:var(--fs-h2);font-weight:600;line-height:1.1}
@media (max-width:899px){.trip{grid-template-columns:1fr;row-gap:calc(var(--u)*4)}.trip .t-a,.trip .t-b,.trip .t-c{grid-column:1/-1}}
.booking{background:var(--gl-surface)}
.form{display:grid;row-gap:calc(var(--u)*3)}
.field label{display:block;font-weight:500;font-size:var(--fs-ui);margin-bottom:6px}
.field label .opt{font-weight:400;color:var(--gl-text-3)}
.field input,.field textarea{width:100%;font:inherit;font-size:var(--fs-body);line-height:1.4;padding:12px 14px;min-height:48px;background:var(--gl-paper);border:1px solid var(--gl-text-3);color:var(--gl-ink);border-radius:0;appearance:none}
.field textarea{resize:none}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gl-ink);outline-offset:0;border-color:var(--gl-ink)}
.field[data-invalid="1"] input,.field[data-invalid="1"] textarea{border-color:var(--gl-ink);border-width:2px}
.field .cap{margin-top:6px}
.field .err{margin-top:6px;font-size:var(--fs-cap);color:var(--gl-ink);font-weight:500}
.field .err:empty{display:none}
.form .cta{margin-top:calc(var(--u)*2)}
.form .exp{max-width:26rem;line-height:1.4}
.form .summary{border-left:2px solid var(--gl-ink);padding:6px 0 6px 14px;font-size:var(--fs-cap)}
.form .summary:empty{display:none}
.form .summary ul{margin-top:4px}
.form[data-state="sending"] .btn{opacity:.6;pointer-events:none}
.stage[hidden]{display:none}
.calslot{margin-top:16px;min-height:320px;border:1px solid var(--gl-line);display:grid;place-items:center;background:var(--gl-paper);padding:calc(var(--u)*3)}
.calslot .fallback{max-width:30rem;text-align:left}
.calslot .fallback .btn{margin-top:calc(var(--u)*2)}
.note{border-left:1px solid var(--gl-ink);padding-left:calc(var(--u)*3)}

/* ---------- privacy, 404 ---------- */
.legal h2{margin-top:calc(var(--u)*5)}.legal h2:first-child{margin-top:0}.legal p{margin-top:calc(var(--u)*1);max-width:40rem}
.legal .todo{color:var(--gl-text-3);border-left:1px solid var(--gl-line);padding-left:calc(var(--u)*2)}
.links404{display:flex;gap:calc(var(--u)*3);flex-wrap:wrap}

/* ---------- attention choreography (JS-driven, scroll-linked); everything here is the resting composition without JS ---------- */
.h2,.stmt,.label{transition:none}
html.js [data-lead]{will-change:font-variation-settings}
html.js .page-home .stmt[data-wrap="wrap"],html.js .page-home .h2[data-wrap="wrap"]{text-wrap:wrap}






/* ---------- reduced motion, JS off, still-capture: resolved compositions ---------- */
html.instant *{transition:none!important;animation:none!important}
html.rm-forced .hero .h1,html.rm-forced .hero .h1 .w,html.rm-forced .hero .h1 .dot{font-variation-settings:"wght" 700,"opsz" 32;letter-spacing:-.02em;color:var(--gl-ink);transform:none}
html.rm-forced .hero .sub{transform:none}
html.rm-forced .journey .jf::after{opacity:0}
html.rm-forced .journey .jf img{transform:none}
html.rm-forced .light{display:none}
html.rm-forced .steps .step{transform:none;opacity:1}
html.rm-forced .slab-edge::before,html.rm-forced .slab-edge::after{opacity:1}
html.rm-forced .path-arrive{display:none}
@media print{.hdr,.ftr .links,.light,.menu-btn{display:none}body{background:#fff}}

/* ================= Refinement Pass 002 — information design, motion primitives, depth ================= */
/* leads whose weight is choreographed wrap normally (no balance re-flow under a changing weight); frozen leads keep balance */
html.js [data-lead][data-wrap="wrap"]{text-wrap:wrap}
/* oversized numeric markers */
.num{font-weight:500;font-size:var(--fs-label);letter-spacing:.08em;color:var(--gl-text-3);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glyph{width:32px;height:32px;display:block;color:var(--gl-ink)}

/* ---------- Näin: the process as a diagram — rail (desktop) · nodes · stages ---------- */
.process{padding-top:calc(var(--u)*4)}
.rail{position:sticky;top:calc(var(--hdr) + 40px);align-self:start}
.nodes{position:relative;display:grid;row-gap:calc(var(--u)*5);padding-left:2px}
.nodes::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:1px;background:var(--gl-line)}
.nodes::after{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:1px;background:var(--gl-ink);transform:scaleY(var(--fill,0));transform-origin:0 0}
.node{position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:14px;align-items:center;--on:0}
.node .glyph{position:relative;z-index:1;background:var(--gl-paper);box-shadow:0 0 0 4px var(--gl-paper);color:var(--gl-text-3);transform:scale(calc(.92 + .16 * var(--on)));transform-origin:50% 50%}
.node .num{grid-column:2;color:var(--gl-text-3)}
.node .verb{grid-column:2;font-weight:600;font-size:var(--fs-ui);line-height:1.2;color:rgb(calc(103 - 86 * var(--on)),calc(99 - 82 * var(--on)),calc(92 - 75 * var(--on)))}
.node[data-on="1"] .glyph{color:var(--gl-ink)}
.stages{display:grid;row-gap:calc(var(--u)*14);margin:0;padding:0}
.stage{display:grid;grid-template-columns:1fr;position:relative}
.stage .snode{display:none}
.stage .gist{font-size:var(--fs-lede);line-height:1.45;margin-top:calc(var(--u)*3);max-width:34rem;font-weight:500}
.stage .body{margin-top:calc(var(--u)*3);max-width:34rem}
@media (max-width:899px){
  .rail{display:none}
  .stages{row-gap:calc(var(--u)*7)}
  .stage{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
  .stage .snode{display:grid;row-gap:8px;justify-items:center;align-content:start;position:relative;--on:0;--seg:0}
  .stage .snode::before{content:"";position:absolute;left:50%;top:40px;bottom:calc(var(--u)*-7);width:1px;background:var(--gl-line)}
  .stage .snode::after{content:"";position:absolute;left:50%;top:40px;bottom:calc(var(--u)*-7);width:1px;background:var(--gl-ink);transform:scaleY(var(--seg));transform-origin:0 0}
  .stage:last-child .snode::before,.stage:last-child .snode::after{display:none}
  .stage .snode .glyph{background:var(--gl-paper);box-shadow:0 0 0 4px var(--gl-paper);position:relative;z-index:1;color:rgb(calc(103 - 86 * var(--on)),calc(99 - 82 * var(--on)),calc(92 - 75 * var(--on)));transform:scale(calc(.8 + .3 * var(--on)))}
  .stage .snode .num{color:var(--gl-text-3);background:var(--gl-paper);box-shadow:0 0 0 3px var(--gl-paper);position:relative;z-index:1;line-height:1}
  .stage .gist{max-width:none}
}

/* ---------- Studio: the system — six stages assembling, one line, three different outcomes ---------- */
.sys{--asm:0;--out:0}
.sys-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gutter);margin:0;padding:0;perspective:1400px;perspective-origin:50% 50%}
.blk{--i:0;display:grid;row-gap:8px;align-content:start;padding-top:calc(var(--u)*2);border-top:1px solid var(--gl-line);position:relative;transform-style:preserve-3d;will-change:transform}
html.js .blk{border-top-color:transparent}
html.js .blk::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gl-ink);transform:scaleX(var(--d,1));transform-origin:0 0}
.blk .name{font-weight:600;font-size:var(--fs-ui);line-height:1.25}
.sys-join{position:relative;height:calc(var(--u)*10);margin:0}
.sys-join i{position:absolute;background:var(--gl-line);transform-origin:0 0}
.sys-join .l1{left:50%;top:0;width:1px;height:50%;transform:scaleY(var(--out,0))}
.sys-join .l2{left:16.7%;right:16.7%;top:50%;height:1px;transform:scaleX(var(--out,0));transform-origin:50% 0}
.sys-join .l3{display:none}
.sys-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);margin:0;padding:0;perspective:1400px;perspective-origin:50% 0}
.out{--o:0;list-style:none;position:relative;transform-style:preserve-3d;will-change:transform}
.out::before{content:"";position:absolute;left:50%;top:calc(var(--u)*-5);height:calc(var(--u)*5);width:1px;background:var(--gl-line);transform:scaleY(var(--out,0));transform-origin:0 0}
.sys-cap{margin-top:calc(var(--u)*3);text-align:center}
@media (max-width:899px){
  .sys-stages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--u)*3)}
  .sys-join{height:calc(var(--u)*6)}.sys-join .l2{left:16.7%;right:16.7%}
  .sys-out{column-gap:12px}
  .sys-cap{text-align:left}
}
html.rm-forced .blk,html.rm-forced .out{transform:none!important;opacity:1!important}
html.rm-forced .nodes{--fill:1}html.rm-forced .node,html.rm-forced .stage .snode{--on:1;--seg:1}html.rm-forced .moves{--d:1}html.rm-forced .sys{--asm:1;--out:1}html.rm-forced .out,html.rm-forced .blk{--rv:1;--d:1}
html.rm-forced .sys-join i,html.rm-forced .out::before{transform:none}

/* ---------- Uudistus: numbered movements with a connecting rule ---------- */
.moves{position:relative}
.moves::before{content:"";position:absolute;left:var(--margin);top:0;bottom:0;width:1px;background:var(--gl-line)}
.moves::after{content:"";position:absolute;left:var(--margin);top:0;bottom:0;width:1px;background:var(--gl-ink);transform:scaleY(var(--d,0));transform-origin:0 0}
.move{border-top:0;padding-left:calc(var(--u)*4)}
.move .mh{grid-column:1/4;display:grid;row-gap:calc(var(--u)*1)}
.move .h2{grid-column:auto}
.move--last{border-bottom:0}
@media (max-width:899px){.move .mh{grid-column:1/-1}}
.list--num{counter-reset:none}
.list--num li{display:grid;grid-template-columns:40px 1fr;column-gap:8px}
.list--num .num{padding-top:5px}

/* ---------- Palvelut: the starting-point index ---------- */

/* ---------- phone choreography: rows and leads enter through depth (transform only; typography never reflows) ---------- */
@media (max-width:899px){
  html.js .rv{transform:translateY(calc((1 - var(--rv,1)) * 12px));opacity:calc(.35 + .65 * var(--rv,1));will-change:transform,opacity}
  html.js [data-lead]{transform:translateY(calc((1 - var(--ap,1)) * 8px))}
}
html.rm-forced .rv,html.rm-forced [data-lead]{transform:none!important;opacity:1!important}

/* ---------- Refinement Pass 003 ---------- */
.glyph .c{opacity:.6}
.node .glyph .f,.stage .snode .glyph .f{opacity:calc(.35 + .65 * var(--on))}
/* home diagnostic: symptoms hang off one spine that runs down to the cause */
.diagw{position:relative;padding-left:32px;--fill:0}
.diagw::before{content:"";position:absolute;left:0;top:0;height:var(--sh,100%);width:1px;background:var(--gl-line)}
.diagw::after{content:"";position:absolute;left:0;top:0;height:var(--sh,100%);width:1px;background:var(--gl-ink);transform:scaleY(var(--fill));transform-origin:0 0}
.diag li{position:relative}
.diag .sig{position:absolute;left:-32px;top:-1px;width:32px;height:1px;background:var(--gl-line)}
html.js .diag .sig{background:var(--gl-ink);transform:scaleX(var(--d,1));transform-origin:100% 50%}
.cause{position:relative;--pt:0}
.cause .pt{position:absolute;left:-36px;top:.55em;width:9px;height:9px;background:var(--gl-ink);transform:scale(var(--pt))}
html:not(.js) .cause .pt,html.rm-forced .cause .pt{transform:none}
html.rm-forced .diagw{--fill:1}html.rm-forced .diag .sig{transform:none}
@media (max-width:899px){.diagw{padding-left:24px}.diag .sig{left:-24px;width:24px}.cause .pt{left:-28px}}
/* booking journey: one line, three states */
.jny{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);position:relative;--d:0}
.jny::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--gl-line)}
.jny::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--gl-ink);transform:scaleX(var(--d));transform-origin:0 50%}
.jst{position:relative;padding-top:calc(var(--u)*4);--on:0}
.jn{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;height:11px;background:var(--gl-paper);padding-right:10px;z-index:1}
.jn::before{content:"";width:11px;height:11px;box-sizing:border-box;border:1px solid var(--gl-ink);background:rgb(calc(244 - 227 * var(--on)),calc(243 - 226 * var(--on)),calc(239 - 222 * var(--on)))}
.jn .num{font-size:var(--fs-label);letter-spacing:.08em;color:var(--gl-text-3);font-variant-numeric:tabular-nums;line-height:1}
.jst .h3{font-size:clamp(1.375rem,1rem + 1.2vw,2rem);line-height:1.1;letter-spacing:-.01em}
.jst .gist{font-size:var(--fs-lede);line-height:1.4;font-weight:500;margin-top:calc(var(--u)*2);max-width:22rem}
.jst .body{margin-top:calc(var(--u)*1.5);max-width:22rem}
html.rm-forced .jny{--d:1}html.rm-forced .jst{--on:1}
@media (max-width:899px){
  .jny{grid-template-columns:1fr;row-gap:calc(var(--u)*5);padding-left:48px}
  .jny::before,.jny::after{left:15px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .jny::after{transform:scaleY(var(--d));transform-origin:0 0}
  .jst{padding-top:0}
  .jn{left:-48px;top:.35em;width:32px;height:auto;display:grid;justify-items:center;row-gap:6px}
  .jn::before{box-shadow:0 0 0 4px var(--gl-paper)}
  .jn .num{background:var(--gl-paper);padding:2px 0}
  .jst .gist,.jst .body{max-width:none}
}
/* studio contact: a quiet, useful block */
.contact{display:grid;row-gap:calc(var(--u)*1);border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*2)}
.contact .cname{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.contact .body{max-width:none}
.contact .crow{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:var(--gutter);align-items:baseline;padding:calc(var(--u)*1.25) 0 0;border-top:1px solid var(--gl-line);margin-top:calc(var(--u)*1)}
.contact .crow a{overflow-wrap:anywhere}
@media (max-width:599px){.contact .crow{grid-template-columns:1fr;row-gap:4px}}  /* Correction Pass 1: the final address stacks under its label on phones (as the Yritysesittelyt block already does) */
.contact .crow+.crow{margin-top:0}
.contact .ck{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--gl-text-3)}

/* ---------- Image system (Founder Asset Production Gate, 2026-09-25): Palvelut selector · A1 · Studio hero · B4 · kartoitus composition ---------- */
.sel-s{padding-top:0;padding-bottom:calc(var(--u)*4)}
.sel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.sel a{display:block;color:inherit;text-decoration:none;position:relative;outline:none}
.sel .fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1a1917;margin:0}
.sel .fig img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sel .fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 36%,rgba(17,17,17,.42) 66%,rgba(17,17,17,.84) 100%);pointer-events:none}
.sel .ov{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*2.25) calc(var(--u)*2.5);z-index:1;color:#F6F4EF}
.sel .ov .num{display:block;color:rgba(246,244,239,.82);font-size:var(--fs-label);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.sel .ov .name{display:block;margin:calc(var(--u)*.75) 0 0;font-size:clamp(1.25rem,1rem + .9vw,1.625rem);font-weight:600;letter-spacing:-.01em;line-height:1.15;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.sel .below{display:block;padding-top:calc(var(--u)*2);border-top:1px solid var(--gl-line);margin-top:calc(var(--u)*2);position:relative}
.sel .below::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gl-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sel .sit{margin:0;color:var(--gl-ink);font-size:var(--fs-lede);line-height:1.35;font-weight:500;text-wrap:balance}
.sel .what{margin:calc(var(--u)*1.25) 0 0;color:var(--gl-text-2);font-size:var(--fs-body);line-height:1.45;max-width:26rem}
.sel .go{display:inline-block;margin-top:calc(var(--u)*2);color:var(--gl-ink);font-size:var(--fs-ui);font-weight:500;white-space:nowrap}
.sel .go::after{content:"→";display:inline-block;margin-left:.4em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.sel a:hover .fig img{transform:scale(1.035)}.sel a:hover .below::after{transform:scaleX(1)}.sel a:hover .go::after{transform:translateX(4px)}}
.sel a:focus-visible .below::after{transform:scaleX(1)}.sel a:focus-visible .fig{outline:2px solid var(--gl-ink);outline-offset:3px}
.sel a:active .fig img{opacity:.92}
@media (max-width:899px){.sel{grid-template-columns:1fr;row-gap:calc(var(--u)*5)}.sel .fig{aspect-ratio:3/2}.sel .ov{padding:calc(var(--u)*2)}.sel .below{padding-top:calc(var(--u)*1.5);margin-top:calc(var(--u)*1.5)}}
@media (prefers-reduced-motion:reduce){.sel .fig img,.sel .below::after,.sel .go::after{transition:none}}
/* A1 — Kaksi tilaa: the rule is the transformation (dashed now → solid ink after) */
.tsys{--split:calc((100% - 2*var(--gutter))*11/24 + var(--gutter))}
.thead{display:grid;grid-template-columns:5fr 1fr 6fr;column-gap:var(--gutter);padding-bottom:calc(var(--u)*1.75);position:relative}
.thead::before{content:"";position:absolute;left:0;bottom:0;width:var(--split);height:1px;background:repeating-linear-gradient(90deg,var(--gl-dusk) 0 4px,transparent 4px 8px)}
.thead::after{content:"";position:absolute;left:var(--split);right:0;bottom:0;height:1px;background:var(--gl-ink)}
.trows{list-style:none;margin:0;padding:0}
.trow{display:grid;grid-template-columns:5fr 1fr 6fr;column-gap:var(--gutter);padding:calc(var(--u)*3.5) 0 calc(var(--u)*4);position:relative;--d:0;--on:0}
.trow:first-child{padding-top:calc(var(--u)*4)}
.trow+.trow::before{content:"";position:absolute;left:0;top:0;width:var(--split);height:1px;background:repeating-linear-gradient(90deg,var(--gl-dusk) 0 4px,transparent 4px 8px)}
.trow+.trow::after{content:"";position:absolute;left:var(--split);right:0;top:0;height:1px;background:var(--gl-ink);transform:scaleX(var(--d));transform-origin:0 50%}
.trow .tl{grid-column:1}.trow .tr{grid-column:3;position:relative;padding-top:calc(var(--u)*1.75)}
.tcat{margin:0 0 calc(var(--u)*1.25)}
.tnow{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gl-text-2);max-width:26rem}
.tafter{margin:0;font-size:clamp(1.25rem,1rem + .8vw,1.5rem);line-height:1.2;letter-spacing:-.01em;font-weight:600;color:var(--gl-ink);opacity:calc(.28 + .72*var(--on));transform:translateX(calc(-8px*(1 - var(--on))));max-width:22ch;text-wrap:balance}
.tafter-b{margin:calc(var(--u)*1.25) 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gl-text-2);opacity:calc(.4 + .6*var(--on));max-width:30rem}
.tnow{position:relative;padding-left:22px}.tnow::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;box-sizing:border-box;border:1px solid var(--gl-text-3)}
.tafter{position:relative;padding-left:22px}.tafter::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;background:var(--gl-ink)}
.trow .tr::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--gl-ink);transform:scaleX(var(--d));transform-origin:0 50%;display:none}
.trows::after{content:"";display:block;height:1px;background:var(--gl-line)}
@media (max-width:899px){.thead{display:none}.trow{grid-template-columns:1fr;row-gap:calc(var(--u)*2);padding:calc(var(--u)*3) 0}.trow .tl,.trow .tr{grid-column:1}.trow+.trow::before{width:100%}.trow+.trow::after{display:none}.trow .tr{padding-top:calc(var(--u)*2.5)}.trow .tr::before{display:block}.tnow,.tafter,.tafter-b{max-width:none}.tafter{transform:translateY(calc(6px*(1 - var(--on))))}}
html.rm-forced .trow{--d:1;--on:1}
/* Studio — the photograph carries the belief statement (real text over the image; local veil on the dark field, the landscape released) */
.shero{position:relative;height:min(88vh,900px);min-height:560px;background:#1a1917;overflow:hidden;color:#F6F4EF}
.shero picture,.shero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 62%)}
.shero .veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 48% 64% at 22% 66%,rgba(17,17,17,.64) 0%,rgba(17,17,17,.40) 55%,rgba(17,17,17,0) 100%),linear-gradient(90deg,rgba(17,17,17,.68) 0%,rgba(17,17,17,.54) 38%,rgba(17,17,17,.18) 60%,rgba(17,17,17,0) 78%),linear-gradient(180deg,rgba(17,17,17,.10) 0%,rgba(17,17,17,0) 30%,rgba(17,17,17,.40) 100%)}
.shero .txt{position:absolute;left:0;right:0;bottom:0}
.shero .txt .wrap{padding-bottom:calc(var(--u)*8)}
.shero .label{color:rgba(246,244,239,.78)}
.shero .stmt{color:#F6F4EF;font-size:clamp(2rem,1rem + 3.2vw,4.25rem);line-height:1.02;letter-spacing:-.015em;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.28);margin-top:calc(var(--u)*2)}
.shero .lede{color:rgba(246,244,239,.86);margin-top:calc(var(--u)*3);max-width:36rem}
@media (max-width:899px){.shero{height:min(86vh,760px);min-height:520px;--fp:var(--fpm,40% 50%)}.shero .veil{background:linear-gradient(180deg,rgba(17,17,17,.12) 0%,rgba(17,17,17,0) 28%,rgba(17,17,17,.42) 52%,rgba(17,17,17,.78) 100%)}.shero .stmt{font-size:clamp(1.75rem,1rem + 6vw,2.5rem);max-width:none}.shero .lede{margin-top:calc(var(--u)*2);font-size:var(--fs-body)}.shero .txt .wrap{padding-bottom:calc(var(--u)*5)}}
/* B4 — Miksi Geometrics Lab: the rail of arguments */
.args-r{list-style:none;margin:0;padding:0 0 0 calc(var(--u)*7);position:relative;--fill:0}
.args-r::before{content:"";position:absolute;left:5px;top:.6em;bottom:calc(var(--u)*6);width:1px;background:var(--gl-line)}
.args-r::after{content:"";position:absolute;left:5px;top:.6em;bottom:calc(var(--u)*6);width:1px;background:var(--gl-ink);transform:scaleY(var(--fill));transform-origin:0 0}
.ar{position:relative;padding:0 0 calc(var(--u)*11);--on:0}
.ar:last-child{padding-bottom:0}
.ar .node{position:absolute;left:calc(var(--u)*-7);top:.35em;width:11px;height:11px;box-sizing:border-box;border:1px solid var(--gl-ink);background:rgb(calc(246 - 229*var(--on)),calc(244 - 227*var(--on)),calc(239 - 222*var(--on)));box-shadow:0 0 0 4px var(--gl-paper);z-index:1}
.ar .num{display:block;line-height:1.2}
.ar .st{margin:calc(var(--u)*1.5) 0 0;font-size:clamp(1.5rem,1rem + 1.8vw,2.5rem);line-height:1.08;letter-spacing:-.015em;font-weight:600;color:rgb(calc(79 - 62*var(--on)),calc(76 - 59*var(--on)),calc(70 - 53*var(--on)));max-width:22ch;text-wrap:balance}
.ar.first .st{font-size:clamp(1.875rem,1rem + 2.5vw,3.25rem);line-height:1.04;font-weight:700;letter-spacing:-.015em;max-width:20ch}
.ar .body{margin-top:calc(var(--u)*2.5);max-width:36rem;color:var(--gl-text-2);opacity:calc(.6 + .4*var(--on))}
.ar .mini{list-style:none;margin:calc(var(--u)*3.5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:36rem;position:relative}
.ar .mini::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--gl-line)}
.ar .mini::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--gl-ink);transform:scaleX(var(--on));transform-origin:0 50%}
.ar .mini li{position:relative;padding-top:calc(var(--u)*2.5);font-size:var(--fs-cap);color:var(--gl-text-3)}
.ar .mini li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;box-sizing:border-box;border:1px solid var(--gl-ink);background:var(--gl-paper)}
.ar .mini li.see::before{background:var(--gl-ink)}
.ar .mini li.see{color:var(--gl-ink);font-weight:600}
@media (max-width:899px){.args-r{padding-left:calc(var(--u)*4)}.args-r::before,.args-r::after{left:5px}.ar{padding-bottom:calc(var(--u)*8)}.ar .node{left:calc(var(--u)*-4)}.ar .st,.ar.first .st{max-width:none}.ar .mini{grid-template-columns:repeat(2,1fr);row-gap:calc(var(--u)*2)}}
html.rm-forced .args-r{--fill:1}html.rm-forced .ar{--on:1}
/* kartoitus — the rendered proposal in a browser frame, subordinate to the copy */
.see-s .bf{position:relative;aspect-ratio:3/2;border:1px solid var(--gl-line);overflow:hidden;background:#F6F4EF;margin:0}
.see-s .bf .bar{position:absolute;left:0;right:0;top:0;height:22px;border-bottom:1px solid var(--gl-line);background:rgba(246,244,239,.92);z-index:1}
.see-s .bf .bar::after{content:"";position:absolute;left:10px;top:8px;width:36px;height:6px;border-radius:3px;background:var(--gl-line)}
.see-s .bf img{position:absolute;left:0;top:22px;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:0 0;display:block}
.see-s .cap{max-width:34rem}
@media (max-width:899px){.see-s .c7-12{margin-top:calc(var(--u)*5)}}

/* ---------- Founder QA Pass 004 (2026-09-27): sequences, loop, checklists, gists, shapes, contact ---------- */
.pairs--num{counter-reset:pn}.pairs--num div{counter-increment:pn;position:relative;padding-left:40px}
.pairs--num div::after{content:counter(pn,decimal-leading-zero);position:absolute;left:0;top:calc(var(--u)*2 + .15em);font-size:var(--fs-label);letter-spacing:.08em;color:var(--gl-text-3);font-variant-numeric:tabular-nums}
.go-line a{font-weight:500}.go-line a::after{content:"→";display:inline-block;margin-left:.4em}
.seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);position:relative}
.seq li{position:relative;padding-top:calc(var(--u)*2.5);border-top:1px solid var(--gl-line)}
html.js .seq li{border-top-color:transparent}html.js .seq li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gl-ink);transform:scaleX(var(--d,1));transform-origin:0 0}
.seq .num{display:block;font-size:var(--fs-label);letter-spacing:.08em;color:var(--gl-text-3);font-variant-numeric:tabular-nums;line-height:1.2}
.seq .name{display:block;margin-top:calc(var(--u)*1.25);font-weight:600;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
.seq .line{display:block;margin-top:calc(var(--u)*1.25);color:var(--gl-text-2);font-size:var(--fs-body);line-height:1.45;max-width:20rem}
.seq li:not(:last-of-type)::after{content:"";position:absolute;right:calc(var(--gutter)*-.5 - 4px);top:calc(var(--u)*2.5 + .5em);width:9px;height:9px;border-top:1px solid var(--gl-text-3);border-right:1px solid var(--gl-text-3);transform:rotate(45deg)}
.loop{padding-bottom:calc(var(--u)*4)}
.loop::after{content:"";position:absolute;left:8.33%;right:8.33%;bottom:0;height:calc(var(--u)*3);border:1px solid var(--gl-text-3);border-top:0}
.loop .ret{position:absolute;left:calc(8.33% - 4px);bottom:calc(var(--u)*3 - 5px);width:9px;height:9px;border-left:1px solid var(--gl-text-3);border-top:1px solid var(--gl-text-3);transform:rotate(45deg)}
.grid-list{list-style:none;margin:calc(var(--u)*3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gutter)}
.grid-list li{padding:calc(var(--u)*1.5) 0;border-top:1px solid var(--gl-line);font-size:var(--fs-body);line-height:1.4}
.grid-list--core li{font-weight:600}.grid-list--ctx li{color:var(--gl-text-2)}
.move .gist{font-size:var(--fs-lede);line-height:1.45;font-weight:500;max-width:34rem;margin-bottom:calc(var(--u)*3)}
.contact .cname:empty{display:none}
.lead2{margin-top:calc(var(--u)*2);max-width:36rem}
.form .after{max-width:32rem;margin-top:calc(var(--u)*-1)}
@media (min-width:900px){.jny{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:899px){
  .seq{grid-template-columns:1fr;row-gap:calc(var(--u)*3)}
  .seq li:not(:last-of-type)::after{right:auto;left:0;top:auto;bottom:calc(var(--u)*-2.25);transform:rotate(135deg)}
  .loop{padding-bottom:0;padding-left:calc(var(--u)*3)}.loop::after{left:0;right:auto;top:0;bottom:0;width:calc(var(--u)*1.5);height:auto;border:1px solid var(--gl-text-3);border-right:0}
  .loop .ret{left:calc(var(--u)*1.5 - 4px);bottom:auto;top:-4px;transform:rotate(135deg)}
  .grid-list{grid-template-columns:1fr}
  .sel .sit{font-size:1.125rem}
}

/* ---------- QA Completion Pass (2026-09-28): service visuals inside the service sections ---------- */
.svcfig{margin:0;position:relative}
.svcfig img{display:block;width:100%;height:auto;background:#1a1917}
.svcfig .cap{margin:calc(var(--u)*1.5) 0 0;max-width:36rem}
.svcfig-s{padding-top:0;padding-bottom:calc(var(--u)*4)}
.spread .svcfig{align-self:start;margin-top:calc(var(--u)*2)}
@media (max-width:899px){.spread .svcfig{grid-row:auto!important;margin-top:calc(var(--u)*1)}.svcfig-s{padding-bottom:calc(var(--u)*2)}}

/* ---------- Master refinement (2026-09-28): the additional offering, placeholder-free contact ---------- */
.extra{padding-top:calc(var(--u)*6);padding-bottom:calc(var(--u)*6)}
.extra .body{max-width:36rem}
.extra-note{margin-top:calc(var(--u)*2);max-width:36rem}

/* ---- Final Correction Pass (2026-09-28): three miniature website designs replace the abstract site shapes (founder decision B).
   Type and spacing scale with the frame width (container units) on desktop; on phone each miniature reflows to its own phone layout
   so it stays readable instead of shrinking a desktop screenshot. ---- */
.msite{container-type:inline-size;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--gl-line);background:#FBFAF7;color:#17181A;font-family:var(--font,Inter,"Helvetica Neue",Arial,sans-serif);line-height:1.25;display:flex;flex-direction:column;opacity:calc(.35 + .65 * var(--rv,1))}
.msite p{margin:0;max-width:none}
.msite .m-bar{display:flex;align-items:center;gap:3cqw;padding:2.8cqw 4.5cqw;font-size:2.5cqw;font-weight:500;flex:none}
.msite .m-wm{font-weight:600;font-size:2.9cqw;letter-spacing:.01em;white-space:nowrap}
.msite .m-nav{display:flex;gap:3cqw;margin-left:auto;white-space:nowrap;opacity:.72}
.msite .m-menu{display:none}
.msite .m-btn{display:inline-block;padding:1.5cqw 2.6cqw;border-radius:1px;font-size:2.4cqw;font-weight:500;white-space:nowrap}
.msite .m-hero{padding:0 4.5cqw;flex:none}
.msite .m-h{font-weight:600;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.msite .m-sub{opacity:.72}
.msite .m-eye{font-size:2.1cqw;letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.62}
.msite .m-row{display:flex;gap:4cqw;padding:0 4.5cqw;margin-top:auto;font-size:2.3cqw;font-weight:500;flex:none}
.msite .m-row span{flex:1;border-top:1px solid currentColor;padding-top:1.6cqw;opacity:.85}
.msite .m-cta{margin-top:3cqw}
/* 01 — one main goal, direct path: dark hero band, dominant proposition, one call to action */
.msite-1{background:#F4F1EA}
.msite-1 .m-bar{color:#17181A;border-bottom:1px solid #E1DDD3}.msite-1 .m-bar .m-btn{background:#17181A;color:#F4F1EA}
.msite-1 .m-hero{display:grid;grid-template-columns:7fr 5fr;column-gap:4cqw;align-items:end;padding:5.2cqw 4.5cqw 4.6cqw;background:#1F2A33;color:#F4F1EA}
.msite-1 .m-h{font-size:6.2cqw;max-width:11ch}
.msite-1 .m-sub{font-size:2.6cqw;margin-top:2.4cqw;max-width:30ch;opacity:.78}
.msite-1 .m-cta .m-btn{background:#D66A2B;color:#FFF;font-size:2.5cqw;padding:1.9cqw 3.2cqw}
.msite-1 .m-img{align-self:stretch;min-height:26cqw;background:linear-gradient(160deg,#3B4A56 0%,#2A3540 55%,#54636F 100%)}
.msite-1 .m-row{padding-bottom:4.2cqw;color:#17181A}
/* 02 — several services: light surface, service architecture as tiles, path row */
.msite-2{background:#FFFFFF}
.msite-2 .m-bar{color:#17181A;border-bottom:1px solid #E6E6E3}.msite-2 .m-nav{opacity:.85}.msite-2 .m-bar .m-btn{background:#1D4ED8;color:#FFF}
.msite-2 .m-hero{padding:5cqw 4.5cqw 3.6cqw}
.msite-2 .m-h{font-size:5cqw;max-width:20ch}
.msite-2 .m-sub{font-size:2.6cqw;margin-top:1.8cqw;opacity:.68}
.msite-2 .m-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:0 4.5cqw;flex:none}
.msite-2 .m-tile{background:#F3F4F6;padding:2.6cqw 2.6cqw 3cqw;display:grid;gap:1cqw;position:relative;min-height:15cqw}
.msite-2 .m-tile b{font-size:2.7cqw;font-weight:600}.msite-2 .m-tile span{font-size:2.2cqw;opacity:.66}
.msite-2 .m-tile::after{content:"→";position:absolute;right:2.4cqw;bottom:2cqw;font-size:2.6cqw;color:#1D4ED8}
.msite-2 .m-row{padding-bottom:4cqw;color:#17181A}.msite-2 .m-row span{border-top-color:#C9CCD3}
/* 03 — expert / B2B: editorial paper, eyebrow, three hairline columns, contact after context */
.msite-3{background:#F1EFE9;color:#1B1A17}
.msite-3 .m-bar{border-bottom:1px solid #1B1A17;padding-bottom:2.4cqw}.msite-3 .m-wm{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:3.1cqw;letter-spacing:0}
.msite-3 .m-bar .m-btn{display:none}
.msite-3 .m-hero{padding:5cqw 4.5cqw 4cqw}
.msite-3 .m-h{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em;font-size:5.4cqw;margin-top:2cqw;max-width:20ch}
.msite-3 .m-sub{font-size:2.5cqw;margin-top:2.2cqw;max-width:44ch;opacity:.7}
.msite-3 .m-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5cqw;padding:0 4.5cqw;flex:none}
.msite-3 .m-col{border-top:1px solid #1B1A17;padding-top:1.8cqw;display:grid;gap:1cqw}
.msite-3 .m-col b{font-size:2.5cqw;font-weight:600}.msite-3 .m-col span{font-size:2.2cqw;opacity:.68;line-height:1.3}
.msite-3 .m-end{margin-top:auto;padding:0 4.5cqw 4.2cqw;font-size:2.6cqw;font-weight:500;flex:none}
.msite-3 .m-link{border-bottom:1px solid #1B1A17;padding-bottom:.4cqw}.msite-3 .m-link::after{content:" →"}
.out .mcap{margin-top:calc(var(--u)*2);display:flex;gap:10px;align-items:baseline;font-size:var(--fs-ui)}
.out .mcap .num{font-weight:500;font-size:var(--fs-label);letter-spacing:.10em;color:var(--gl-text-3)}
.out .mline{margin-top:6px;max-width:30ch}
.sys-cap .t3{color:var(--gl-text-3)}
@media (max-width:899px){
  .sys-out{grid-template-columns:1fr;row-gap:calc(var(--u)*5)}
  .out::before{display:none}
  .msite{aspect-ratio:auto;height:auto;max-width:400px}
  .msite .m-bar{padding:12px 14px;font-size:12px;gap:12px}.msite .m-wm{font-size:14px}.msite .m-nav{display:none}
  .msite .m-menu{display:block;margin-left:auto;width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
  .msite .m-menu::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .75px);border-top:1.5px solid currentColor}
  .msite .m-btn{font-size:11px;padding:7px 10px}.msite .m-bar .m-btn{margin-left:0}
  .msite .m-hero{padding:0 14px}.msite .m-eye{font-size:10px}
  .msite .m-row{flex-direction:column;gap:0;padding:16px 14px 18px;font-size:12px}.msite .m-row span{padding:9px 0}.msite .m-row span:first-child{border-top:0;padding-top:0}
  .msite-1 .m-hero{grid-template-columns:1fr;padding:22px 14px 20px;row-gap:14px}.msite-1 .m-h{font-size:24px;max-width:none}.msite-1 .m-sub{font-size:12px;margin-top:8px}
  .msite-1 .m-cta{margin-top:12px}.msite-1 .m-cta .m-btn{font-size:12px;padding:8px 12px}.msite-1 .m-img{min-height:90px}
  .msite-2 .m-hero{padding:20px 14px 14px}.msite-2 .m-h{font-size:21px}.msite-2 .m-sub{font-size:12px;margin-top:6px}
  .msite-2 .m-tiles{grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}.msite-2 .m-tile{padding:10px 10px 12px;min-height:0;gap:3px}.msite-2 .m-tile b{font-size:12px}.msite-2 .m-tile span{font-size:10.5px}.msite-2 .m-tile::after{font-size:12px;right:10px;bottom:8px}
  .msite-2 .m-row{padding-top:14px}
  .msite-3 .m-bar{padding-bottom:10px}.msite-3 .m-wm{font-size:15px}.msite-3 .m-hero{padding:18px 14px 14px}.msite-3 .m-h{font-size:22px;margin-top:6px}.msite-3 .m-sub{font-size:12px;margin-top:8px}
  .msite-3 .m-cols{grid-template-columns:1fr;gap:0;padding:0 14px}.msite-3 .m-col{padding:9px 0;gap:2px}.msite-3 .m-col b{font-size:12px}.msite-3 .m-col span{font-size:11px}
  .msite-3 .m-end{padding:16px 14px 18px;font-size:12px}
  .out .mline{max-width:36ch}
}
@media (max-width:899px){html.rm-forced .msite{opacity:1}}

/* ---- Remaining Content & Contact Correction Pass (2026-09-29): "Tarvittaessa myös" cards, the Yritysesittelyt page and its
   fictional presentation deck, organisation-first contact rows, footer phone. ---- */
.grid-list--cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gutter)}
.grid-list--cards li{display:grid;row-gap:6px;align-content:start;padding:calc(var(--u)*1.5) 0 calc(var(--u)*2.5)}
.grid-list--cards li b{font-weight:600;color:var(--gl-ink);line-height:1.3}
.grid-list--cards li span{font-size:var(--fs-ui);line-height:1.45;color:var(--gl-text-2)}
.grid-list--use{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:calc(var(--u)*2)}
.page-presentations .cap.t3{color:var(--gl-text-3);margin-top:calc(var(--u)*1.5)}
.ftr .fcontact{display:flex;flex-wrap:wrap;gap:0 calc(var(--u)*3)}
.contact--ask{margin-top:calc(var(--u)*3);max-width:36rem}
.contact--ask .crow{grid-template-columns:7rem 1fr}
.contact--ask .body{margin-top:calc(var(--u)*1.5)}
/* deck — see the identity version below (Final Content & Showcase Correction Pass) */
.sl-cap{margin-top:calc(var(--u)*1.5);display:flex;gap:10px;align-items:baseline;color:var(--gl-text-2)}
.sl-cap .num{font-weight:500;font-size:var(--fs-label);letter-spacing:.10em;color:var(--gl-text-3)}
.deck-cap{margin-top:calc(var(--u)*4);color:var(--gl-text-3)}
html.js .sl{opacity:calc(.35 + .65 * var(--rv,1));transform:translateY(calc((1 - var(--rv,1)) * 12px))}
html.rm-forced .sl{opacity:1;transform:none}
@media (min-width:900px) and (max-width:1199px){.grid-list--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .grid-list--cards{grid-template-columns:1fr}.grid-list--use{grid-template-columns:1fr}
  .deck{grid-template-columns:1fr;row-gap:calc(var(--u)*4);max-width:420px}
  .contact--ask .crow{grid-template-columns:1fr;row-gap:4px}
}

/* ---- Final Content & Showcase Correction Pass (2026-09-29): Palvelut teaser with the showcase, deck in the fictional
   company's own identity (deep green · copper · paper; serif display), miniature nav fit. ---- */
.c4-8{grid-column:4/9}
.extra--visual .svcfig--teaser{margin:0}
.extra--visual .svcfig--teaser figcaption{margin-top:calc(var(--u)*1.5)}
.extra--visual .stack .h2{margin-top:0}
.showcase-s{padding-top:0}
.showcase-s .svcfig--wide figcaption{max-width:40rem}
.msite .m-nav{min-width:0}
.msite-2 .m-nav{gap:2.6cqw;font-size:2.3cqw}
/* deck identity */
.deck{list-style:none;margin:calc(var(--u)*5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*4) var(--gutter)}
.deck-s .deck-cap{max-width:34rem}
.sl{margin:0;container-type:inline-size;--pink:#17332C;--pcopper:#B4693A;--ppaper:#F3EEE4;--psand:#E7DFCF;--pmute:#6C6A62;--pserif:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.slide{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ppaper);color:var(--pink);box-shadow:0 1px 2px rgba(23,51,44,.08),0 10px 28px rgba(23,51,44,.10);display:flex;flex-direction:column;padding:5.4cqw 6cqw 4.8cqw;font-family:Inter,"Helvetica Neue",Arial,sans-serif;line-height:1.3}
.slide p{margin:0;max-width:none}
.slide .sl-eye{font-size:max(1.7cqw,8px);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--pcopper)}
.slide .sl-h{font-family:var(--pserif);font-weight:400;font-size:max(4.6cqw,14px);letter-spacing:-.01em;line-height:1.1;margin-top:1.6cqw;max-width:24ch;text-wrap:balance}
.slide .sl-sub{font-size:max(2.1cqw,9px);margin-top:1.8cqw;color:var(--pmute);max-width:36ch;line-height:1.45}
.slide .sl-ft{position:absolute;left:6cqw;right:6cqw;bottom:3.2cqw;display:flex;justify-content:space-between;font-size:max(1.6cqw,7px);letter-spacing:.08em;color:var(--pmute)}
.slide .sl-ft span:first-child{font-weight:600}
.slide ul,.slide ol{list-style:none;margin:0;padding:0}
/* 01 cover: paper + deep green panel with rings and a copper disc */
.sl--cover .slide{padding-right:44%}
.sl--cover .sl-art{position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--pink)}
.sl--cover .sl-art::before{content:"";position:absolute;right:-12cqw;bottom:-12cqw;width:46cqw;height:46cqw;border-radius:50%;background:radial-gradient(circle,transparent 58%,rgba(243,238,228,.16) 58.6%,rgba(243,238,228,.16) 60%,transparent 60.6%,transparent 70%,rgba(243,238,228,.16) 70.6%,rgba(243,238,228,.16) 72%,transparent 72.6%,transparent 82%,rgba(243,238,228,.16) 82.6%,rgba(243,238,228,.16) 84%,transparent 84.6%)}
.sl--cover .sl-art::after{content:"";position:absolute;right:15cqw;top:9cqw;width:11cqw;height:11cqw;border-radius:50%;background:var(--pcopper)}
.sl--cover .slide .sl-h--cover{font-size:max(6cqw,18px);margin-top:auto;max-width:14ch}
.sl--cover .slide .sl-sub{margin-top:1.6cqw;margin-bottom:6cqw;max-width:30ch}
.sl--cover .slide .sl-ft{right:44cqw}
/* 02 company: deep green, faint numeral, three copper-ruled rows */
.sl--company .slide{background:var(--pink);color:var(--ppaper)}
.sl--company .slide::before{content:"01";position:absolute;right:5cqw;top:0;font-family:var(--pserif);font-size:27cqw;line-height:1;color:rgba(243,238,228,.07)}
.sl--company .slide .sl-eye{color:#D7A279}.sl--company .slide .sl-sub{color:rgba(243,238,228,.7)}
.sl--company .slide .sl-rows{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3cqw;font-size:max(2cqw,8px);font-weight:600}
.sl--company .slide .sl-rows li{border-top:1px solid rgba(243,238,228,.35);padding-top:1.6cqw;margin-bottom:5cqw}
.sl--company .slide .sl-ft{color:rgba(243,238,228,.55)}
/* 03 services: paper, 2×2 with copper glyphs */
.sl--services .slide .sl-grid{margin-top:3.4cqw;margin-bottom:5cqw;display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw 4.5cqw}
.sl--services .slide .sl-grid li{border-top:1px solid var(--pink);padding:1.6cqw 0 0 6.2cqw;position:relative;display:grid;gap:.5cqw}
.sl--services .slide .sl-grid b{font-size:max(2.1cqw,9px);font-weight:600;line-height:1.25}.sl--services .slide .sl-grid span{font-size:max(1.8cqw,8px);color:var(--pmute);line-height:1.35}
.sl--services .slide .ic{position:absolute;left:0;top:1.9cqw;width:4cqw;height:4cqw;display:block}
.sl--services .slide .ic-1{border:1px solid var(--pcopper);border-radius:50%}.sl--services .slide .ic-1::after{content:"";position:absolute;left:35%;top:35%;width:30%;height:30%;background:var(--pcopper);border-radius:50%}
.sl--services .slide .ic-2{border-top:1px solid var(--pcopper);border-bottom:1px solid var(--pcopper)}.sl--services .slide .ic-2::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--pcopper)}
.sl--services .slide .ic-3{border:1px solid var(--pcopper)}.sl--services .slide .ic-3::after{content:"";position:absolute;inset:22%;background:var(--pcopper)}
.sl--services .slide .ic-4{background:radial-gradient(circle,var(--pcopper) 22%,transparent 26%) 0 0/33.3% 33.3%}
/* 04 process: sand, copper timeline with serif numerals */
.sl--process .slide{background:var(--psand)}
.sl--process .slide .sl-steps{margin-top:auto;margin-bottom:5.5cqw;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3.5cqw}
.sl--process .slide .sl-steps::before{content:"";position:absolute;left:0;right:0;top:1cqw;height:1px;background:var(--pcopper)}
.sl--process .slide .sl-steps li{position:relative;padding-top:3.6cqw;display:grid;gap:.5cqw}
.sl--process .slide .sl-steps li::before{content:"";position:absolute;left:0;top:0;width:2cqw;height:2cqw;border-radius:50%;background:var(--psand);border:1px solid var(--pcopper)}
.sl--process .slide .sl-steps li:first-child::before{background:var(--pcopper)}
.sl--process .slide .sl-steps i{font-style:normal;font-family:var(--pserif);font-size:max(4.4cqw,13px);line-height:1;color:var(--pcopper)}
.sl--process .slide .sl-steps b{font-size:max(2.1cqw,9px);font-weight:600;margin-top:.8cqw}.sl--process .slide .sl-steps span{font-size:max(1.8cqw,8px);color:var(--pmute);line-height:1.35}
/* 05 contact: deep green with copper rule, single column */
.sl--contact .slide{background:var(--pink);color:var(--ppaper)}
.sl--contact .slide .sl-eye{color:#D7A279}
.sl--contact .slide .sl-h{max-width:18ch}
.sl--contact .slide .sl-rows--contact{margin-top:auto;margin-bottom:5cqw;border-top:1px solid var(--pcopper);padding-top:2cqw;font-size:max(2cqw,8px)}
.sl--contact .slide .sl-rows--contact li{padding:.6cqw 0}.sl--contact .slide .sl-rows--contact li:first-child{font-weight:600}
.sl--contact .slide .sl-rows--contact li:nth-child(2){color:#D7A279}.sl--contact .slide .sl-rows--contact li:last-child{color:rgba(243,238,228,.7)}
.sl--contact .slide .sl-ft{color:rgba(243,238,228,.55)}
@media (max-width:899px){
  .extra--visual .svcfig--teaser{margin-bottom:calc(var(--u)*3)}
  .deck{grid-template-columns:1fr;row-gap:calc(var(--u)*4);max-width:420px}
}

/* ---- Final refinement pass (2026-09-30): photography in the fictional presentation deck (cover full-bleed, services column, process band) ---- */
.slide .sl-photo{position:absolute;inset:0;overflow:hidden;z-index:0}
.slide .sl-photo picture,.slide .sl-photo img{display:block;width:100%;height:100%;object-fit:cover}
.slide>*:not(.sl-photo):not(.sl-art){position:relative;z-index:1}
.slide .sl-art{z-index:1}
.sl--cover .slide .sl-photo{left:auto;width:50%;right:0}
.sl--cover .slide .sl-photo img{object-position:62% 50%}
.sl--cover .slide .sl-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ppaper) 0%,rgba(243,238,228,.7) 12%,rgba(243,238,228,0) 40%),linear-gradient(180deg,rgba(23,51,44,.05),rgba(23,51,44,.35))}
.sl--cover .sl-art{width:34%;background:transparent}
.sl--cover .sl-art::before{display:none}
.sl--cover .sl-art::after{right:5.4cqw;top:5.4cqw;width:6cqw;height:6cqw;box-shadow:0 .8cqw 2.4cqw rgba(23,51,44,.25)}
.sl--cover .slide::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1cqw;background:var(--pcopper);z-index:2}
.sl--services .slide .sl-photo--col{left:auto;width:36%;right:0;border-left:1px solid var(--pink)}
.sl--services .slide .sl-photo--col img{object-position:30% 50%}
.sl--services .slide .sl-photo--col::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,51,44,0) 55%,rgba(23,51,44,.45))}
.sl--services .slide .sl-h{max-width:58%}
.sl--services .slide .sl-grid{width:58%}
.sl--process .slide .sl-photo--band{bottom:auto;height:21cqw}
.sl--process .slide .sl-photo--band img{object-position:50% 40%}
.sl--process .slide .sl-photo--band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,51,44,.15),rgba(23,51,44,.45))}
.sl--process .slide .sl-eye{margin-top:18.5cqw}
.sl--process .slide .sl-h{font-size:max(3.8cqw,13px);margin-top:1cqw}
.sl--process .slide .sl-steps{margin-top:2.8cqw;margin-bottom:5cqw}
.sl--process .slide .sl-steps li{padding-top:2.8cqw}
.sl--process .slide .sl-steps i{font-size:max(3.6cqw,12px)}
.sl--cover .slide .sl-h--cover{max-width:12ch;font-size:max(5.4cqw,17px)}.sl--cover .slide .sl-sub{max-width:24ch}

/* ---------- Mobile Premium Visual — Correction Pass 1 (2026-10-03). Phone-only art direction; desktop untouched; motion untouched. ---------- */
@media (max-width:899px){
  /* 1 · Hero as one composition: statement at the measure's maximum, one deliberate gap, the lede; the next section's label meets the bottom of the first viewport */
  :root{--fs-h1:clamp(3.25rem,1rem + 11.5vw,5rem)}
  .hero{min-height:0;grid-template-rows:auto auto auto;padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*10)}
  .hero .h1{letter-spacing:-.03em;line-height:.94}
  .h1--en{font-size:clamp(2.75rem,1rem + 8.5vw,4.5rem);line-height:.96}
  .hero .sub{margin-top:calc(var(--u)*9)}
  .hero .sub .lede{max-width:20rem}
  /* 2 · Three starting situations: no staircase indentation; each proposition opens with its numeral, closes with its link */
  .steps{row-gap:calc(var(--u)*8)}
  .step-2,.step-3{margin-left:0}
  .step .snum{display:block;color:var(--gl-ink);margin-bottom:calc(var(--u)*1.5)}
  .step .name{font-size:1.375rem}
  .step .go a::after{content:"\00a0→"}
  /* 3 · Comparison key once at the top: □ Nyt · ■ Uudistuksen jälkeen */
  .thead{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1) calc(var(--u)*3);padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--gl-line)}
  .thead::before,.thead::after{display:none}
  .thead span:empty{display:none}
  .thead span:first-child::before,.thead span:last-child::before{content:"";display:inline-block;width:9px;height:9px;box-sizing:border-box;margin-right:8px;vertical-align:0}
  .thead span:first-child::before{border:1px solid var(--gl-text-3)}
  .thead span:last-child::before{background:var(--gl-ink)}
  /* 4a · Studio journey: one horizontal four-node line, as on desktop */
  .ar .mini{grid-template-columns:1.15fr 1.2fr 1fr .75fr;column-gap:10px;row-gap:0}
  .ar .mini li{font-size:.75rem;line-height:1.25;letter-spacing:-.01em;padding-right:2px}
  /* 4b · Six principles: one reading line */
  .principles>div:nth-child(even) .h2{text-align:left}
  .principles>div:nth-child(even) .body{margin-left:0}
  /* 6 · Varaa kartoitus meta row: two by two */
  .facts{display:grid;grid-template-columns:repeat(2,max-content);column-gap:calc(var(--u)*3);row-gap:calc(var(--u)*1)}
  .facts li:nth-child(odd)::before{display:none}
}
/* ---------- Service architecture (2026-10-04): two product groups — Verkkosivustot (01–03) and Yritysesittelyt — in the site's label + rule language ---------- */
.group-label{margin-bottom:calc(var(--u)*3)}
.pres{margin-top:calc(var(--u)*10);padding-top:calc(var(--u)*5);border-top:1px solid var(--gl-line)}
.pres .stack .h2{text-wrap:balance;max-width:20ch}
.pres .stack .body{margin-top:calc(var(--u)*2.5);max-width:36rem}
.pres .stack .more{margin-top:calc(var(--u)*3)}
@media (max-width:899px){
  .pres{margin-top:calc(var(--u)*10);padding-top:calc(var(--u)*5)}
  .pres .label{margin-bottom:calc(var(--u)*1.5)}
  .extra{padding-top:calc(var(--u)*8)}
  .extra .wrap{border-top:1px solid var(--gl-line);padding-top:calc(var(--u)*5)}
}
@media (max-width:379px){html[lang="en"] .hdr .brand{flex:0 0 auto;max-width:none}html[lang="en"] .hdr .lock{display:none}html[lang="en"] .hdr .mark{display:block;height:22px;width:auto}}

/* Consent layer — 2026-10-05 (two layers; replaces the 2026-10-04 block). Fixed bar at the bottom, outside <main>: no motion rule touches it.
   Layer 1: eyebrow · headline · one short paragraph · details control · two identical actions. Layer 2: details grid + privacy link. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--gl-paper);color:var(--gl-ink);border-top:1px solid var(--gl-ink);padding-block:calc(var(--u)*3)}
.consent[hidden]{display:none}
.consent .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m a" "d d";column-gap:calc(var(--u)*6);row-gap:0;align-items:end}
.consent .cmain{grid-area:m;max-width:60ch}
.consent .label{margin:0 0 calc(var(--u)*1)}
.consent .ch{margin:0;font-weight:600;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.consent .ctext{margin:calc(var(--u)*1) 0 0;font-size:var(--fs-ui);line-height:1.5;color:var(--gl-text-2)}
.consent .cmore{display:inline-block;margin-top:calc(var(--u)*1.5);background:none;border:0;padding:0;font:inherit;font-size:var(--fs-ui);line-height:1.5;color:var(--gl-ink);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.consent .cmore:hover{text-decoration-thickness:2px}
.consent .cmore:focus-visible{outline:1px solid var(--gl-ink);outline-offset:3px}
.consent .cmore .cmore-off,.consent.is-open .cmore .cmore-on{display:none}
.consent.is-open .cmore .cmore-off{display:inline}
.consent .cact{grid-area:a;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-self:end}
.consent .btn{font-size:.875rem;padding:12px 16px;white-space:nowrap}
.consent .cdetails{grid-area:d;margin-top:calc(var(--u)*3);padding-top:calc(var(--u)*3);border-top:1px solid var(--gl-line);max-height:min(44vh,380px);overflow:auto}
.consent .cdetails[hidden]{display:none}
.consent .cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*2.5) calc(var(--u)*4);margin:calc(var(--u)*1.5) 0 0}
.consent .cgrid dt{font-weight:600;font-size:var(--fs-ui);line-height:1.4;margin:0}
.consent .cgrid dd{margin:4px 0 0;font-size:var(--fs-cap);line-height:1.5;color:var(--gl-text-2)}
.consent .cpriv{margin:calc(var(--u)*2.5) 0 0;font-size:var(--fs-ui)}
.consent .cpriv a{color:inherit}
@media (max-width:1023px){.consent .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.consent{padding-block:calc(var(--u)*2.5)}.consent .wrap{grid-template-columns:1fr;grid-template-areas:"m" "d" "a";row-gap:calc(var(--u)*2)}.consent .ch{font-size:1.125rem}.consent .cmain{max-width:none}.consent .cact{justify-content:stretch}.consent .cact .btn{flex:1 1 calc(50% - 6px);text-align:center}.consent .cdetails{margin-top:0;padding-top:calc(var(--u)*2);max-height:min(38vh,320px)}.consent .cgrid{grid-template-columns:1fr;gap:calc(var(--u)*1.5)}}
@media (max-width:379px){.consent .cact .btn{flex-basis:100%}}
/* 2026-10-27 mobile consent banner, lighter: short first-layer text, no eyebrow, tighter spacing; both choices stay full, equal, ≥44px */
.consent .cshort{display:none}
@media (max-width:699px){.consent{padding-block:calc(var(--u)*1.75)}.consent .wrap{row-gap:calc(var(--u)*1.5)}.consent .cmain>.label{display:none}.consent .ch{font-size:1rem;line-height:1.3}.consent .ctext{margin-top:calc(var(--u)*.5);line-height:1.45}.consent .cfull{display:none}.consent .cshort{display:inline}.consent .cmore{margin-top:calc(var(--u)*.75)}.consent .cact{gap:8px}.consent .cact .btn{min-height:44px;padding:11px 12px}}
/* Booking form production transport — 2026-10-04 (06 - Build/42): honeypot off-screen, disabled submit while sending */
.form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form .btn[disabled]{opacity:.6;cursor:default}

/* Oppaat (2026-10-26): five desktop nav items — tighter gaps on narrow desktops so the header never overflows */
@media (min-width:900px) and (max-width:1139px){.nav{gap:20px}.hdr .wrap{gap:18px}}
@media (max-width:379px){.consent .cact .btn{flex:1 1 calc(50% - 4px);padding:11px 6px;font-size:.8125rem}}