/* =========================================================
   COMPONENTS — design systemin rakennuspalikat
   ========================================================= */

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.logo:hover {
  color: inherit;
}

.logo__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  transition: transform var(--dur-slow) var(--ease-spring);
}

.logo:hover .logo__mark {
  transform: rotate(-6deg) scale(1.06);
}

.logo__text {
  display: grid;
  line-height: 1;
}

/* Sanamerkki: "Hillo" tummana, "Media" punaisena — brändikansion mukaan.
   Ei versaaleja eikä väljää välistystä; kirjoitusasu on osa tunnusta. */
.logo__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--text);
}

.logo__accent {
  color: var(--brand-red);
}

.logo__tagline {
  margin-block-start: 4px;
  font-size: 0.5625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- Latausnäyttö ---------- */

/* Piilossa oletuksena. Näytetään vain jos JS on käytössä — muuten
   ilman JS:ää kävijä jäisi tuijottamaan peittoa ikuisesti.
   .loader-skip asetetaan headissa, jos sama istunto on jo nähnyt sen. */
.loader {
  display: none;
}

html:not(.no-js):not(.loader-skip) .loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--neutral-0);
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
}

/* Sanamerkki kahtena päällekkäisenä kappaleena: haalea pohja ja
   punainen täyttö, joka paljastuu vasemmalta oikealle. */
.loader__mark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.loader__mark-base {
  color: var(--neutral-200);
}

/* <i> on rakenteellinen kahva "Media"-osalle, ei kursiivi.
   Nollaus on tehtävä molemmille kopioille. */
.loader__mark i {
  font-style: normal;
}

.loader__mark-fill {
  position: absolute;
  inset: 0;
  color: var(--neutral-900);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.loader__mark-fill i {
  font-style: normal;
  color: var(--brand-red);
}

.loader__text {
  position: relative;
  height: 1.2em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.loader__text span {
  position: absolute;
  inset-inline: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.loader__text span.is-active {
  opacity: 1;
  transform: none;
}

.loader__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--neutral-100);
  overflow: hidden;
}

.loader__bar span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-brand);
  will-change: transform;
}

/* Vieritys lukkoon latauksen ajaksi. Luokka asetetaan headissa
   (ennen piirtoa) ja poistetaan JS:ssä, kun näyttö on suljettu. */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* Ilman animaatioita: näytetään hetki ja pois. Ei liikettä. */
@media (prefers-reduced-motion: reduce) {
  .loader__mark-fill {
    clip-path: none !important;
  }

  .loader__bar {
    display: none;
  }
}

/* ---------- Tumman taustan käännöt ---------- */

/* Kun hero on videon päällä, koko osion väritys kääntyy vaaleaksi.
   Nämä ovat pakollisia: sivuston oletusteksti on tummaa, ja se
   katoaisi tummalle videolle. */
.hero--media .hero__title {
  color: var(--neutral-0);
}

.hero--media .hero__lead {
  color: rgba(255, 255, 255, 0.88);
}

.hero--media .hero__assurance {
  color: rgba(255, 255, 255, 0.82);
}

.hero--media .hero__assurance li::before {
  background: var(--red-300);
}

/* Brändipunainen on liian tumma mustaa vasten (2,5:1).
   Vaalennetaan korostukseen. */
.hero--media .eyebrow {
  color: var(--red-200);
}

.hero--media .btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--neutral-0);
}

/* Herossa toissijaisen napin teksti on VALKOINEN, joten vaalea
   hillotäyttö veisi kontrastin. Täyttö on siksi kirkastuvaa lasia. */
.hero--media .btn--secondary::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.18));
}

.hero--media .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--neutral-0);
}

.hero--media .stats {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
}

.hero--media .stat {
  background: rgba(14, 14, 14, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero--media .stat:hover {
  background: rgba(14, 14, 14, 0.68);
}

.hero--media .stat__value {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--neutral-0);
}

.hero--media .stat__label {
  color: rgba(255, 255, 255, 0.78);
}

/* Header videon päällä: tunnus ja navigaatio vaaleiksi.
   Luokka poistetaan JS:ssä heti kun header kiinnittyy. */
.header--invert:not(.is-stuck) .logo__name,
.header--invert:not(.is-stuck) .nav-link:hover,
.header--invert:not(.is-stuck) .nav-link[aria-current="page"] {
  color: var(--neutral-0);
}

/* Logomerkin varsi on fill="currentColor" symbolin sisällä. <use> luo
   shadow-puun, johon ulkoiset valitsimet EIVÄT yllä — siksi väri on
   asetettava <svg>-elementille, ei rect-elementille. */
.header--invert:not(.is-stuck) .logo__mark {
  color: var(--neutral-0);
}

/* Tunnuksen punainen osa vaalenee videon päällä. Brändipunainen
   #d72638 antaa tummalla vain 2,90:1 kapealla näytöllä (mitattu
   390 px), eli alle ison tekstin 3:1-rajan. Logotyyppi on WCAG 1.4.3:n
   mukaan vapautettu kontrastivaatimuksesta, mutta tässä ei ole syytä
   nojata poikkeukseen: --red-400 antaa 5,29:1 eikä muuta ilmettä
   käytännössä lainkaan.

   Tämä EI ole ristiriidassa sen säännön kanssa, ettei tekstivärejä
   vaalenneta — se koskee vaaleaa pohjaa, jolla vaalentaminen vie
   kontrastia. Tummalla pohjalla se tuo sitä. */
.header--invert:not(.is-stuck) .logo__accent {
  color: var(--red-400);
}

.header--invert:not(.is-stuck) .logo__tagline,
.header--invert:not(.is-stuck) .nav-link {
  color: rgba(255, 255, 255, 0.78);
}

.header--invert:not(.is-stuck) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.header--invert:not(.is-stuck) .nav-toggle__bar {
  background: var(--neutral-0);
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.section__head--center .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ---------- Napit ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 58px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  /* Magneettinen siirtymä tulee erillisenä translate-ominaisuutena, ei
     transformina. Syy: transform on jo varattu hoverin nostolle ja
     :activen painallukselle — jos magneetti kirjoittaisi samaan
     ominaisuuteen, se kumoaisi ne. translate ja transform sommitellaan
     erikseen, joten molemmat toimivat yhtä aikaa. JS asettaa --mx/--my. */
  translate: var(--mx, 0) var(--my, 0);
  transition:
    transform var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* Magneetin ollessa aktiivinen siirtymä pois: JS päivittää arvoa joka
   ruudulla, ja 240 ms siirtymä tekisi siitä laahaavan. */
.btn.on-magneetti {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

/* Hillotäyttö: pinta nousee napin pohjalta hoverissa. Elliptinen
   yläkulma tekee reunasta nestemäisen eikä suoran viivan.

   Jokainen nappityyppi täyttyy OMALLA sävyllään niin, että sen oma
   tekstiväri pysyy luettavana koko ajan. Siksi tässä ei ole hetkeäkään,
   jossa teksti olisi väärän värisen pinnan päällä — kontrasti ei riipu
   animaation vaiheesta. Mitatut lopputilat:
     .btn--primary        valkoinen / --red-700     8,59:1
     .btn--secondary      --text / --red-100       15,29:1
     hero .btn--secondary valkoinen / lasi           7,26:1 */
.btn::before {
  content: "";
  position: absolute;
  inset-inline: -2px;
  inset-block-end: 0;
  height: 130%;
  /* Negatiivinen + .btn:n isolation: isolate. Tekstiä EI voi nostaa
     z-indexillä, koska napin nimi on paljas tekstisolmu eikä elementti
     — se jäisi täytön alle. Pinoamiskonteksti hoitaa saman ilman että
     jokaiseen nappiin pitäisi lisätä kuori. Sama ratkaisu kuin
     .section__bg:llä. */
  z-index: -1;
  border-start-start-radius: 50% 26px;
  border-start-end-radius: 50% 26px;
  transform: translateY(101%);
  transition: transform 420ms var(--ease-out);
  pointer-events: none;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

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

.btn__icon {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__icon {
  animation: nuoli-lapi 460ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__icon {
    animation: none;
  }
}

/* Ensisijainen — Hillo Red */
.btn--primary {
  background: var(--grad-brand);
  color: var(--accent-ink);
  box-shadow: var(--glow-red);
}

.btn--primary::before {
  background: linear-gradient(180deg, var(--red-600), var(--red-700));
}

.btn--primary:hover {
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: var(--glow-red-strong), var(--shadow-3);
}

/* Toissijainen — ääriviiva */
.btn--secondary {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* VAALEA hillo, ei täysi punainen: napin teksti on tumma --text, ja
   täysi punainen pudottaisi sen alle AA-rajan. --red-100 antaa 15,29:1. */
.btn--secondary::before {
  background: linear-gradient(180deg, var(--red-100), var(--red-200));
}

.btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-brand);
  color: var(--text);
  transform: translateY(-2px);
}

/* Hillitty — pelkkä teksti */
.btn--ghost {
  min-height: 44px;
  padding-inline: var(--sp-2);
  color: var(--text-muted);
}

.btn--ghost:hover {
  color: var(--accent-text);
}

.btn--sm {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* Ripple — JS lisää --x/--y */
.btn__ripple {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  animation: ripple 620ms var(--ease-out) forwards;
}

/* ---------- Navigaatiolinkki ---------- */

.nav-link {
  position: relative;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-red);
  transition: width var(--dur-base) var(--ease-out);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--text);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

/* ---------- Kortti (perusvariantti) ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand-soft);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand);
  background: var(--surface-hover);
}

.card:hover::before {
  opacity: 1;
}

.card > * {
  position: relative;
  z-index: var(--z-base);
}

/* ---------- Tilastot ---------- */

.stats {
  /* Pysyy heron taustakuvan yläpuolella. */
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

@media (min-width: 720px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* DOM-järjestys on dt → dd (saavutettavuus). Visuaalinen järjestys
   käännetään, jotta luku näkyy ensin. */
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) var(--sp-5);
  background: var(--bg);
  transition: background var(--dur-slow) var(--ease-out);
}

.stat:hover {
  background: var(--bg-elevated);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  display: block;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ---------- Asiakaslogorivi ---------- */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.clients__item {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text-subtle);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.clients__item:hover {
  color: var(--text);
  transform: translateY(-2px);
}

/* ---------- Palvelukortti ---------- */

.service {
  min-height: 100%;
}

/* Kortin yläreunan grafiikka. Kuva vuotaa kortin paddingin yli reunoihin
   asti ja häivytetään alareunasta, jotta se sulautuu korttiin eikä näytä
   liimatulta laatikolta. */
.service__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-8);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--grad-brand);
  color: var(--neutral-0);
  box-shadow: var(--glow-red);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.card:hover .service__icon {
  transform: scale(1.08) rotate(-4deg);
}

.service__index {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--text-subtle);
}

.service__title {
  margin-block-end: var(--sp-3);
}

.service__desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.service__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--border);
}

.service__price {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}

.service__price span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-subtle);
  letter-spacing: 0;
}

.service__price--quote {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

/* Vähintään 24 px korkea kosketuskohde (WCAG 2.2 AA, 2.5.8). */
.service__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

/* ---------- Miksi Hillo ---------- */

.reason {
  padding-block: var(--sp-6);
}

.reason__num {
  display: block;
  margin-block-end: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
  letter-spacing: var(--ls-tight);
}

.reason__title {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-h4);
}

.reason__desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Prosessi ---------- */

.process {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.process__step {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border-top: 1px solid var(--border);
  transition: background var(--dur-slow) var(--ease-out);
}

.process__step:last-child {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 860px) {
  .process__step {
    grid-template-columns: 6rem minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.process__step::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--brand-red);
  transition: width var(--dur-slow) var(--ease-out);
}

.process__step:hover::after {
  width: 100%;
}

.process__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: transparent;
  -webkit-text-stroke: 1px var(--neutral-300);
  letter-spacing: var(--ls-tight);
  transition: color var(--dur-slow) var(--ease-out);
}

.process__step:hover .process__num {
  color: var(--accent-text);
  -webkit-text-stroke-color: var(--accent-text);
}

.process__title {
  font-size: var(--fs-h4);
}

.process__desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 42rem;
}

/* ---------- Työt ---------- */

.work {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.work__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-full);
  /* PEITTÄVÄ, ei rgba(). Läpikuultava merkki päästää osion taustakuvan läpi,
     jolloin 11 px teksti putosi arvoon 4,22:1 (mitattu). Peittävä --red-100
     lukitsee kontrastin arvoon 5,15:1 riippumatta siitä, mitä on takana. */
  background: var(--red-100);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--red-600);
}

.work__title {
  font-size: var(--fs-h4);
}

.work__desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.work__link {
  margin-block-start: auto;
  padding-block-start: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.work__link .btn__icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.work__link:hover .btn__icon {
  transform: translate(3px, -3px);
}

/* ---------- Suositukset ---------- */

.quote {
  gap: var(--sp-6);
}

.quote__mark {
  width: 34px;
  height: 34px;
  color: var(--neutral-300);
}

.quote__text {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text);
}

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: auto;
  padding-block-start: var(--sp-6);
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  /* Väri on asetettava erikseen: ilman tätä kirjaimet perivät kortin
     tumman tekstivärin ja jäävät punaiselle pohjalle 2:1-kontrastiin. */
  color: var(--neutral-0);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.quote__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.quote__role {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.quote--featured {
  grid-row: span 2;
}

.quote--featured .quote__text {
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  transition: color var(--dur-base) var(--ease-out);
}

.faq__trigger:hover {
  color: var(--accent-text);
}

.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}

.faq__sign::before {
  width: 100%;
  height: 2px;
}

.faq__sign::after {
  width: 2px;
  height: 100%;
}

.faq__trigger[aria-expanded="true"] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.faq__panel.is-open {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__answer {
  padding-block-end: var(--sp-6);
  max-width: 46rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- CTA-lohko ---------- */

.cta-block {
  position: relative;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(40rem 24rem at 50% 0%, rgba(215, 38, 56, 0.28), transparent 70%),
    var(--surface);
  text-align: center;
  overflow: hidden;
}

/* Taustagrafiikka oikeaan laitaan.
   CTA:n teksti on KESKITETTY, joten se ylettyy kauas molemmille
   reunoille — toisin kuin herossa, jossa teksti on vasemmalla.
   Kuva on siksi kapea ja häivytetään myöhään, jotta se jää
   kokonaan tekstipalstan ulkopuolelle. Leveämpi tai aikaisemmin
   häivytetty kuva pudotti kontrastin 1,7:1:een.
   Piilotetaan alle 1100 px, jossa tekstille ei jää sivutilaa. */
.cta-block__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 30%;
  display: none;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1100px) {
  .cta-block__media {
    display: block;
  }
}

.cta-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  opacity: 0.8;
  mask-image: linear-gradient(90deg, transparent 28%, #000 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 78%);
}

.cta-block > *:not(.cta-block__media) {
  position: relative;
  z-index: var(--z-base);
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}

.cta-block__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

.cta-block__meta a:hover {
  color: var(--accent-text);
}

/* ---------- Hinnoittelun huomautus ---------- */

.note {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* ---------- Ominaisuuslista ---------- */

.feature-list {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

.feature-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.feature-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-block-start: 4px;
  border-radius: 50%;
  background: rgba(215, 38, 56, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d72638' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- Palvelun esittely ---------- */

.service-detail {
  display: grid;
  gap: var(--sp-8);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  border-top: 1px solid var(--border);
  scroll-margin-top: 7rem;
}

@media (min-width: 900px) {
  .service-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 6vw, 6rem);
    align-items: start;
  }
}

.service-detail__index {
  display: block;
  margin-block-end: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  color: var(--accent-text);
}

.service-detail__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tighter);
}

.service-detail__desc {
  margin-block-start: var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

.service-detail__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

.service-detail__price small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-subtle);
  letter-spacing: 0;
}

/* ---------- Hinnoittelukortti ---------- */

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out);
}

.price-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand);
  background: var(--surface-hover);
}

.price-card--featured {
  border-color: rgba(215, 38, 56, 0.42);
  background:
    radial-gradient(28rem 16rem at 50% 0%, rgba(215, 38, 56, 0.09), transparent 70%),
    var(--surface-strong);
}

.price-card--featured:hover {
  border-color: rgba(215, 38, 56, 0.7);
}

.price-card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: var(--accent-ink);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.price-card__name {
  font-size: var(--fs-h3);
}

.price-card__desc {
  margin-block-start: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.price-card__amount {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-6);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-tighter);
}

.price-card__amount small {
  display: block;
  margin-block-start: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-subtle);
  letter-spacing: 0;
}

.price-card .feature-list {
  flex: 1 1 auto;
}

.price-card .btn {
  margin-block-start: var(--sp-8);
}

.price-card__refs {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.price-card__refs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-3);
}

.price-card__refs a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

/* ---------- Hinnastoryhmä ---------- */

.price-group {
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.price-group__title {
  margin-block-end: var(--sp-6);
  font-size: var(--fs-h4);
  color: var(--text-muted);
}

/* ---------- Sivun yläosa (alasivut) ---------- */

.page-head {
  position: relative;
  padding-block: clamp(8rem, 6rem + 9vw, 11rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow: hidden;
}

.page-head__title {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-h1);
}

.page-head__lead {
  margin-block-start: var(--sp-6);
  max-width: 36rem;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* ---------- Ankkurinavigaatio ---------- */

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-8);
}

.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.anchor-nav a:hover {
  border-color: var(--border-brand);
  color: var(--text);
}

/* ---------- Lomake ---------- */

.form {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 640px) {
  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.field__label .req {
  color: var(--accent-text);
}

.field__control {
  width: 100%;
  min-height: 54px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.field__control::placeholder {
  color: var(--neutral-400);
}

.field__control:hover {
  border-color: var(--border-strong);
}

.field__control:focus {
  outline: none;
  border-color: var(--accent-text);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px rgba(215, 38, 56, 0.16);
}

textarea.field__control {
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-normal);
}

select.field__control {
  appearance: none;
  padding-inline-end: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
  cursor: pointer;
}

select.field__control option {
  background: var(--neutral-800);
  color: var(--text);
}

/* Virhetila */
.field__control[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(155, 21, 30, 0.16);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--color-error);
  min-height: 1rem;
}

.field__error:empty {
  display: none;
}

/* Suostumusvalinta */
.checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-block-start: 1px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.checkbox input:checked {
  background: var(--brand-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--accent-text);
}

.checkbox input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.checkbox a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hunajapurkki — piilotettu ihmisiltä, näkyvä boteille */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Lähetyksen tila */
.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}

.form__status[hidden] {
  display: none;
}

.form__status--ok {
  border-color: rgba(26, 127, 75, 0.4);
  background: rgba(26, 127, 75, 0.08);
  color: var(--color-success);
}

.form__status--error {
  border-color: rgba(255, 122, 107, 0.42);
  background: rgba(255, 122, 107, 0.09);
  color: var(--color-error);
}

.btn[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* ---------- Yhteystietokortti ---------- */

.contact-card {
  display: grid;
  gap: var(--sp-3);
}

.contact-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

.contact-card__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.contact-card__links {
  display: grid;
  gap: var(--sp-1);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.contact-card__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.contact-card__links a:hover {
  color: var(--accent-text);
}

/* ---------- Rich-linkki ---------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

.link-arrow .btn__icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--red-400);
}

.link-arrow:hover .btn__icon {
  transform: translateX(4px);
}

/* ---------- Lyhytvideot puhelinkehyksissä ---------- */

.reels__grid {
  display: grid;
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
  justify-items: center;
}

@media (min-width: 720px) {
  .reels__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kapealla näytöllä kolme pystypuhelinta allekkain tekisi osiosta
   kolme ruutua pitkän. Vaakavieritys pitää sen yhtenä näkymänä ja
   tuntuu samalta kuin somefeedin selaaminen. */
@media (max-width: 719px) {
  .reels__grid {
    grid-auto-flow: column;
    grid-auto-columns: min(62vw, 15rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--sp-4);
    /* Reunoille tilaa, jotta ensimmäinen ja viimeinen eivät liimaudu
       ruudun laitaan kun niihin snapataan. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
  }

  .reel {
    scroll-snap-align: center;
  }
}

.reel {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  width: 100%;
}

.reel__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  text-align: center;
}

/* Puhelinkehys on kokonaan CSS:ää — ei kuvatiedostoa, joten se on terävä
   kaikilla näytöillä eikä maksa yhtään tavua. */
.phone {
  position: relative;
  width: 100%;
  max-width: 16.5rem;
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border-radius: 2.75rem;
  background: linear-gradient(150deg, #4a4a4d 0%, #1c1c1e 38%, #2e2e30 100%);
  box-shadow:
    0 22px 48px rgba(26, 26, 26, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.phone__screen {
  height: 100%;
  border-radius: 2.1rem;
  overflow: hidden;
  background: var(--neutral-900);
}

.phone__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dynamic Island. Ilman tätä kehys lukeutuu geneeriseksi suorakaiteeksi
   eikä puhelimeksi. */
.phone__island {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-base);
  width: 28%;
  height: 20px;
  border-radius: var(--r-full);
  background: #0a0a0b;
}

/* Sivunappi */
.phone::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px;
  inset-block-start: 24%;
  width: 3px;
  height: 8%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #4a4a4d, #232325);
}

.reels__ohjain {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.reels__ohjain:empty {
  display: none;
}