/* ===== Barbershop Zana — kampaamodemo =====
   Editorial fashion: lähes musta pohja, luonnonvalkoinen teksti, yksi
   messinkiaksentti. Typografia kantaa sivun, kuvat tukevat sitä. ===== */

:root{
  /* Väri */
  --ink:        #14110F;   /* pohja */
  --ink-2:      #1B1714;   /* nostettu pinta */
  --bone:       #F5F1EA;   /* leipäteksti */
  /* Läpinäkyvyydet on valittu kontrastin mukaan: tummalla pohjalla .70 antaa
     n. 8:1 ja .55 n. 5,5:1, eli molemmat ylittävät vaaditun 4,5:1 myös
     pienessä tekstissä. Hierarkia tulee koon ja painon kautta. */
  --muted:      rgba(245,241,234,.70);
  --faint:      rgba(245,241,234,.55);
  --brass:      #C08A3E;
  --brass-soft: rgba(192,138,62,.42);
  --line:       rgba(245,241,234,.13);

  /* Mitat */
  --max: 1180px;
  --pad: 24px;

  /* Väljyys. Lohkojen välinen rytmi tulee aina tästä asteikosta.
     Komponentin sisäinen padding (napit, hinnastorivit) on optisesti viritetty
     eikä noudata asteikkoa — nappi on eri asia kuin osioiden väli. */
  --sp-hair: 4px;
  --sp-1: 8px;
  --sp-tight: 12px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 36px;
  --sp-5: 56px;
  --sp-6: 88px;
  --sp-7: clamp(80px, 12vw, 148px);

  /* Typografia */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;

  /* Tekstikoot. Askelten välillä on n. 8–10 %, jotta kaksi vierekkäistä kokoa
     eroaa silmällä. Väliarvot kuten .84/.86/.88 näyttäisivät vahingolta. */
  --t-1: .68rem;   /* nimikkeet, dt, footerin otsikot */
  --t-2: .72rem;   /* eyebrow, rooli, versaalilabelit */
  --t-3: .78rem;   /* napit, kuvatekstit, footerin alarivi */
  --t-4: .86rem;   /* apuselitteet, hinnaston tarkennukset */
  --t-5: .94rem;   /* navigaatio, sekundaarinen leipäteksti */
  --t-6: 1rem;     /* leipäteksti */
  --t-7: 1.06rem;  /* hinnastorivit, korostettu leipäteksti */
  --t-8: 1.16rem;  /* logo */
  --t-9: 1.3rem;   /* tekijän nimi */

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

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

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

/* Hienovarainen rakeisuus koko sivun päällä. Ei gradienttia. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 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; }

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

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--brass); 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:100;
  padding:12px 18px;
  background:var(--brass);
  color:var(--ink);
  font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

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

.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--sp-tight);
  font-size:var(--t-2);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow-rule{
  display:block;
  width:34px;
  height:1px;
  background:var(--brass);
  opacity:.7;
}

.sec-title{
  font-size:clamp(2.1rem, 5.2vw, 3.5rem);
  margin-top:var(--sp-2);
}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--sp-4);
  align-items:end;
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);
}
.sec-note{
  color:var(--muted);
  font-size:var(--t-6);
  max-width:34ch;
}

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

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

.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(20,17,15,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--line); background:rgba(20,17,15,.94); }

.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); }
.brand-dot{
  width:7px; height:7px;
  background:var(--brass);
  border-radius:1px;
  transform:rotate(45deg);
}
.brand-name{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-8);
  letter-spacing:-.02em;
}

/* Navissa ei ole rivilinkkejä millään leveydellä. Kaikki osiolinkit ovat
   kokoruudun valikossa, joten navipalkkiin jää logo, ajanvaraus ja avausnappi. */
.nav-end{ display:flex; align-items:center; gap:var(--sp-2); }
/* Sama 44 px:n korkeus kuin avausnapissa, jotta pari asettuu samalle riville. */
.nav-cta{ min-height:44px; padding:11px 20px; font-size:var(--t-2); }

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

/* Valikko — koko ruudun 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:var(--ink);
  display:grid;
  /* "safe center" + vieritys: vaakatasossa (esim. 740x360) valikon sisältö on
     korkeampi kuin ruutu, jolloin pelkkä center työntää ylimmät ja alimmat
     linkit ulos näkyvistä eikä niihin pääse käsiksi. safe vaihtaa
     keskityksen alkuun heti kun sisältö ei mahdu, ja overflow-y tekee
     lopusta vieritettävän. */
  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:700;
  font-size:clamp(1.9rem, 8vw, 2.8rem);
  letter-spacing:-.035em;
}
.menu-inner a:hover{ color:var(--brass); }
/* Kaksi luokkaa voittaa säännön .menu-inner a ilman !importantia. */
.menu-inner .menu-phone{
  margin-top:var(--sp-2);
  font-family:var(--body);
  font-size:var(--t-7);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--brass);
}
body.is-locked{ overflow:hidden; }

/* Valikon ollessa auki navipalkki nostetaan paneelin päälle. Muuten peittävä
   paneeli piilottaisi avausnapin, ja hiirikäyttäjälle ei jäisi yhtään näkyvää
   tapaa sulkea valikkoa — nappi kääntyy ristiksi aria-expanded-säännöllä.
   Tausta ja reuna pois, jotta palkki ei piirry paneelin päälle omana raitana. */
body.is-locked .nav{
  z-index:101;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}

/* ===== HERO ===== */

.hero{
  position:relative;
  padding-top:clamp(56px, 8vw, 96px);
  padding-bottom:var(--sp-7);
  overflow:hidden;
}
/* Ohut pystyviivagrid taustalla */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(245,241,234,.05) 0 1px, transparent 1px 25%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.78fr);
  gap:clamp(32px, 6vw, 88px);
  align-items:center;
}

.hero-title{
  display:flex;
  flex-direction:column;
  font-size:clamp(3rem, 8vw, 6rem);
  letter-spacing:-.05em;
  line-height:.9;
  margin:var(--sp-3) 0 var(--sp-4);
}
.hero-title span:last-child{ padding-left:.16em; color:var(--brass); }

.hero-lead{
  max-width:38ch;
  font-size:clamp(1.05rem, 1.5vw, 1.22rem);
  color:var(--muted);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-3);
  margin-top:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}
.hero-meta dt{
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:var(--sp-hair);
}
.hero-meta dd{ font-size:var(--t-5); }
/* Puhelinlinkki on itsenäinen kosketuskohde, ei leipätekstin sisäinen linkki:
   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(--brass); }

.hero-figure{ position:relative; }
.hero-figure::after{
  content:'';
  position:absolute;
  inset:24px -22px -22px 24px;
  border:1px solid var(--brass-soft);
  border-radius:50% 50% 4px 4px / 30% 30% 4px 4px;
}
.hero-figure img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  aspect-ratio:900/1250;
  object-fit:cover;
  border-radius:50% 50% 4px 4px / 30% 30% 4px 4px;
  filter:contrast(1.04) saturate(.92);
}

/* ===== Pistejohdinlista (hinnasto + aukioloajat) ===== */

.leaders{ display:flex; flex-direction:column; }
.leader{
  display:flex;
  align-items:baseline;
  gap:var(--sp-tight);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.leader:first-child{ border-top:1px solid var(--line); }
.leader-label{ display:flex; flex-direction:column; min-width:0; }
.leader-name{ font-size:var(--t-7); font-weight:500; }
.leader-note{
  margin-top:2px;
  font-size:var(--t-4);
  line-height:1.45;
  color:var(--faint);
}
.leader-dots{
  flex:1 1 auto;
  min-width:20px;
  height:0;
  border-bottom:1px dotted rgba(245,241,234,.28);
  transform:translateY(-.3em);
}
.leader-value{
  flex:none;
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-7);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.leader-value .from{
  font-family:var(--body);
  font-size:var(--t-3);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--faint);
}

/* ===== HINNASTO ===== */

.group{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px);
  padding-bottom:var(--sp-6);
  margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);
}
.group:last-of-type{ border-bottom:none; margin-bottom:var(--sp-3); }

.group-media img{
  width:100%;
  height:auto; /* muuten kuvan height-attribuutti jyrää aspect-ration, ks. .hero-figure img */
  aspect-ratio:5/4;
  object-fit:cover;
  border-radius:2px;
  filter:brightness(.88) contrast(1.05) saturate(.9);
}
.group-caption{
  margin-top:var(--sp-2);
  font-size:var(--t-4);
  line-height:1.5;
  color:var(--faint);
  max-width:30ch;
}

.group-head{
  display:flex;
  align-items:baseline;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.group-num{
  font-family:var(--display);
  font-size:var(--t-3);
  font-weight:600;
  letter-spacing:.1em;
  color:var(--brass);
}
.group-head h3{ font-size:clamp(1.4rem, 2.6vw, 1.85rem); }

.pricing-terms{
  max-width:60ch;
  font-size:var(--t-4);
  color:var(--faint);
}

/* ===== TEKIJÄT ===== */

.team{ background:var(--ink-2); }

.team-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(28px, 4vw, 56px);
}
.member-photo{
  width:min(220px, 78%);
  aspect-ratio:1;
  border-radius:50%;
  padding:6px;
  border:1px solid var(--brass-soft);
  margin-bottom:var(--sp-3);
}
.member-photo img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  /* Muotokuvat ovat kolmesta eri kuvauksesta — yhtenäistetään suodattimella. */
  filter:grayscale(.32) contrast(1.06) brightness(1.04);
  transition:filter .35s var(--ease);
}
.member:hover .member-photo img{ filter:grayscale(0) contrast(1.04) brightness(1.06); }

.member-name{ font-size:var(--t-9); }
.member-role{
  margin-top:var(--sp-hair);
  font-size:var(--t-2);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
}
.member-quote{
  margin-top:var(--sp-2);
  padding-left:var(--sp-2);
  border-left:1px solid var(--line);
  font-size:var(--t-6);
  color:var(--muted);
  max-width:32ch;
}

/* ===== TYÖT (vaakanauha) ===== */

.work-tools{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
.strip-nav{ display:flex; gap:var(--sp-tight); }
.strip-btn{
  width:46px; height:46px;
  display:grid;
  place-items:center;
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--bone);
  cursor:pointer;
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.strip-btn:hover{ border-color:var(--brass); color:var(--brass); }
.strip-btn svg{ width:19px; height:19px; }
.strip-btn.is-end{ color:rgba(245,241,234,.45); }

.strip{
  display:flex;
  gap:var(--sp-2);
  /* Nauha ulottuu wrapin reunoihin asti, mutta ei viewportin yli. */
  margin-inline:calc(-1 * var(--pad));
  padding:var(--sp-hair) var(--pad) var(--sp-2);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);
  scrollbar-color:var(--brass-soft) transparent;
  scrollbar-width:thin;
}
.strip::-webkit-scrollbar{ height:3px; }
.strip::-webkit-scrollbar-track{ background:var(--line); }
.strip::-webkit-scrollbar-thumb{ background:var(--brass-soft); }

.strip-item{ flex:none; scroll-snap-align:start; }
.strip-item img{
  height:clamp(260px, 42vw, 480px);
  width:auto;
  max-width:none;
  object-fit:cover;
  border-radius:2px;
  filter:contrast(1.05) saturate(.94);
  transition:filter .3s var(--ease);
}
.strip-item:hover img{ filter:contrast(1.02) saturate(1.02); }
.strip-item figcaption{
  margin-top:var(--sp-tight);
  font-size:var(--t-3);
  letter-spacing:.02em;
  color:var(--faint);
}

/* ===== PALAUTTEET ===== */

.voices{ background:var(--ink-2); }
.voice-list{
  margin-top:var(--sp-5);
  display:flex;
  flex-direction:column;
}
.voice{
  padding:var(--sp-4) 0;
  border-top:1px solid var(--line);
}
.voice:last-child{ border-bottom:1px solid var(--line); }
.voice blockquote{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.3rem, 3vw, 2.05rem);
  line-height:1.22;
  letter-spacing:-.03em;
  max-width:26ch;
}
.voice:nth-child(2) blockquote{ margin-left:auto; text-align:right; }
.voice-by{
  margin-top:var(--sp-2);
  font-size:var(--t-3);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
}
.voice:nth-child(2) .voice-by{ text-align:right; }

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

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 6vw, 80px);
}

.contact-kicker{
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
.contact-phone{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 5vw, 3.1rem);
  letter-spacing:-.04em;
  margin:var(--sp-hair) 0 var(--sp-4);
  transition:color .22s var(--ease);
}
.contact-phone:hover{ color:var(--brass); }
.contact-mail{
  display:inline-block;
  margin:var(--sp-hair) 0 var(--sp-4);
  font-size:var(--t-7);
  border-bottom:1px solid var(--brass-soft);
  padding-bottom:2px;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.contact-mail:hover{ color:var(--brass); border-color:var(--brass); }
.contact-small{
  max-width:38ch;
  font-size:var(--t-5);
  color:var(--muted);
}

.contact-h3{
  font-size:var(--t-2);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:var(--sp-2);
}
.contact-hours .leaders{ margin-bottom:var(--sp-5); }
.contact-hours .leader-value{ font-size:var(--t-6); }
.leader-value.closed{ color:var(--faint); font-weight:500; }

.leader.is-today .leader-name{ color:var(--brass); font-weight:600; }
.leader.is-today .leader-value{ color:var(--brass); }
.today-tag{
  margin-left:var(--sp-tight);
  font-family:var(--body);
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--brass);
  padding:2px 7px;
  border-radius:2px;
}

.contact-address{
  font-style:normal;
  font-size:var(--t-6);
  line-height:1.7;
  color:var(--muted);
}

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

.footer{ border-top:1px solid var(--line); 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:var(--t-8); }
.footer-col p{
  margin-top:var(--sp-2);
  max-width:30ch;
  font-size:var(--t-4);
  color:var(--muted);
}
.footer-col h4{
  font-family:var(--body);
  font-size:var(--t-1);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:var(--sp-2);
}
/* Pystypadding nostaa linkin kosketuskohteen yli 24 px:n (WCAG 2.2, 2.5.8).
   Pelkkä rivikorkeus jätti sen 23 px:iin. Marginaalia pienennetään saman
   verran, jotta footerin rytmi pysyy ennallaan. */
.footer-col a,
.footer-col span:not(.brand-name){
  display:block;
  padding:3px 0;
  font-size:var(--t-4);
  color:var(--muted);
  margin-bottom:var(--sp-hair);
}
.footer-col a{ transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--brass); }

.footer-social{ display:flex; gap:var(--sp-tight); margin-top:var(--sp-3); }
.footer-social a{
  width:40px; height:40px;
  display:grid;
  place-items:center;
  margin:0;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.footer-social a:hover{ border-color:var(--brass); color:var(--brass); }
.footer-social svg{ width:18px; height:18px; }

/* Sanamerkin teksti tulee CSS:stä, ei HTML:stä. Se on koristetta: 5 %:n
   peittävyys taustaa vasten on tarkoituksella lukukelvoton, ja elementti on
   aria-hidden. Tekstisolmuna Lighthouse laski sille kontrastisuhteeksi 1,1 ja
   pudotti saavutettavuuspisteen 96:een — koriste kuuluu tyylitiedostoon,
   jolloin arvio kohdistuu oikein vain oikeaan tekstiin. */
.footer-wordmark{
  padding:0 var(--pad);
  text-align:center;
  user-select:none;
}

.footer-wordmark::before{
  content:"Barbershop Zana";
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem, 15vw, 11rem);
  line-height:.86;
  letter-spacing:-.05em;
  color:rgba(245,241,234,.05);
  -webkit-text-stroke:1px rgba(245,241,234,.14);
}

.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);
  font-size:var(--t-3);
  color:var(--faint);
}
.footer-bottom strong{ color:var(--bone); font-weight:600; }

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

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

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

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .hero-figure{ max-width:460px; }
  .hero-figure img{ aspect-ratio:4/5; }
  .group{ grid-template-columns:minmax(0,240px) minmax(0,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-3); }
  .footer-col:first-child{ grid-column:1 / -1; }
}

@media (max-width:860px){
  /* Ajanvarausnappi pysyy näkyvissä myös mobiilissa: sivun alalaita on
     demopalkin varattu, joten ainoa aina saatavilla oleva CTA on navissa. */
  .nav-cta{ padding:11px 16px; }
  .sec-head{ grid-template-columns:1fr; align-items:start; gap:var(--sp-3); }
  .team-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  :root{ --pad:20px; }
  html{ scroll-padding-top:84px; }
  .nav-inner{ height:66px; gap:var(--sp-2); }
  .nav-cta-long{ display:none; }        /* "Varaa aika" → "Varaa" */
  .nav-cta{ padding:11px 14px; }
  .brand-name{ font-size:var(--t-6); }
  .hero{ padding-top:var(--sp-4); }
  .hero-figure{ max-width:none; }
  .hero-figure::after{ display:none; }
  .hero-meta{ grid-template-columns:1fr; gap:var(--sp-2); }
  .hero-meta-item + .hero-meta-item{ padding-top:var(--sp-2); border-top:1px solid var(--line); }
  .hero-actions .btn{ flex:1 1 auto; }
  .group{ grid-template-columns:1fr; gap:var(--sp-3); }
  .group-media img{ aspect-ratio:16/9; }
  .group-caption{ max-width:none; }
  .team-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .member-photo{ width:150px; }
  .member-quote{ max-width:none; }
  .voice blockquote{ max-width:none; }
  .voice:nth-child(2) blockquote,
  .voice:nth-child(2) .voice-by{ text-align:left; margin-left:0; }
  .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;
  }
}