/* ═══════════════════════════════════════════════════════════════════════
   NORDEVO — Ota yhteyttä (rebuilt 2026-09-08). Sanat vasemmalla, linjat
   oikealla: mastheadissa väite vasemmalla ja johdanto roikkuu oikealla
   alhaalla; rekisterissä kasvot ja nimi vasemmalla, suora numero
   numeroasteikolla oikeassa marginaalissa; lomakkeissa teksti vasemmalla
   ja kirjoitusviivat oikealla. Sivun ainoa viivoitettu rekisteri on
   linjasto, kaikki muu erottuu ilmalla. Liike: otsikot nousevat
   rivimaskeistaan, rekisterin rivit seuraavat vieritystä omilla
   kelloillaan (ota-yhteytta.js), kuvat kehittyvät duotonesta väriin.
   Ladataan nordevo.css- ja alasivu.css-tiedostojen jälkeen, vain tällä
   sivulla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── avaus: masthead, claim left, the intro hanging right and low ── */
.avausO { padding:19vh 12vw 0; }
.avausO .kick { margin-top:4vh; }
.omast { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:2vh 6vw; align-items:end; }
.avausO h1 { margin-top:2.5vh; font-family:var(--disp); font-size:clamp(34px,4.5vw,68px);
  font-weight:500; letter-spacing:-.028em; line-height:1.08; }
.avausO .intro { justify-self:end; font-size:clamp(15px,1.3vw,17.5px); line-height:1.75;
  color:var(--faded); max-width:42ch; padding-bottom:.6vh; }

/* the claims (h1 here, h2 on tontti) rise through hand-authored line
   masks, the same grammar as konserni's .kotsa; the period stamps sun
   once the line has landed (dotpop lives in nordevo.css) */
.js .anmi.rv { opacity:1; transform:none; }
.anmi .rj { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.anmi .rji { display:block; }
.js .anmi .rji { transform:translateY(114%); }
.js .anmi.on .rji { transform:none; transition:transform 1s cubic-bezier(.22,1,.36,1); }
.js .anmi.on .rj:nth-child(2) .rji { transition-delay:.09s; }
.anmi .liitos { white-space:nowrap; }
.anmi .p { color:var(--sun); }
.js .anmi .p { display:inline-block; transform:scale(0); transform-box:border-box;
  transform-origin:60% 60%; }
.js .anmi.on .p { animation:dotpop .5s cubic-bezier(.3,1.6,.4,1) .95s forwards; }
.static .anmi .rji { transform:none; transition:none; }
.static .anmi .p { transform:none; animation:none; }

/* ── linjasto: our numbers and emails ───────────────────────────────────
   The page's one ruled register. Each row: a print developing from
   duotone, name and area, and the direct line on the numeral scale at
   the right margin. The outer .linja is what the script moves; the inner
   .lrivi carries the rules and the entry fade so the two clocks never
   fight over one transform.                                             */
.linjasto { padding:11vh 12vw 6vh; }
.linjat { margin-top:4vh; }
.linja { will-change:transform; }
.lrivi { position:relative; display:grid;
  grid-template-columns:clamp(72px,6.4vw,104px) minmax(0,1fr) auto;
  gap:1.2vh 3.2vw; align-items:center; padding:3.8vh 0; }
.lrivi::before, .linja:last-child .lrivi::after { content:""; position:absolute; left:0; right:0;
  height:1px; background:linear-gradient(90deg,
    rgba(194,90,23,.85), rgba(34,28,18,.30) 26%, rgba(34,28,18,.13) 100%); }
.lrivi::before { top:0; }
.linja:last-child .lrivi::after { bottom:0; }
.js .lrivi::before, .js .linja:last-child .lrivi::after { transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.js .lrivi.on::before, .js .linja:last-child .lrivi.on::after { transform:none; }
.js .linja:last-child .lrivi.on::after { transition-delay:.3s; }

.lkasvo { display:block; width:100%; aspect-ratio:3/4; overflow:hidden; }
.lkasvo img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:sepia(.45) saturate(.6) contrast(.95) brightness(1.02);
  transition:filter 2.2s ease .2s, transform 1.4s cubic-bezier(.22,1,.36,1); }
.lrivi.on .lkasvo img { filter:none; }
.no-js .lkasvo img { filter:none; }
.linja:hover .lkasvo img { transform:scale(1.04); }
.lkasvo--talo { display:grid; place-items:center; color:var(--ink); }
.lkasvo--talo svg { display:block; width:58%; height:auto; }

.lkuka { display:block; font-family:var(--disp); font-size:clamp(20px,2vw,29px);
  font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.lmika { display:block; margin-top:8px; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.lyht { justify-self:end; text-align:right; }
/* the direct line: numeral scale, tabular, the sun rule drawing under it
   when the row is lit by the cursor or the keyboard */
.lnro { display:inline-block; font-family:var(--disp); font-weight:400;
  font-size:clamp(24px,2.5vw,42px); letter-spacing:-.035em; line-height:1.05;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink);
  text-decoration:none; padding-bottom:.1em;
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 100%/0 2px;
  transition:background-size .55s cubic-bezier(.22,1,.36,1); }
.linja:hover .lnro, .lnro:focus-visible { background-size:100% 2px; }
.lnro:focus-visible { outline:none; }
.lposti { display:block; width:fit-content; margin:8px 0 0 auto; font-family:var(--sans);
  font-size:13px; line-height:1.6; color:var(--faded); text-decoration:none;
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 100%/0 1px;
  transition:color .4s ease, background-size .5s cubic-bezier(.22,1,.36,1); }
.lposti:hover, .lposti:focus-visible { color:var(--ink); background-size:100% 1px; outline:none; }

/* ── tontti: the landowner's door ─────────────────────────────────────
   One composed page: the head across the measure, then the words on the
   left (intro, three steps in air, the tip) and the form on the right,
   its first line level with the intro. Straight to Markku.             */
.tontisto { padding:15vh 12vw 6vh; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"paa paa" "sis ovi";
  column-gap:6vw; align-items:start; }
.tpaa { grid-area:paa; }
.tsis { grid-area:sis; }
.tovi { grid-area:ovi; margin-top:4vh; }
.tontisto .repla { margin-top:2.6vh; font-family:"Newsreader", Georgia, serif;
  font-style:italic; font-weight:300; font-size:clamp(20px,2vw,28px); color:var(--muted); }
.tontisto h2 { margin-top:.6vh; font-family:var(--disp); font-size:clamp(34px,4.5vw,68px);
  font-weight:500; letter-spacing:-.028em; line-height:1.08; }
.tsis .intro { margin-top:4vh; font-size:clamp(15.5px,1.35vw,18px); line-height:1.75;
  color:var(--faded); max-width:48ch; }
.askeleet { margin-top:5vh; max-width:50ch; }
.askel { display:grid; grid-template-columns:64px 1fr; gap:0 2vw;
  padding:2vh 0; align-items:baseline; }
.askel .no { font-family:var(--disp); font-size:clamp(23px,2.1vw,32px); font-weight:400;
  letter-spacing:-.03em; color:var(--sun); }
.askel p { font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.7; color:var(--faded); }
.askel b { color:var(--ink); font-weight:500; }
.tontisto .tvinkki { margin-top:3vh; font-size:15px; color:var(--muted); }
.tovi .kentta:first-child { padding-top:0; }
.tontisto .fine { margin-top:4.5vh; max-width:46ch; line-height:1.7; }
.lomakesto .fine a, .tontisto .fine a { color:var(--faded); text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--sun); }
.lomakesto .fine a:hover, .tontisto .fine a:hover { color:var(--ink); }

/* ── lomake: the visitor's own three writing lines ── */
.lomakesto { padding:13vh 12vw 6vh; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:6vw; align-items:start; }
.lomakesto .fine { margin-top:3.5vh; max-width:40ch; line-height:1.7; }
.lovi .kentta:first-child { padding-top:0; }

/* ── writing lines, shared by both forms ──────────────────────────────
   A small caps label, then a line on the paper: no box. Focus draws the
   sun rule along the line from the left and lights the label.          */
.kentta { display:grid; grid-template-columns:clamp(100px,9vw,150px) minmax(0,1fr);
  gap:0 2.5vw; align-items:baseline; padding:2.6vh 0; cursor:text; }
.kentta .kl { font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); transition:color .4s ease; }
.kentta:focus-within .kl { color:var(--ink); }
.kentta input { width:100%; border:0; border-radius:0;
  border-bottom:1px solid rgba(34,28,18,.22);
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 100%/0 1px;
  font-family:"Newsreader", Georgia, serif; font-optical-sizing:auto;
  font-size:clamp(16px,1.35vw,18px); line-height:1.6; color:var(--ink);
  caret-color:var(--sun); padding:.3em 0 .55em;
  transition:background-size .7s cubic-bezier(.22,1,.36,1); }
.kentta input:focus { outline:none; background-size:100% 1px; }
.kentta input::placeholder { color:#b3a88f; opacity:1; }

/* rakennusoikeus as a word list: the picked word carries the sun rule on
   its baseline, the rule slides as the pick changes; the radios stay
   real and keyboard-reachable underneath */
.kentta.rovalinta { cursor:default; }
.rolista { display:flex; flex-wrap:wrap; gap:.3em 1.25em; padding:.3em 0 .55em;
  font-family:"Newsreader", Georgia, serif; font-optical-sizing:auto;
  font-size:clamp(16px,1.35vw,18px); line-height:1.6; }
.rosana { position:relative; cursor:pointer; color:var(--muted); transition:color .4s ease; }
.rosana input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.rosana span { background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 88%/0 1px;
  transition:background-size .55s cubic-bezier(.22,1,.36,1); }
.rosana:hover { color:var(--faded); }
.rosana input:checked + span { color:var(--ink); background-size:100% 1px; }
.rosana input:focus-visible + span { outline:2px solid var(--sun); outline-offset:3px; }

/* ── lähetys ── */
.laheta { margin-top:5vh; }
.laheta button { color:var(--ink); }
.lhuom { margin-top:2.5vh; font-size:14.5px; color:var(--sun); }
.lkiitos { margin-top:2.5vh; font-size:14.5px; color:var(--faded); }

/* ── medialle: the paragraph and the press line ── */
.mediasto { padding:14vh 12vw 4vh; }
.mediasto h2 { margin-top:2.2vh; font-family:var(--disp); font-size:clamp(24px,2.6vw,42px);
  font-weight:500; letter-spacing:-.025em; line-height:1.14; }
.mwrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4vh 6vw;
  align-items:start; margin-top:3.5vh; }
.mteksti { font-size:clamp(15.5px,1.35vw,18px); line-height:1.78; color:var(--faded); max-width:52ch; }
.mhlo p { font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:2.2vh; }
.mhlo .lkuka { font-size:clamp(19px,1.9vw,27px); letter-spacing:-.015em; }
.mhlo .lmika { margin-top:7px; }
.mhlo .lyht { display:block; margin-top:1.6vh; justify-self:start; text-align:left; }
.mhlo .lyht a { display:block; font-family:var(--sans); font-size:13px;
  color:var(--faded); text-decoration:none; line-height:1.75; width:fit-content;
  background:linear-gradient(90deg,var(--sun),var(--sun)) no-repeat 0 100%/0 1px;
  transition:color .4s ease, background-size .5s cubic-bezier(.22,1,.36,1); }
.mhlo .lyht a:hover { color:var(--ink); background-size:100% 1px; }

/* ── talo: visit, invoicing, registry ── */
.talosto { padding:11vh 12vw 13vh; }
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:5vh 3vw; }
.tcell .tl { font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); }
.tcell p { margin-top:12px; font-size:15px; line-height:1.85; color:var(--faded); }

/* ── responsive: everything stacks, the register loses its right column ── */
@media (max-width:860px) {
  .avausO { padding:17vh 7vw 0; }
  .omast { grid-template-columns:1fr; gap:3vh 0; }
  .avausO .intro { justify-self:start; padding-bottom:0; }
  .linjasto { padding:8vh 7vw 4vh; }
  .lrivi { grid-template-columns:clamp(64px,17vw,84px) minmax(0,1fr); gap:1vh 6vw;
    padding:3.4vh 0; align-items:start; }
  .lkasvo { align-self:start; }
  .lyht { grid-column:2; justify-self:start; text-align:left; margin-top:.4vh; }
  .lnro { font-size:clamp(22px,6.4vw,30px); }
  .lposti { margin-left:0; }
  .tontisto { padding:11vh 7vw 4vh; grid-template-columns:1fr;
    grid-template-areas:"paa" "sis" "ovi"; }
  .tovi { margin-top:6vh; }
  .askel { grid-template-columns:48px 1fr; }
  .lomakesto { padding:9vh 7vw 4vh; grid-template-columns:1fr; row-gap:4vh; }
  .lomakesto .fine { max-width:54ch; }
  .kentta { grid-template-columns:1fr; gap:10px 0; padding:2.2vh 0; }
  .mediasto { padding:10vh 7vw 2vh; }
  .mwrap { grid-template-columns:1fr; gap:4vh 0; }
  .talosto { padding:8vh 7vw 10vh; }
  .tgrid { grid-template-columns:1fr; gap:4.5vh 0; }
}

.kentta .kl, .lmika, .tcell .tl { font-size:12px; letter-spacing:.14em; }
.lhuom { color:var(--ink); }