/* ==========================================================================
   {{BRAND}}: pottsepa- ja ehitustööd
   Hele teema, suur kiri, kõrge kontrast. Sihtrühm on valdavalt 40+.
   ========================================================================== */

:root {
  --ink:        #16150F;   /* pealkirjad, kontrast paberil ~16:1 */
  --ink-2:      #262218;   /* põhitekst, ~13:1 */
  --ink-3:      #4A4237;   /* teisene tekst, ~8:1 */
  --stone:      #635A4E;   /* vaikne tekst, ~5.7:1 */
  --paper:      #FBFAF7;
  --paper-2:    #F3EFE7;
  --paper-3:    #E7E0D3;
  --ember:      #A63A0B;   /* aktsent, ~5.9:1 paberil */
  --ember-dark: #822D08;
  --line:       #DAD2C4;
  --line-soft:  #EAE4D9;

  --shadow-sm: 0 1px 2px rgba(22,21,15,.05), 0 2px 6px rgba(22,21,15,.04);
  --shadow-md: 0 4px 14px rgba(22,21,15,.07), 0 12px 28px rgba(22,21,15,.06);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1080px;
  --gut: 22px;
  --radius: 5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 68px;
}
@media (min-width: 800px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;      /* jaotab pealkirja read ühtlaselt, väldib üksikut sõna */
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }   /* väldib üksikut sõna viimasel real */
a  { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember-dark); }
strong { color: var(--ink); font-weight: 600; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 720px; }

section { padding: 52px 0; border-top: 1px solid var(--line-soft); }
@media (min-width: 800px) { section { padding: 64px 0; } }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 .8em;
}
.lead { font-size: 1.15rem; color: var(--ink-2); }
.muted { color: var(--stone); }
.band-alt { background: var(--paper-2); }

/* ---------- Täitmata kohad ---------- */
.slot {
  display: block; margin: 0 0 1.1em; padding: 14px 16px;
  border: 1.5px dashed var(--line); border-left: 4px solid var(--ember);
  border-radius: var(--radius); background: #fff;
  font-size: .95rem; color: var(--stone); font-style: normal;
}
.slot b { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 4px; }

/* ---------- Nupud ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1;
  min-height: 54px; padding: 16px 30px;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ember); color: #fff; border-color: var(--ember); }
.btn--primary:hover { background: var(--ember-dark); border-color: var(--ember-dark); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Päis ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Pais on lehe sisust laiem: sisu kest on 1080 px, aga viis menuupunkti + keel +
   nupp vajavad rohkem. Pais venib kuni 1400 px, sisu jaab keskele 1080 px. */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
@media (min-width: 1080px) { .header-inner { max-width: 1400px; padding: 0 28px; } }
.site-header .logo-text { font-size: 1.4rem; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); line-height: 1; flex: 0 0 auto; }
.logo:hover { color: var(--ink); }
.logo-mark { height: 30px; width: auto; flex: 0 0 auto; display: block; }
@media (max-width: 480px) { .logo-mark { height: 26px; } .logo { gap: 10px; } }
.logo-text { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.05; }
.logo-text small { display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-top: 5px; line-height: 1;
  /* Vene silt "ПЕЧНИК · СТРОИТЕЛЬСТВО" murdus kahele reale ja logo naitas viltu. */
  white-space: nowrap; }

/* Kolm tsooni: logo | pohimenuu | abitsoon (keel + nupp). Abitsoonil on vasakul
   ohuke joon, et keelekoodid ei loeks menuupunktidena. Paises on logo ilma
   alasildita: alasilt on jaluses ja kangelasalas, paises voitis ta ruumi menuult. */
.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: 26px; }
  .nav a { font-size: 1rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
    padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav a:hover { color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ember); }
}
.site-header .logo-text small { display: none; }
.header-util { display: none; }
@media (min-width: 1080px) {
  .header-util { display: flex; align-items: center; gap: 18px; margin-left: auto;
    padding-left: 18px; border-left: 1px solid var(--line); }
  .header-cta { display: inline-flex; min-height: 40px; padding: 9px 18px; font-size: .95rem; white-space: nowrap; }
}
.header-cta { display: none; }
@media (min-width: 1080px) { .header-cta { display: inline-flex; } }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-right: -12px; background: none; border: 0; cursor: pointer; color: var(--ink); }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

/* Vene menuusildid on koige pikemad: ET vajab paises ~1030 px, RU ~1130 px
   (moodetud headless Chrome'iga). Uks keel ei tohi teisi kitsamaks suruda, nii
   et vene keeles laheb lauaarvuti menuu hamburgeriks alles 1200 px juures.
   Kui menuusilte voi nuputeksti kunagi pikendatakse, kontrolli see piir ule. */
@media (max-width: 1199.98px) {
  html[lang="ru"] .nav,
  html[lang="ru"] .header-util { display: none; }
  html[lang="ru"] .nav-toggle { display: inline-flex; }
}

.mobile-nav { border-top: 1px solid var(--line-soft); background: var(--paper); }
.mobile-nav ul { list-style: none; margin: 0; padding: 4px var(--gut) 22px; }
.mobile-nav li + li { border-top: 1px solid var(--line-soft); }
.mobile-nav a { display: block; padding: 17px 0; font-size: 1.1rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.mobile-nav .btn { margin-top: 16px; }

/* ---------- Keelevaheti ---------- */
/* Kolm lyhendit (ET / RU / EN), mitte rippmenüü: kaks klikki asemel üks, ja
   40+ kasutaja näeb kohe, et leht on tema keeles olemas. Aktiivne on tumedam
   ja alla joonitud, sest ainult värvist ei piisa. */
/* Ei lippe ega maakera. Lipud tahistavad riike, mitte keeli: Eestis vene
   keelt raakiv klient ei ole Venemaa ja UK lipp ei ole "inglise keel".
   Maakera oli koodide korval uleliigne ja nagi valja nagu neljas, katkine
   valik. Kaldkriipsud koodide vahel utlevad, et need on uhe asja variandid. */
.lang-switch { display: flex; align-items: center; gap: 0; }
.lang-switch a {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-decoration: none;
  color: var(--stone); padding: 7px 5px; border-radius: var(--radius); line-height: 1;
}
.lang-switch a + a { position: relative; margin-left: 10px; }
.lang-switch a + a::before { content: "/"; position: absolute; left: -9px; top: 6px;
  color: var(--line); font-weight: 400; pointer-events: none; }
.lang-switch a:hover { color: var(--ink); background: var(--paper-2); }
.lang-switch a.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ember); }

.lang-switch--mobile { padding: 16px var(--gut) 22px; border-top: 1px solid var(--line-soft); }
@media (min-width: 1080px) { .lang-switch--mobile { display: none; } }
.lang-switch--mobile a { font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line); margin-left: 0; margin-right: 8px; }
.lang-switch--mobile a + a::before { content: none; }
.lang-switch--mobile a.is-current { border-color: var(--ember); box-shadow: none; background: var(--paper-2); }

/* ---------- Hero ---------- */
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 40px 0 48px; }
@media (min-width: 900px) { .hero { padding: 64px 0 72px; } }
.hero-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 52px; } }
.hero h1 { margin-bottom: .35em; }
.hero .lead { font-size: 1.22rem; color: var(--ink-2); max-width: 38ch; }
.hero-cred {
  font-size: .95rem; color: var(--ink-3); margin: 20px 0 0;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.hero .btn-row { margin-top: 26px; }
.hero-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.trust-bar { background: var(--paper); border-top: 1px solid var(--line); margin-top: 44px; }
.trust-bar ul { list-style: none; margin: 0; padding: 20px 0;
  display: grid; grid-template-columns: 1fr; gap: 12px 28px; }
@media (min-width: 620px) { .trust-bar ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .trust-bar ul { grid-template-columns: repeat(4, 1fr); } }
.trust-bar li { display: flex; align-items: flex-start; gap: 10px; font-size: .98rem; font-weight: 500; color: var(--ink-2); }
.trust-bar svg { flex: 0 0 19px; color: var(--ember); margin-top: .38em; }

/* ---------- Kaardid ---------- */
.card-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--ink-3); color: inherit; }
.card-icon { color: var(--ember); margin-bottom: 16px; }
.card h3 { margin-bottom: .4em; }
.card p { font-size: 1rem; color: var(--ink-2); margin-bottom: 1em; }
.card ul { margin: 0 0 1.3em; padding-left: 1.15em; font-size: .98rem; color: var(--ink-2); }
.card ul li { margin-bottom: .35em; }
.card .card-link { margin-top: auto; font-size: 1rem; font-weight: 600; color: var(--ember);
  display: inline-flex; align-items: center; gap: .4em; }
.card .card-link::after { content: "\2192"; font-size: 1.05em; transition: transform .15s ease; }
a.card:hover .card-link::after { transform: translateX(3px); }
.card--flag { position: relative; }
.card--flag::after {            /* aktsent joonistatakse peale, et sisu ei nihkuks */
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px;
  background: var(--ember); border-radius: var(--radius) 0 0 var(--radius);
}

/* ---------- Kahene paigutus ---------- */
.split { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split--top { align-items: start; }
.split--reverse > *:first-child { order: 2; }   /* pilt paremale, tekst vasakule */
.split--reverse > *:last-child  { order: 1; }
@media (max-width: 899px) { .split--reverse > * { order: 0; } }
.split--wide-left { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.1fr .9fr; } }
.split img { border-radius: var(--radius); }

/* ---------- Sammud ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding-left: 56px; margin-bottom: 26px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -1px;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; background: var(--ember); color: #fff; }
.steps h3 { margin-bottom: .2em; font-size: 1.1rem; }
.steps p { font-size: 1rem; margin: 0; color: var(--ink-2); }
/* Avalehe "Kuidas töö käib": pealkiri üleval, neli sammu reas. Number on
   sammu kohal, mitte kõrval, et neli veergu jääksid kitsad. */
.steps--row { margin-top: 28px; }
@media (min-width: 640px) {
  .steps--row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
  .steps--row li { padding-left: 0; padding-top: 52px; margin-bottom: 0; }
  .steps--row li::before { top: 0; }
}
@media (min-width: 1000px) { .steps--row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Linnukesed ---------- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 32px; margin-bottom: 12px; font-size: 1.02rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .46em;
  width: 16px; height: 9px; border-left: 3px solid var(--ember); border-bottom: 3px solid var(--ember);
  transform: rotate(-45deg); }

/* ---------- Galerii ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.filter { font-family: var(--sans); font-size: .98rem; font-weight: 500; min-height: 46px;
  padding: 11px 20px; border-radius: 100px; cursor: pointer;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Masoonlaotus: iga foto jääb oma kuvasuhtesse, midagi ei lõigata ära.
   Telefonifotod on eri kujuga ja fikseeritud plaat lõikaks ahjul pea otsast. */
.gallery { columns: 1; column-gap: 16px; }
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 980px) { .gallery { columns: 3; } }
.gallery figure {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 16px; display: inline-block; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper-3); border: 1px solid var(--line);
}
.gallery img { width: 100%; height: auto; display: block; }
.gallery figcaption { padding: 12px 14px; font-size: .95rem; font-weight: 500; color: var(--ink-2); background: #fff; }
.gallery figure[hidden] { display: none; }

/* ---------- Enne / pärast: kaks pilti kõrvuti ----------
   Liugur asendatud kõrvutipaariga. Põhjus: liugur eeldab, et mõlemad fotod on
   tehtud täpselt samast punktist. Telefonifotod objektidelt ei ole seda kunagi,
   ja siis näeb liugur välja katki. Kõrvuti töötab ka erineva kaadriga. */
.ba-pair { margin: 0; }
.ba-pair + .ba-pair { margin-top: 28px; }
.ba-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (min-width: 760px) { .ba-shots { gap: 16px; } }
.ba-shot {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-3);
}
.ba-shot img { width: 100%; height: auto; display: block; }   /* täiskaader, ilma kärpimata */
.ba-tag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 3px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.ba-tag--after { background: var(--ember); color: #fff; border-color: var(--ember); }
.ba-pair figcaption { margin-top: 14px; font-size: 1rem; color: var(--ink-2); }
.ba-pair figcaption b { display: block; font-family: var(--serif); font-size: 1.1rem;
  font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* ---------- Soovitused ---------- */
.quotes { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column; }
.quote .stars { color: var(--ember); font-size: 1rem; letter-spacing: .1em; margin-bottom: 12px; }
.quote blockquote { margin: 0 0 18px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.quote cite { margin-top: auto; font-style: normal; font-size: .92rem; color: var(--stone); }
.quote cite b { display: block; font-weight: 600; color: var(--ink-2); font-size: 1rem; }

/* ---------- Rõhutatud plokk ---------- */
.warn { border: 1px solid var(--line); border-left: 4px solid var(--ember);
  background: #fff; padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 26px 0; }
.warn p:last-child { margin-bottom: 0; }

/* ---------- Vorm ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; }
@media (min-width: 700px) { .form-card { padding: 34px 32px; } }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field .hint { font-weight: 400; color: var(--stone); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1.05rem; color: var(--ink); min-height: 54px;
  padding: 14px 15px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(166,58,11,.25); outline-offset: 1px; border-color: var(--ember); }
.field-row { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 18px; } }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: .95rem; color: var(--ink-3); margin: 16px 0 0; }
.form-status { margin-top: 16px; padding: 15px 17px; border-radius: var(--radius); font-size: 1rem; }
.form-status[data-state="ok"]  { background: #E9F3EB; color: #1C4A2C; border: 1px solid #BCD9C4; }
.form-status[data-state="err"] { background: #FBEAE4; color: #7E280A; border: 1px solid #EFC4B4; }

/* ---------- Kontakt ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-list svg { flex: 0 0 22px; color: var(--ember); margin-top: 4px; }
.contact-list b { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 2px; }
.contact-list a { font-size: 1.12rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--ember); }

/* ---------- CTA ---------- */
.cta-band { background: var(--paper-2); text-align: center; border-top: 1px solid var(--line); }
.cta-band p { max-width: 46ch; margin-left: auto; margin-right: auto; color: var(--ink-2); }
.cta-band .btn-row { justify-content: center; margin-top: 24px; }

/* ---------- Jalus ---------- */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: 48px 0 0; font-size: 1rem; color: var(--ink-2); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ember); }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; padding-bottom: 36px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }
.site-footer h4 { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 10px; }
/* Kontaktiveerg ikoonidega. Teenuste nimekiri jaab teadlikult ikoonideta:
   kuus reastikku ikooni oleks muster, mitte abi. Ikoonid on samad Featheri
   joonised mis kontaktilehel, et need kaks kohta ei naeks eri komplektist. */
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact .fi { flex: 0 0 auto; color: var(--stone); }
.footer-contact a { min-width: 0; overflow-wrap: anywhere; }
.footer-contact .fc-area { margin-top: 14px; align-items: flex-start; }
.footer-contact .fc-area .fi { margin-top: 2px; }
/* Ikoon jargib linki ka hoveril -- muidu jaab ta linnust maha. */
.footer-contact li:hover .fi { color: var(--ember); }
.footer-bottom { border-top: 1px solid var(--line); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: .92rem; color: var(--stone); }

/* ---------- Mobiilne helistamisriba ---------- */
.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
@media (min-width: 800px) { .call-bar { display: none; } }
.call-bar a { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 19px 10px; font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.call-bar .cb-call { background: var(--ember); color: #fff; }
.call-bar .cb-quote { background: var(--ink); color: var(--paper); }

/* ---------- Siselehe päis ---------- */
.page-head { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 36px 0 34px; }
@media (min-width: 800px) { .page-head { padding: 52px 0 46px; } }
.page-head p { max-width: 54ch; margin-bottom: 0; }
.page-head h1 { margin-bottom: .3em; }
.crumbs { font-size: .92rem; color: var(--stone); margin-bottom: 14px; }
.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--ember); }

/* ---------- KKK ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 30px;
  width: 11px; height: 11px; border-right: 2.5px solid var(--ember); border-bottom: 2.5px solid var(--ember);
  transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 0 22px; color: var(--ink-2); font-size: 1.02rem; }
.faq details > div p:last-child { margin-bottom: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 14px 20px; }
.skip-link:focus { left: 8px; top: 8px; }

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

/* Filtririba peidetakse, kui kategooriaid on alla kahe */
.filters[hidden] { display: none; }
.filter[hidden] { display: none; }

/* ---------- Näidised (kohatäited) ----------
   Kõik komponendid on nähtaval, et tellija näeks tervikut. Kriipsjoon ja
   oranž silt "NÄIDIS" tähistavad kohti, kuhu tuleb päris sisu.
   Eemaldamiseks kustuta elemendilt class="is-placeholder". */
.is-placeholder { position: relative; border-style: dashed; border-color: var(--line); }
.is-placeholder::before {
  content: "NÄIDIS";
  position: absolute; top: 10px; left: 10px; z-index: 6;
  font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  padding: 4px 8px; border-radius: 3px;
  background: var(--ember); color: #fff; pointer-events: none;
}
.gallery figure.is-placeholder img { opacity: .75; }
.gallery figure.is-placeholder figcaption { color: var(--stone); font-style: italic; }
.ba-shot.is-placeholder::before { top: auto; bottom: 10px; left: 10px; }
.quote.is-placeholder::before { left: auto; right: 12px; top: 12px; }
.quote.is-placeholder blockquote { color: var(--stone); font-style: italic; }

/* ---------- "Miks mina" faktiplokid ----------
   Asendab varasema linnukesteriba hero all. Iga fakt saab pealkirja ja ühe
   selgitava lause, sest "ahjupass iga töö kohta" ei ütle võhikule midagi. */
.facts { display: grid; gap: 30px 46px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { border-top: 2px solid var(--ember); padding-top: 16px; }
.fact h3 { margin-bottom: .35em; }
.fact p { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* Märgistamata kohatäitepilt nägi välja nagu katkine pilt. Nüüd sama NÄIDIS-silt
   nagu galeriis, et keegi ei peaks seda päris tööks. */
.photo-slot { border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.photo-slot img { display: block; width: 100%; height: auto; }