/* ===== Puu & Kivi — keittiökalustedemo =====

   MONOKROMI EDITORIAL.

   Sivulla ei ole brändiväriä. Materiaalit ovat väri: puu, kivi ja marmori
   kuvissa tuovat jokaisen lämpimän sävyn, ja käyttöliittymä niiden ympärillä
   on tiukasti musta, valkoinen ja viileä harmaa. Tämä on tietoinen ero
   sisardemoihin, joissa jokaisella on oma väritarina.

   Kolme asiaa, jotka kantavat ilmeen värin sijaan:

   1. TYPOGRAFIA. Archivo hyvin suurena ja hyvin tiiviinä (negatiivinen
      merkkiväli, riviväli lähellä 0,92:ta isoimmissa otsikoissa).
   2. HIUSVIIVAT. Sisältö istuu suoraan sivulla. Ei laatikoita, ei reunuksia,
      ei varjoja — vain viivoja ja väljyyttä.
   3. TERÄVÄ KULMA. Ei yhtään border-radiusta koko sivulla.
   ============================================================== */

:root{
  /* Pinnat ja teksti. Viileä lähes-valkoinen, EI kermanvaalea. */
  --paper:          #FAFAFA;
  --paper-alt:      #F0F0EF;   /* viileä harmaa paneeli */
  --ink:            #0B0B0B;   /* aito lähes-musta */
  --ink-soft:       #4A4A4A;   /* sekundaariteksti: 8,5:1 paperia vasten,
                                  7,8:1 harmaata paneelia vasten */
  --paper-on-dark:  #F2F2F2;   /* 17,6:1 mustaa vasten */
  --paper-soft-dark:#B4B4B4;   /* sekundaari mustalla: 9,5:1 */

  /* Viivat. --line on erotin, --line-strong on rakenne ja kontrollin reuna
     (4,3:1 paperia vasten, ylittää WCAG 1.4.11:n 3:1-vaatimuksen). */
  --line:            rgba(11,11,11,.16);
  --line-strong:     rgba(11,11,11,.55);
  --line-dark:       rgba(242,242,242,.20);
  --line-dark-strong:rgba(242,242,242,.55);  /* 5,7:1 mustaa vasten */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Spline Sans', system-ui, sans-serif;

  --max: 1360px;
  --pad: 28px;

  /* Väljyysasteikko. Osioiden välinen rytmi tulee aina tästä. */
  --sp-hair: 4px;
  --sp-1: 8px;
  --sp-tight: 12px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --sp-7: clamp(80px, 11vw, 152px);

  /* Tekstikoot */
  --t-1: .68rem;   /* mikroversaalit: dt, indeksi, footerin otsikot */
  --t-2: .72rem;   /* eyebrow */
  --t-3: .78rem;   /* napit, kuvatekstit */
  --t-4: .88rem;   /* apuselitteet */
  --t-5: .95rem;   /* navigaatio */
  --t-6: 1.05rem;  /* leipäteksti */
  --t-7: 1.2rem;   /* hero-lead */
  --t-8: 1.4rem;   /* pieni otsikkotaso */

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; border-radius:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-6);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
figure{ margin:0; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
/* Mustilla kaistoilla mustan ääriviivan näkisi kukaan. */
.process :focus-visible,
.footer :focus-visible,
.menu :focus-visible{ outline-color:var(--paper-on-dark); }

::selection{ background:var(--ink); color:var(--paper); }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
section{ padding:var(--sp-7) 0; }

.skip{
  position:absolute;
  left:var(--pad);
  top:-100px;
  z-index:120;
  padding:14px 20px;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--t-3);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* ===== Toistuvat elementit ===== */

/* Eyebrow on hiusviivalla päättyvä rivi: viiva juoksee tekstistä oikeaan
   marginaaliin asti. Sama lehtimäinen ele toistuu hero-otsikossa. */
.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--t-2);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow--dark{ color:var(--paper-soft-dark); }
.eyebrow-rule{
  flex:1 1 24px;
  min-width:24px;
  height:1px;
  background:var(--line-strong);
}
.eyebrow-rule--dark{ background:var(--line-dark-strong); }

.sec-title{
  font-size:clamp(2.1rem, 5.4vw, 4.1rem);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.95;
  color:var(--ink);
}
.sec-title--dark{ color:var(--paper-on-dark); }

/* Osion masthead: hiusviiva alla, otsikko vasemmalla, apuselite oikealla
   samalle alalinjalle. Ei laatikkoa, ei taustaa. */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  column-gap:var(--sp-5);
  row-gap:var(--sp-4);
  align-items:end;
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--line-strong);
}
.sec-head > .eyebrow{ grid-column:1 / -1; }
.sec-head > .sec-title{ grid-column:1; }
.sec-head > .sec-note{ grid-column:2; }
.sec-head--dark{ border-bottom-color:var(--line-dark-strong); }
.sec-note{ color:var(--ink-soft); font-size:var(--t-4); max-width:38ch; }
.sec-note--dark{ color:var(--paper-soft-dark); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border:1px solid transparent;
  font-family:var(--body);
  font-size:var(--t-3);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--ink-soft); }
.btn-line{ border-color:var(--line-strong); color:var(--ink); }
.btn-line:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ===== NAV ===== */

.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(250,250,250,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--line-strong); background:rgba(250,250,250,.97); }

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  height:76px;
}

.brand{ display:inline-flex; align-items:center; gap:var(--sp-tight); }
/* Kaksi pystypalkkia: puu ja kivi. Sama merkki kuin faviconissa. */
.brand-mark{
  width:11px;
  height:20px;
  flex:none;
  background:linear-gradient(to right,
    var(--ink) 0 4px, transparent 4px 7px, var(--ink) 7px 11px);
}
.brand-name{
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-8);
  letter-spacing:-.04em;
  color:var(--ink);
}

.nav-links{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-links a{
  font-size:var(--t-3);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  padding:8px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.nav-links a:hover{ border-bottom-color:var(--ink); }

.nav-end{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-cta{ min-height:44px; padding:12px 20px; font-size:var(--t-1); letter-spacing:.1em; }

.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px; height:44px;
  padding:0 10px;
  background:none;
  border:1px solid var(--line-strong);
  cursor:pointer;
}
.burger span{
  display:block;
  height:1px;
  background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* Kokoruudun valikko. z-index >= 100 ja html.demo-overlay-open ovat jaetun
   demopalkin sopimus, ks. ../demo-bar.css: palkki piiloutuu tämän ajaksi
   sekä näkyvistä että tab-järjestyksestä. */
.menu{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--ink);
  display:grid;
  align-content:safe center;
  justify-content:start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:120px var(--pad) var(--sp-5);
}
.menu[hidden]{ display:none; }
.menu-inner{ display:flex; flex-direction:column; gap:var(--sp-2); }
.menu-inner a{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.1rem, 10vw, 3.4rem);
  letter-spacing:-.05em;
  line-height:.95;
  color:var(--paper-on-dark);
}
.menu-inner a:hover{ color:var(--paper-soft-dark); }
.menu-inner .menu-phone{
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-dark-strong);
  font-family:var(--body);
  font-size:var(--t-7);
  font-weight:500;
  letter-spacing:0;
  color:var(--paper-on-dark);
}
body.is-locked{ overflow:hidden; }

body.is-locked .nav{
  z-index:101;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
body.is-locked .brand-name,
body.is-locked .nav-links a{ color:var(--paper-on-dark); }
body.is-locked .brand-mark{
  background:linear-gradient(to right,
    var(--paper-on-dark) 0 4px, transparent 4px 7px, var(--paper-on-dark) 7px 11px);
}
body.is-locked .burger{ border-color:var(--line-dark-strong); }
body.is-locked .burger span{ background:var(--paper-on-dark); }

/* ===== HERO =====
   Typografinen juliste, ei teksti/kuva-palstoitusta. */

.hero{ padding-top:clamp(36px, 4.4vw, 60px); padding-bottom:0; }

.hero-eyebrow{ padding-bottom:var(--sp-3); }

.hero-title{
  display:flex;
  flex-direction:column;
  font-size:clamp(2.5rem, 9vw, 7.6rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.05em;
  color:var(--ink);
}
.hero-line{ display:block; }
/* Viimeinen rivi päättyy paksuun viivaan, joka juoksee oikeaan
   marginaaliin asti — lehden ele, ei aksenttiväri. */
.hero-line--rule{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2.6vw, 40px);
}
.hero-word{ flex:0 1 auto; min-width:0; }
.hero-line--rule::after{
  content:'';
  flex:1 1 20px;
  min-width:20px;
  height:3px;
  background:var(--ink);
}

/* Kuvan alle tuleva "kansiluettelo": ingressi, napit ja tiedot ruudukkona.
   Kuvan alareuna toimii erottimena, siksi ei omaa yläviivaa. */
.hero-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--sp-4) var(--sp-5);
  align-items:end;
  padding-top:var(--sp-4);
}
.hero-lead{ max-width:56ch; font-size:var(--t-7); line-height:1.5; color:var(--ink-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* Kuvakaista reunasta reunaan. Rajaus CSS:llä, ei kuvatiedostoa
   koskemalla — kuvakansio on lukittu. */
.hero-bleed{ margin-top:var(--sp-5); background:var(--paper-alt); }
.hero-bleed img{
  width:100%;
  height:auto;
  aspect-ratio:24/9;
  object-fit:cover;
  object-position:center 48%;
}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:var(--sp-4);
  border-top:1px solid var(--line-strong);
}
.hero-meta-item{
  padding:var(--sp-3) var(--sp-3) 0;
  border-left:1px solid var(--line);
}
.hero-meta-item:first-child{ border-left:0; padding-left:0; }
.hero-meta dt{
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:var(--sp-1);
}
.hero-meta dd{ font-size:var(--t-5); }
.hero-meta a{ display:inline-block; padding:3px 0; border-bottom:1px solid var(--line); }
.hero-meta a:hover{ border-bottom-color:var(--ink); }

/* ===== TYYLIT =====
   Epäsymmetrinen 12-palstainen ruudukko: kuvan leveys ja kuvasuhde
   vaihtuvat rivistä toiseen. Ei kortteja. */

.style-row{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--sp-4);
  row-gap:var(--sp-3);
  align-items:end;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.style-row + .style-row{ margin-top:var(--sp-6); }

/* Molemmat samalle riville eksplisiittisesti. Ilman tätä rivi 2 hajoaisi:
   kuva on DOM:issa ensin ja vie palstat 8–12, jolloin automaattisen
   sijoittelun kursori on jo palstan 12 oikealla puolella eikä teksti
   (palstat 1–5) mahdu enää taakse — se putoaisi seuraavalle riville. */
.style-row .style-media,
.style-row .style-text{ grid-row:1; }

.style-media img{ width:100%; height:auto; object-fit:cover; background:var(--paper-alt); }

.style-row:nth-child(1) .style-media{ grid-column:1 / span 7; }
.style-row:nth-child(1) .style-text { grid-column:9 / span 4; }
.style-row:nth-child(1) .style-media img{ aspect-ratio:16/10; }

.style-row:nth-child(2) .style-media{ grid-column:8 / span 5; }
.style-row:nth-child(2) .style-text { grid-column:1 / span 5; }
.style-row:nth-child(2) .style-media img{ aspect-ratio:3/4; }

.style-row:nth-child(3) .style-media{ grid-column:1 / span 6; }
.style-row:nth-child(3) .style-text { grid-column:8 / span 5; }
.style-row:nth-child(3) .style-media img{ aspect-ratio:4/3; object-position:center 60%; }

.style-index{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-1);
  letter-spacing:.2em;
  color:var(--ink-soft);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line-strong);
  margin-bottom:var(--sp-3);
}
.style-name{ font-size:clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-.04em; margin-bottom:var(--sp-2); }
.style-copy{ color:var(--ink-soft); font-size:var(--t-4); max-width:42ch; }

/* ===== PROSESSI =====
   Musta kaista reunasta reunaan. Vaiheet ovat viivoin eroteltuja rivejä,
   joissa numero on iso — ei kolmea laatikkoa vierekkäin. */

.process{ background:var(--ink); }
.process-item{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,6fr);
  column-gap:var(--sp-5);
  row-gap:var(--sp-2);
  align-items:start;
  padding:var(--sp-4) 0;
  border-top:1px solid var(--line-dark);
}
.process-item:first-child{ border-top:1px solid var(--line-dark-strong); }
.process-item:last-child{ border-bottom:1px solid var(--line-dark-strong); }

.process-num{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3rem, 8vw, 6.5rem);
  line-height:.82;
  letter-spacing:-.06em;
  color:var(--paper-soft-dark);
}
.process-item h3{
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing:-.04em;
  color:var(--paper-on-dark);
  padding-top:.28em;
}
.process-item p{ color:var(--paper-soft-dark); font-size:var(--t-4); max-width:52ch; padding-top:.4em; }

/* ===== REFERENSSIT =====
   Tarkoituksella epätasainen: kolme eri leveyttä, eri kuvasuhteet,
   eri pystysijainti. Ei ruudukkoa. */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--sp-4);
  row-gap:var(--sp-5);
  align-items:start;
}
.gallery-item:nth-child(1){ grid-column:1 / span 6; grid-row:1; }
.gallery-item:nth-child(2){ grid-column:8 / span 5; grid-row:1 / span 2; }
.gallery-item:nth-child(3){ grid-column:2 / span 5; grid-row:2; margin-top:var(--sp-4); }

/* Taustasävy vain kuvalaatikkoon, ei koko figureen — muuten kuvatekstin
   taakse jäisi harmaa palkki ja siitä tulisi kortin alalaita. */
.gallery-item img{ width:100%; height:auto; object-fit:cover; background:var(--paper-alt); }
.gallery-item:nth-child(1) img{ aspect-ratio:4/3; }
.gallery-item:nth-child(2) img{ aspect-ratio:2/3; }
.gallery-item:nth-child(3) img{ aspect-ratio:16/9; object-position:center 60%; }

.gallery-item figcaption{
  margin-top:var(--sp-2);
  padding-top:var(--sp-tight);
  border-top:1px solid var(--line-strong);
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--ink-soft);
}

/* ===== YHTEYS ===== */

.contact{ background:var(--paper-alt); }

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--sp-5) var(--sp-6);
}

.contact-kicker{
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:var(--sp-4);
}
.contact-kicker:first-child{ margin-top:0; }
.contact-phone{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  line-height:.95;
  letter-spacing:-.05em;
  color:var(--ink);
  margin:var(--sp-2) 0 0;
}
.contact-phone:hover{ color:var(--ink-soft); }
.contact-mail{
  display:inline-block;
  margin-top:var(--sp-2);
  font-size:var(--t-7);
  color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:3px;
}
.contact-mail:hover{ border-bottom-color:var(--ink); color:var(--ink-soft); }
.contact-small{ max-width:44ch; margin-top:var(--sp-4); color:var(--ink-soft); font-size:var(--t-4); }
.contact-cta{ margin-top:var(--sp-4); }

.contact-h3{
  font-family:var(--body);
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}
.hours-list{ margin-bottom:var(--sp-5); }
.hours-list li{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:13px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:var(--t-5);
}
.hours-list li:first-child{ border-top:1px solid var(--line-strong); }
.hours-list li:last-child{ border-bottom-color:var(--line-strong); }
.hours-list .closed{ color:var(--ink-soft); }
.contact-address{ color:var(--ink-soft); line-height:1.7; font-size:var(--t-5); }

/* ===== FOOTER ===== */

.footer{ background:var(--ink); padding-top:var(--sp-6); }
.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1fr;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
}
.footer-brand{ font-size:var(--t-8); color:var(--paper-on-dark); }
.footer-col p{ margin-top:var(--sp-2); max-width:30ch; font-size:var(--t-4); color:var(--paper-soft-dark); }
.footer-col h4{
  font-family:var(--body);
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper-soft-dark);
  padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--line-dark);
}
.footer-col a,
.footer-col span:not(.brand-name){
  display:block;
  padding:4px 0;
  font-size:var(--t-4);
  color:var(--paper-soft-dark);
}
.footer-col a{ transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--paper-on-dark); }

/* Ääriviivalla piirretty jättisanamerkki. aria-hidden — koriste, ei
   luettavaa sisältöä. Teksti tulee CSS:stä eikä HTML:stä: 6 %:n peittävyys on
   tarkoituksella lukukelvoton, ja tekstisolmuna Lighthouse laski sille
   kontrastisuhteeksi 1,11 ja pudotti saavutettavuuspisteen 96:een. */
.footer-wordmark{
  padding:0 var(--pad);
  user-select:none;
}

.footer-wordmark::before{
  content:"Puu & Kivi";
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem, 14.5vw, 11rem);
  line-height:.86;
  letter-spacing:-.055em;
  color:rgba(242,242,242,.06);
  -webkit-text-stroke:1px rgba(242,242,242,.16);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-tight);
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-4);
  border-top:1px solid var(--line-dark);
  font-size:var(--t-3);
  color:var(--paper-soft-dark);
}
.footer-bottom strong{ color:var(--paper-on-dark); font-weight:600; }

/* ===== Scroll-reveal ===== */

@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .js .reveal.is-in{ opacity:1; transform:none; }
}

/* ===== Responsiivisuus ===== */

@media (max-width:1100px){
  :root{ --pad:24px; }
  .style-row:nth-child(1) .style-media{ grid-column:1 / span 7; }
  .style-row:nth-child(1) .style-text { grid-column:8 / span 5; }
  .style-row:nth-child(2) .style-media{ grid-column:7 / span 6; }
  .style-row:nth-child(2) .style-text { grid-column:1 / span 6; }
  .style-row:nth-child(3) .style-media{ grid-column:1 / span 7; }
  .style-row:nth-child(3) .style-text { grid-column:8 / span 5; }
  .process-item{ grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,5fr); column-gap:var(--sp-4); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-4); }
  .footer-col:first-child{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .burger{ display:flex; }

  .sec-head{ grid-template-columns:1fr; align-items:start; row-gap:var(--sp-3); margin-bottom:var(--sp-4); }
  .sec-head > .sec-note{ grid-column:1; }

  .hero-body{ grid-template-columns:1fr; align-items:start; }
  .hero-bleed img{ aspect-ratio:16/9; }

  /* Rivit pinoutuvat, mutta epäsymmetria säilyy: kuvien leveydet
     vaihtelevat edelleen. */
  .style-row{ grid-template-columns:1fr; row-gap:var(--sp-3); }
  /* Pinottuna kuva ja teksti ovat omilla riveillään — muuten ne osuisivat
     samaan soluun päällekkäin (ks. grid-row:1 työpöytäsäännössä). */
  .style-row .style-media,
  .style-row .style-text{ grid-column:1 !important; grid-row:auto !important; }
  .style-row:nth-child(2) .style-media{ width:74%; }
  .style-row:nth-child(3) .style-media{ width:90%; margin-left:auto; }
  .style-row:nth-child(2) .style-media img{ aspect-ratio:4/5; }

  .process-item{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-1); padding:var(--sp-3) 0 var(--sp-4); }
  .process-item h3{ padding-top:var(--sp-1); }
  .process-item p{ padding-top:0; }

  .gallery-grid{ grid-template-columns:1fr; row-gap:var(--sp-4); }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3){ grid-column:1; grid-row:auto; margin-top:0; }
  .gallery-item:nth-child(2){ width:76%; margin-left:auto; }
  .gallery-item:nth-child(3){ width:92%; }
  .gallery-item:nth-child(2) img{ aspect-ratio:3/4; }

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

@media (max-width:640px){
  :root{ --pad:20px; }
  html{ scroll-padding-top:76px; }
  .nav-inner{ height:62px; gap:var(--sp-2); }
  .nav-cta-long{ display:none; }
  .nav-cta{ padding:11px 13px; font-size:.62rem; letter-spacing:.07em; }
  .brand-name{ font-size:1.1rem; }
  .brand-mark{ height:17px; }

  .hero{ padding-top:var(--sp-3); }
  .hero-bleed{ margin-top:var(--sp-4); }
  .hero-bleed img{ aspect-ratio:4/3; }
  .hero-lead{ font-size:var(--t-6); }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; }
  .hero-meta{ grid-template-columns:1fr; }
  .hero-meta-item{ padding:var(--sp-2) 0; border-left:0; border-top:1px solid var(--line); }
  .hero-meta-item:first-child{ border-top:0; padding-top:var(--sp-3); }

  .style-row + .style-row{ margin-top:var(--sp-5); }
  .style-row:nth-child(2) .style-media{ width:86%; }
  .style-row:nth-child(3) .style-media{ width:100%; }

  .gallery-item:nth-child(2){ width:86%; }
  .gallery-item:nth-child(3){ width:100%; }

  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}