/* ==========================================================================
   Lepistö & Co Oy — www-sivusto
   Konsepti: "FASADIKIRJA" — huoltokirja ladottuna Ocean Drivelle päivänvalossa.
   Dokumentti hoitaa luottamuksen (ledger, mono-indeksit, pykälät, hiuslinjat),
   fasadi hoitaa lämmön (rappauslevyt, deco-raidat, terrazzo), ja kyltti hoitaa
   finaalin (hämärä laskeutuu → neonlogo syttyy #000-levyllä).
   Ei synthwavea, ei glow'ta paperilla, ei palmuklipartteja.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEON-SOPIMUS v3 — luettava ennen kuin lisäät väriä
   ROOLIT:
     - Pinkki on TYÖMUSTE: --pinkki-muste #C2007A kaikkeen interaktiiviseen
       tekstiin ja nappeihin paperilla (5.06:1). --neon-pinkki #F61A9D vain
       esineinä ja ≥24px/700 display-koossa (3.26:1 = vain iso teksti):
       työteippi, terrazzo-sirut, katkoviiva, kyltti.
     - Syaani EI OLE KOSKAAN kirjainväri vaalealla (1.3:1). Sallitut käytöt:
       korostustussin pinta MUSTEEN ALLA (muste syaanilla ≈11.9:1),
       terrazzo-sirut, kyltti #000-levyllä. Luettava "syaani" on
       --syaani-muste #00666E (5.8:1): mono-datat, indeksit, koordinaatit.
     - Muste teipillä #F61A9D = 4.65:1 — läpäisee AA:n ilman marginaalia,
       ÄLÄ vaalenna teipin pinkkiä.
     - Pastellit (persikka, vaahto) ovat PINTOJA, eivät koskaan tekstiä.
       Pinkki-glyyfit KIELLETTY persikalla (2.84:1).
   ANNOSTELU:
     - Max 2 rappauslevyä per sivu. Terrazzo max 3 paikassa, ≤8 % peitto.
       Teippinauha täsmälleen 1 kerta (heron jälkeen). Vedosteipit ovat
       KIINNIKKEITÄ, eivät koristeita: max 4, vain #miksi-osiossa.
       Max ~5 pinkkiä instanssia per viewport.
       Rae ≤3 % (5 % rappauksella). Yksi varjo koko sivulla (todistuskortti);
       vedokset makaavat litteinä teipin alla, hento varjo ei kilpaile.
       Yksi liukuväri koko sivulla (hämäränauha ennen yhteysosiota).
     - Leima + terrazzo + teippi eivät koskaan samassa viewportissa.
   KIELLETTY: neon/pastelli taustavärinä tekstin takana (paitsi 2 levyä),
     glow leposkiilassa paperilla, pinkki+syaani-liukuväri vaalealla,
     palmu/flamingo/aurinko-ornamentit, deco-kehykset, terrazzo taustana.
   ESKALAATIOVENTTIILI ("lisää Miamia"): 1) terrazzo-sirujen tiheys ylös,
     2) kolmas teippi, 3) reittiviivan piirron dramatiikka. EI koskaan glow,
     ei gradientteja, ei uusia tummia osioita. Yksi lisäys = yksi poisto.
   -------------------------------------------------------------------------- */

/* ---- Fontit (self-hosted, WOFF2) ---- */
@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/bigshoulders-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/bigshoulders-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibmplexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'IBM Plex Mono';
  src: url('../fonts/ibmplexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokenit ---- */
:root {
  /* mitat */
  --nav-h: 81px;              /* .nav-inner 68px + .nav-banding 13px — heron korkeus lasketaan tästä */
  /* pinnat */
  --paperi: #f5f0e6;          /* lämmin norsunluu, ~90 % jokaisesta viewportista */
  --muste: #1a1915;           /* lämmin lähes-musta; teksti ei koskaan #000 */
  --muste-keski: #4c4a45;
  --rappaus-persikka: #f6dccb; /* fasadilevy A: 02 Palvelut. Vain muste-tekstiä. */
  --rappaus-vaahto: #dbe9e2;   /* fasadilevy B: 04 Toimialue */
  --hiekka: #d9c7a7;           /* terrazzo-sirut, teipin varjoreuna */
  --kortti: #ffffff;

  /* neonit (logosta) */
  --neon-pinkki: #f61a9d;     /* esineet + display ≥24px/700 + kyltti */
  --pinkki-muste: #c2007a;    /* interaktiivinen työmuste paperilla, 5.06:1 */
  --neon-syaani: #1debf4;     /* tussipinta, sirut, kyltti — EI kirjainväri vaalealla */
  --syaani-muste: #00666e;    /* luettava data-aksentti, 5.8:1 */

  /* yö */
  --hamara: #171126;          /* hämäränauhan syvä pysäkki */
  --kyltti-musta: #000000;    /* VAIN yhteysosio — logo.png-taustan mitattu vastine. Älä koske. */
  --yo-teksti: #f0efec;
  --yo-teksti-mid: #a8a6a0;

  /* viivat */
  --hius: rgba(26, 25, 21, 0.16);
  --hius-hento: rgba(26, 25, 21, 0.08);

  /* tyyppi */
  --font-display: 'Big Shoulders', 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
  --size-h1: clamp(2.7rem, 1rem + 6.2vw, 5.9rem);
  --size-h2: clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
  --size-service: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  --size-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --size-meta: 0.8125rem;

  /* rytmi */
  --space-section: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 2px;

  /* liike */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* terrazzo-laatta (sirut: pinkki / hiekka / vaahtosyvä / muste) */
  --terrazzo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg%3E%3Cpolygon points='8,10 22,6 26,18 12,22' fill='%23f61a9d'/%3E%3Cpolygon points='52,4 66,8 61,20 48,16' fill='%23d9c7a7'/%3E%3Cpolygon points='92,12 104,8 108,22 96,26' fill='%2394bcab'/%3E%3Cpolygon points='30,38 42,34 46,46 33,50' fill='%231a1915'/%3E%3Cpolygon points='70,34 84,38 80,52 66,48' fill='%23d9c7a7'/%3E%3Cpolygon points='6,62 18,58 22,70 10,74' fill='%2394bcab'/%3E%3Cpolygon points='44,66 58,62 62,76 48,80' fill='%23f61a9d'/%3E%3Cpolygon points='88,60 102,64 98,78 84,74' fill='%231a1915'/%3E%3Cpolygon points='24,92 38,88 42,100 28,104' fill='%23d9c7a7'/%3E%3Cpolygon points='64,94 78,90 82,104 68,108' fill='%2394bcab'/%3E%3Cpolygon points='100,92 112,96 108,110 96,106' fill='%23f61a9d'/%3E%3Cpolygon points='10,112 20,108 24,118 12,120' fill='%231a1915'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Nollaus ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paperi);
  color: var(--muste-keski);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--pinkki-muste); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* hover-vihje paksuudella, ei värillä: neon-pinkki tekstinä rikkoisi AA:n (3.3:1) */
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--pinkki-muste); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--neon-syaani); color: var(--muste); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--muste);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  font-weight: 780;
  font-variation-settings: 'opsz' 72;
}
h3 { font-weight: 700; }

/* paperinsyy: kevyt osiokohtainen rae ilman blend-kompositointia */
.section-paperi::before,
.section-persikka::before,
.section-vaahto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--pinkki-muste);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { left: 0.5rem; top: 0.5rem; }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

/* ---- Rekisterit ---- */

/* mono-label: sivuston ainoa versaalirekisteri (+ teippi) */
.meta {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* ruudunlukijalle näkyvä, visuaalisesti piilotettu (saavutettavuus/SEO) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* lomakekentän virhetila (WCAG 3.3.1) */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--pinkki-muste); }

/* deco-raidat: kolmen viivan ryhmä (2px/1px/1px) edellisen fasadin sävyssä */
.banding {
  height: 13px;
  background: linear-gradient(
    to bottom,
    var(--trim, var(--hiekka)) 0 3px,
    transparent 3px 7px,
    var(--trim, var(--hiekka)) 7px 9px,
    transparent 9px 12px,
    var(--trim, var(--hiekka)) 12px 13px
  );
}

/* osiomerkintä */
.marker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
  color: var(--syaani-muste);
}
.marker .notch {
  width: 9px;
  height: 9px;
  flex: none;
  transform: rotate(45deg);
  border: 1px solid currentColor;
}

/* iso otsikko täysleveän hiuslinjan päällä (Haven-kielioppi):
   viiva otsikkolaatikossa täysleveänä, tekstimitta sisemmässä spanissa */
.h-rule,
.section h2.h-rule {
  max-width: none;
  border-bottom: 1px solid var(--hius);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.h-rule .h-text {
  display: inline-block;
  max-width: 22ch;
  text-wrap: balance;
}
.count-note {
  font-family: var(--font-mono);
  font-size: 0.5em;
  font-weight: 500;
  color: var(--syaani-muste);
  vertical-align: super;
  letter-spacing: 0;
}

/* korostustussi: syaanipinta MUSTEEN alla — ainoa WCAG-kestävä syaani vaalealla */
.swipe {
  position: relative;
  display: inline-block;
  color: var(--muste);
}
.swipe::before {
  content: '';
  position: absolute;
  inset: 0.02em -0.16em -0.04em -0.12em;
  background: var(--neon-syaani);
  transform: skewX(-6deg) rotate(-1deg);
  z-index: -1;
  transform-origin: left center;
}

/* rullatela-pyyhkäisyjen ja paljastusten piilotilat asuvat
   no-preference-mediablokissa (liike-osio tiedoston lopussa):
   reduced-motion-käyttäjä näkee kaiken heti ensimaalauksesta. */

/* ---- Napit: teräväkulmaista painojälkeä ---- */
.btn {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn-primary {
  background: var(--pinkki-muste);
  color: #fff;
}
/* hover = "läpilyöntikopio": kova neonpinkki offset, ei glow'ta */
.btn-primary:hover { box-shadow: 4px 4px 0 0 var(--neon-pinkki); }
.btn-ghost {
  border: 1px solid var(--muste);
  color: var(--muste);
}
.btn-ghost:hover { background: var(--muste); color: var(--paperi); }
/* nappirivi: flex jotta mobiilin column/stretch (pinotut napit) vaikuttaa */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* ---- Navigaatio ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 230, 0);
  transition: background-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.nav.scrolled { background: var(--paperi); box-shadow: 0 1px 0 var(--hius); }
/* yötila: kun ilta on laskeutunut, myös navi sammuttaa valot */
.nav.night, .nav.night.scrolled { background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); }
.nav.night .brand, .nav.night .nav-toggle { color: var(--yo-teksti); }
.nav.night .nav-links a:not(.btn) { color: var(--yo-teksti-mid); }
.nav.night .nav-links a:not(.btn):hover, .nav.night .nav-links a[aria-current="page"] { color: var(--yo-teksti); }
.nav.night .nav-phone { color: var(--neon-syaani) !important; }
.nav.night .btn-primary { background: var(--neon-pinkki); color: var(--muste); }
.nav.night .nav-banding { opacity: 0.3; }
/* yöllä työkalukolmio syttyy syaanina */
.nav.night .brand svg { color: var(--neon-syaani); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 40;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase; /* logotyyppirekisteri */
  color: var(--muste);
  text-decoration: none;
}
.brand svg { color: var(--muste); } /* sammutettu "lasiputki" — syttyy vasta kyltissä */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  padding: 0;
}
.nav-links a:not(.btn) {
  color: var(--muste-keski);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav-links a:not(.btn):hover { color: var(--muste); }
.nav-links a[aria-current="page"] { color: var(--muste); }
.nav-phone {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--syaani-muste) !important;
}
.nav .btn { padding: 0.55rem 1.15rem; font-size: 0.9375rem; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--muste);
  border-radius: var(--radius);
  color: var(--muste);
  padding: 0.5rem 0.75rem;
  font: inherit;
  cursor: pointer;
}
.nav-banding { height: 13px; }

.menu-foot { display: none; }
@media (max-width: 800px) {
  .nav-toggle { display: block; }
  /* ilman JS:ää valikko on aina auki tavallisena listana — togglen takana
     oleva sisältö ei saa kadota skriptien mukana */
  html.no-js .nav-toggle { display: none; }
  html.no-js .nav-links {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    padding: 0 0 1rem;
  }

  /* YÖVALIKKO: koko ruudun yökatu. Avattaessa hämärä laskeutuu (#171126 →
     #000), linkit syttyvät kuin neonkyltit porrastetusti. */
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: #000;
    padding: 96px var(--gutter) max(1.25rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    height: 100vh;
    height: 100dvh;
  }
  /* yökadun ikkunapielet */
  .nav-links::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 25% 100%;
  }
  .nav.open .nav-links { display: flex; }
  /* overlay on .nav-innerin lapsi → brändi ja Sulje nostetaan sen yli */
  .nav.open { background: #000; }
  .nav.open .brand, .nav.open .nav-toggle {
    color: var(--yo-teksti);
    position: relative;
    z-index: 60;
  }
  .nav.open .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
  .nav-links li { width: 100%; position: relative; }
  .nav-links li:not(.menu-foot) { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .nav-links a:not(.btn):not(.nav-phone) {
    display: block;
    padding: 1.05rem 0;
    font-family: var(--font-display);
    font-weight: 760;
    font-variation-settings: 'opsz' 60;
    font-size: clamp(2.1rem, 8.5vw, 3.1rem);
    line-height: 1;
    color: var(--yo-teksti);
  }
  .nav-links a[aria-current="page"] { color: var(--yo-teksti); }
  .nav-links .nav-phone {
    display: block;
    padding: 1.2rem 0 0.4rem;
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    color: var(--neon-syaani) !important;
  }
  .nav-links .btn {
    margin-top: 1.25rem;
    background: var(--neon-pinkki);
    color: var(--muste);
    font-size: 1.0625rem;
    padding: 0.9rem 1.75rem;
  }
  .menu-foot {
    display: block;
    margin-top: auto;
    padding-top: 2rem;
    color: var(--yo-teksti-mid);
    font-size: 0.6875rem;
  }
  /* sulkeutuminen: "virta katkeaa" — putket kylmenevät, sitten pimeys */
  .nav.closing .nav-links { opacity: 0; transition: opacity 180ms linear; }
  .nav.closing .nav-links > li { opacity: 0.15; }
}

/* (työpäiväfolio poistettu — navin yötila hoidetaan IO:lla suoraan) */

/* ==========================================================================
   Hero: PÄÄTEPISTE — galleriatason 3D-stillikuva (assets/js/hero3d.js).
   Läpinäkyvä Three.js-canvas sivun paperin päällä: persikkakipsinen
   jakoavain terrazzo-jalustalla, merivaahtokolmio, ja "loput."-sanan piste
   on pinkki kiiltävä teippirulla baselinella. Tyyppi omistaa kaiken
   kontrastin (render ei sisällä mustetta tummempaa kuin taupe-varjo).
   Ilman WebGL:ää/JS:ää: canvas ei käynnisty, piste on tavallinen glyyfi,
   hero on puhdas typojuliste — sama sommittelu.
   NEON-SOPIMUS v7: renderin pastellit ovat brändisävyjä materiaaleina;
   ainoa kiilto on pinkki rulla (<2 % framesta); syaani EI esiinny herossa
   — se kuuluu iltafinaalin neonille.
   ========================================================================== */
.hero-paate {
  position: relative;
  /* navi on sticky ja vie virtaustilaa — täysi 100svh työntäisi CTA:t folden alle */
  height: calc(100svh - var(--nav-h));
  min-height: 560px;
  overflow: clip;
}
.hero3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
html.no-js .hero3d-canvas { display: none; }
/* filmirae fuusioi DOM:n ja renderin yhdeksi painetuksi julisteeksi */
.hero-paate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
.hero-meta2 {
  position: relative;
  z-index: 2;
  padding-top: 44px;
}
.hero-meta2 .kicker { margin-bottom: 1rem; }
.hero-meta2 .hero-sub { max-width: 32ch; color: #3a382f; }
.hero-type {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12.5%;
  z-index: 2;
}
.hero-type h1 { margin: 0; }
.hero-type .hl {
  display: block;
  font-family: var(--font-display);
  font-weight: 780;
  font-variation-settings: 'opsz' 72;
  text-transform: uppercase; /* kampanjarekisteri — lähde pysyy virkkeenä */
  color: var(--muste);
  line-height: 0.92;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
/* rivit sovitettu samaan mittaan (~48vw): viimeinen sana on julisteen sana */
.hero-type .l1 { font-size: min(clamp(2rem, 6.4vw, 6.5rem), 10svh); }
.hero-type .l2, .hero-type .l2b { display: inline-block; font-size: min(clamp(1.65rem, 5.15vw, 5.2rem), 8svh); }
.hero-type .l2 { margin-right: 0.24em; } /* inline-block nielaisee välilyönnin */
.hero-type .l3 { font-size: min(clamp(5rem, 16.6vw, 16.5rem), 30svh); letter-spacing: 0; }
/* PISTE: tavallinen glyyfi — maketti-herossa ei enää teippirullaa */
.piste { display: inline-block; }
.hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4.5svh, 3rem);
  z-index: 3;
}
/* mobiili: maketti omassa ylänauhassaan, teksti virtauksessa sen alla */
@media (max-width: 900px) {
  .hero-paate { height: auto; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
  .hero3d-canvas { position: relative; inset: auto; width: 100%; height: 28svh; }
  /* flex-sarakkeen lapsina .container-elementtien margin:0 auto kutistaisi ne
     sisällön levyisiksi → pakota täysleveiksi, jotta CTA-napit venyvät oikein */
  .hero-meta2, .hero-type, .hero-cta { width: 100%; }
  .hero-meta2 { padding-top: 1rem; }
  .hero-type { position: static; transform: none; margin-top: 0.75rem; }
  .hero-type .l1 { font-size: clamp(1.9rem, 8.6vw, 3rem); }
  .hero-type .l2, .hero-type .l2b { display: block; font-size: clamp(1.9rem, 8.6vw, 3rem); }
  .hero-type .l3 { font-size: clamp(4.6rem, 31vw, 8rem); }
  .hero-cta { position: static; margin-top: auto; padding-block: 1rem 1.25rem; }
  .hero-cta .cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
}
/* matalat puhelimet (esim. 375x667): maketti + teksti + napit eivät mahdu
   samaan ruutuun — maketti väistyy, typojuliste ja CTA:t pitävät foldin */
@media (max-width: 900px) and (max-height: 700px) {
  .hero3d-canvas { display: none; }
  .hero-type { margin-top: 2rem; }
}
/* staattinen fallback ilman JS:ää: normaali virtaus, ei absoluuttista CTA:ta */
html.no-js .hero-paate { height: auto; min-height: 0; padding-bottom: 3rem; }
html.no-js .hero-type { position: static; margin-top: 2rem; }
html.no-js .hero-cta { position: static; margin-top: 2.5rem; }
/* ---- Työmääräin-nauha heti heron jälkeen + teippi ---- */
.hero-after { position: relative; padding-top: clamp(1.75rem, 4vh, 3rem); }
.workstrip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(2.5rem, 5vh, 4rem);
  background: var(--kortti);
  border: 1px solid var(--hius);
  border-radius: var(--radius);
}
.workstrip li {
  padding: 1.1rem 1.4rem;
  font-size: 0.9375rem;
  color: var(--muste-keski);
  line-height: 1.45;
}
.workstrip li + li { border-left: 1px solid var(--hius-hento); }
.workstrip .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--syaani-muste);
  margin-bottom: 0.2rem;
}
.workstrip .strip-meta {
  align-self: center;
  text-align: right;
  color: var(--muste-keski);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .workstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workstrip li + li { border-left: 0; }
  .workstrip li:nth-child(2n) { border-left: 1px solid var(--hius-hento); }
  .workstrip li:nth-child(n+3) { border-top: 1px solid var(--hius-hento); }
  .workstrip .strip-meta { text-align: left; }
}
@media (max-width: 480px) {
  .workstrip { grid-template-columns: 1fr; }
  .workstrip li:nth-child(2n) { border-left: 0; }
  .workstrip li + li { border-top: 1px solid var(--hius-hento); }
}
/* ---- Pinkki työteippi: staattinen suikale, teksti painettu kerran.
   Ei liikettä — teippi on esine, ei mainoskaruselli. ---- */
.tape {
  position: relative;
  z-index: 3;
  transform: rotate(-1.1deg);
  margin-block: clamp(0.5rem, 2vh, 1.5rem);
  margin-inline: -1.5vw;
  background: var(--neon-pinkki);
  box-shadow: 0 3px 0 0 rgba(217, 199, 167, 0.85);
  overflow: hidden;
  text-align: center;
  /* repäistyt päät */
  clip-path: polygon(0 6%, 0.4% 55%, 0 100%, 99.7% 96%, 99.3% 48%, 100% 4%, 50% 0);
}
.tape span {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500; /* 700:aa ei ladata — vältetään faux-bold */
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muste); /* muste pinkillä: 5.55:1 */
  white-space: nowrap;
  padding: 0.75rem 1rem;
}
@media (max-width: 480px) {
  .tape span { font-size: 0.8125rem; letter-spacing: 0.1em; }
}
/* kapeimmilla ruuduilla teksti kutistuu vielä pykälän, ettei nowrap-rivi
   leikkaudu kesken glyyfin repäistyssä päässä */
@media (max-width: 360px) {
  .tape span { font-size: 0.72rem; letter-spacing: 0.07em; }
}

/* ---- Osiot ---- */
.section { padding-block: var(--space-section); position: relative; }
.section-paperi { background: var(--paperi); }
.section-persikka { background: var(--rappaus-persikka); }
.section-vaahto { background: var(--rappaus-vaahto); }

.section h2 { font-size: var(--size-h2); max-width: 22ch; }
.section .lede { max-width: 58ch; }
.section .lede + .lede { margin-top: 1rem; }
.more-link {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--pinkki-muste);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.more-link:hover { border-bottom-width: 2px; }

/* Haven-kielioppi: teksti vasemmalla, todistus oikealla */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.split .tagline {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--muste);
  font-weight: 700;
}
.split .tagline::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--muste);
  align-self: center;
}
/* Meistä-teaser: enemmän ilmaa ja isompi lede + varsinainen nappi,
   ettei osio tunnu tyhjältä */
.meista-lead { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.meista-lead .lede-xl {
  margin-top: 1.75rem;
  font-size: clamp(1.45rem, 1.1rem + 1.9vw, 2.15rem);
  line-height: 1.4;
  max-width: 24ch;
}
.meista-cta { margin-top: 2.25rem; }
@media (max-width: 760px) {
  /* minmax(0,1fr) estää kortin min-contentia työntämästä saraketta yli ruudun */
  .split { grid-template-columns: minmax(0, 1fr); }
  /* passikuva vie "Kohde 001":n paikan → poistetaan se ja headin raivausmarginaali,
     jotta kapea kortti mahtuu puhelimeen ilman leikkautumista */
  .cert .cert-head { padding-right: 0; }
  .cert .cert-head span:last-child { display: none; }
  .cert-photo { width: 84px; top: -12px; right: 6px; }
  .cert-photo figcaption { display: none; } /* nowrap-teksti tökkisi ruudun reunan yli */
}

/* mustevalu-lede: sanat nousevat 14 %:n sävystä täyteen musteeseen */
.lede-xl {
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.65rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--muste);
  max-width: 34ch;
}
html.js .lede-xl .w { color: rgba(26, 25, 21, 0.16); }
html.js .lede-xl .w.on { color: var(--muste); }

/* ---- Referenssitodistus ---- */
.cert-wrap { position: relative; }
.cert {
  position: relative;
  background: var(--kortti);
  border: 1px solid var(--paperi);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 4.25rem; /* alaosan tila leimalle */
  /* sivun AINOA varjo: yksi fyysinen asiakirja pöydällä */
  box-shadow: 0 18px 50px rgba(26, 25, 21, 0.18), 0 2px 6px rgba(26, 25, 21, 0.08);
}
.cert .cert-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--syaani-muste);
  padding-bottom: 0.8rem;
  padding-right: 6.5rem; /* passikuva peittäisi muuten "Kohde 001":n */
  border-bottom: 1px solid var(--hius-hento);
}
.cert .cert-head span { white-space: nowrap; }
@media (max-width: 1200px) {
  .cert .cert-head { letter-spacing: 0.04em; }
}
.cert h3 {
  font-size: 1.6rem;
  margin-top: 1.1rem;
  color: var(--muste);
}
.cert .big-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(3.2rem, 2.6rem + 2.4vw, 4.8rem);
  line-height: 1;
  color: var(--pinkki-muste);
  margin-top: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.cert ul { list-style: none; padding: 0; margin-top: 1rem; }
.cert li { padding: 0.5rem 0; border-top: 1px solid var(--hius-hento); font-size: 0.9375rem; }
.cert .cert-attr {
  margin-top: 1.1rem;
  color: var(--muste-keski);
  letter-spacing: 0.06em;
}
/* passikuva: vastuuhenkilö niitattuna todistuksen kulmaan. Ei omaa varjoa —
   kuva makaa kortin päällä ja perii sen fyysisyyden. Ei teippiä (kiintiö). */
.cert-photo {
  position: absolute;
  top: -14px;
  right: -12px;
  width: clamp(88px, 9vw, 118px);
  margin: 0;
  padding: 5px 5px 6px;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  transform: rotate(3.5deg);
  transition: transform 200ms var(--ease-out);
}
.cert-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%; /* kasvot ylhäällä */
  filter: saturate(0.95);
}
.cert-photo figcaption {
  margin-top: 5px;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--muste-keski);
  white-space: nowrap;
}
@media (hover: hover) {
  .cert-wrap:hover .cert-photo { transform: rotate(2deg); } /* kuin suoristaisi sormella */
}

/* VASTAANOTETTU-leima: kortin alareunan omalla kaistalla, ei tekstin päällä */
.stamp {
  position: absolute;
  right: 1.4rem;
  bottom: 1.05rem;
  transform: rotate(-6deg);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pinkki-muste);
  border: 2px double var(--pinkki-muste);
  padding: 0.3rem 0.6rem;
  opacity: 0.9;
  pointer-events: none;
}

/* ---- 02 Palvelut: huoltokirjaindeksi persikkalevyllä ---- */
.section-persikka .marker { color: var(--muste); }
.ledger { list-style: none; padding: 0; counter-reset: rivi; }
.ledger > li { position: relative; }
.ledger > li::after,
.ledger > li:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hius);
}
.ledger > li::after { bottom: 0; }
.ledger > li:first-child::before { top: 0; }
.ledger a {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4rem, 3rem + 4vw, 7rem) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.2rem, 1rem + 1.3vw, 1.9rem) 0.6rem;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
/* terrazzo-valunumerot: ääriviiva + siruilla täyttyvä valu */
.ledger .idx {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500; /* 700:aa ei ladata — vältetään faux-bold */
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--muste);
  transition: color 300ms var(--ease-out), text-shadow 200ms var(--ease-out);
}
.ledger .idx::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  background-image: var(--terrazzo);
  background-size: 74px 74px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ledger .idx { color: var(--muste); -webkit-text-stroke: 0; }
  .ledger .idx::after { display: none; }
}
/* terrazzo-valun piilotila mediablokissa tiedoston lopussa */

.ledger h3 {
  font-size: var(--size-service);
  color: var(--muste);
}
.ledger p { color: var(--muste-keski); margin-top: 0.3rem; font-size: 0.9375rem; max-width: 52ch; }
.ledger .tag {
  color: var(--muste);
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  border-radius: 999px; /* chipit ovat sivuston ainoa pyöreä elementti */
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
  transition: opacity 180ms var(--ease-out);
}
.ledger .go {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--syaani-muste);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  pointer-events: none;
}
.ledger a:hover, .ledger a:focus-visible { background: rgba(255, 255, 255, 0.75); }
.ledger a:hover .tag, .ledger a:focus-visible .tag { opacity: 0; }
.ledger a:hover .go, .ledger a:focus-visible .go { opacity: 1; }
.ledger-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  margin-top: 1.75rem;
}
.ledger-foot .note { color: var(--muste-keski); }
/* pinkki-muste jää persikalla 4.48:1:een — linkki mustetta tällä levyllä */
.section-persikka .more-link { color: var(--muste); }

/* ---- Palvelut: jättityyppinen hinnastotaulu persikkalevyllä.
   Ei rivejä, ei kortteja: 7 palvelunimeä käsinmaalatun taulun tapaan.
   Hover/fokus: sana täyttyy terrazzolla ja liukuu 12 px oikealle.
   Terrazzo elää vain yhdessä sanassa kerrallaan — annostelu pysyy
   sopimuksessa. (.ledger-tyylit säilyvät palvelut.html-alasivua varten.) ---- */
.menu-board { list-style: none; padding: 0; margin: 0; }
.menu-board li + li { margin-top: clamp(0.4rem, 1.4vw, 0.9rem); }
.board-line {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  max-width: 100%;
  text-decoration: none;
  transition: transform 260ms var(--ease-out);
}
.board-line:hover,
.board-line:focus-visible { transform: translateX(12px); }
.b-idx {
  align-self: flex-start;
  margin-top: 0.35rem;
  color: var(--syaani-muste); /* 5.1:1 persikalla */
  letter-spacing: 0.08em;
  transition: color 200ms var(--ease-out);
}
.b-word {
  position: relative;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 780;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.2rem, 1.2rem + 3.9vw, 4.5rem);
  line-height: 0.95;
  color: var(--muste);
  text-wrap: balance;
}
/* Miami Vice -hover: sana täyttyy pinkillä liu'ulla (display-koko = sopimuksen
   mukainen), ja syaani–pinkki-alleviivaus pyyhkäisee alle (syaani pintana). */
.b-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, var(--pinkki-muste), var(--neon-pinkki) 55%, var(--pinkki-muste));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.b-word::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.08em;
  background: linear-gradient(90deg, var(--neon-syaani), var(--neon-pinkki));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--ease-out);
  pointer-events: none;
}
.board-line:hover .b-word::after,
.board-line:focus-visible .b-word::after { opacity: 1; }
.board-line:hover .b-word::before,
.board-line:focus-visible .b-word::before { transform: scaleX(1); }
.board-line:hover .b-idx,
.board-line:focus-visible .b-idx { color: var(--pinkki-muste); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .b-word::after { display: none; }
  .board-line:hover .b-word,
  .board-line:focus-visible .b-word { color: var(--pinkki-muste); }
}
.b-tag {
  align-self: center;
  color: var(--muste);
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  border-radius: 999px; /* chipit ovat sivuston ainoa pyöreä elementti */
  padding: 0.22rem 0.75rem;
  font-size: 0.6875rem;
  white-space: nowrap;
}
.board-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hius);
}
.board-foot .note { color: var(--muste-keski); }
.board-foot .more-link { margin-top: 0; }
@media (max-width: 640px) {
  .ledger a { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .ledger .tag, .ledger .go { display: none; }
}

/* ---- 03 Miksi: puhdas sopimusaukeama, nolla Miamia ---- */
.clauses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 5rem);
}
.clauses > div {
  padding: 1.75rem 0;
  border-top: 1px solid var(--hius);
}
.clauses dt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 720;
  font-variation-settings: 'opsz' 48;
  font-size: 1.45rem;
  color: var(--muste);
}
.clauses dt .cno {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--syaani-muste);
  font-variant-numeric: tabular-nums;
}
.clauses dd { margin: 0.6rem 0 0 2.6rem; max-width: 46ch; }
@media (max-width: 760px) {
  .clauses { grid-template-columns: 1fr; }
}

/* ---- 03 Miksi: aukeama — pykälät vasemmalla, oikealla työvedokset
   teipattuna seinälle. Pinkki elää teippisuikaleina, jotka pitävät
   todisteet paikallaan — ei koristeena. ---- */
.miksi-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
/* pykälät yhtenä pinona: sopimus luetaan ylhäältä alas */
.clauses-stack { grid-template-columns: 1fr; }

.proofwall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  /* teippisuikaleet työntyvät vedosten yli — tila niille */
  padding-top: 12px;
}
.print {
  position: relative;
  margin: 0;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  padding: 7px 7px 8px;
  /* vedos makaa litteänä teipin alla — varjo hento;
     todistus säilyy sivun ainoana pöydällä makaavana asiakirjana */
  box-shadow: 0 4px 14px rgba(26, 25, 21, 0.09), 0 1px 3px rgba(26, 25, 21, 0.06);
}
.print img { display: block; width: 100%; height: auto; filter: saturate(0.97); }
.print figcaption {
  margin-top: 6px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muste-keski);
}
/* pinkki teippisuikale pitää vedoksen seinällä. Jokainen suikale on eri
   pituinen, eri kohdassa ja eri repeämällä — teippi revitään rullasta,
   ei monisteta spritestä. Kaksi repeämämuottia (A ja B) + mittavaihtelu. */
.print::before {
  content: '';
  position: absolute;
  top: -10px;
  height: 20px;
  background: var(--neon-pinkki);
  opacity: 0.92;
  box-shadow: 0 2px 0 rgba(217, 199, 167, 0.55);
}
/* vinoudet klusterissa, ei vuorotellen: a ja b nojaavat samaan suuntaan,
   c kallistuu vastaan, d jää melkein suoraksi — käsin kiinnitetty */
.print-a { transform: rotate(-1.7deg); }
.print-a::before {
  left: 41%;
  width: 88px;
  transform: translateX(-50%) rotate(-2.4deg);
  clip-path: polygon(2% 8%, 98% 0, 100% 46%, 97% 94%, 3% 100%, 0 52%);
}
.print-b { transform: rotate(-0.4deg); margin-top: 1.6rem; }
.print-b::before {
  left: 56%;
  width: 58px;
  transform: translateX(-50%) rotate(-3.2deg);
  clip-path: polygon(0 14%, 96% 4%, 99% 38%, 100% 90%, 4% 96%, 1% 60%);
}
/* c: kaksi pientä kulmateippiä — sama motiivi kuin heron potretissa */
.print-c { transform: rotate(1.6deg); width: 91%; margin-left: 5%; }
.print-c::before {
  left: 12%;
  width: 52px;
  transform: translateX(-50%) rotate(4deg);
  clip-path: polygon(0 14%, 96% 4%, 99% 38%, 100% 90%, 4% 96%, 1% 60%);
}
.print-c::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 88%;
  width: 46px;
  height: 19px;
  background: var(--neon-pinkki);
  opacity: 0.92;
  box-shadow: 0 2px 0 rgba(217, 199, 167, 0.55);
  transform: translateX(-50%) rotate(-3.5deg);
  clip-path: polygon(2% 8%, 98% 0, 100% 46%, 97% 94%, 3% 100%, 0 52%);
}
/* d limittyy c:n alakulman päälle kuin oikeat vedokset pinossa */
.print-d { transform: rotate(0.3deg); width: 80%; margin-left: auto; margin-top: -2.5rem; }
.print-d::before {
  left: 60%;
  width: clamp(72px, 46%, 104px);
  transform: translateX(-50%) rotate(2.6deg);
  clip-path: polygon(0 14%, 96% 4%, 99% 38%, 100% 90%, 4% 96%, 1% 60%);
}
/* tyhjennyspari vie koko palstan leveyden omilla riveillään */
.proofwall > .reveal:nth-child(3), .proofwall > .reveal:nth-child(4) { grid-column: 1 / -1; }
.proof-note {
  grid-column: 1 / -1;
  justify-self: end;
  letter-spacing: 0.06em;
  color: var(--muste-keski);
}
@media (max-width: 980px) {
  .miksi-split { grid-template-columns: 1fr; }
  .proofwall { margin-top: 0.75rem; }
}

/* ---- 04 Toimialue: fasadimuraali vaahtolevyllä ---- */
.section-vaahto .marker { color: var(--muste); }
.map-typo { position: relative; padding-block: 0.5rem; }
.map-typo .place {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(3.2rem, 1.5rem + 9vw, 8.5rem);
  line-height: 0.94;
  color: var(--muste);
}
/* levyn reunan leikkaama kirjainmuoto: VAIN display-nimi vuotaa reunan yli,
   chipit ja alarivit pysyvät levyllä */
.map-typo .place-a .place { margin-left: calc((100% - 100vw) / 2 - 0.05em); }
.map-typo .place-b { text-align: right; margin-top: clamp(2.5rem, 7vw, 5rem); }
.map-typo .place-b .place { margin-right: calc((100% - 100vw) / 2 - 0.04em); }
.coords {
  color: var(--syaani-muste);
  margin-top: 0.6rem;
}
.place-b .coords { text-align: right; }
.map-route { position: absolute; inset: 0; pointer-events: none; }
.map-route line {
  stroke: var(--pinkki-muste);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}
/* viivan piirtopaljastuksen piilotila mediablokissa tiedoston lopussa */
.map-chip {
  position: absolute;
  left: 50%;
  top: 50.3%; /* suoran keskipiste viewBoxissa — chip istuu viivalla */
  transform: translate(-50%, -118%);
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  padding: 0.3rem 0.75rem;
  color: var(--muste);
  white-space: nowrap;
}
.place-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  padding: 0.3rem 0.75rem;
  color: var(--muste);
}
.place-tag .notch { width: 8px; height: 8px; transform: rotate(45deg); background: var(--neon-pinkki); }
.map-note { max-width: 52ch; margin-top: 2.75rem; color: var(--muste-keski); }

/* ---- 05 Yhteys: neonkyltti #000-levyllä (säilytetty ankkuri) ---- */
.section-contact {
  /* Taustan on pysyttävä täsmälleen #000000: logo.png-taustan mitattu vastine. */
  background: var(--kyltti-musta);
  color: var(--yo-teksti-mid);
}
.section-contact .marker { color: var(--neon-syaani); }
.section-contact h2 { color: var(--yo-teksti); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.sign img {
  width: min(100%, 430px);
  height: auto;
  margin-inline: auto;
  /* Ei blend-modea: raskas kompositoida heikoilla koneilla. Kyltin JPEG:n
     tausta on mitatusti #000000 = osion tausta, joten sauma on näkymätön.
     Jos osion tausta joskus muuttuu, palauta mix-blend-mode: screen. */
}
.contact-ledger { list-style: none; padding: 0; margin-top: 2rem; }
.contact-ledger li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.contact-ledger li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.contact-ledger .k { color: var(--yo-teksti-mid); }
.contact-ledger .v { color: var(--yo-teksti); font-weight: 500; overflow-wrap: anywhere; }
.contact-ledger a.v { color: var(--neon-syaani); }
.contact-ledger .v-big {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.contact-cta { margin-top: 2.25rem; }
/* yösäännöt: kyltin levyllä neonit palavat täysillä */
.section-contact .btn-primary { background: var(--neon-pinkki); color: var(--muste); }
.section-contact .btn-primary:hover { box-shadow: 4px 4px 0 0 var(--neon-syaani); }
.section-contact .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: var(--yo-teksti); }
.section-contact .btn-ghost:hover { background: var(--yo-teksti); color: var(--muste); border-color: var(--yo-teksti); }
.section-contact a { color: var(--neon-syaani); }
.section-contact :focus-visible { outline-color: var(--neon-syaani); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .sign img { width: min(72%, 330px); }
  .contact-ledger li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---- Footer: yökadun takakansi + elävä kolofoni ---- */
.footer {
  background: #000;
  color: var(--yo-teksti-mid);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 2.25rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.footer-nav a { color: var(--yo-teksti-mid); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.footer-nav a:hover { color: var(--yo-teksti); }
.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   ALASIVUT — jaetut komponentit (palvelut / meistä / yhteystiedot).
   Samaa FASADIKIRJA-kieltä: valkoinen printtikehys + hiuslinja + mono-
   kuvatekstit, ei uusia varjoja (cert on yhä sivuston ainoa varjo).
   ========================================================================== */
.subhead {
  padding-top: calc(68px + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.subhead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 72;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--muste);
  font-size: clamp(2.7rem, 1.4rem + 6.2vw, 7rem);
  margin-top: 1.1rem;
}
.subhead .lede {
  margin-top: 1.75rem;
  max-width: 48ch;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--muste-keski);
}
.subhead .lede strong { color: var(--muste); font-weight: 600; }

/* kehystetty valokuva */
.shot {
  margin: 0;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  padding: 8px 8px 0;
}
/* yhtenäinen 4:3-rajaus pitää ruudukon tasaisena vaikka kuvat ovat eri kokoisia */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.shot figcaption {
  padding: 8px 2px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syaani-muste);
}

/* ennen / jälkeen -pari */
.ba { margin: 0; }
.ba-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
}
.ba-imgs figure { position: relative; margin: 0; overflow: hidden; }
.ba-imgs img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ba-tag {
  position: absolute;
  left: 7px;
  top: 7px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: rgba(26, 25, 21, 0.72);
  color: #fff;
}
.ba-tag.after { background: var(--pinkki-muste); }
.ba figcaption {
  padding: 8px 2px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syaani-muste);
}

/* valokuvaruudukko: yksittäiset kuvat 2 palstaa, ennen/jälkeen-parit ja
   leveät kollaasit koko leveydeltä omina kaistoinaan → ei rosoisia rivejä */
.shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.shot-grid > .ba,
.shot-grid > .shot.full { grid-column: 1 / -1; }
/* koko leveydeltä näytetty kollaasi säilyttää 4:3-suhteen (ei liian korkea) */
.shot.full img { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .shot-grid { grid-template-columns: 1fr; }
}

/* palvelublokki */
.svc {
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  border-top: 1px solid var(--hius);
  scroll-margin-top: 84px;
}
.svc-head { display: flex; align-items: baseline; gap: 1rem; }
.svc-idx {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--syaani-muste);
  font-variant-numeric: tabular-nums;
}
.svc h2 {
  font-family: var(--font-display);
  font-weight: 780;
  font-variation-settings: 'opsz' 72;
  text-transform: uppercase;
  line-height: 0.96;
  color: var(--muste);
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem);
}
.svc-lede { margin-top: 1.2rem; max-width: 54ch; font-size: var(--size-body); color: var(--muste-keski); }
.svc-lede + .svc-lede { margin-top: 0.8rem; }

/* meistä-tarina: lyhyt teksti keskitetään korkean potretin viereen, ja
   potrettia hillitään, ettei tekstin alle jää isoa tyhjää kaistaa */
.tarina-split { align-items: center; }
.tarina-split .portrait-wrap { width: min(100%, 360px); justify-self: end; }
/* referenssi: lyhyt teksti keskitetään todistuskortin viereen (sama kuin tarina) */
.ref-split { align-items: center; }
@media (max-width: 760px) {
  .tarina-split { align-items: start; }
  .tarina-split .portrait-wrap { width: min(100%, 320px); justify-self: start; }
  .ref-split { align-items: start; }
}

/* meistä-alasivun potretti */
.portrait-wrap {
  margin: 0;
  background: var(--kortti);
  border: 1px solid var(--hius-hento);
  padding: 10px 10px 0;
}
.portrait-wrap img { display: block; width: 100%; height: auto; }
.portrait-wrap figcaption {
  padding: 10px 2px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syaani-muste);
}

/* ---- yhteydenottolomake ---- */
.form { display: grid; gap: 1.1rem; max-width: 40rem; margin-top: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muste-keski);
}
.field label .req { color: var(--pinkki-muste); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--muste);
  background: var(--kortti);
  border: 1px solid var(--hius);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pinkki-muste);
  box-shadow: 0 0 0 3px rgba(194, 0, 122, 0.14);
}
/* hunajapurkki botteja vastaan — pois näkyvistä ja ruudunlukijoilta */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.form-status {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  min-height: 1.2em;
}
.form-status.ok { color: var(--syaani-muste); }
.form-status.err { color: var(--pinkki-muste); }
.form-note { margin-top: 1.25rem; max-width: 46ch; color: var(--muste-keski); font-size: 0.9rem; }
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
/* ---- Tietosuojaseloste: numeroitu asiakirja, sama pykäläkieli kuin
   sopimusaukeamissa — juridiikka luetaan kuin urakkasopimus ---- */
.doc { max-width: 72ch; }
.doc-updated { margin-top: 1.25rem; color: var(--muste-keski); letter-spacing: 0.08em; }
.doc h2 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hius);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: 1.45rem;
  color: var(--muste);
}
.doc section:first-child h2 { margin-top: 0; }
.doc h2 .cno {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--syaani-muste);
  font-variant-numeric: tabular-nums;
}
.doc p { margin-top: 0.9rem; }
.doc ul { margin-top: 0.9rem; padding-left: 1.15rem; }
.doc li { margin-top: 0.45rem; }
.doc a { color: var(--pinkki-muste); }
.doc .contact-ledger.light { margin-top: 1.25rem; max-width: 46ch; }

/* ---- Tietoa: Aloitetaan — avoin työmääräin yökirjoituspöydällä.
   Ei geneeristä CTA-kaistaa: seuraava työmääräin odottaa täyttäjäänsä. ---- */
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.order-card {
  position: relative;
  background: var(--kortti);
  border: 1px solid var(--paperi);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 4rem; /* alaosan tila leimalle */
  max-width: 420px;
  transform: rotate(-1.2deg);
  color: var(--muste);
}
.order-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hius);
  color: var(--muste-keski);
  letter-spacing: 0.1em;
}
.order-lines { list-style: none; padding: 0; margin: 0; }
.order-lines li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: end;
  padding: 1.1rem 0 0.35rem;
}
.order-lines .k { color: var(--muste-keski); }
/* tyhjä täyttöviiva: pisteytetty, kuin lomakkeessa */
.order-lines .line {
  border-bottom: 2px dotted var(--hiekka);
  height: 1.1em;
}
.order-foot {
  margin-top: 1.6rem;
  color: var(--muste-keski);
  letter-spacing: 0.06em;
}
@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; }
  .order-card { max-width: 100%; margin-top: 0.5rem; }
}

/* yhteystiedot-sivun sivupalsta: sama ledger vaalealla pohjalla */
.contact-aside { align-self: start; }
.contact-ledger.light { margin-top: 1.25rem; }
.contact-ledger.light li { border-top-color: var(--hius); }
.contact-ledger.light li:last-child { border-bottom-color: var(--hius); }
.contact-ledger.light .k { color: var(--muste-keski); }
.contact-ledger.light .v { color: var(--muste); }
.contact-ledger.light a.v { color: var(--pinkki-muste); }
/* ==========================================================================
   LIIKE — reduced-motion edellä: perustila aina näkyvä; piilotukset vain
   .js-luokan JA no-preference-median alla.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* piilotilat asuvat täällä: reduced-motion- ja no-js-käyttäjille
     sisältö on näkyvissä heti, ilman JS:ää */
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out); }
  html.js .reveal.in-view { opacity: 1; transform: none; }
  html.js .wipe { clip-path: polygon(-2% 0%, -2% 0%, -8% 102%, -8% 102%); transition: clip-path 750ms var(--ease-out); }
  html.js .wipe.in-view { clip-path: polygon(-2% 0%, 108% 0%, 102% 102%, -8% 102%); }
  html.js .stamp { opacity: 0; transform: rotate(-8deg) scale(1.6); transition: opacity 260ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 350ms; }
  html.js .stamp.in-view { opacity: 0.92; transform: rotate(-8deg) scale(1); }
  html.js .ledger .idx::after { opacity: 0; transition: opacity 700ms var(--ease-out); }
  html.js .ledger.in-view .idx::after { opacity: 1; }
  html.js .ledger.in-view li:nth-child(2) .idx::after { transition-delay: 90ms; }
  html.js .ledger.in-view li:nth-child(3) .idx::after { transition-delay: 180ms; }
  html.js .ledger.in-view li:nth-child(4) .idx::after { transition-delay: 270ms; }
  html.js .ledger.in-view li:nth-child(5) .idx::after { transition-delay: 360ms; }
  html.js .ledger.in-view li:nth-child(6) .idx::after { transition-delay: 450ms; }
  html.js .ledger.in-view li:nth-child(7) .idx::after { transition-delay: 540ms; }
  html.js .map-route { clip-path: inset(-5% 105% -5% -5%); }
  html.js .map-route.draw { clip-path: inset(-5% -5% -5% -5%); }

  /* yövalikko: hämärän kautta pimeään + putket syttyvät porrastetusti */
  @keyframes menu-dusk { from { background-color: #171126; } to { background-color: #000; } }
  @media (max-width: 800px) {
    html.js .nav.open .nav-links { animation: menu-dusk 420ms var(--ease-out) both; }
    html.js .nav.open .nav-links > li { animation: ignite 950ms steps(1, end) backwards; }
    html.js .nav.open .nav-links > li:nth-child(2) { animation-delay: 70ms; }
    html.js .nav.open .nav-links > li:nth-child(3) { animation-delay: 140ms; }
    html.js .nav.open .nav-links > li:nth-child(4) { animation-delay: 210ms; }
    html.js .nav.open .nav-links > li:nth-child(5) { animation-delay: 280ms; }
    html.js .nav.open .nav-links > li:nth-child(6) { animation-delay: 350ms; }
    html.js .nav.open .nav-links > li:nth-child(7) { animation-delay: 420ms; }
    html.js .nav.open .nav-links > li.blink { opacity: 0.45; }
  }

  /* tussivedon paljastus — telaveto togglettaa .now-luokkaa, ei viivettä */
  html.js .swipe::before { transform: skewX(-6deg) rotate(-1deg) scaleX(0); transition: transform 450ms var(--ease-out); }
  html.js .swipe.in-view::before, html.js .swipe.now::before { transform: skewX(-6deg) rotate(-1deg) scaleX(1); }

  /* työvedokset nousevat seinälle kiinnitysjärjestyksessä — epätasaisin
     välein (ei metronomia), mutta pari-järjestys säilyy: ennen ennen
     jälkeen. Rotaatio elää figuurissa, paljastus kääreessä. */
  html.js .proofwall > .reveal:nth-child(2) { transition-delay: 130ms; }
  html.js .proofwall > .reveal:nth-child(3) { transition-delay: 190ms; }
  html.js .proofwall > .reveal:nth-child(4) { transition-delay: 320ms; }

  /* reittiviivan piirtopaljastus */
  html.js .map-route { transition: clip-path 1600ms var(--ease-out); }

  /* neonkyltin syttyminen (säilytetty) */
  @keyframes ignite {
    0%   { opacity: 0.25; }
    18%  { opacity: 1; }
    26%  { opacity: 0.3; }
    38%  { opacity: 1; }
    55%  { opacity: 1; }
    62%  { opacity: 0.45; }
    72%  { opacity: 1; }
    100% { opacity: 1; }
  }
  html.js .sign img { opacity: 0.22; transition: opacity 150ms linear; }
  html.js .sign.lit img { opacity: 1; animation: ignite 950ms steps(1, end); }
  /* harvinainen lepovälähdys ajetaan JS:llä (.blink hetkeksi päälle) —
     ei ikuista animaatiota isolla kuvatasolla */
  html.js .sign.lit.blink img { opacity: 0.5; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .lede-xl .w { color: var(--muste); }
}

/* ==========================================================================
   TULOSTE — sivu tulostuu kuin puhdas tarjousliite
   ========================================================================== */
@media print {
  body, .section-contact, .footer, .section-persikka, .section-vaahto {
    background: #fff !important;
    color: #1a1915 !important;
  }
  /* kyltti-JPEG tulostuisi mustana laattana — piiloon */
  .nav, .btn, .nav-toggle, .tape, .stamp, .sign,
  .hero3d-canvas { display: none !important; }
  .hero-paate { height: auto !important; min-height: 0 !important; background: #fff !important; }
  .hero-paate::after { display: none; }
  .hero-type { position: static !important; }
  html.hero--3d .piste { color: #1a1915 !important; }
  .hero-cta { position: static !important; }
  html.js .map-route { clip-path: none !important; }
  h1, h2, h3, .ledger h3, .section-contact h2 { color: #1a1915 !important; }
  .swipe::before { display: none; }
  .ledger .idx { color: #00666e; -webkit-text-stroke: 0; }
  .ledger .idx::after { display: none; }
  .cert { box-shadow: none; border: 1px solid #d9d5cc; }
  .contact-ledger .v, .contact-ledger a.v { color: #00666e !important; }
  .contact-ledger .k, .ledger p, .hero-sub, .lede { color: #4c4a45 !important; }
  html.js .lede-xl .w { color: #1a1915 !important; }
  a { color: #ad1465 !important; }
  html.js .reveal, html.js .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}