/* AIRA / 2026 — v7-leiskan uskollinen verkkototeutus.
   Sisällys: 1 fontit, 2 perusta, 3 yläosa, 4 pääviesti, 5 palvelut,
             6 yhteydenotto, 7 alaosa, 8 mobiili, 9 tulostus.
   AI / ylläpitäjä: älä uudista ilmettä ilman pyyntöä. README kertoo päätökset.
   Vertailuleiska on 1600 × 4600 px; sisältö on x=160…1440 (80 % leveys).
   Desktop-mitat skaalautuvat leveydestä. Tekstikoon alaraja säilyttää luettavuuden.
*/

/* 1. PAIKALLISET FONTIT — sivu ei ota yhteyttä fonttipalveluihin. */
@font-face { font-family: Inter; src: url("assets/fonts/inter-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-extrabold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 2. PERUSTA. Värit poimittu PDF:stä ja logopaketista. */
:root {
  color-scheme: light;
  --ink: #181538;
  --ivory: #f8f4e8;
  --yellow: #f6b962;
  --blue: #96cdf9;
  --gray: #c5c5c5;
  --page-width: 80%;
  --page-max: 1280px;
  --step: clamp(5px, 1vw, 16px);
  --notch: 8px;
  --body-size: clamp(1rem, 1.625vw, 1.625rem);
  --copy-gap: clamp(64px, 8.7vw, 139px);
  --heading-shift: 20px;
  --heading-size: clamp(3.25rem, 11.25vw, 11.25rem);
  --header-height: clamp(150px, 20vw, 320px);
  --h1-block: calc(2.88 * var(--heading-size));
  --heading-center: calc(var(--header-height) + var(--heading-shift) + var(--h1-block) / 2);
  /* Optinen väli: otsikon glyfien alareuna → ingressin yläreuna. */
  --stack-gap: calc(var(--copy-gap) - var(--heading-shift) - 0.124 * var(--heading-size));
}
* { box-sizing: border-box; }
body { position: relative; isolation: isolate; margin: 0; background: var(--ivory); color: var(--ink); font: 400 var(--body-size)/1.38 Inter, Arial, sans-serif; }
.page-width { width: var(--page-width); max-width: var(--page-max); margin-inline: auto; }
h1, h2, h3, p { margin: 0; }
h2, h3 { font-family: "Inter Tight", Inter, Arial, sans-serif; font-weight: 700; line-height: 1.18; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
main:focus { outline: none; }
.skip-link { position: fixed; inset: 12px auto auto 12px; z-index: 10; padding: 12px 20px; background: var(--ink); color: var(--ivory); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* 3. YLÄOSA. Logo leiskan oikeaan reunaan, ei kiinteää navigaatiota. */
.site-header { position: relative; height: var(--header-height); padding-top: clamp(20px, 3vw, 48px); }
.language { display: inline-flex; align-items: center; gap: 12px; }
.language-arrow { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border: 1px solid currentColor; line-height: 1; }
.brand { position: absolute; right: 0; top: clamp(60px, 7.5vw, 120px); width: clamp(136px, 15vw, 240px); }

/* 4. KOKO IKKUNAN LEVYINEN SVG-TAUSTA.
   body on sisältöaluetta leveämpi: 100 % vastaa selaimen käytettävää leveyttä
   ilman 100vw:n mahdollisesti aiheuttamaa vierityspalkin ylitystä.
   SVG on neliö. Sama kuvasuhde + contain näyttää koko kuvan rajaamatta.
   SVG:n keskipiste (ja kiekon kiertoakseli) osuu pystysuunnassa pääotsikon keskelle.
   Animaatio ja prefers-reduced-motion-tuki tulevat suoraan SVG:stä. */
body::before {
  content: "";
  position: absolute;
  top: var(--heading-center);
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  z-index: -1;
  pointer-events: none;
  background: url("assets/images/aira-lava-tausta.svg") center / contain no-repeat;
}
.intro { position: relative; }

h1 { font-family: "Inter Tight", Inter, Arial, sans-serif; font-size: var(--heading-size); font-weight: 700; line-height: .96; letter-spacing: -.025em; }
.intro h1 { position: relative; top: var(--heading-shift); }
h1 span { display: block; }
.intro-copy { margin-top: var(--copy-gap); }
.lead { font-size: clamp(1.125rem, 2vw, 2rem); font-weight: 700; line-height: 1.26; margin-bottom: clamp(24px, 2.4vw, 38px); }

/* 5. PALVELUT. Porrastus tehdään kahdella taustaliu'ulla, ei tekstin
   leikkaavalla clip-pathilla. Näin näppäimistökohdistus pysyy näkyvissä.
   Avaus ja sulku: nopea korkeus- ja nuolianimaatio, ei JavaScriptiä. */
.services { margin-top: var(--stack-gap); }
.service + .service { margin-top: clamp(6px, .5vw, 8px); }
.service { interpolate-size: allow-keywords; }
.service summary {
  --surface: var(--ink);
  display: flex; align-items: center; gap: clamp(16px, 1.7vw, 27px);
  min-height: clamp(48px, 5vw, 80px); padding: 12px clamp(20px, 1.9vw, 30px);
  color: var(--ivory); cursor: pointer; list-style: none;
  background: linear-gradient(var(--surface), var(--surface)) center / calc(100% - 2 * var(--notch)) 100% no-repeat, linear-gradient(var(--surface), var(--surface)) center / 100% calc(100% - 2 * var(--notch)) no-repeat;
}
.service summary::-webkit-details-marker { display: none; }
.service summary::before {
  content: ""; flex: 0 0 .45em; width: .45em; height: .45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}
.service[open] summary::before { transform: translateY(-.15em) rotate(45deg); }
.service summary h2 { font-family: Inter, Arial, sans-serif; font-size: clamp(1.2rem, 2.25vw, 2.25rem); font-weight: 800; letter-spacing: .03em; }
.service summary:focus-visible { outline-color: var(--ink); }
.service summary:hover { --surface: #282447; }
.service--strategy { --surface: var(--yellow); --panel-height: 495px; }
.service--development { --surface: var(--blue); --panel-height: 492px; }
.service--validation { --surface: var(--gray); --panel-height: 431px; }
.service-body {
  margin-top: clamp(6px, .5vw, 8px); padding: clamp(32px, 5vw, 80px);
  min-height: min(var(--panel-height), 31vw);
  background: linear-gradient(var(--surface), var(--surface)) center / calc(100% - 2 * var(--notch)) 100% no-repeat, linear-gradient(var(--surface), var(--surface)) center / 100% calc(100% - 2 * var(--notch)) no-repeat;
}
.service::details-content {
  height: 0;
  overflow: clip;
  opacity: .001;
  transition: height 220ms cubic-bezier(.22, 1, .36, 1), opacity 160ms cubic-bezier(.22, 1, .36, 1), content-visibility 220ms allow-discrete;
}
.service[open]::details-content {
  height: auto;
  opacity: 1;
}
.service h3 { font-size: clamp(1.5rem, 2.625vw, 2.625rem); margin-bottom: clamp(22px, 2.35vw, 38px); }
.service ul { list-style: none; padding: 0; margin: 0; }
.service li + li { margin-top: .52em; }

/* 6. YHTEYDENOTTO. Painike on asiakkaan pyynnöstä vielä disabled. */
.contact { margin-top: var(--stack-gap); }
.contact h2 { font-size: clamp(1.5rem, 2.625vw, 2.625rem); margin-bottom: clamp(28px, 2.65vw, 42px); }
.contact p + p { margin-top: .65em; }
.contact-button {
  --surface: var(--ink); display: inline-block; border: 0; border-radius: 0;
  margin-top: clamp(40px, 5vw, 80px); padding: clamp(16px, 1.5vw, 24px) clamp(28px, 3.75vw, 60px);
  font-weight: 700; font-size: clamp(1rem, 1.875vw, 1.875rem); line-height: 1.2;
  color: var(--ivory); text-decoration: none;
  background: linear-gradient(var(--surface), var(--surface)) center / calc(100% - 2 * var(--notch)) 100% no-repeat, linear-gradient(var(--surface), var(--surface)) center / 100% calc(100% - 2 * var(--notch)) no-repeat;
}
.contact-button:disabled { opacity: 1; cursor: not-allowed; }
.contact-button[href]:hover { --surface: #282447; }

/* 7. ALAOSA. Sisältö määrää korkeuden: ei piilotettua eikä leikattua tekstiä. */
.site-footer { margin-top: calc(var(--stack-gap) * 1.33 + 40px); }
.manifesto { --surface: var(--ink); padding: clamp(40px, 4.4vw, 70px) clamp(32px, 4.65vw, 74px); color: var(--ivory); background: linear-gradient(var(--surface), var(--surface)) center / calc(100% - 2 * var(--notch)) 100% no-repeat, linear-gradient(var(--surface), var(--surface)) center / 100% calc(100% - 2 * var(--notch)) no-repeat; }
.footer-brand {
  width: clamp(160px, 13vw, 210px);
  margin-bottom: calc(clamp(38px, 4.3vw, 69px) * .75);
  transform: translateX(calc(-6.85% - 3px));
}
.manifesto p { font-size: clamp(.8125rem, .875vw, .875rem); line-height: 1.65; }
.manifesto strong { color: var(--yellow); font-weight: 900; }
.copyright { margin-top: clamp(80px, 10vw, 160px); padding-bottom: clamp(36px, 3.5vw, 56px); font-size: clamp(.8125rem, 1.125vw, 1.125rem); }
.copyright small { font-size: inherit; }

/* 8. MOBIILI. Sama sommittelu ja värit, mutta luettavat tekstit ja välit.
   Ei uusia kortteja, kuvia, varjoja, valikkoja tai animaatioita. */
@media (max-width: 700px) {
  :root {
    --page-width: calc(100% - 40px);
    --step: 6px;
    --copy-gap: 58px;
    --heading-size: clamp(2.8rem, 10.8vw, 4.7rem);
    --header-height: 182px;
    --h1-block: calc(3 * var(--heading-size));
  }
  .site-header { padding-top: 24px; }
  .brand { top: 60px; width: 136px; }
  h1 { line-height: 1; letter-spacing: -.03em; }
  .lead { font-size: 1.125rem; line-height: 1.4; }
  .service-body { padding: 30px 24px 36px; min-height: 0; }
  .service li + li { margin-top: 14px; }
  .service h3 { font-size: 1.5rem; margin-bottom: 24px; }
  .contact h2 { font-size: 1.625rem; }
  .manifesto { padding: 36px 24px; }
  .manifesto p { font-size: .9375rem; line-height: 1.65; }
  .copyright { margin-top: 64px; }
}
/* Pitkät sanat saavat katketa vain poikkeuksellisen ahtaassa näkymässä. */
@media (max-width: 380px) {
  .service-body, .contact, .manifesto { overflow-wrap: anywhere; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .service::details-content, .service summary::before { transition: none; }
}
/* 9. TULOSTUS. Värit jäävät selaimen tulostusasetusten päätettäviksi. */
@media print {
  :root { --page-width: 100%; --body-size: 11pt; }
  .skip-link, .language, .contact-button { display: none; }
  .site-header { height: 100px; }
  .brand { top: 0; width: 130px; }
  h1 { font-size: 48pt; }
  body::before { display: none; }
  .service::details-content, .service summary::before { transition: none; }
  .intro-copy, .services, .contact, .site-footer, .copyright { margin-top: 30px; }
  .service-body { min-height: 0; padding: 24px; }
  .service { break-inside: avoid; }
}