@font-face { font-family: "Cabinet Grotesk"; src: url("../../assets/fonts/cabinet-grotesk-500.woff2?v=3") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("../../assets/fonts/cabinet-grotesk-700.woff2?v=3") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("../../assets/fonts/cabinet-grotesk-800.woff2?v=3") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../assets/fonts/ibm-plex-mono-500.woff2?v=3") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet varafontti"; src: local("Arial"); size-adjust: 96%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Plex varafontti"; src: local("Consolas"); size-adjust: 109%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }
@property --valaistus { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --virta { syntax: "<number>"; inherits: true; initial-value: 1; }
:root { --sans: "Cabinet Grotesk", "Cabinet varafontti", sans-serif; --mono: "IBM Plex Mono", "Plex varafontti", monospace; --signaali: #FF5C1F; }
body { font-weight: 500; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
.wordmark { font-weight: 700; display: inline-flex; align-items: center; }
.brand-mark { width: 34px; height: 28px; object-fit: contain; margin-right: 11px; }
.world { position: absolute; height: max(860px, 100svh); isolation: isolate; background: var(--pohja-syva); }
.motion .world { position: fixed; height: 100%; }
#poster { position: absolute; inset: 0; display: block; transform-origin: 72% 48%; }
#poster img { width: 100%; height: 100%; object-fit: fill; display: block; }
.motion #poster { filter: grayscale(1) sepia(1) saturate(2.5) hue-rotate(165deg); transform: var(--world-poster-transform, none); opacity: var(--world-poster-opacity, 1); }
.world-warm-spot { position: absolute; z-index: 2; left: 76.52%; top: calc(44svh - 27.7875vw + 32.94vw); width: 20px; height: 20px; margin: -10px 0 0 -10px; transform: var(--world-poster-transform, none); transform-origin: 72% 48%; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,80,.22) 0 8%, rgba(255,92,31,.84) 26%, rgba(213,131,35,.55) 44%, rgba(213,131,35,.15) 60%, transparent 76%); opacity: var(--world-poster-opacity, 1); pointer-events: none; }
.world-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #05070df2 0%, #05070da3 36%, transparent 68%), linear-gradient(0deg, #05070d 0%, transparent 36%); }
.world-shade::after { content: ""; position: absolute; inset: 0; background: #05070d; opacity: calc(1 - clamp(0, var(--virta) * 5, 1) * (.35 + var(--valaistus) * .65)); }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#maailma-kevyt { display: none; }
[data-engine="canvas2d"] #maailma { visibility: hidden; }
[data-engine="canvas2d"] #maailma-kevyt { display: block; }
.world-depth { position: absolute; inset: 0; background: linear-gradient(180deg, #05070d00, #0038880a 60%, #05070d66); pointer-events: none; }
#juonne { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 44svh; height: 1.5px; margin: 0; border: 0; background: linear-gradient(90deg, color-mix(in srgb, #003888, #00388870 calc(var(--virta) * 100%)), color-mix(in srgb, #003888, #00609866 calc(var(--virta) * 100%)) 60%, color-mix(in srgb, #003888, #58c8f033 calc(var(--virta) * 100%))); pointer-events: none; z-index: 0; }
.sisaantulo #lupaus, .sisaantulo .hero .eyebrow { color: color-mix(in oklab, var(--metahold) calc((1 - var(--valaistus)) * 100%), var(--lumi)); }
.sisaantulo .hero-lead, .sisaantulo .hero-register-title, .sisaantulo .hero-email { color: color-mix(in oklab, var(--metahold) calc((1 - var(--valaistus)) * 100%), #d1e2ef); }
.hero-register-title { color: #d1e2ef; }
.house-deep { --talon-valo: clamp(0%, calc(var(--virta) * 1850%), 100%); }
.house-bright { --talon-valo: clamp(0%, calc((var(--virta) - .80) * 690%), 100%); }
.sisaantulo #rekisteri dt { color: color-mix(in oklab, var(--metahold), var(--lumi) var(--talon-valo)); }
.sisaantulo #rekisteri dd { color: color-mix(in oklab, var(--metahold), #d1e2ef var(--talon-valo)); }
.hero-register { width: 610px; }
.hero-register dl > div { grid-template-columns: 200px 1fr; }
.hero-register dt { font-weight: 500; }
.hero-content { max-width: 950px; }
.hero-lead { color: #d1e2ef; }
.draft { background: linear-gradient(180deg, transparent, #050912c4 140px, #050912b0 calc(100% - 150px), transparent); }
.prices { background: linear-gradient(180deg, #050912ab, #0509128f calc(100% - 160px), #102f4455); }
.price-register { position: relative; }
.price-register th, .price, .price-prefix { font-weight: 500; }
.motion .price-register tbody tr { border-top-color: #779ca847; }
.total { background: linear-gradient(90deg, #58c8f00b, #58c8f005); }
.shared-address { margin-top: 12px; font-family: var(--mono); font-size: 12px; font-style: normal; }
.team { background: linear-gradient(180deg, #58c8f000, #58c8f099 75px, #58c8f0f5 155px, #88dbf4 100%); }
.contact { background: linear-gradient(180deg, #88dbf4, #c6edf8 90%); }
@media (min-width: 701px) {
  .hero-register { margin-top: 35px; }
}
@media (max-width: 700px) {
  .brand-mark { width: 23px; height: 23px; margin-right: 7px; }
  .site-header .wordmark { font-size: 16px; }
  .site-header nav { font-size: 11px; }
  .nav-request { gap: 8px; }
  #juonne { top: 58svh; }
  #poster { top: 12%; height: 100%; }
  .world-shade { background: linear-gradient(180deg, #05070de0, #05070d42 38%, #05070d00 62%, #05070df2 90%); }
  .hero-register { margin-top: 97px; font-size: 12px; }
  .hero-register-title { font-size: 8px; max-width: 320px; margin-bottom: 4px; }
  .hero-register dl > div { display: flex; flex-direction: column-reverse; padding: 7px 0; gap: 1px; }
  .hero-register dt { font-size: 12px; letter-spacing: .08em; }
  .hero-register dd { align-self: flex-start; font-size: 10px; line-height: 1.5; }
  .hero-email { font-size: 11px; padding-top: 10px; }
  .hero { min-height: max(844px, 100svh); }
  .shared-address { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .world, .motion .world { position: absolute; height: max(844px, 100svh); }
  .world canvas { display: none !important; }
  .motion #poster { filter: none; transform: none !important; }
}

/* Kierros 2, korjaus 1: sama kuvan mittakaava ja rauhallinen lähikenttä. */
#poster { top: calc(44svh - 27.7875vw); bottom: auto; height: 56.25vw; }
.prices { background: linear-gradient(180deg, transparent, #05091250 110px, #05091240 calc(100% - 160px), transparent); }
@media (max-width: 700px) {
  #poster { top: calc(58svh - 27.7875vw); height: 56.25vw; }
  .hero { padding-bottom: 100px; }
  .hero-register { margin-top: 192px; }
  .hero-register dl > div { padding: 5px 0; }
  .hero-register-title { font-size: 8px; }
}

/* --- Kierros 3, pääsilmukka: mobiilin tiheys (18.9.2026) --------------------
   Rikkausportti R1 mittasi mobiilissa entropiaksi 3,10 kun kynnys on 4,00, eli
   22 prosenttia alle. Syy mitattiin: #poster oli 56.25vw korkea, mikä on 390
   pikselin levyisellä ruudulla vain 219 pikseliä 844:stä. Maailma vei siis 26
   prosenttia ruudusta ja loput oli tasaista tummaa, jota entropia mittaa.

   Korjaus ei lisää koristetta vaan näyttää olemassa olevaa maailmaa enemmän:
   kuva rajataan cover-tilassa ja kohdistetaan valon ja kaupungin puolelle,
   jolloin kaari, ilmakehä ja lasitahkot täyttävät ruudun ylemmän puoliskon.
   Desktop ei muutu. */

@media (max-width: 700px) {
  #poster { top: auto; bottom: 0; height: 66svh; transform-origin: 70% 42%; }
  #poster img { object-fit: cover; object-position: 70% 38%; }
  .world-shade {
    background:
      linear-gradient(180deg, #05070df2 0%, #05070db8 26%, transparent 52%),
      linear-gradient(0deg, #05070d 0%, #05070d80 14%, transparent 34%);
  }
}

/* Kierros 4: geometrinen typografia, valo lasissa ja luettava allekirjoitus. */
:root { --teksti: 16px; --pieni: 12px; }
body { font-size: var(--teksti); }
h1, h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(64px, 6.1vw, 88px); }
h2, .team-intro h2, .contact h2 { font-size: clamp(48px, 5vw, 72px); }
.contact h2 span { font-size: 1em; }
.hero-lead, .draft-continuation, .draft-bottom p:first-child { font-size: 24px; line-height: 1.5; }
@media (min-width: 701px) {
  .hero { padding-top: 145px; padding-bottom: 92px; }
  .hero .eyebrow { margin-bottom: 22px; }
  .hero h1 { font-size: clamp(64px, 5.65vw, 88px); }
  .hero-lead { font-size: 20px; margin-top: 24px; }
  .hero .hero-register { margin-top: 24px; }
  .hero .hero-register dl > div { padding: 6px 0; }
}
.hero-register, .hero-email, .hero-register-title, .eyebrow, .section-number,
.hero-coordinate, .scroll-cue, .draft-price .mono, .price-vat,
.price-register thead, .row-note, .unit, .price-prefix { font-size: var(--pieni); }
.hero-register-title { letter-spacing: .035em; }
.hero-register { width: 640px; }
.hero-register dl > div { padding: 8px 0; }
.site-header nav, .draft-bottom p:last-child, .text-link, .price-register tbody td,
.terms, .team-intro p, .company-row p, .company-row a, .team-note, .shared-address,
.contact-copy > p, .contact-copy .email-help, .form-intro, .field label,
.field input, .field textarea, .primary-button, .form-explanation, .mail-fallback,
#email-draft, #copy-message, .noscript-note { font-size: var(--teksti); }
.field label span { font-size: var(--pieni); }
.price-register tbody th { font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.amount { font-size: 36px; }
.terms { max-width: 920px; line-height: 1.7; }
.wordmark { font-weight: 800; letter-spacing: -.035em; white-space: nowrap; line-height: 1.1; }
.site-header .wordmark { font-size: 24px; }
.wordmark span { font-weight: 500; color: var(--valo); letter-spacing: -.025em; }
.brand-mark { width: 40px; height: 34px; margin-right: 12px; flex: 0 0 auto; }
.team {
  background:
    radial-gradient(ellipse at 88% 8%, #e8f7fa52, transparent 57%),
    linear-gradient(180deg, #748d9800, #728f9a91 45px, #79cde4ee 155px, #8ed3e3 43%, #a5cbd5 76%, #b1c4ca);
}
.team::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 140% 110% at 94% -16%, transparent 55.6%, #e2f4f827 56.25%, #d2e9ee10 57.1%, transparent 59%);
}
.team-intro { gap: 64px; margin-bottom: 72px; }
.company-row { grid-template-columns: 48px minmax(260px, 1.35fr) 1fr 220px; column-gap: 24px; padding: 36px 0; }
.company-row h3 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.company-row p { line-height: 1.6; }
.company-row::before { width: 112px; height: 4px; }
.company-row.metahold-row::before { background: var(--signaali); box-shadow: 0 2px 0 #89321335; }
.company-row.suomi-row::before { background: var(--kirkas); box-shadow: 0 2px 0 #00548335; }
.company-number { font-size: var(--pieni); font-weight: 500; }
.company-row a { gap: 24px; }
.team-note { margin-top: 32px; }
.shared-address { margin-top: 16px; }
.contact { background: linear-gradient(180deg, #b1c4ca, #c3d7dd 38%, #b1c4ca); }
.contact-email { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.contact-copy .email-help { max-width: 380px; }
.form-explanation { line-height: 1.65; }
.site-footer { background: linear-gradient(180deg, #b1c4ca, #637985 42px, #1b2b39 104px, #0b101b 180px); color: var(--lumi); padding-top: 144px; padding-bottom: 36px; }
.footer-top { display: grid; grid-template-columns: 1.45fr 1fr auto; gap: 40px; align-items: center; padding: 48px 0; border-color: #b9d9eb45; }
.site-footer .wordmark { font-size: clamp(32px, 3.05vw, 48px); }
.site-footer .brand-mark { width: 48px; height: 40px; margin-right: 16px; }
.site-footer .wordmark span { color: var(--valo); font-weight: 500; }
.footer-top p, .back-top, .footer-bottom, .credits { font-size: var(--teksti); }
.footer-bottom { padding-top: 24px; border-top: 1px solid #b9d9eb38; flex-wrap: wrap; gap: 24px; line-height: 1.8; color: #cfdfeb; }
.credits a { font-weight: 700; white-space: nowrap; }
.world-dust { position: absolute; z-index: 2; inset: 0 0 52%; pointer-events: none; overflow: hidden; opacity: calc(var(--polyn-nakyvyys, 1) * var(--valaistus, 1)); }
.world-dust i { position: absolute; display: block; width: var(--koko); height: calc(var(--koko) * .4); background: #58c8f0; border-radius: 50%; opacity: var(--voima); filter: blur(var(--sumu)); animation: valopoly var(--jakso) ease-in-out infinite alternate; animation-delay: var(--viive); }
@keyframes valopoly { from { transform: translate3d(-9px, 5px, 0) rotate(-24deg); } to { transform: translate3d(var(--matka), -10px, 0) rotate(18deg); } }
[data-quiet-dust] .world-dust { display: none; }
@media (max-width: 1100px) and (min-width: 701px) {
  .company-row { grid-template-columns: 32px 1.3fr 1fr 170px; gap: 16px; }
  .company-row h3 { font-size: 32px; }
  .footer-top { grid-template-columns: 1fr auto; }
  .footer-top .wordmark { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  h1, h2, .team-intro h2, .contact h2, .section-title-row h2 { font-size: clamp(34px, 10.25vw, 48px); letter-spacing: -.035em; line-height: 1.08; }
  .site-header .wordmark { font-size: 16px; }
  .site-header .brand-mark { width: 26px; height: 24px; margin-right: 7px; }
  .site-header nav { font-size: var(--pieni); }
  .hero .eyebrow { font-size: var(--pieni); }
  .hero-lead, .draft-continuation, .draft-bottom p:first-child { font-size: var(--teksti); }
  .hero-register { margin-top: 140px; }
  .hero-register-title { font-size: var(--pieni); text-shadow: 0 1px 3px #05070d; }
  .hero-register dt, .hero-register dd, .hero-email { font-size: var(--pieni); letter-spacing: 0; }
  .hero-register dl > div { padding: 6px 0; }
  .hero-coordinate, .scroll-cue { font-size: 8px; }
  .eyebrow, .section-number, .price-vat, .row-note, .unit, .price-prefix { font-size: var(--pieni); }
  .eyebrow { gap: 12px; letter-spacing: 0; }
  .price-vat { font-size: var(--pieni); }
  .price-register tbody th { font-size: 20px; }
  .price-register tbody td { font-size: var(--teksti); }
  .amount { font-size: 28px; }
  .terms { font-size: var(--pieni); }
  .team-intro { gap: 28px; margin-bottom: 48px; }
  .company-row { grid-template-columns: 22px minmax(0, 1fr); gap: 16px 12px; padding: 32px 0; }
  .company-row h3 { font-size: 32px; }
  .company-row p, .company-row a { font-size: var(--teksti); }
  .company-row a { min-height: 44px; }
  .company-row::before { width: 100px; }
  .shared-address { font-size: var(--pieni); }
  .contact-email { font-size: 28px; gap: 24px; }
  .contact-copy .email-help, .form-intro, .form-explanation { font-size: var(--pieni); }
  .primary-button { font-size: var(--teksti); }
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .site-footer .wordmark { font-size: 32px; width: auto; }
  .site-footer .brand-mark { width: 32px; height: 28px; margin-right: 10px; }
  .back-top { justify-self: start; }
  .footer-bottom { font-size: var(--pieni); }
  .credits { font-size: var(--teksti); margin-top: 20px; max-width: 220px; line-height: 2; }
  .world-dust i:nth-child(n+17) { display: none; }
}
@media (max-width: 700px) { .world-warm-spot { display: none; } }
@media (prefers-reduced-motion: reduce) { .world-warm-spot, .world-dust { display: none !important; } }
@media print {
  .world-dust, .team::before { display: none !important; }
  .team, .contact, .site-footer { background: #fff !important; }
  .world, #juonne, .register-thread { display: none !important; }
  .site-footer, .footer-bottom, .credits, .site-footer .wordmark span { color: #050912 !important; }
}