/* aj-asunnot-ds — design tokens
 * Source of truth: /mnt/k/Arkisto/Isannointi/AJ-Asunnot/verkkosivut-webflow-2026-08-24/TYYLITOKENIT.md
 * (Webflow :root primitives + Playwright getComputedStyle, 1440x900, 2026-08-24).
 * Every value below is measured from the live site, not invented.
 */

/* Fontit isannoidaan itse: Google Fonts -lataus valittaisi kavijan IP-osoitteen
 * Googlelle jokaisella sivulatauksella. Tiedostot ovat src/fonts (latin-osajoukko,
 * vain kaytetyt painot) ja lisenssi on SIL Open Font License 1.1, ks. saman
 * hakemiston OFL-tiedostot. Polut ovat suhteellisia tahan tyylitiedostoon:
 * build kopioi fontit dist/fonts ja render.mjs sielta teeman assets/fonts.
 */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/urbanist-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/poppins-300-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
}

:root {
  /* ── Brand: tunnuksen vihrea (H 157,1 OKLCH, mitattu tunnuksesta #2b533c) ──
   * Koko tumma portaikko on johdettu tunnuksen savysta: sama savy, eri kirkkaus.
   * Aiemmat arvot (#090d0c, #182420, #1e2d28, #e8eae9) olivat Webflow-perintoa
   * savylla 172 eika niilla ollut yhteytta tunnukseen (Eetun paatos 21.10.2026).
   * Kirkkaudet pidettiin ennallaan, joten jokainen aiemmin mitattu kontrasti
   * sailyy: valkoinen teksti --brand-800:lla on 15,85:1 ja --brand-700:lla 14,25:1.
   */
  --brand-900: #040f08; /* oklch(0,154 0,025 157,1): tummin, varjostimet */
  --brand-800: #0f2719; /* oklch(0,248 0,040 157,1): footerin pinta */
  --brand-700: #143020; /* oklch(0,282 0,045 157,1): PAAPINTA (napit, otsikot, tummat paneelit) */
  --brand-100: #e5ebe7; /* oklch(0,935 0,009 157,1): vaalein */
  --brand-logo: #2b533c;     /* tunnuksen vihrea, mitattu toimitetusta vektorista */

  /* ── Korostus: sivustolla on YKSI vihrea, tunnuksen oma ──────────── */
  /* Entinen kirkas minttu (--accent ja --accent-dark, poistettu) oli
   * Webflow-perintoa: se johdettiin tunnuksen savyyn mutta jai eri vihreaksi,
   * ja metsanvihrean tunnuksen vieressa silma luki kaksi vihreaa. Eetun paatos
   * 21.10.2026: korostusvari pois, paapainikkeet tunnuksen vihreaksi. Korostus
   * on nyt tunnuksen oma vari eika erillista vaaleaa korostusperhetta ole.
   * Vaalealla pinnalla: 8,73:1 valkoista vasten, ja valkoinen teksti sen
   * paalla sama 8,73:1. Tummalla pinnalla sama vihrea olisi vain 1,82:1
   * --brand-800:aa vasten, joten siella --accent vaihtuu valkoiseen
   * (.ajd-on-dark, styles.css) eika tummia pintoja varten tarvita omaa savya.
   */
  --accent: var(--brand-logo);
  --accent-hover: var(--brand-700); /* tayttopainikkeen tummeneva hover, valkoinen teksti 14,25:1 */
  /* Sektion savytys on lahes valkoinen (sama savy 157,1), ei toinen vihrea:
   * se erottaa sektiot toisistaan eika kilpaile tunnuksen kanssa. Jaa voimaan. */
  --accent-tint: #f4fdf7;    /* oklch(0,986 0,012 157,1) */

  /* ── Neutrals ────────────────────────────────────────────────────── */
  --neutral-000: #ffffff;
  --neutral-50: #f2f2f2;  /* cards, input fill */
  --neutral-500: #7f7f7f;
  --neutral-700: #4c4c4c; /* secondary text */
  --neutral-1000: #000000; /* body text */

  /* ── Semantic ────────────────────────────────────────────────────── */
  --bg: var(--neutral-000);
  --surface: var(--neutral-50);
  --surface-dark: var(--brand-700);
  --fg1: var(--neutral-1000);
  --fg2: var(--neutral-700);
  --fg-on-dark: var(--neutral-000);
  --fg2-on-dark: #ffffffcc;
  --heading-color: var(--brand-700);
  --border: #868e88; /* oklch(0,600 0,012 157,1): 3,37:1 valkoisella, 3,01:1 --surfacella.
                        Entinen #00000026 oli 1,43:1 eika tayttanyt 3:1 ei-tekstiminimia. */
  --divider-on-dark: #ffffff26;
  --input-bg: #0000000d;      /* rgba(0,0,0,.05) on light */
  --input-bg-on-dark: #ffffff14;
  --overlay: #040f08cc;       /* hero image scrim (strong side) */
  --overlay-soft: #040f0840;  /* hero image scrim (fade-out side) */
  --scrim-clear: #040f0800;   /* transparent stop of a brand scrim gradient */
  --danger: #b3261e;
  --danger-on-dark: #ffb4ab;
  --focus-ring: var(--accent);
  --shadow-nav: 0 2px 20px -2px #00000014;

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-heading: Urbanist, sans-serif;
  --font-body: Poppins, sans-serif;
  --fw-heading: 500;
  --fw-body: 400;
  --fw-light: 300;

  --fs-h1: 40px;      --lh-h1: 56px;
  --fs-h2: 40px;      --lh-h2: 56px;
  --fs-h3: 28px;      --lh-h3: 36.4px;
  --fs-lead: 18px;    --lh-lead: 30.6px;
  --fs-body: 16px;    --lh-body: 24px;
  --fs-label: 14.4px; --lh-label: 21.6px;
  --fs-sm: 14px;      --lh-sm: 21px;

  /* ── Spacing (4px base) ──────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px;

  --container-max: 1280px;
  --container-pad: 16px; /* measured 8px; raised for mobile legibility (see NOTES.md) */
  --nav-pad-x: 72px;
  --section-pt: 80px;
  --section-pb: 112px;

  /* ── Shape ───────────────────────────────────────────────────────── */
  --radius: 0px;    /* the whole site is square-cornered */
  --divider: 1px;
  --btn-pad-y: 9.6px;
  --btn-pad-x: 20px;
  --input-pad-y: 8px;
  --input-pad-x: 12px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
}
/* aj-asunnot-ds — component classes.
 * Deliberately NO page-chrome resets (no html/body background, no #root rules):
 * a design system must not force a page surface. See .design-sync/NOTES.md.
 */

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

.ajd-section {
  position: relative;
  padding-top: var(--section-pt);
  padding-bottom: var(--section-pb);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ajd-section--light { background: var(--bg); color: var(--fg1); }
.ajd-section--tint  { background: var(--accent-tint); color: var(--fg1); }
.ajd-section--dark  { background: var(--surface-dark); color: var(--fg-on-dark); }
/* Ankkurilinkki: tarttuva navi ei saa peittaa kohdelohkon alkua. */
.ajd-section[id] { scroll-margin-top: var(--sp-9); }

/* Wave dividers: the site separates surfaces with a soft wave, never a line. */
.ajd-wave {
  display: block;
  width: 100%;
  height: clamp(28px, 4vw, 56px);
  position: absolute;
  left: 0;
  pointer-events: none;
}
.ajd-wave--top { top: 0; }
.ajd-wave--bottom { bottom: 0; }

/* ── Type ───────────────────────────────────────────────────────────── */
.ajd-h1, .ajd-h2, .ajd-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  margin: 0;
}
.ajd-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--heading-color); }
.ajd-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--heading-color); }
.ajd-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg1); }
.ajd-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg2);
  margin: 0;
}
.ajd-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  margin: 0;
}
.ajd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--fg2);
  margin: 0;
}
/* Pitka luettava teksti (artikkeli, tietosuojaseloste). Esittelysivuilla teksti
 * on lyhyita lohkoja, mutta nailla sivuilla luetaan yhtajaksoisesti: mitta
 * rajataan noin 66 merkkiin rivilla, riviväli avataan 1,75:een ja valiotsikko
 * saa enemman tilaa ylleen kuin alleen, jotta se kuuluu seuraavaan lukuun.
 * Lihavointi on 500 eika 700: vain painot 300/400/500 ladataan, joten 700
 * syntetisoitaisiin selaimessa. */
.ajd-prose {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--fg1);
  max-width: 61ch; /* mitattu elavalta sivulta: mediaani 66 merkkia rivilla */
}
.ajd-prose > * { margin: 0; }
.ajd-prose > * + * { margin-top: var(--sp-5); }
.ajd-prose > * + h2,
.ajd-prose > * + h3 { margin-top: var(--sp-8); }
.ajd-prose strong { font-weight: var(--fw-heading); }
.ajd-prose ul { padding-left: 1.3em; }
.ajd-prose li + li { margin-top: var(--sp-2); }
.ajd-prose a { color: var(--accent); }

/* On a dark surface the whole type stack flips to light. */
.ajd-on-dark .ajd-h1,
.ajd-on-dark .ajd-h2,
.ajd-on-dark .ajd-h3 { color: var(--fg-on-dark); }
.ajd-on-dark .ajd-lead,
.ajd-on-dark .ajd-body,
.ajd-on-dark .ajd-eyebrow { color: var(--fg2-on-dark); }

.ajd-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.ajd-head--center { align-items: center; text-align: center; }
.ajd-head--center .ajd-lead { max-width: 640px; }

/* ── Button ─────────────────────────────────────────────────────────── */
.ajd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--divider) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ajd-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ajd-btn--primary { background: var(--accent); color: var(--fg-on-dark); }
.ajd-btn--primary:hover { background: var(--accent-hover); }
/* Tummalla pinnalla tunnuksen vihrea ei erotu taustastaan (1,82:1), joten
   tayttopainike kaantyy valkoiseksi ja teksti tummaksi. Entinen kind="accent"
   oli juuri tama rooli omana varinaan; nyt rooli hoituu pinnan mukaan. */
.ajd-on-dark .ajd-btn--primary { color: var(--brand-700); }
.ajd-on-dark .ajd-btn--primary:hover { background: var(--brand-100); }
.ajd-btn--outline {
  background: transparent;
  color: var(--fg1);
  border-color: var(--fg1);
}
.ajd-btn--outline:hover { background: var(--fg1); color: var(--bg); }
.ajd-on-dark .ajd-btn--outline { color: var(--fg-on-dark); border-color: var(--fg-on-dark); }
.ajd-on-dark .ajd-btn--outline:hover { background: var(--fg-on-dark); color: var(--brand-700); }
.ajd-btn--link {
  background: transparent;
  padding: 0;
  border-color: transparent;
  color: var(--fg1);
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}
.ajd-btn--link:hover { color: var(--accent); }
.ajd-on-dark .ajd-btn--link { color: var(--fg-on-dark); }
.ajd-btn--full { width: 100%; }
.ajd-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Tag ────────────────────────────────────────────────────────────── */
.ajd-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--fg-on-dark);
}
.ajd-on-dark .ajd-tag--accent { color: var(--brand-700); }
.ajd-tag--dark { background: var(--brand-700); color: var(--fg-on-dark); }

/* ── Icon ───────────────────────────────────────────────────────────── */
.ajd-icon { display: inline-block; vertical-align: middle; fill: currentColor; flex: none; }

/* ── Logo ───────────────────────────────────────────────────────────── */
/* Tunnus on vektoriartwork (logoArt.ts) joka tayttyy currentColorilla: vaalealla
   pinnalla brandin vihrea, tummalla valkoinen knockout. Mitattu kontrasti:
   vihrea #2b533c valkoisella 8,73:1, mutta footerin tummalla pinnalla vain
   1,82:1, joten tummalla vaihdetaan vari eika artworkia. Valkoinen footerin
   pinnalla on 15,85:1. Mitat skaalautuvat kaikki --ajd-logo-sizesta.

   KOKO: tunnuksen alatunniste "ISANNOINTI & PROJEKTIJOHTO" on luettava vasta
   kun sanamerkkilohko on vahintaan 36 px korkea (brandiohjeiston nayttotesti:
   36 px antaa 36,5 % taytta mustetta, 32 px vain 29,6 % eli harmaata sumua).
   Vaakalukossa sanamerkkilohko on 0,62 x --ajd-logo-size, joten kuvamerkin
   minimi on 59 px (0,62 x 59 = 36,58 px; brandiohjeiston 58 px antaa 35,96 px
   eli jaa hiuksenhienosti rajan alle). Pystylukossa kerroin on 0,34, joten
   minimi on 106 px (0,34 x 106 = 36,04 px). Naita ei pienenneta ilman
   alatunnisteetonta artwork-versiota. */
.ajd-logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ajd-logo-size) * 0.26);
  text-decoration: none;
  color: var(--accent);
  --ajd-logo-size: 59px;
}
.ajd-logo svg { display: block; fill: currentColor; flex: none; width: auto; }
.ajd-logo-mark { height: var(--ajd-logo-size); }
/* Vaakalukossa sanamerkki on kuvamerkkia matalampi, jotta "AJ ASUNNOT" jaa
   luettavaksi (x-korkeus n. 0,36 x sanamerkin korkeus). */
.ajd-logo-wordmark { height: calc(var(--ajd-logo-size) * 0.62); }
/* Pystylukko = toimitetun artworkin mittasuhteet: sanamerkin korkeus 0,340 ja
   osien vali 0,056 x kuvamerkin korkeus. */
/* align-self estaa lukkoa venymasta footer-sarakkeen levyiseksi (klikkialue ja
   vasen reuna linjaan tagline-tekstin kanssa). */
.ajd-logo--stacked {
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  gap: calc(var(--ajd-logo-size) * 0.056);
}
.ajd-logo--stacked .ajd-logo-wordmark { height: calc(var(--ajd-logo-size) * 0.34); }

/* Fokusrengas on --accent eli tunnuksen vihrea, 8,73:1 valkoisella. Tummalla
   pinnalla sama vihrea olisi vain 1,82:1 eli alle 3:1 ei-tekstirajan, joten
   siella koko korostus vaihtuu valkoiseen (15,85:1 --brand-800:lla). Tama yksi
   saanto kattaa ikonit, linkkikorostukset ja fokusrenkaan kerralla. */
.ajd-on-dark { --accent: var(--fg-on-dark); --focus-ring: var(--fg-on-dark); }

/* ── Nav ────────────────────────────────────────────────────────────── */
/* Ylapalkki on sama tumma vihrea kuin footer ja CTA-banneri (Eetun paatos
   21.10.2026): kirkas korostuspalkki luki tunnuksen rinnalla toisena vihreana. */
.ajd-topbar {
  background: var(--brand-700);
  color: var(--fg-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.ajd-topbar .wrap {
  max-width: none;
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-5);
  padding-block: var(--sp-1);
  padding-inline: var(--container-pad);
}
.ajd-topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.ajd-topbar a:hover { text-decoration: underline; }

.ajd-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  box-shadow: var(--shadow-nav);
}
.ajd-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-2);
  padding-inline: var(--container-pad);
}
.ajd-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ajd-navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ajd-navlink:hover { color: var(--accent); }
.ajd-navlink[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.ajd-nav-item { position: relative; }
.ajd-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: var(--sp-2) 0;
  list-style: none;
  background: var(--bg);
  box-shadow: var(--shadow-nav);
  border-radius: var(--radius);
}
.ajd-nav-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg1);
  text-decoration: none;
}
.ajd-nav-menu a:hover { background: var(--surface); }
/* Vaakarivin tilantarve on MITATTU elavalta sivustolta Poppins ladattuna.
   Tunnus kasvoi 40 -> 59px (alatunnisteen luettavuus) eli levisi 227 -> 334px,
   ja taysi tiheys (linkkivalit 24px, reunus 2x72px) vaatii nyt 1462px entisen
   1361px:n sijaan. Taysi tiheys palaa siksi vasta 1500px:sta.
   Valissa rivi kevennetaan: linkkivalit 12px, rivin valit 16px ja reunus
   kasvaa tilan mukana 16px:sta 72px:aan. Reunuksen alaraja on sama kuin
   sisaltosarakkeen --container-pad, joten kapeimmillaan tunnus linjautuu
   sivun sisaltoon. Kevennetty rivi vaatii 1280px:lla 1238px eli pelivaraa
   jaa 42px, ja pelivara kasvaa leveyden mukana. Alle 1280px rivi ei mahdu
   kevennettynakaan, joten valikko menee nappiin: ylivuotoa ei piiloteta
   eika sisaltoa leikata. */
@media (min-width: 1280px) {
  .ajd-nav-inner, .ajd-topbar .wrap {
    padding-inline: clamp(var(--sp-4), calc(var(--sp-4) + (100vw - 1280px) * 0.2), var(--nav-pad-x));
  }
  .ajd-nav-inner { gap: var(--sp-4); }
  .ajd-nav-links { gap: var(--sp-3); }
}
@media (min-width: 1500px) {
  .ajd-nav-inner, .ajd-nav-links { gap: var(--sp-5); }
}
/* Toimintakehote kevennetaan kunnes rivilla on tilaa taydelle tiheydelle. */
@media (max-width: 1499px) {
  .ajd-nav-inner .ajd-btn--primary { padding-inline: var(--sp-3); font-size: 14px; }
}
.ajd-nav-toggle { display: none; }
@media (max-width: 1279px) {
  .ajd-nav-toggle { display: inline-flex; }
  .ajd-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--container-pad) var(--sp-5);
    background: var(--bg);
    box-shadow: var(--shadow-nav);
  }
  .ajd-nav-links[data-open="true"] { display: flex; }
  /* Logo + CTA + valikkonappi eivat mahtuneet 390px:aan (mitattu ylivuoto 3px). */
  .ajd-nav-inner { gap: var(--sp-3); }
  .ajd-logo { min-width: 0; }
  .ajd-nav-menu { position: static; box-shadow: none; min-width: 0; padding-left: var(--sp-4); }
}
@media (max-width: 639px) {
  /* Kapealla naytolla logo + CTA + valikkonappi ovat ahtaalla. Kuvamerkki
     kantaa tunnuksen yksin, joten sanamerkki pudotetaan; linkin aria-label
     pitaa tekstivasteen ennallaan. Kun sanamerkkia ei ole, 36 px:n
     alatunnisteraja ei pade vaan rajoittava mitta on kuvamerkin oma
     nayttominimi 32 px (brandiohjeisto). 34 px jattaa siihen pelivaraa ja
     320px:n riville 5 px (36 px:lla pelivaraa jai vain 1,1 px).
     Raja oli 575px kun tunnus oli 40px leveydeltaan 227px; 59px:n tunnus
     tekee rivista noin 584px leveydeltaan, joten sanamerkki on pudotettava jo
     640px:n alapuolella (mitattu: 576px olisi vuotanut yli). */
  .ajd-nav .ajd-logo-wordmark { display: none; }
  .ajd-nav .ajd-logo-mark { height: 34px; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.ajd-hero {
  position: relative;
  background: var(--brand-700);
  background-size: cover;
  background-position: center;
  color: var(--fg-on-dark);
  isolation: isolate;
}
.ajd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--overlay) 0%, var(--overlay) 45%, var(--overlay-soft) 100%);
  z-index: -1;
}
.ajd-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 640px;
  padding-block: var(--section-pt) calc(var(--section-pb) + 24px);
}
.ajd-hero--compact .ajd-hero-body { padding-block: var(--sp-8) calc(var(--sp-9) + 24px); }
.ajd-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

/* ── Brand chooser (etusivun brandivalinta) ─────────────────────────── */
/* Kaksi BrandPanelia rinnakkain; alle 992px ne pinoutuvat allekkain. */
.ajd-brandsplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .ajd-brandsplit { grid-template-columns: minmax(0, 1fr); } }

/* Pinta ja tummennus tulevat .ajd-herolta; tassa vain paneelin mitat. */
.ajd-brandpanel { display: flex; align-items: center; min-height: 420px; padding-inline: var(--sp-5); }
.ajd-brandpanel .ajd-hero-body { max-width: 560px; padding-block: var(--sp-8); }
.ajd-brandpanel-place {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}
.ajd-brandpanel-place .ajd-icon { color: var(--accent); }
@media (min-width: 992px) {
  /* Nostetaan paneeli naytontayteiseksi navin alapuolella, mutta ei rajatta. */
  .ajd-brandpanel { min-height: clamp(560px, calc(100vh - 148px), 900px); padding-inline: var(--sp-7); }
  .ajd-brandpanel .ajd-hero-body { padding-block: var(--sp-9); }
}

/* ── StatBlock ──────────────────────────────────────────────────────── */
.ajd-stat { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ajd-stat-icon { color: var(--accent); margin-top: 2px; }
.ajd-stat-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.ajd-stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  opacity: 0.85;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.ajd-grid { display: grid; gap: var(--sp-5); }
.ajd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ajd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .ajd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ajd-grid--2, .ajd-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.ajd-service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--brand-700);
  background-size: cover;
  background-position: center;
  color: var(--fg-on-dark);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
}
.ajd-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim-clear) 35%, var(--brand-900) 100%);
  z-index: -1;
}
.ajd-service .ajd-h3 { color: var(--fg-on-dark); }
.ajd-service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--fg-on-dark);
}
.ajd-service:hover .ajd-service-link { text-decoration: underline; }

.ajd-ref {
  display: flex;
  flex-direction: column;
  border: var(--divider) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.ajd-ref-media { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.ajd-ref-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.ajd-ref-foot { margin-top: auto; padding: 0 var(--sp-5) var(--sp-5); }

.ajd-feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.ajd-feature-icon { color: var(--accent); }
.ajd-feature-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--heading-color);
  margin: 0;
}
.ajd-on-dark .ajd-feature-title { color: var(--fg-on-dark); }

/* ── PersonBlock ────────────────────────────────────────────────────── */
.ajd-person { display: flex; flex-direction: column; gap: var(--sp-3); }
.ajd-person--row { flex-direction: row; align-items: flex-start; gap: var(--sp-5); }
.ajd-person-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}
.ajd-person--row .ajd-person-photo { width: 184px; flex: none; }
/* Tekstisarake saa kutistua: ilman tata pitka sahkopostiosoite maaraa leveyden
   ja rivi vuotaa yli kapealla naytolla (mitattu 390px: 475px). */
.ajd-person--row > div { min-width: 0; }
.ajd-person-contact a { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .ajd-person--row { flex-direction: column; }
  .ajd-person--row .ajd-person-photo { width: 100%; }
}
.ajd-person-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0;
}
.ajd-on-dark .ajd-person-name { color: var(--fg-on-dark); }
.ajd-person-role { font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg2); margin: 0; }
.ajd-on-dark .ajd-person-role { color: var(--fg2-on-dark); }
.ajd-person-contact { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.ajd-person-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: inherit;
  text-decoration: none;
}
.ajd-person-contact a:hover { text-decoration: underline; }
.ajd-person-contact .ajd-icon { color: var(--accent); }

/* ── Form ───────────────────────────────────────────────────────────── */
.ajd-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ajd-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ajd-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: inherit;
}
.ajd-req { color: var(--accent); }
.ajd-input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg1);
  background: var(--input-bg);
  border: 0;
  border-radius: var(--radius);
  padding: var(--input-pad-y) var(--input-pad-x);
  width: 100%;
  box-sizing: border-box;
}
.ajd-input::placeholder { color: var(--neutral-500); }
.ajd-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
textarea.ajd-input { min-height: 120px; resize: vertical; }
.ajd-on-dark .ajd-input { background: var(--input-bg-on-dark); color: var(--fg-on-dark); }
.ajd-on-dark .ajd-input::placeholder { color: var(--fg2-on-dark); }
.ajd-form-note { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--fg2); margin: 0; }
.ajd-on-dark .ajd-form-note { color: var(--fg2-on-dark); }
.ajd-form-error { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--danger); margin: 0; }
.ajd-on-dark .ajd-form-error { color: var(--danger-on-dark); }
/* Lomakkeen tilalaatikot. Palvelin renderoi ne uudelleenohjauksen jalkeen, ja
   fragmentti #yhteydenotto-tila vie kavijan niihin ilman JavaScriptia. Vari ei
   ole ainoa erottava tekija: molemmilla on oma teksti ja oma reunaviiva. */
.ajd-form-ok,
.ajd-form-virhe {
  border-left: 3px solid var(--accent);
  padding: var(--sp-4) var(--sp-5);
  background: var(--input-bg);
  margin-bottom: var(--sp-5);
}
.ajd-form-virhe { border-left-color: var(--danger); }
.ajd-form-virhe a { color: inherit; }
.ajd-form-ok:focus-visible,
.ajd-form-virhe:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Toimialuekartta (CoverageMap) ──────────────────────────────────── */
.ajd-coverage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
}
/* Kartta on pystysuuntainen (noin 1:2,4). Leveys rajataan, jotta korkeus pysyy
   kurissa myos leveassa sarakkeessa ja nimilaput pysyvat luettavina. */
.ajd-coverage-svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}
.ajd-coverage-label {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
}
.ajd-coverage-eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ajd-coverage-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--fg2);
  text-align: center;
  max-width: 34em;
}

/* ── CTA banner ─────────────────────────────────────────────────────── */
.ajd-cta {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: var(--sp-7);
  border-radius: var(--radius);
  background: var(--surface-dark);
  color: var(--fg-on-dark);
}
.ajd-cta--single { grid-template-columns: minmax(0, 1fr); }
.ajd-cta-body { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 991px) { .ajd-cta { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); } }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ajd-footer {
  position: relative;
  background: var(--brand-800);
  color: var(--fg-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding-top: var(--section-pt);
}
.ajd-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}
.ajd-footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 260px; max-width: 320px; }
.ajd-footer-col { flex: 1 1 150px; }
.ajd-footer-tagline { margin: 0; font-size: var(--fs-body); color: var(--fg-on-dark); }
.ajd-footer-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.ajd-footer-col h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  color: var(--fg-on-dark);
}
.ajd-footer-col a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2-on-dark);
  text-decoration: none;
}
.ajd-footer-col a:hover { color: var(--fg-on-dark); }
.ajd-footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: space-between;
  align-items: center;
  border-top: var(--divider) solid var(--divider-on-dark);
  padding-block: var(--sp-5);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.ajd-footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.ajd-footer-legal a { color: var(--fg-on-dark); text-decoration: underline; }

/* ── Responsive type ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ajd-h1 { font-size: 30px; line-height: 40px; }
  .ajd-h2 { font-size: 28px; line-height: 38px; }
  .ajd-h3 { font-size: 22px; line-height: 30px; }
  .ajd-section { padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
}

@media (prefers-reduced-motion: reduce) {
  .ajd-btn, .ajd-navlink { transition: none; }
}