/* ===== Käpälä Eläinklinikka — eläinlääkäriasema-demo =====
   Kirkas ja viileä pieneläinklinikka: valkoinen ja kylmänvaalea utu pohjana,
   kylläinen turkoosi kantavana rakennevärinä isoina värilohkoina ja lämmin
   keltainen pisteenä siellä täällä. Muodot ovat auliisti pyöristettyjä:
   pillerinapit, 20–28 px kortit ja ympyräkuvat.

   Tämä on tietoinen vastakohta sisarsivuille: ei kermanvaaleaa pohjaa, ei
   vaimeita maavärejä eikä antiikvaa. Ravintola on syvänsininen ja karmiini
   valkoisella, kampaamo lähes musta ja messinki, hyvinvointi kerman ja salvian
   editoriaali — tämä on kirkas, viileä ja pyöreä.

   Kontrastit (WCAG 2.1 AA, laskettu ei arvattu):
     ink #0F2E33 valkoisella           14,4:1
     muted #4E6B70 valkoisella          5,7:1   utulla 5,2:1
     teal-deep #006B62 valkoisella      6,4:1   utulla 5,8:1   ← pieni teksti
     teal #00857A valkoisella           4,5:1                  ← iso/lihava
     valkoinen turkoosilla #00857A      4,5:1
     valkoinen syväturoosilla #006B62   6,4:1
     ink keltaisella #FFB627            8,2:1
   Keltainen turkoosia vasten on vain 2,6:1, joten keltaista ei koskaan
   käytetä tekstinä eikä kontrollin tunnisteena turkoosilla — vain
   koristeena ja ink-tekstin pohjana. ===== */

:root{
  /* Väri */
  --white:      #FFFFFF;
  --mist:       #EEF4F5;   /* kylmä vaalea pesu: vuorottelevat osiot */
  --mist-deep:  #DDE9EB;
  --ink:        #0F2E33;
  --teal:       #00857A;
  --teal-deep:  #006B62;   /* hover + kaikki pieni teksti */
  --sun:        #FFB627;
  --muted:      #4E6B70;
  --border:     rgba(15,46,51,.12);

  /* Typografia */
  --display: 'Gabarito', system-ui, sans-serif;
  --body:    'Asap', system-ui, sans-serif;

  /* Mitat */
  --max: 1180px;
  --pad: 24px;
  --nav-h: 78px;

  /* Väljyys */
  --sp-hair: 4px;
  --sp-1: 8px;
  --sp-tight: 12px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 72px;
  --sp-7: clamp(64px, 10vw, 120px);

  /* Pyöristys — brändin kantava tunnusmerkki */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;

  --shadow: 0 26px 50px -22px rgba(15,46,51,.28), 0 2px 8px rgba(15,46,51,.05);
  --shadow-soft: 0 14px 30px -18px rgba(15,46,51,.30);
  --ease: cubic-bezier(.22,1,.36,1);
}

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

/* Pohja on utu, ei valkoinen: näin footerin pyöristetyn yläreunan kulmista
   paljastuu utu eikä valkoinen läiskä. Valkoiset osiot merkitään erikseen. */
body{
  background:var(--mist);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* height:auto on pakollinen: jokaisessa kuvassa on width/height-attribuutit
   (estävät layout shiftin), ja ilman tätä attribuutin px-korkeus jyrää
   CSS:n aspect-ration. */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
address{ font-style:normal; }

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

:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}
/* Turkoosilla pohjalla turkoosi kehys katoaisi: valkoinen antaa 4,5:1. */
.hero :focus-visible,
.book :focus-visible,
.menu :focus-visible,
.nav:not(.is-scrolled) :focus-visible{ outline-color:var(--white); }

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

.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:13px 20px;
  background:var(--sun);
  color:var(--ink);
  font-family:var(--display);
  font-weight:700;
  border-radius:var(--r-pill);
  transition:top .2s var(--ease);
}
.skip:focus{ top:14px; }

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

.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--sp-tight);
  font-family:var(--display);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
}
.eyebrow-light{ color:var(--white); }
.eyebrow-rule{
  display:block;
  width:28px;
  height:4px;
  border-radius:var(--r-pill);
  background:var(--sun);
}

.sec-title{
  font-size:clamp(2.05rem, 4.6vw, 3rem);
  font-weight:800;
  margin-top:var(--sp-2);
}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,23rem);
  gap:var(--sp-4);
  align-items:end;
  margin-bottom:clamp(40px, 6vw, 68px);
}
.sec-note{
  color:var(--muted);
  font-size:1rem;
  max-width:34ch;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 30px;
  border:2px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--display);
  font-size:.98rem;
  font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
/* Turkoosilla pohjalla: valkoinen täyttö (raja 4,5:1 turkoosia vasten). */
.btn-white{ background:var(--white); color:var(--teal-deep); }
.btn-white:hover{ background:var(--sun); color:var(--ink); transform:translateY(-2px); }
.btn-outline{ border-color:var(--white); color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--teal-deep); transform:translateY(-2px); }

/* ===== NAV =====
   Väriparit tulevat muuttujina, jotta kolme tilaa (hero-turkoosin päällä,
   vieritetty valkoinen, valikko auki) eivät tarvitse päällekkäisiä
   lapsisääntöjä. */

.nav{
  --nav-fg:      var(--white);
  --nav-cta-bg:  var(--white);
  --nav-cta-fg:  var(--teal-deep);
  --nav-line:    rgba(255,255,255,.9);

  position:sticky;
  top:0;
  z-index:60;
  background:transparent;
  transition:background .28s var(--ease), box-shadow .28s var(--ease);
}
.nav.is-scrolled{
  --nav-fg:      var(--ink);
  --nav-cta-bg:  var(--teal-deep);
  --nav-cta-fg:  var(--white);
  --nav-line:    var(--teal);

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border), 0 18px 34px -30px rgba(15,46,51,.7);
}

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

.brand{ display:inline-flex; align-items:center; gap:var(--sp-tight); }
/* Keltainen merkki toimii sekä turkoosilla että valkoisella, joten se ei
   vaihdu tilan mukana. Käpälä on ink: 8,2:1 keltaista vasten. */
.brand-mark{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:12px;
  background:var(--sun);
  color:var(--ink);
  flex:none;
}
.brand-mark svg{ width:21px; height:21px; fill:currentColor; }
/* ÄLÄ "korjaa" tämän kontrastia Lighthousen kehotuksesta.
   Lighthouse ilmoittaa tästä color-contrast-virheen (1,11) ja pitää siksi
   sivun saavutettavuuspisteen 96:ssa. Se on väärä hälytys: navi on rullaamatta
   läpinäkyvä ja sen takana on .hero::before-gradientti, joten valkoinen teksti
   on turkoosin (#00857A) päällä eli 4,5:1. axe ei osaa lukea pseudoelementin
   gradienttia taustaksi ja käyttää sen sijaan bodyn väriä #EEF4F5.
   Tekstin tummentaminen tekisi logosta lukukelvottoman oikeaa taustaansa
   vasten — eli rikkoisi juuri sen mitä auditti yrittää suojella. */
.brand-name{
  font-family:var(--display);
  font-weight:500;
  font-size:1.12rem;
  letter-spacing:-.02em;
  color:var(--nav-fg);
  transition:color .28s var(--ease);
}
.brand-name strong{ font-weight:800; }

/* Navissa ei ole rivilinkkejä millään leveydellä. Kaikki osiolinkit ovat
   kokoruudun valikossa, joten navipalkkiin jää logo, soittonappi ja avausnappi. */
.nav-end{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-cta{
  min-height:44px;
  padding:11px 22px;
  font-size:.9rem;
  background:var(--nav-cta-bg);
  color:var(--nav-cta-fg);
}
.nav-cta:hover{ background:var(--sun); color:var(--ink); transform:translateY(-1px); }

.burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:46px; height:46px;
  padding:0 11px;
  background:none;
  border:2px solid var(--nav-line);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:border-color .28s var(--ease);
}
.burger span{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--nav-fg);
  transition:transform .25s var(--ease), background .28s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* Valikko — koko ruudun turkoosi paneeli, käytössä kaikilla leveyksillä */
.menu{
  position:fixed;
  inset:0;
  /* >= 100: jaetun demopalkin sopimus, ks. ../demo-bar.css. Palkki on
     z-indexillä 60, joten matalampi arvo jättäisi valikon sen alle. */
  z-index:100;
  background:linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 100%);
  display:grid;
  place-content:safe center;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:96px var(--pad) var(--sp-5);
}
.menu[hidden]{ display:none; }
.menu-inner{ display:flex; flex-direction:column; gap:var(--sp-3); text-align:center; }
.menu-inner a{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.9rem, 8vw, 2.8rem);
  letter-spacing:-.03em;
  color:var(--white);
}
.menu-inner a:hover{ color:var(--sun); }
.menu-inner .menu-phone{
  margin-top:var(--sp-2);
  font-family:var(--body);
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--white);
}
body.is-locked{ overflow:hidden; }

/* Valikon ollessa auki navipalkki nostetaan paneelin päälle ja palautetaan
   vaaleaan väripariin — turkoosi paneeli on sen takana. */
body.is-locked .nav{
  --nav-fg:      var(--white);
  --nav-cta-bg:  var(--white);
  --nav-cta-fg:  var(--teal-deep);
  --nav-line:    rgba(255,255,255,.9);

  z-index:101;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

/* ===== HERO =====
   Täysleveä turkoosi värilohko, joka jatkuu navipalkin taakse asti. Lohko
   loppuu --hero-foot ennen osion alareunaa, joten alaosan "stage" (neliökuva
   + valkoinen tietokortti) rikkoo reunan ja valuu valkoiselle puolelle. */

.hero{
  --hero-foot: clamp(92px, 12vw, 172px);
  position:relative;
  isolation:isolate;
  background:var(--white);
  padding-top:clamp(28px, 4vw, 52px);
  padding-bottom:clamp(56px, 7vw, 88px);
}
.hero::before{
  content:'';
  position:absolute;
  left:0; right:0;
  top:calc(-1 * var(--nav-h));
  bottom:var(--hero-foot);
  z-index:0;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, var(--teal) 0%, var(--teal) 55%, var(--teal-deep) 100%);
}
.hero > .wrap{ position:relative; z-index:2; }

.hero-paw{
  position:absolute;
  z-index:1;
  right:3%;
  top:calc(var(--nav-h) * .3);
  width:min(300px, 24vw);
  height:min(300px, 24vw);
  color:var(--white);
  opacity:.11;
  pointer-events:none;
  transform:rotate(14deg);
}
.hero-paw svg{ width:100%; height:100%; fill:currentColor; }

.hero-title{
  color:var(--white);
  font-size:clamp(2.3rem, 4.6vw, 3.5rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.04;
  margin:var(--sp-3) 0 var(--sp-4);
  max-width:20ch;
}

/* Leipä vasemmalle, napit oikealle: rivi käyttää koko lohkon leveyden. */
.hero-say{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-4);
  align-items:end;
  padding-top:var(--sp-3);
  border-top:1px solid rgba(255,255,255,.28);
}
.hero-lead{
  max-width:58ch;
  font-size:clamp(1.04rem, 1.4vw, 1.16rem);
  color:var(--white);   /* läpikuultava valkoinen putoaisi alle 4,5:1 */
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

.hero-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,460px) minmax(260px,1fr);
  gap:clamp(20px, 3vw, 32px);
  align-items:stretch;
  margin-top:clamp(32px, 4.5vw, 56px);
}

.hero-figure{ position:relative; }
.hero-figure img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  /* Neliörajaus: eläinlääkärin kasvot ovat kuvan yläreunassa ja koira
     alempana, joten leveä nauha leikkaisi toisen aina pois. 24 % jättää
     koiran selvästi keltaisen merkkipallon yläpuolelle. */
  object-position:center 24%;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.hero-badge{
  position:absolute;
  left:var(--sp-3);
  bottom:calc(-1 * var(--sp-2));
  display:inline-flex;
  align-items:center;
  gap:var(--sp-tight);
  max-width:calc(100% - var(--sp-4));
  background:var(--sun);
  border-radius:var(--r-pill);
  padding:9px 20px 9px 9px;
  font-size:.86rem;
  font-weight:600;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.hero-badge-icon{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  flex:none;
  border-radius:50%;
  background:var(--ink);
  color:var(--sun);
}
.hero-badge-icon svg{ width:16px; height:16px; fill:currentColor; }

/* Kolme yhtä korkeaa riviä: erotinviivat osuvat tasan kolmannespisteisiin.
   Flex + space-between jättäisi viivan keskelle epäsymmetristä tyhjää. */
.hero-meta{
  display:grid;
  grid-template-rows:repeat(3, 1fr);
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 40px);
  box-shadow:var(--shadow);
}
.hero-meta-item{ display:flex; flex-direction:column; justify-content:center; }
.hero-meta-item + .hero-meta-item{ border-top:1px solid var(--border); }
.hero-meta dt{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--sp-hair);
}
.meta-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 0 4px rgba(255,182,39,.28);
}
.hero-meta dd{
  font-family:var(--display);
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight:600;
  letter-spacing:-.01em;
}
/* Puhelinlinkki on itsenäinen kosketuskohde: nostetaan korkeus yli 24 px:n
   (WCAG 2.2 kohdekoko). */
.hero-meta a{ display:inline-block; padding:3px 0; }
.hero-meta a:hover{ color:var(--teal-deep); }

/* ===== PALVELUT =====
   Vuorottelevat täysleveät rivit. Kuva vaihtaa puolta joka rivillä, joten
   sivulla ei ole yhtään tasakokoista korttiruudukkoa. */

.services{ background:var(--white); }

.svc-rows{ display:flex; flex-direction:column; gap:clamp(52px, 8vw, 92px); }

.svc{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px, 5vw, 68px);
  align-items:center;
}
.svc:nth-child(even) .svc-media{ order:2; }

.svc-media{ position:relative; }
.svc-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
/* Ainoa pystykuva palveluissa: kissa ja kädet ovat kuvan alalaidassa, joten
   vaakarajaus otetaan alhaalta. Keskeltä rajattuna kuvassa näkyisi pelkkä
   paita eikä alt-tekstin kuvaamaa tutkimusta. */
.svc-media-low img{ object-position:center 88%; }

/* Neljäs rivi ilman valokuvaa: umpiturkoosi paneeli antaa valkoiselle
   osiolle kolmannen väri-iskun eikä jätä vaaleaa tyhjiötä. */
.svc-media-icon{
  display:grid;
  place-items:center;
  /* Ilman tätä implisiittiset rivit venyisivät koko korkeuteen ja ikoni sekä
     lappu ajautuisivat paneelin ylä- ja alapuoliskon keskelle. */
  align-content:center;
  gap:var(--sp-3);
  aspect-ratio:4/3;
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal-deep) 100%);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.svc-icon{
  display:grid;
  place-items:center;
  width:96px; height:96px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:2px solid var(--white);
  color:var(--white);
}
.svc-icon svg{ width:44px; height:44px; }

/* Hintalappu on koriste, ei kontrolli: keltaisen ja valkoisen raja jää alle
   3:1, mutta lapussa oleva teksti on ink eli 8,2:1. */
.svc-price{
  position:absolute;
  left:var(--sp-3);
  bottom:calc(-1 * var(--sp-2));
  background:var(--sun);
  color:var(--ink);
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:-.01em;
  padding:10px 20px;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-soft);
  white-space:nowrap;
}
.svc:nth-child(even) .svc-price{ left:auto; right:var(--sp-3); }
.svc-price-tag{
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
}
/* Turkoosilla paneelilla lappu kääntyy valkoiseksi: ink-lappu turkoosilla
   jäisi liian lähelle pohjan sävyä. */
.svc-media-icon .svc-price-tag{
  position:static;
  background:var(--white);
  color:var(--teal-deep);
}

.svc-index{
  display:inline-block;
  position:relative;
  font-family:var(--display);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.1em;
  color:var(--teal-deep);
  padding-bottom:10px;
  margin-bottom:var(--sp-2);
}
.svc-index::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:26px; height:4px;
  border-radius:var(--r-pill);
  background:var(--sun);
}
.svc-text h3{
  font-size:clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight:800;
  margin-bottom:var(--sp-2);
}
.svc-text p{ color:var(--muted); font-size:1.02rem; }
.svc-text .svc-fine{
  display:inline-block;
  margin-top:var(--sp-3);
  padding:8px 16px;
  border-radius:var(--r-pill);
  background:var(--mist);
  font-weight:600;
  color:var(--teal-deep);
  font-size:.88rem;
}

/* ===== TIIMI =====
   Kaksi täysleveää riviä, ympyräkuvat vastakkaisilla puolilla. */

/* Sama sävy kuin bodyssa, mutta kirjoitettuna auki: osion pinta ei saa
   riippua siitä, mikä bodyn tausta sattuu olemaan. */
.team{ background:var(--mist); }

.team-rows{ display:flex; flex-direction:column; gap:clamp(36px, 5vw, 60px); }

.member{
  display:grid;
  grid-template-columns:clamp(150px, 20vw, 230px) minmax(0,1fr);
  gap:clamp(24px, 4vw, 52px);
  align-items:center;
}
.member:nth-child(even){ grid-template-columns:minmax(0,1fr) clamp(150px, 20vw, 230px); }
.member:nth-child(even) .member-photo{ order:2; }

.member-photo{
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 6px var(--white), 0 0 0 9px var(--teal), var(--shadow);
}
.member-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
}
.member-name{ font-size:clamp(1.5rem, 2.6vw, 1.95rem); font-weight:800; }
.member-role{
  margin-top:var(--sp-hair);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--teal-deep);
}
.member-quote{
  margin-top:var(--sp-3);
  padding-left:var(--sp-3);
  border-left:4px solid var(--sun);
  font-size:1.05rem;
  color:var(--muted);
}

/* ===== AJANVARAUS =====
   Sivun toinen täysleveä turkoosi lohko. */

.book{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:var(--white);
  text-align:center;
}
.book-paw{
  position:absolute;
  right:-40px;
  top:50%;
  transform:translateY(-50%) rotate(18deg);
  width:min(360px, 45vw);
  height:min(360px, 45vw);
  color:var(--white);
  opacity:.10;
  pointer-events:none;
}
.book-paw svg{ width:100%; height:100%; fill:currentColor; }
.book-inner{ position:relative; max-width:660px; }
.book-inner .eyebrow{ justify-content:center; }
.book-title{ color:var(--white); }
.book-lead{
  margin-top:var(--sp-3);
  font-size:1.12rem;
  max-width:44ch;
  margin-inline:auto;
}
.book-phone{
  display:inline-flex;
  margin-top:var(--sp-5);
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.1rem, 5.6vw, 3.3rem);
  letter-spacing:-.03em;
  background:var(--white);
  color:var(--teal-deep);
  padding:16px 44px;
  border-radius:var(--r-pill);
  box-shadow:0 24px 44px -18px rgba(0,0,0,.4);
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.book-phone:hover{ background:var(--sun); color:var(--ink); transform:translateY(-3px); }
.book-small{
  margin-top:var(--sp-4);
  font-size:.94rem;
  max-width:42ch;
  margin-inline:auto;
}
.book-mail{
  display:inline-block;
  margin-top:var(--sp-3);
  padding-bottom:3px;
  font-size:.94rem;
  font-weight:600;
  color:var(--white);
  border-bottom:2px solid var(--sun);
}
.book-mail:hover{ border-color:var(--white); }

/* ===== ASIAKASKOKEMUKSET ===== */

.voices{ background:var(--white); }

.voices-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-4);
  align-items:center;
  margin-bottom:clamp(40px, 6vw, 64px);
}
.voices-portrait img{
  width:clamp(170px, 24vw, 260px);
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;
  object-position:center 44%;
  box-shadow:0 0 0 6px var(--white), 0 0 0 9px var(--sun), var(--shadow);
}

.voice-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-3);
}
.voice{
  position:relative;
  background:var(--mist);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-3) var(--sp-3);
}
.voice::before{
  content:'“';
  position:absolute;
  top:14px; left:var(--sp-3);
  font-family:var(--display);
  font-weight:800;
  font-size:3.6rem;
  line-height:1;
  color:var(--sun);
}
.voice blockquote{
  font-size:1.04rem;
  line-height:1.58;
  color:var(--ink);
}
.voice-by{
  margin-top:var(--sp-2);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--teal-deep);
}

/* ===== YHTEYSTIEDOT ===== */

.contact{ background:var(--mist); }

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px, 3vw, 32px);
  align-items:start;
}
.contact-book,
.contact-hours{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3.2vw, 40px);
  box-shadow:var(--shadow-soft);
}

.contact-h3{
  font-family:var(--display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-bottom:var(--sp-2);
}
.contact-h3-spaced{ margin-top:var(--sp-5); }
.contact-kicker{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:var(--sp-3);
}
.contact-phone{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.9rem, 4.4vw, 2.6rem);
  letter-spacing:-.03em;
  margin:var(--sp-hair) 0;
  transition:color .22s var(--ease);
}
.contact-phone:hover{ color:var(--teal-deep); }
.contact-mail{
  display:inline-block;
  margin:var(--sp-hair) 0;
  padding-bottom:3px;
  font-size:1.05rem;
  font-weight:600;
  color:var(--teal-deep);
  border-bottom:2px solid var(--sun);
}
.contact-mail:hover{ border-color:var(--teal); }
.contact-small{
  margin-top:var(--sp-3);
  max-width:38ch;
  font-size:.94rem;
  color:var(--muted);
}
.contact-address{
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
}

.hours-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--sp-tight);
}
.hour-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:14px 6px;
  background:var(--mist-deep);
  border-radius:var(--r-md);
  text-align:center;
}
.hour-day{
  font-family:var(--display);
  font-weight:800;
  font-size:.88rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--teal-deep);
}
.hour-range{ font-size:.86rem; color:var(--muted); font-weight:500; }
.hour-chip.is-today{ background:var(--sun); }
.hour-chip.is-today .hour-day,
.hour-chip.is-today .hour-range{ color:var(--ink); }
.hour-chip.is-today .hour-day::after{
  content:'Tänään';
  display:block;
  font-family:var(--body);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:none;
  margin-top:2px;
}

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

.footer{
  background:var(--ink);
  color:var(--white);
  border-radius:clamp(26px, 4vw, 48px) clamp(26px, 4vw, 48px) 0 0;
  padding-top:var(--sp-6);
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr 1fr;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
}
.footer-brand{ font-size:1.35rem; color:var(--white); }
.footer-col p{
  margin-top:var(--sp-2);
  max-width:30ch;
  font-size:.92rem;
  color:rgba(255,255,255,.78);   /* 9,3:1 */
}
.footer-col h3{
  font-family:var(--display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sun);              /* 8,2:1 ink-pohjaa vasten */
  margin-bottom:var(--sp-2);
}
/* Pystypadding nostaa linkin kosketuskohteen yli 24 px:n (WCAG 2.2, 2.5.8). */
.footer-col a,
.footer-col span:not(.brand-name){
  display:block;
  padding:3px 0;
  font-size:.92rem;
  color:rgba(255,255,255,.78);
  margin-bottom:var(--sp-hair);
}
.footer-col a{ transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--sun); }

.footer-social{ display:flex; gap:var(--sp-tight); margin-top:var(--sp-3); }
.footer-social a{
  width:42px; height:42px;
  display:grid;
  place-items:center;
  margin:0;
  border:2px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:rgba(255,255,255,.78);
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.footer-social a:hover{ border-color:var(--sun); color:var(--sun); }
.footer-social svg{ width:18px; height:18px; }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-tight);
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.84rem;
  color:rgba(255,255,255,.78);
}
.footer-bottom strong{ color:var(--white); font-weight:700; }

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

@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .reveal.is-in{ opacity:1; transform:none; }
  .js .team-rows.is-in .member{ animation:rise .6s var(--ease) both; }
  .js .team-rows.is-in .member:nth-child(2){ animation-delay:.09s; }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

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

@media (max-width:1000px){
  /* Kuva kutistuu mutta pysyy kortin rinnalla: yksipalstaisena 460 px:n
     neliön viereen jäisi iso tyhjä turkoosi alue. */
  .hero-stage{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .voices-head{ grid-template-columns:1fr; justify-items:start; }
  .voice-list{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-3); }
  .footer-col-brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .sec-head{ grid-template-columns:1fr; align-items:start; gap:var(--sp-3); }
  .hero-say{ grid-template-columns:1fr; align-items:start; gap:var(--sp-3); }
  .hero-stage{ grid-template-columns:1fr; }
  .hero-figure{ max-width:420px; margin-inline:auto; }
  .svc,
  .svc:nth-child(even){ grid-template-columns:1fr; gap:var(--sp-4); }
  .svc:nth-child(even) .svc-media{ order:0; }
  .member,
  .member:nth-child(even){ grid-template-columns:1fr; gap:var(--sp-3); justify-items:start; }
  .member:nth-child(even) .member-photo{ order:0; }
  .member-photo{ width:clamp(150px, 34vw, 210px); }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  :root{ --pad:20px; --nav-h:68px; }
  html{ scroll-padding-top:84px; }
  .nav-inner{ gap:var(--sp-2); }
  .nav-cta-long{ display:none; }        /* "Soita nyt" → "Soita" */
  .nav-cta{ padding:11px 18px; }
  .brand-name{ font-size:1rem; }
  .brand-mark{ width:34px; height:34px; }
  .hero{ --hero-foot:82px; }
  .hero-title{ max-width:none; }
  .hero-paw{ display:none; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 auto; }
  .hero-badge{ font-size:.78rem; padding:8px 15px 8px 8px; }
  .book-phone{ padding:14px 30px; }
  .hours-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .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;
  }
}