/* Loru Creative — sivustokohtainen asettelu ds-tokens.css:n päälle.
   Värit, fontit, välistykset ja komponentit tulevat ds-tokens.css:stä;
   tässä vain rakenteet, ruudukot ja responsiivisuus. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Ankkurilinkkien (Prosessi, Hinnat, UKK) kohde jää 70 px stickyn headerin
   alle ilman tätä — hoidetaan scroll-margin-top:lla, ei scrollIntoView:lla,
   jotta selaimen oma (myös sivunvaihdon jälkeinen) ankkurihyppy toimii. */
#prosessi, #hinnat, #ukk, #palvelut, #tyot, #ota-yhteytta { scroll-margin-top: 70px; }

/* — vierityksen sisääntuloanimaatiot — .reveal-luokan lisää vain JS
   (assets/js/main.js), joten ilman JS:ää kaikki on aina heti näkyvissä. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

body.loru { overflow-x: hidden; }
a { text-decoration: none; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.screen-reader-text:focus {
  position: fixed !important; left: 16px; top: 16px; width: auto; height: auto;
  clip: auto; z-index: 100000; background: var(--color-bg); color: var(--color-text);
  padding: 12px 16px; outline: 2px solid var(--color-accent);
}
.skip-link { display: inline-block; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.kicker {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); font-weight: 600; display: inline-block;
}

/* — header — */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 32px;
}
.site-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  padding: 20px 0; color: var(--color-text);
}
.site-logo:hover { color: var(--color-text); }
.site-logo__mark { width: 18px; height: 18px; background: var(--color-accent); display: inline-block; flex: none; }
.site-logo img { max-height: 32px; width: auto; display: block; }

.primary-nav { display: flex; align-items: stretch; font-size: 15px; font-weight: 500; }
.primary-nav ul { list-style: none; display: flex; margin: 0; padding: 0; align-items: stretch; }
.primary-nav li { display: flex; }
.primary-nav a { display: flex; align-items: center; padding: 20px 18px; color: var(--color-text); }
.primary-nav a:hover { color: var(--color-accent-700); }
.primary-nav .btn { align-self: center; margin-left: 18px; }

.mobile-menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
  color: var(--color-text); margin: 12px 0;
}
.mobile-menu-toggle svg { display: block; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 100; background: var(--color-bg);
  display: none; flex-direction: column; padding: 20px 20px 32px;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__top { display: flex; justify-content: flex-end; }
.mobile-menu__close {
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; color: var(--color-text);
}
.mobile-menu nav { display: flex; flex-direction: column; margin-top: 24px; }
.mobile-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* Viiva kuuluu riville, ei linkin tekstille: inline-elementin reunaviiva
   piirtyisi vain tekstin levyisenä ja limittyisi seuraavan rivin päälle. */
.mobile-menu nav li { display: block; border-bottom: 2px solid var(--color-divider); }
.mobile-menu nav li:last-child { border-bottom: 0; }
.mobile-menu nav a {
  display: block;
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  padding: 16px 4px; color: var(--color-text);
}
.mobile-menu__cta { margin-top: auto; padding-top: 24px; }
.mobile-menu__cta .btn { width: 100%; }
body.mobile-menu-open { overflow: hidden; }

/* — sections — */
.section { border-bottom: 2px solid var(--color-divider); }
.section--accent { background: var(--color-accent); color: #fff; }
.section--dark { background: var(--color-text); color: var(--color-neutral-100); }
.section--no-border { border-bottom: 0; }
.section__inner { max-width: 1280px; margin: 0 auto; padding: 72px 32px; }
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px;
}
.section__head p { align-self: end; max-width: 44ch; font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; }
.section__head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }

/* — hero (etusivu) — */
.hero {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; border-bottom: 2px solid var(--color-divider);
}
.hero__col-left {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  padding: 72px 48px 72px 0; border-right: 2px solid var(--color-divider);
}
.hero__col-left h1 { font-size: 62px; line-height: 1.02; letter-spacing: -0.02em; }
.hero__col-left > p { font-size: 19px; line-height: 1.6; color: var(--color-neutral-800); max-width: 50ch; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats {
  display: flex; gap: 40px; border-top: 2px solid var(--color-divider);
  width: 100%; margin-top: 8px; flex-wrap: wrap;
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; padding-top: 20px; }
.hero__stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; }
.hero__stat-label { font-size: 14px; color: var(--color-neutral-700); }

.hero__col-right { display: flex; flex-direction: column; }
.hero__media {
  flex: 1; min-height: 360px; display: flex; align-items: flex-end;
  border-bottom: 2px solid var(--color-divider); background: var(--color-neutral-200);
  overflow: hidden; position: relative;
}
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media--placeholder {
  padding: 24px;
  background-image: repeating-linear-gradient(135deg, var(--color-neutral-200) 0 10px, var(--color-neutral-300) 10px 20px);
}
.hero__media-caption { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--color-bg); padding: 8px 12px; }
.booking-box {
  padding: 24px; background: var(--color-accent); color: #fff;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.booking-box__kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; opacity: 0.85; }
.booking-box__title { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1.15; }
.booking-box__text { font-size: 15px; line-height: 1.55; opacity: 0.92; margin: 0; }
.booking-box .btn { margin-top: 6px; background: #fff; color: var(--color-accent-700); }
.booking-box .btn:hover { background: var(--color-accent-100); }

/* — asiakaslogot — */
.logos-row .wrap {
  padding: 28px 32px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.logos-row__label {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-700); font-weight: 600; white-space: nowrap;
}
.logos-row__items { display: flex; gap: 32px; flex: 1; justify-content: space-between; flex-wrap: wrap; row-gap: 20px; min-width: 280px; }
.logos-row__items a, .logos-row__items span { display: block; width: 110px; height: 32px; }
.logos-row__items img { width: 110px; height: 32px; object-fit: contain; }
.logos-row__placeholder {
  background-image: repeating-linear-gradient(135deg, var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
}

/* — 2px-ruudukkotekniikka (grid gap + divider-tausta) — */
.grid-lines {
  display: grid; gap: 2px; background: var(--color-divider);
}
.grid-lines > * { background: var(--color-bg); }

/* — palvelut (etusivu) — */
.services-grid { grid-template-columns: repeat(3, 1fr); }
.services-cell { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.services-cell:hover { background: var(--color-neutral-100); }
.services-cell__num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-accent-700); }
.services-cell h3 { font-size: 21px; }
.services-cell p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }
.services-cell--accent {
  background: var(--color-accent) !important; color: #fff;
  justify-content: space-between;
}
.services-cell--accent:hover { background: var(--color-accent) !important; }
.services-cell--accent .services-cell__num { color: #fff; opacity: 0.85; }
.services-cell--accent p { opacity: 0.92; }
.services-cell--accent__top { display: flex; flex-direction: column; gap: 12px; }
.services-cell--accent__link {
  color: #fff; font-weight: 600; font-size: 15px; border-bottom: 2px solid rgba(255,255,255,0.5);
  align-self: flex-start; padding-bottom: 2px;
}
.services-cell--accent__link:hover { border-color: #fff; color: #fff; }

/* — työnäytenosto / arkisto — */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.work-card { display: flex; flex-direction: column; gap: 16px; color: var(--color-text); }
.work-card:hover { color: var(--color-text); }
.work-card__media {
  aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 16px; overflow: hidden;
  background: var(--color-neutral-200);
  background-image: repeating-linear-gradient(135deg, var(--color-neutral-200) 0 10px, var(--color-neutral-300) 10px 20px);
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card__media-caption { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--color-bg); padding: 6px 10px; }
.work-card__cat {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--color-accent-700); text-transform: uppercase;
}
.work-card__name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; }
.work-card__desc { font-size: 15px; color: var(--color-neutral-800); line-height: 1.55; margin: 0; }
.all-work-link { font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--color-divider); padding-bottom: 2px; color: var(--color-text); }
.all-work-link:hover { color: var(--color-accent-700); border-color: var(--color-accent-700); }

/* — työnäytteet: "Näytä lisää" -laajennus etusivulla — */
.work-card--extra { display: none; }
.work-grid.is-expanded .work-card--extra { display: flex; }
.work-expand-toggle {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 2px solid var(--color-divider); color: var(--color-text);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  padding: 12px 20px; cursor: pointer;
}
.work-expand-toggle:hover { border-color: var(--color-text); }
.work-expand-toggle__plus {
  font-size: 18px; color: var(--color-accent); transition: transform 0.2s; line-height: 1;
}
.work-expand-toggle[aria-expanded="true"] .work-expand-toggle__plus { transform: rotate(45deg); }

/* — prosessi — */
.process { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
.process__intro { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.process__intro p { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; }
.process__steps { display: flex; flex-direction: column; }
.process__step {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 24px 0;
  border-top: 2px solid var(--color-divider);
}
.process__step:last-child { border-bottom: 2px solid var(--color-divider); }
.process__step-num { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-accent-700); }
.process__step-body { display: flex; flex-direction: column; gap: 6px; }
.process__step-body h3 { font-size: 20px; }
.process__step-body p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }

/* — hinnat — */
.pricing-grid { grid-template-columns: repeat(3, 1fr); }
.pricing-cell { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.pricing-cell__head { display: flex; flex-direction: column; gap: 8px; }
.pricing-cell__kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-neutral-700); }
.pricing-cell__price { font-family: var(--font-heading); font-weight: 800; font-size: 40px; line-height: 1; }
.pricing-cell__note { font-size: 14px; color: var(--color-neutral-700); }
.pricing-cell__list {
  display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5;
  color: var(--color-neutral-800); border-top: 2px solid var(--color-divider); padding-top: 20px;
}
.pricing-cell .btn { margin-top: auto; }
.pricing-cell--featured {
  background: var(--color-text) !important; color: var(--color-neutral-100);
}
.pricing-cell--featured .pricing-cell__kicker { color: var(--color-accent-400); }
.pricing-cell--featured .pricing-cell__note { color: var(--color-neutral-400); }
.pricing-cell--featured .pricing-cell__list { color: var(--color-neutral-300); border-top-color: var(--color-neutral-700); }
.pricing-note { font-size: 14px; color: var(--color-neutral-700); margin-top: 20px; }

/* — palaute — */
.testimonials-grid { grid-template-columns: repeat(3, 1fr); }
.testimonial { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.testimonial__quote { font-size: 19px; line-height: 1.5; font-family: var(--font-heading); font-weight: 600; margin: 0; }
.testimonial__meta {
  display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--color-neutral-700);
  border-top: 2px solid var(--color-divider); padding-top: 16px;
}
.testimonial__name { color: var(--color-text); font-weight: 600; }

/* — ukk — */
.faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 64px; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 2px solid var(--color-divider); }
.faq__item:last-child { border-bottom: 2px solid var(--color-divider); }
.faq__item summary {
  cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq__plus { font-size: 22px; color: var(--color-accent); transition: transform 0.2s; line-height: 1; flex: none; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__answer { font-size: 16px; line-height: 1.65; color: var(--color-neutral-800); padding-bottom: 22px; max-width: 70ch; margin: 0; }

/* — cta-banneri (julistelohko) — */
.cta-banner .section__inner { padding: 88px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cta-banner h2 { font-size: 56px; line-height: 1.03; max-width: 24ch; }
.cta-banner p { font-size: 19px; line-height: 1.6; max-width: 56ch; opacity: 0.92; margin: 0; }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-banner .btn-white { background: #fff; color: var(--color-accent-700); padding: 15px 24px; font-weight: 600; font-size: 16px; }
.cta-banner .btn-white:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.cta-banner .btn-outline-white {
  border: 2px solid rgba(255,255,255,0.6); color: #fff; padding: 13px 24px; font-weight: 600; font-size: 16px; background: transparent;
}
.cta-banner .btn-outline-white:hover { border-color: #fff; color: #fff; }

/* — footer — */
.site-footer { background: var(--color-text); color: var(--color-neutral-300); }
.footer-grid {
  max-width: 1280px; margin: 0 auto; padding: 64px 32px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-brand__logo {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-heading);
  font-weight: 800; font-size: 19px; color: var(--color-neutral-100);
}
.footer-brand p { font-size: 15px; line-height: 1.6; max-width: 32ch; margin: 0; }
.footer-brand a { color: var(--color-neutral-100); font-weight: 600; font-size: 15px; }
.footer-brand a:hover { color: var(--color-accent-400); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h2 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--color-neutral-500); margin: 0;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col li { display: block; }
.footer-col a { color: var(--color-neutral-300); font-size: 15px; }
.footer-col a:hover { color: var(--color-accent-400); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto; padding: 20px 32px 40px; border-top: 2px solid var(--color-neutral-800);
  display: flex; justify-content: space-between; gap: 24px; font-size: 14px; color: var(--color-neutral-500); flex-wrap: wrap;
}
.footer-bottom a { color: var(--color-neutral-500); font-size: 14px; }
.footer-bottom a:hover { color: var(--color-accent-400); }

/* — alasivujen hero (palvelut/työnäytteet/yhteys) — */
.page-hero { border-bottom: 2px solid var(--color-divider); }
.page-hero__inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.page-hero h1 { font-size: 56px; line-height: 1.04; }
.page-hero p { font-size: 19px; line-height: 1.6; color: var(--color-neutral-800); max-width: 52ch; margin: 0; }
.page-hero--split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end; }
.page-hero--split .hero__media { min-height: 0; border-bottom: 0; aspect-ratio: 4/3; }

/* — palvelut-sivu rivit — */
.service-row {
  display: grid; grid-template-columns: 0.35fr 0.65fr; gap: 64px; padding: 56px 0;
  border-bottom: 2px solid var(--color-divider);
}
.service-row:last-child { border-bottom: 0; }
.service-row__num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-accent-700); }
.service-row__head { display: flex; flex-direction: column; gap: 8px; }
.service-row__head h2 { font-size: 32px; }
.service-row__body { display: flex; flex-direction: column; gap: 20px; }
.service-row__body > p { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); max-width: 60ch; margin: 0; }
.service-row__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); list-style: none; margin: 0; padding: 0; }

/* — työnäytteet: yksittäinen työ — */
.work-single__meta { display: flex; flex-direction: column; gap: 6px; }
.work-single__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--color-divider); }
.work-single__gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.work-single__video { aspect-ratio: 16/9; width: 100%; background: var(--color-neutral-900); }
.work-single__video iframe, .work-single__video video { width: 100%; height: 100%; display: block; }
.work-single__lead { font-size: 19px; line-height: 1.6; color: var(--color-neutral-800); max-width: 60ch; margin: 0; }
.work-single__content { max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); }

/* — työnäytteen sisältölohkot (teksti / kuva / video / upotus) — */
.work-blocks { display: flex; flex-direction: column; gap: 56px; }
.work-block { display: flex; flex-direction: column; gap: 16px; }
.work-block__heading { font-size: 28px; line-height: 1.15; }
.work-block__text { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); max-width: 70ch; }
.work-block__text p { margin: 0 0 16px; }
.work-block__text p:last-child { margin-bottom: 0; }
.work-block__image { width: 100%; height: auto; display: block; }
.work-block__video { aspect-ratio: 16/9; width: 100%; background: var(--color-neutral-900); }
.work-block__video iframe, .work-block__video video { width: 100%; height: 100%; display: block; }
.work-block__caption { font-size: 14px; color: var(--color-neutral-700); margin: 0; max-width: 70ch; }

/* Lohkon leveysvaihtoehdot: lukuleveys / koko sisältöalue / reunasta reunaan. */
.work-block--w-normal { max-width: 70ch; }
.work-block--w-wide { max-width: none; }
.work-block--w-full {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 20px;
}

/* Upotukset (Instagram, TikTok): palveluiden oma skripti pakottaa upotukselle
   kiinteän leveyden (Instagramilla min-width: 326px), joka rikkoisi ruudukon.
   Nollataan se ja annetaan upotuksen täyttää oma sarakkeensa. */
.work-block__embed { display: flex; justify-content: flex-start; }
.work-block__embed iframe,
.work-block__embed blockquote { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Useampi upotus vierekkäin. Sarakemäärä ei ole kiinteä vaan tavoite:
   auto-fill laskee mahtuuko sarake vielä minimileveyteensä, joten ruudukko
   tiputtaa sarakkeita itse kapeammassa tilassa ilman murtopistehyppyjä.
   Minimit on mitoitettu niin, että 1216 px:n sisältöleveydellä osuu juuri
   haluttu sarakemäärä ja Instagram-upotus pysyy aina luettavan levyisenä.
   Viivat ovat sivuston muun ruudukon tapaan gap + taustaväri, eivät reunuksia. */
.work-block__embed-grid {
  display: grid;
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  /* Upotusten oma korkeus vaihtelee kuvatekstin pituuden mukaan. stretch tasaa
     saman rivin solut keskenään, jolloin viivat piirtyvät suorina. Rivejä ei
     tasata toisiinsa nähden: yhden sarakkeen mobiilinäkymässä se venyttäisi
     jokaisen solun korkeimman mittaiseksi ja jättäisi tyhjää alle. */
  align-items: stretch;
}
.work-block__embed-grid[data-columns="2"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); }
.work-block__embed-grid[data-columns="3"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.work-block__embed-grid[data-columns="4"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.work-block__embed-cell {
  min-width: 0;
  background: var(--color-bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  /* Rivit ovat tasakorkeat ja solun tausta yhtenäinen, joten yläreunaan
     tasaus antaa sekä suoran ylälinjan (upotusten otsikot samalla korkeudella)
     että tasaisen alareunan. Keskitys porrastaisi yläreunat. */
  justify-content: flex-start;
}

/* Instagramin ja TikTokin upotukset skaalautuvat sarakkeeseen vasta kun
   niiden omat inline-leveydet ylikirjoitetaan. */
.work-block__embed-cell .instagram-media,
.work-block__embed .instagram-media,
.work-block__embed-cell .tiktok-embed,
.work-block__embed .tiktok-embed {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.work-block__embed-cell iframe,
.work-block__embed-grid iframe { max-width: 100% !important; width: 100% !important; }

/* Upotuksen kolme tilaa pitää kaikki näyttää siedettäviltä:
   1) skriptiä ei ole vielä ajettu tai kävijä on estänyt sen,
   2) julkaisu on poistettu tai yksityinen — Instagram jättää soluun vain
      2 px:n mittausiframen,
   3) upotus on renderöitynyt normaalisti.
   Tiloissa 1 ja 2 näytetään paikanvaraaja, tilassa 3 pelkkä upotus.

   Lainausta ei saa tunnistaa luokasta: Instagramin skripti POISTAA
   instagram-media-luokan ja vaihtaa tilalle instagram-media-registered.
   data-instgrm-permalink sen sijaan on teeman itsensä asettama ja pysyy. */
.work-block__embed-cell blockquote[data-instgrm-permalink],
.work-block__embed blockquote[data-instgrm-permalink],
.work-block__embed-cell blockquote[cite],
.work-block__embed blockquote[cite] {
  /* Leveys on pakotettava: pelkän aspect-ratio:n kanssa selain ratkaisee
     korkeuden ensin ja johtaa leveyden siitä, jolloin laatikko jää kapeaksi. */
  width: 100% !important;
  aspect-ratio: 4 / 5;
  background: var(--color-neutral-100) !important;
  display: flex !important;
  align-items: flex-end;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box;
  border: 0 !important;
}
.work-block__embed-cell blockquote[data-instgrm-permalink] a,
.work-block__embed blockquote[data-instgrm-permalink] a,
.work-block__embed-cell blockquote[cite] a,
.work-block__embed blockquote[cite] a {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--color-accent-700); text-decoration: underline;
}

/* Tila 3: upotus on oikeasti renderöitynyt — piilotetaan paikanvaraaja.
   Instagram merkitsee valmiin upotuksen iframen luokalla
   instagram-media-rendered; TikTokilla vastaavaa ei ole, joten sille
   tunnistetaan iframe osoitteesta. Nämä säännöt ovat tarkoituksella
   paikanvaraajan JÄLKEEN, jotta ne voittavat myös tasapelissä. */
.work-block__embed-cell:has(iframe.instagram-media-rendered) blockquote,
.work-block__embed:has(iframe.instagram-media-rendered) blockquote,
.work-block__embed-cell:has(iframe[src*="tiktok.com"]) blockquote,
.work-block__embed:has(iframe[src*="tiktok.com"]) blockquote { display: none !important; }

@media (max-width: 639px) {
  /* Kapealla näytöllä upotus saa koko leveyden ja kehyksen sisäreuna kevenee. */
  .work-block__embed-grid { grid-template-columns: 1fr !important; }
  .work-block__embed-cell { padding: 12px; }
  .work-block--w-full { padding: 0 20px; }
}

/* — ota yhteyttä — */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-info {
  padding: 72px 48px 72px 0; border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.contact-info h2 { font-size: 52px; line-height: 1.04; }
.contact-info > p { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); max-width: 46ch; margin: 0; }
.contact-details { display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--color-divider); padding-top: 24px; width: 100%; }
.contact-details__item { display: flex; flex-direction: column; gap: 2px; }
.contact-details__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 600; }
.contact-details__value { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-text); }
.contact-details__value.plain { font-size: 16px; font-weight: 400; font-family: var(--font-body); line-height: 1.5; }
.contact-info__booking { background: var(--color-text); color: var(--color-neutral-100); padding: 14px 22px; font-weight: 600; font-size: 16px; }
.contact-info__booking:hover { background: var(--color-accent-700); color: #fff; }

.contact-form-wrap { padding: 72px 0 72px 48px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form__choices { display: flex; flex-direction: column; gap: 10px; }
.contact-form__choices-label { font-size: 14px; font-weight: 600; }
.contact-form__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-form__tags input { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-form__tags label { display: inline-flex; }
.contact-form__tags label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.contact-form__tags label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.contact-form__note { font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); margin: 0; }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__error {
  border: 2px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800);
  padding: 16px 20px; font-size: 15px; margin: 0 0 4px;
}
.contact-form__field-error { color: var(--color-accent-700); font-size: 13px; margin-top: 2px; }
.contact-success {
  border: 2px solid var(--color-accent); padding: 32px; display: flex; flex-direction: column;
  gap: 12px; align-items: flex-start;
}
.contact-success h2 { font-size: 28px; }
.contact-success p { font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }

/* — dark cta (työnäytteet showreel) — */
.section--dark .section__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.section--dark h2 { font-size: 40px; line-height: 1.06; max-width: 26ch; }
.section--dark p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-400); max-width: 52ch; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Responsiivisuus
   ══════════════════════════════════════════════════════════════════════ */

/* 768–1023 px: kaksipalstaiset osiot pinoon, pystyviivat -> vaakaviiva,
   3 palstan ruudukot -> 2 palstaa, H1 62->44, H2 42->32, pehmuste 72->48 */
@media (max-width: 1023px) {
  .site-header__inner { padding: 0 20px; }
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }

  .section__inner { padding: 48px 32px; }
  .cta-banner .section__inner { padding: 64px 32px; }

  .hero { grid-template-columns: 1fr; }
  .hero__col-left {
    padding: 48px 0 40px; border-right: 0; border-bottom: 2px solid var(--color-divider);
  }
  .hero__col-left h1 { font-size: 44px; }
  .hero__col-right { padding-bottom: 0; }

  .section__head { grid-template-columns: 1fr; gap: 20px; }
  .section__head p { align-self: auto; max-width: none; }

  h2 { font-size: 32px; }
  .page-hero h1 { font-size: 44px; }
  .page-hero--split { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .cta-banner h2 { font-size: 44px; }

  .services-grid, .pricing-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  .process { grid-template-columns: 1fr; gap: 32px; }
  .faq { grid-template-columns: 1fr; gap: 24px; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-info {
    padding: 48px 0; border-right: 0; border-bottom: 2px solid var(--color-divider);
  }
  .contact-form-wrap { padding: 48px 0; }

  .service-row { grid-template-columns: 1fr; gap: 16px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* < 768 px: kaikki yhteen palstaan, H1 -> 34, julistelohkon H2 -> 32,
   sivumarginaali 32 -> 20, hinta/palveluruudut pinoon, kosketus min 44x44 */
@media (max-width: 767px) {
  .wrap, .section__inner, .hero, .cta-banner .section__inner, .contact-grid {
    padding-left: 20px; padding-right: 20px;
  }
  .site-header__inner { padding: 0 20px; }
  .section__inner { padding: 40px 20px; }

  .hero__col-left h1 { font-size: 34px; }
  .page-hero h1 { font-size: 34px; }
  .cta-banner h2 { font-size: 32px; }
  h2 { font-size: 28px; }

  .hero__stats { gap: 24px; }
  .hero__actions .btn { width: 100%; }

  .services-grid, .pricing-grid, .testimonials-grid, .work-grid { grid-template-columns: 1fr; }
  .service-row__list { grid-template-columns: 1fr; }
  .work-single__gallery { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  .contact-form__row { grid-template-columns: 1fr; }

  .btn, .tag-outline, .mobile-menu-toggle, .faq__item summary { min-height: 44px; }
}

/* — työnäytelistan sivutus — */
.work-pagination { margin-top: 48px; }
.work-pagination ul.page-numbers {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--color-divider); border: 2px solid var(--color-divider);
  width: fit-content;
}
.work-pagination li { display: block; }
.work-pagination .page-numbers {
  display: block; background: var(--color-bg); color: var(--color-text);
  padding: 12px 18px; font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  min-width: 48px; text-align: center;
}
.work-pagination a.page-numbers:hover { background: var(--color-neutral-100); color: var(--color-accent-700); }
.work-pagination .page-numbers.current { background: var(--color-text); color: var(--color-bg); }
.work-pagination .page-numbers.dots { background: var(--color-bg); color: var(--color-neutral-600); }
@media (max-width: 767px) {
  .work-pagination .page-numbers { padding: 12px 14px; min-width: 44px; }
}