/* =========================================================
   KoneManu Ky — style.css
   Design-tokenit: patinoitu paja, mustavalkoinen valokuvaus,
   yksi lämmin ruosteenpunainen korostusväri.
   ========================================================= */

:root{
  --ink:        #211D19;   /* öljytty puu, tekstin perusväri */
  --ink-soft:   #46403A;   /* pehmeämpi tummasävy leipätekstille vaalealla pohjalla */
  --paper:      #EAE3D6;   /* patinoitunut paperinvalkoinen */
  --paper-2:    #DED2BC;   /* tummempi paperi, vuorottelevat sektiot */
  --paper-3:    #F4EFE4;   /* vaalein, korttien sisäpinta */
  --rust:       #B5502A;   /* öljylampun liekki — ainoa lämmin korostus */
  --rust-dark:  #8C3B1C;
  --steel:      #5C6268;   /* kylmä sekundäärikorostus */
  --brass:      #8F6E3A;   /* messinki, hyvin niukasti */
  --line:       rgba(33,29,25,0.14);
  --line-strong:rgba(33,29,25,0.28);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius: 2px;
  --shadow-card: 0 1px 0 rgba(33,29,25,0.05), 0 8px 24px -12px rgba(33,29,25,0.35);

  --z-eveste: 9999;
  --z-nav: 1000;
  --z-dropdown: 100;
  --z-hero: 1;
}

/* ---------- Reset & perusasetukset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-transform: none;
}
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

:focus-visible{
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* eyebrow / label-tyyli */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  display:inline-flex;
  align-items:center;
  gap: 0.6em;
  margin-bottom: 0.9em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--rust);
  display:inline-block;
}

/* ---------- Napit ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.95em 1.5em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn svg{ width:1.15em; height:1.15em; flex-shrink:0; }
.btn--primary{
  background: var(--rust);
  color: var(--paper-3);
}
@media (hover:hover){
  .btn--primary:hover{ background: var(--rust-dark); transform: translateY(-1px); }
}
.btn--ghost{
  background: transparent;
  border-color: rgba(234,227,214,0.55);
  color: var(--paper-3);
}
@media (hover:hover){
  .btn--ghost:hover{ border-color: var(--paper-3); transform: translateY(-1px); }
}
.btn--ghost.on-light{
  border-color: var(--line-strong);
  color: var(--ink);
}
@media (hover:hover){
  .btn--ghost.on-light:hover{ border-color: var(--ink); background: rgba(33,29,25,0.05); }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: var(--z-nav);
  background: var(--ink);
  border-bottom: 1px solid rgba(234,227,214,0.12);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.nav__logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--paper-3);
  text-decoration:none;
  letter-spacing: 0.01em;
  display:flex;
  align-items:baseline;
  gap:0.4em;
}
.nav__logo span{
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--rust);
  letter-spacing: 0.12em;
  font-weight:400;
}
.nav__list{
  display:flex;
  align-items:center;
  gap: 1.9rem;
}
.nav__link{
  color: var(--paper-3);
  text-decoration:none;
  font-size: 0.96rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
@media (hover:hover){
  .nav__link:hover{ border-bottom-color: var(--rust); }
}
.nav__item--dropdown{ position:relative; }
.nav__link--caret{ display:inline-flex; align-items:center; gap:0.35em; background:none; border:none; cursor:pointer; }
.nav__link--caret svg{ width:0.7em; height:0.7em; transition: transform 0.15s ease; }
.nav__item--dropdown[data-open="true"] .nav__link--caret svg{ transform: rotate(180deg); }

.nav__dropdown{
  position:absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  z-index: var(--z-dropdown);
  display:none;
}
.nav__item--dropdown[data-open="true"] .nav__dropdown{ display:block; }
.nav__dropdown a{
  display:flex;
  flex-direction:column;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  text-decoration:none;
  color: var(--ink);
  border-radius: var(--radius);
}
@media (hover:hover){
  .nav__dropdown a:hover{ background: var(--paper-2); }
}
.nav__dropdown a strong{ font-size: 0.92rem; font-weight:600; }
.nav__dropdown a small{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--steel); }

.nav__call{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--paper-3);
  background: var(--rust);
  padding: 0.55em 1em;
  border-radius: var(--radius);
  text-decoration:none;
  white-space:nowrap;
}
.nav__call svg{ width:1em; height:1em; }

.nav__toggle{
  display:none;
  background:none;
  border:none;
  color: var(--paper-3);
  cursor:pointer;
  padding: 0.4rem;
}
.nav__toggle svg{ width:26px; height:26px; }

@media (max-width: 860px){
  .nav__list{
    position:fixed;
    inset: 60px 0 0 0;
    background: var(--ink);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding: 1.5rem clamp(1.1rem,4vw,2.5rem);
    gap: 0.3rem;
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow-y:auto;
  }
  .site-header[data-menu-open="true"] .nav__list{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .nav__list > li{ width:100%; border-bottom: 1px solid rgba(234,227,214,0.1); }
  .nav__link{ display:block; width:100%; padding: 0.9rem 0; }
  .nav__dropdown{ position:static; transform:none; box-shadow:none; width:100%; margin-top:0.2rem; display:none; }
  .nav__item--dropdown[data-open="true"] .nav__dropdown{ display:block; }
  .nav__toggle{ display:inline-flex; }
  .nav__call{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: min(88vh, 780px);
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  z-index: var(--z-hero);
}
.hero__media{
  position:absolute; inset:0;
  z-index:-2;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position: center 38%;
}
.hero__scrim{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,17,14,0.35) 0%, rgba(20,17,14,0.55) 55%, rgba(18,15,12,0.92) 100%);
}
.hero__content{
  width:100%;
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(2.2rem, 6vw, 3.5rem);
  color: var(--paper-3);
}
.hero__eyebrow{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E3A98D;
  margin-bottom: 1rem;
}
.hero__title{
  font-size: clamp(2.1rem, 5.4vw, 3.8rem);
  max-width: 16ch;
  color: var(--paper-3);
}
.hero__lede{
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 46ch;
  color: rgba(234,227,214,0.88);
  margin-bottom: 1.9rem;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 0.5rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(234,227,214,0.75);
  border-top: 1px solid rgba(234,227,214,0.18);
  padding-top: 1rem;
}
.hero__meta strong{ color: var(--paper-3); font-weight:600; }

/* ---------- Brand strip (merkkinauha) ---------- */
.brandstrip{
  background: var(--ink);
  border-top: 1px solid rgba(234,227,214,0.1);
  overflow:hidden;
  padding-block: 0.9rem;
}
.brandstrip__track{
  display:flex;
  width: max-content;
  gap: clamp(2.2rem, 5vw, 4rem);
  will-change: transform;
  backface-visibility: hidden;
}
.brandstrip__group{
  display:flex;
  gap: clamp(2.2rem, 5vw, 4rem);
  flex-shrink:0;
}
@media (prefers-reduced-motion: reduce){
  .brandstrip__track{ flex-wrap:wrap; justify-content:center; width:100%; will-change:auto; }
  .brandstrip__track .brandstrip__group:nth-child(2){ display:none; }
}
.brandstrip__item{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(234,227,214,0.5);
  white-space:nowrap;
  flex-shrink: 0;
}
.brandstrip__item::before{ content:"—  "; color: var(--rust); }

/* ---------- Sektiot yleensä ---------- */
.section{
  padding-block: clamp(3.2rem, 8vw, 5.5rem);
}
.section--alt{ background: var(--paper-2); }
.section__head{
  max-width: 62ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.section__title{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.section__lede{
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* ---------- Story / meistä ---------- */
.story{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
}
.story__media{
  position:relative;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.9rem;
}
.story__media img{
  width:100%; height:100%; object-fit:cover;
  border-radius: var(--radius);
}
.story__media .story__img--tall{ aspect-ratio: 3/4; }
.story__media .story__img--wide{ aspect-ratio: 4/5; align-self:end; }
.story__content h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.story__content p{ color: var(--ink-soft); font-size: 1.02rem; }

@media (max-width: 860px){
  .story{ grid-template-columns: 1fr; }
}

/* ---------- Palvelut (huoltokortit) ---------- */
.services__intro{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem,4vw,3rem);
  align-items:end;
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
}
.services__intro img{
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit:cover;
  border-radius: var(--radius);
}
.service-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 300px), 1fr));
  gap: 1.1rem;
}
.service-card{
  position:relative;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap: 0.7rem;
  text-decoration:none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  top: 1.1rem; right:1.1rem;
  width: 9px; height: 9px;
  border-radius:50%;
  background: var(--line-strong);
}
@media (hover:hover){
  .service-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--rust);
  }
  .service-card:hover::before{ background: var(--rust); }
}
.service-card__tag{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.service-card__title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.18rem;
  margin:0;
}
.service-card__text{
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin:0;
  flex-grow:1;
}
.service-card__link{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--rust);
  display:inline-flex;
  align-items:center;
  gap: 0.4em;
  margin-top: 0.3rem;
}
.service-card__link svg{ width:0.9em; height:0.9em; transition: transform 0.15s ease; }
@media (hover:hover){
  .service-card:hover .service-card__link svg{ transform: translateX(3px); }
}

/* Teroitus-nosto */
.sharpen-callout{
  margin-top: 1.6rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--paper-3);
  border-radius: var(--radius);
  padding: 1.4rem 1.7rem;
}
.sharpen-callout__text strong{ display:block; font-family:var(--font-display); font-size:1.08rem; font-weight:600; margin-bottom:0.2rem; }
.sharpen-callout__text span{ font-size:0.92rem; color:rgba(234,227,214,0.75); }

/* ---------- Asiakaskokemukset ---------- */
.testimonials__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.testimonials__heading{
  display:flex;
  align-items:center;
  gap: 0.7rem;
}
.testimonials__heading h2{ margin-bottom:0; }
.testimonials__pin{
  width: clamp(1.4rem, 3vw, 1.8rem);
  height: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--rust);
  flex-shrink:0;
}
.testimonials__badge{
  display:inline-flex;
  align-items:center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55em 0.9em;
  white-space:nowrap;
}
.testimonials__badge-stars{ color: var(--rust); letter-spacing: 0.05em; }

.testimonial-marquee{
  overflow:hidden;
  width:100%;
}
.testimonial-track{
  display:flex;
  width: max-content;
  gap: 2rem;
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce){
  .testimonial-track{ flex-wrap:wrap; width:100%; }
  .testimonial-group[aria-hidden="true"]{ display:none; }
}
.testimonial-group{
  display:flex;
  gap: 2rem;
  flex-shrink:0;
}

.testimonial-card{
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
  flex: 0 0 auto;
  width: min(86vw, 340px);
}
.testimonial-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.6rem;
}
.testimonial-card__pin{
  width: 22px;
  height: auto;
  flex-shrink:0;
}
.testimonial-card__stars{
  color: var(--rust);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}
.testimonial-card__quote{
  font-size: 1rem;
  color: var(--ink);
  margin:0;
  flex-grow:1;
  line-height:1.6;
}
.testimonial-card__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.testimonial-card__name{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 0.95rem;
}
.testimonial-card__source{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--steel);
  white-space:nowrap;
}

/* ---------- Sijainti / yhteystiedot ---------- */
.location{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:stretch;
}
.location__media{
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 260px;
}
.location__media img{ width:100%; height:100%; object-fit:cover; }
.location__card{
  background: var(--ink);
  color: var(--paper-3);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  display:flex;
  flex-direction:column;
  gap: 1.5rem;
}
.location__card h2{ color:var(--paper-3); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom:0; }
.location__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
}
.location__grid dt{
  color: var(--rust);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform:uppercase;
  margin-bottom: 0.35em;
}
.location__grid dd{
  margin:0;
  color: rgba(234,227,214,0.92);
  line-height:1.5;
}
.location__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 0.8rem;
  margin-top: auto;
}

@media (max-width: 860px){
  .location{ grid-template-columns: 1fr; }
  .location__media{ min-height: 220px; }
}

/* ---------- Footer ---------- */
.site-footer{
  background: #17140F;
  color: rgba(234,227,214,0.7);
  padding-block: 2.6rem 1.6rem;
  font-size: 0.9rem;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(234,227,214,0.12);
}
.footer__brand{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper-3);
  margin-bottom: 0.6rem;
  font-weight:600;
}
.footer__col h3{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform:uppercase;
  color: var(--rust);
  margin-bottom: 0.9rem;
  font-weight:400;
}
.footer__col ul{ display:flex; flex-direction:column; gap: 0.55rem; }
.footer__col a{ text-decoration:none; color: rgba(234,227,214,0.75); }
@media (hover:hover){ .footer__col a:hover{ color: var(--paper-3); } }
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 0.7rem;
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: rgba(234,227,214,0.5);
}
.footer__bottom a{ text-decoration:none; color: rgba(234,227,214,0.65); }
@media (hover:hover){ .footer__bottom a:hover{ color: var(--paper-3); } }

@media (max-width: 700px){
  .footer__grid{ grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Responsiiviset lisäkorjaukset (pidettävä tiedoston lopussa,
   jotta ne voittavat samat-spesifisyys-säännöt aiemmin tiedostossa) ---------- */
@media (max-width: 860px){
  .services__intro{ grid-template-columns: 1fr; align-items:start; }
  .services__intro picture{ order: -1; }
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;
  left: 1rem; top: -60px;
  background: var(--rust);
  color: var(--paper-3);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  text-decoration:none;
  z-index: 10000;
  transition: top 0.15s ease;
}
.skip-link:focus{ top: 1rem; }