/* Fontit omalta palvelimelta: kävijän IP-osoite ei välity Googlelle. Lisenssit: fonts/OFL-*.txt */
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin.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:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.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}

/* Layout: cool ice-white sheet with full-bleed cobalt blocks, wide navy display type, sky-blue accent, isometric massing model that builds itself floor by floor */
:root{
  --bg:#eef3f8; --bg-2:#e1e9f2; --bg-3:#d2dde9;
  --ink:#0c1a2b; --ink-2:#4a5b6e; --ink-3:#8698ab;
  --deep:#123f8c; --deep-2:#1a4ea6; --deep-ink:#f1f6ff; --deep-muted:#a9c3ea;
  --fresh:#7dd6f5; --fresh-2:#a9e5fa; --on-fresh:#08243a; --on-fresh-2:#2d5873;
  --fresh-dim:rgba(125,214,245,.28); --deep-dim:rgba(18,63,140,.06);
  --bar-aukio:#1a4ea6; --bar-muted:#b9c8d8;
  --line:#c2d0de; --line-strong:#0c1a2b;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,5vw,72px); --max:1400px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --model-top:#fbfdff; --model-left:#d3e1f0; --model-right:#a8bfd8; --model-grid:#c4d2e0;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0a121c; --bg-2:#101b28; --bg-3:#182636; --ink:#e7eff8; --ink-2:#9fb2c6; --ink-3:#64788d;
  --line:#22344a; --line-strong:#e7eff8; --deep:#0f3478; --deep-2:#16438f;
  --fresh-dim:rgba(125,214,245,.16); --deep-dim:rgba(125,214,245,.06);
  --bar-aukio:#7dd6f5; --bar-muted:#34475e;
  --model-top:#d6e6f6; --model-left:#93afcf; --model-right:#6585a8; --model-grid:#22344a; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0a121c; --bg-2:#101b28; --bg-3:#182636; --ink:#e7eff8; --ink-2:#9fb2c6; --ink-3:#64788d;
  --line:#22344a; --line-strong:#e7eff8; --deep:#0f3478; --deep-2:#16438f;
  --fresh-dim:rgba(125,214,245,.16); --deep-dim:rgba(125,214,245,.06);
  --bar-aukio:#7dd6f5; --bar-muted:#34475e;
  --model-top:#d6e6f6; --model-left:#93afcf; --model-right:#6585a8; --model-grid:#22344a; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
canvas,svg,img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fresh);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.display{font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;text-wrap:balance}
h1,h2,h3{margin:0}
h2{font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;font-size:clamp(2rem,4.4vw,3.8rem);text-wrap:balance}
h3{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1.25rem;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lead{font-size:1.08rem;color:var(--ink-2);max-width:36rem}

/* Reveal: elements stay readable; only those below the fold at load start slightly offset */
.rv{transition:transform .9s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.rv.pre{transform:translateY(32px);opacity:.2}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:2px solid var(--line-strong)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem}
.logo i{width:14px;height:14px;background:var(--deep);display:block;box-shadow:inset 0 0 0 3px var(--fresh);transition:transform .5s var(--ease)}
.logo:hover i{transform:rotate(90deg)}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:.88rem;font-weight:500}
.nav ul a{position:relative;padding-block:4px}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--fresh);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
.nav .right{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;background:transparent;border:2px solid var(--line-strong);padding:9px 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.progress{position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--fresh);transform-origin:left;transform:scaleX(var(--sp,0))}
@media (max-width:960px){
  .nav ul{display:none}
  .menu-btn{display:inline-block}
  .nav.open ul{display:flex;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:2px solid var(--line-strong);padding:8px var(--gutter) 16px}
  .nav.open ul a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav .right .btn{display:none}
}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:2px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:600;font-size:.9rem;cursor:pointer;line-height:1;text-transform:uppercase;letter-spacing:.04em;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.65;cursor:progress}
.btn.primary{background:var(--deep);border-color:var(--deep);color:var(--deep-ink)}
.btn.primary:hover{background:var(--fresh);border-color:var(--fresh);color:var(--on-fresh)}
.btn.fresh{background:var(--fresh);border-color:var(--fresh);color:var(--on-fresh)}
.btn.fresh:hover{background:var(--fresh-2);border-color:var(--fresh-2);color:var(--on-fresh)}
.btn.small{padding:10px 16px;font-size:.78rem}

/* Hero */
.hero{padding-block:clamp(40px,6vw,72px) 0}
.hero .top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:28px}
.hero h1{font-size:clamp(3.4rem,11.5vw,11.5rem)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln>span{display:block;animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--i) * 140ms + 100ms)}
.hero h1 .ol>span{color:transparent;-webkit-text-stroke:2px var(--ink)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.fade-in{animation:fadeup .9s var(--ease) both;animation-delay:var(--fd,600ms)}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .meta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;border-top:2px solid var(--line-strong);padding-block:28px 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px;align-content:start;justify-content:flex-end}
.model{position:relative;margin-top:36px;border:2px solid var(--line-strong);background:var(--bg-2);aspect-ratio:21/9;max-width:100%;overflow:hidden}
.model canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.model .lbl{position:absolute;left:14px;top:12px;display:grid;gap:4px}
.model .lbl .mono{color:var(--ink)}
.model .lbl small{font-family:var(--mono);font-size:.68rem;color:var(--ink-2)}
.model .status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:5px 9px;width:max-content;font-variant-numeric:tabular-nums}
.model .status i{width:7px;height:7px;border-radius:50%;background:var(--fresh);box-shadow:0 0 0 0 var(--fresh);animation:pulse 1.6s infinite}
.model .status.done i{animation:none;background:var(--deep-2)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(125,214,245,.8)}100%{box-shadow:0 0 0 10px rgba(125,214,245,0)}}
.model .replay{position:absolute;left:14px;bottom:12px;background:var(--bg);border:1px solid var(--line-strong);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;cursor:pointer;transition:background .2s,color .2s}
.model .replay:hover{background:var(--ink);color:var(--bg)}
.model .scale{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:.68rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.model .scale i{width:60px;height:6px;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 0 50%,transparent 50%)}
@media (max-width:860px){.hero .meta{grid-template-columns:1fr}.hero .actions{justify-content:flex-start}.model{aspect-ratio:4/3.4}.hero .top{grid-template-columns:1fr}.model .scale{display:none}}

/* Marquee */
.marquee{border-block:2px solid var(--line-strong);overflow:hidden;background:var(--ink);color:var(--bg)}
.marquee .track{display:flex;width:max-content;animation:slide 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{padding:14px 28px;font-family:var(--display);font-stretch:118%;font-weight:700;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.marquee span::after{content:"";width:10px;height:10px;background:var(--fresh)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--line-strong)}
.stat{padding:30px 24px 30px 0;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start}
.stat+.stat{padding-left:24px}
.stat:last-child{border-right:0}
.stat strong{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat strong small{font-size:.4em;color:var(--deep-2);margin-left:4px;letter-spacing:0}
.stat>span{font-size:.88rem;color:var(--ink-2);max-width:15rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat strong small{color:var(--fresh)}}
:root[data-theme="dark"] .stat strong small{color:var(--fresh)}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat{padding:22px 14px 22px 0}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat:nth-child(3){padding-left:0}.stat:nth-child(even){padding-left:14px}}

/* Sections */
.section{padding-block:clamp(64px,9vw,120px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.head .lead{justify-self:end}
.head .mono{display:block;margin-bottom:14px}
@media (max-width:860px){.head{grid-template-columns:1fr}.head .lead{justify-self:start}}

/* Cobalt block */
.deep{background:var(--deep);color:var(--deep-ink)}
.deep .lead,.deep .mono{color:var(--deep-muted)}
.deep h2 b{color:var(--fresh)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--deep-2)}
.why article{position:relative;background:var(--deep);padding:34px 28px 38px;display:grid;gap:14px;align-content:start;transition:background .3s,transform .4s var(--ease)}
.why article::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--fresh);transition:height .4s var(--ease)}
.why article:hover{background:var(--deep-2)}
.why article:hover::before{height:6px}
.why article .mono{color:var(--fresh)}
.why p{color:var(--deep-muted);font-size:.95rem}
.why strong.big{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.why strong.big small{font-size:.4em;color:var(--fresh);margin-left:4px;letter-spacing:0}
@media (max-width:860px){.why{grid-template-columns:1fr}}

/* Comparison chart */
.compare{border:2px solid var(--line-strong);padding:clamp(20px,4vw,40px);display:grid;gap:22px;position:relative}
.cmp-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center}
.cmp-row .name{display:grid;gap:2px}
.cmp-row .name b{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1.05rem}
.cmp-row .name small{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.track-area{position:relative;height:44px;margin-right:72px}
.bar{position:absolute;left:0;top:8px;height:28px;width:calc(var(--v) / 24 * 100%);border-radius:0 4px 4px 0;transform-origin:left;transition:transform 1.4s var(--ease);cursor:default}
.bar.muted{background:var(--bar-muted)}
.bar.aukio{background:var(--bar-aukio)}
.compare.pre .bar{transform:scaleX(0)}
.bar .val{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.saving{position:absolute;top:4px;height:36px;left:calc(14 / 24 * 100%);width:calc(10 / 24 * 100%);border:1.5px dashed var(--ink-3);border-left:0;border-radius:0 4px 4px 0;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;transition:opacity .6s 1.2s}
.compare.pre .saving{opacity:0}
.saving span{font-family:var(--mono);font-size:.74rem;color:var(--ink);background:var(--bg);padding:2px 6px;white-space:nowrap}
.aukio-row .bar .val{display:none}
.axis{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}
.axis .ticks{position:relative;height:22px;border-top:1px solid var(--line);margin-right:72px}
.axis .ticks span{position:absolute;top:6px;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.axis .ticks span:first-child{transform:none}
.axis .ticks span:last-child{transform:translateX(-100%)}
.grid-lines{position:absolute;inset:0;pointer-events:none}
.cmp-note{font-size:.82rem;color:var(--ink-3)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:.8rem;padding:8px 10px;max-width:240px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:5}
.tip.on{opacity:1;transform:none}
@media (max-width:760px){.cmp-row,.axis{grid-template-columns:1fr;gap:8px}.axis>span{display:none}.saving{display:none}.aukio-row .bar .val{display:block}}

/* Cities */
.cities{border-top:2px solid var(--line-strong)}
.city{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.4fr) auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);isolation:isolate}
.city::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:var(--deep-dim);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:-1}
.city:hover::before{transform:scaleY(1)}
.city .name{font-family:var(--display);font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:.9;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .3s,transform .4s var(--ease)}
.city:hover .name{color:var(--deep);transform:translateX(10px)}
.city .info{display:grid;gap:8px;color:var(--ink-2);font-size:.95rem}
.city .info .mono{color:var(--ink)}
.city .when{font-family:var(--mono);font-size:.78rem;border:2px solid var(--line-strong);padding:8px 12px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.city:hover .when{background:var(--ink);color:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .city:hover .name{color:var(--fresh)}}
:root[data-theme="dark"] .city:hover .name{color:var(--fresh)}
@media (max-width:860px){.city{grid-template-columns:1fr;gap:12px}.city .when{justify-self:start}}

/* Apartment types */
.tabs{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--line-strong);width:max-content;max-width:100%;margin-bottom:28px}
.tab{background:transparent;border:0;border-right:2px solid var(--line-strong);padding:12px 18px;cursor:pointer;display:grid;gap:2px;text-align:left;transition:background .2s,color .2s}
.tab:last-child{border-right:0}
.tab b{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1rem}
.tab small{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.04em}
.tab:hover{background:var(--deep-dim)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.tab[aria-selected="true"] small{color:var(--fresh)}
@media (max-width:640px){.tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.tab{border-right:0;border-bottom:2px solid var(--line-strong)}.tab:nth-child(odd){border-right:2px solid var(--line-strong)}.tab:nth-last-child(-n+2){border-bottom:0}}
.apt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.apt-info{display:grid;gap:16px;align-content:start}
.apt-info .area{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(4rem,9vw,7.5rem);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.apt-info .area small{font-size:.32em;color:var(--ink-2);margin-left:6px;letter-spacing:0}
.apt-info .code{font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.apt-info p{color:var(--ink-2);max-width:30rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);padding:6px 10px}
.legend{display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;justify-content:start;font-size:.78rem;color:var(--ink-2);margin-top:6px}
.legend b{font-family:var(--mono);color:var(--ink);font-weight:500;margin-right:6px}
.plan-box{border:2px solid var(--line-strong);background:var(--bg-2);padding:12px;min-width:0}
.plan-box svg{display:block;width:100%;height:auto}
.plan .wall{fill:none;stroke:var(--ink);stroke-width:4}
.plan .room rect{fill:var(--bg);stroke:var(--ink);stroke-width:1.5;transition:fill .25s}
.plan .room.wet rect{fill:var(--bg-3)}
.plan .room:hover rect{fill:var(--fresh-dim)}
.plan .room .c{font:700 12px var(--display);fill:var(--ink)}
.plan .room .m{font:400 10px var(--mono);fill:var(--ink-2)}
.plan .bal rect{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:5 4}
.plan .bal text{font:400 10px var(--mono);fill:var(--ink-2)}
.plan .sc line{stroke:var(--ink);stroke-width:1.5}
.plan .sc text{font:400 10px var(--mono);fill:var(--ink-2)}
.plan.draw .room rect{stroke-dasharray:1;animation:drawln .9s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.plan.draw .wall{stroke-dasharray:1;animation:drawln 1.2s var(--ease) both}
.plan.draw text,.plan.draw .bal{animation:fadein .6s both;animation-delay:calc(var(--i,6) * 70ms + 300ms)}
@keyframes drawln{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.plan-note{font-size:.8rem;color:var(--ink-3);margin-top:10px}
@media (max-width:900px){.apt{grid-template-columns:1fr}.legend{grid-template-columns:repeat(2,auto)}}

/* Process */
.ptrack{height:6px;background:var(--bg-3);margin-bottom:14px;position:relative;overflow:hidden}
.ptrack i{position:absolute;inset:0;background:var(--fresh);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line-strong);border:2px solid var(--line-strong)}
.step{background:var(--bg);padding:24px 22px 28px;display:grid;gap:12px;align-content:start;transition:background .5s}
.step .m{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-3);transition:color .5s}
.step.on .m{color:var(--ink)}
.step .m small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;font-weight:400}
.step p{color:var(--ink-2);font-size:.9rem}
.step.last.on{background:var(--fresh);color:var(--on-fresh)}
.step.last.on .m{color:var(--on-fresh)}
.step.last.on p,.step.last.on .m small{color:var(--on-fresh-2)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,1fr)}.step.last{grid-column:1/-1}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}

/* Style */
.style{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.style ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--line);border:2px solid var(--line-strong)}
.style li{background:var(--bg);padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;color:var(--ink-2);font-size:.95rem;transition:background .25s,padding .3s var(--ease)}
.style li:hover{background:var(--deep-dim);padding-left:26px}
.style li b{color:var(--ink);font-weight:600}
.style li i{width:12px;height:12px;background:var(--deep);margin-top:5px;box-shadow:inset 0 0 0 3px var(--fresh);transition:transform .4s var(--ease)}
.style li:hover i{transform:rotate(90deg)}
@media (max-width:860px){.style{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:2px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:24px 0;font-family:var(--display);font-stretch:110%;font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--deep-2)}
.faq .pm{width:30px;height:30px;border:2px solid var(--line-strong);position:relative;flex:none;transition:transform .4s var(--ease),background .3s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s var(--ease),background .3s}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{background:var(--ink);transform:rotate(180deg)}
.faq details[open] .pm::before{background:var(--bg)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0);background:var(--bg)}
.faq .ans{padding:0 0 26px;color:var(--ink-2);max-width:46rem;animation:fadeup .45s var(--ease) both}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .faq summary:hover{color:var(--fresh)}}
:root[data-theme="dark"] .faq summary:hover{color:var(--fresh)}

/* Message form on cobalt */
.cta .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);padding-block:clamp(56px,8vw,104px)}
.cta .intro{display:grid;gap:18px;align-content:start}
.contact{display:grid;gap:10px;margin-top:8px}
.contact .ci{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1rem;color:var(--deep-ink)}
.contact .ci span:first-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-muted);min-width:84px}
.copy{background:transparent;border:1px solid var(--deep-muted);color:var(--deep-muted);font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;cursor:pointer;transition:background .2s,color .2s}
.copy:hover{background:var(--fresh);border-color:var(--fresh);color:var(--on-fresh)}
form{display:grid;gap:18px;align-content:start;position:relative}
.field{display:grid;gap:8px;align-content:start;min-width:0}
label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-muted)}
.field .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:1.1rem}
.tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fresh);white-space:nowrap}
.count{font-family:var(--mono);font-size:.68rem;color:var(--deep-muted);font-variant-numeric:tabular-nums}
input,textarea,select{width:100%;background:var(--deep-2);border:2px solid var(--deep-2);color:var(--deep-ink);font:inherit;padding:13px 14px;border-radius:0;transition:border-color .2s,background .2s}
input::placeholder,textarea::placeholder{color:var(--deep-muted);opacity:.8}
textarea{min-height:160px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--fresh)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--deep-muted) 50%),linear-gradient(135deg,var(--deep-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
select:invalid{color:var(--deep-muted)}
select option{background:var(--deep-2);color:var(--deep-ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.privacy a{color:var(--fresh);text-decoration:underline;text-underline-offset:3px}
.privacy{display:grid;gap:6px;font-size:.84rem;line-height:1.5;color:var(--deep-muted);border-left:2px solid var(--fresh);padding:2px 0 2px 14px}
.privacy strong{color:var(--deep-ink);font-weight:600}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.error{color:var(--fresh);font-size:.88rem}
.success{padding:28px;border:2px solid var(--fresh);display:grid;gap:10px;animation:fadeup .6s var(--ease) both}
.success h3{font-size:1.8rem;color:var(--fresh)}
.success p{color:var(--deep-muted)}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* Footer */
footer{padding-block:40px;border-top:2px solid var(--line-strong)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;font-size:.88rem;color:var(--ink-2)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer ul a:hover{color:var(--ink)}
footer .privacy-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;display:grid;gap:6px;max-width:52rem;font-size:.84rem;color:var(--ink-2);scroll-margin-top:90px}
footer .privacy-note b{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:500}
footer .demo{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;font-size:.82rem;color:var(--ink-3)}
footer .demo b{font-family:var(--mono);background:var(--deep);color:var(--fresh);padding:3px 8px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:.68rem}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}