:root {
  --bg: #fbf3e4;
  --surface: #ffffff;
  --text: #1b1612;
  --muted: #5c5247;
  --accent: #c2410c;
  --accent-text: #ffffff;
  --font-heading: 'Unbounded', 'Arial Black', Impact, system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent: 'Unbounded', 'Arial Black', Impact, system-ui, sans-serif;
}

/* ==========================================================================
   Direction "bold" — a poster.
   Massive uppercase grotesk, full-bleed solid colour blocks that alternate
   bg / accent / text, hard edges (no radius), 2px and 4px rules, one
   full-width price list. Nothing is centred, nothing is thin, no shadows.

   Tokens from new_site.py: --bg --surface --text --muted --accent --accent-text
                            --font-heading --font-body --font-accent
   Type scale (mobile → desktop), details in NOTES.md:
     h1       clamp(2.5rem, .9rem + 7vw, 7.5rem)       xl step; l/m steps for long words
     phone    clamp(1.75rem, 1rem + 3.2vw, 4rem)        giant tappable number
     h2       clamp(2rem, 1.3rem + 3vw, 4.5rem)         section titles, uppercase
     h3       clamp(1.25rem, 1rem + 1.2vw, 1.75rem)     service / step names
     price    same as h3, tabular figures
     about    clamp(1.125rem, 1rem + .6vw, 1.5rem)      running text, weight 500
     body     1rem / 1.5, weight 500;  small .875rem;  label .75rem / .08em caps
     buttons  .9rem / .06em caps, weight 800, min-height 56px
   Spacing: 8px steps (--s1 … --s12), fluid --section-pad; rules 2px / 4px.
   Grid: 12 columns from 900px, container 1240px.
   ========================================================================== */

:root {
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
  --s6: 3rem;   --s8: 4rem;  --s12: 6rem;
  --section-pad: clamp(3rem, 7vw, 6rem);
  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --gutter: clamp(1rem, 2.5vw, 2.5rem);
  --container: 1240px;
  --rule: 2px;
  --rule-thick: 4px;
  --measure: 32em;
  --bar-h: 60px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: .12em; text-underline-offset: .15em; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 900; margin: 0; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.container { width: min(100% - 2 * var(--page-pad), var(--container)); margin-inline: auto; }

/* Small loud label: kickers, dt's, captions. */
.label, .contact dt, .kicker, .rating-label, .fact-text {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Inline SVG patterns; the parent is position:relative + overflow:hidden. */
.pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Section titles: uppercase, tight, with a thick rule underneath. */
.section-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  padding-bottom: var(--s3);
  border-bottom: var(--rule-thick) solid currentColor;
  margin-bottom: var(--s4);
}

/* Full-bleed colour blocks. Neighbours of the same colour (or accent next to
   text when accent ≈ text, as in ink-paper) are parted by a page-coloured seam. */
.block { padding-block: var(--section-pad); }
.block--text { background: var(--text); color: var(--bg); }
.block--accent { background: var(--accent); color: var(--accent-text); }
.block--text + .block--text, .block--accent + .block--accent, .block--accent + .block--text, .block--text + .block--accent { border-top: var(--rule-thick) solid var(--bg); }


/* ---------------------------------------------------------------- header */
.site-header { background: var(--bg); border-bottom: var(--rule-thick) solid var(--text); }

.head-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s2);
}

.brand {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--s2);
}

/* Phone as a solid block; number on desktop, "Call" label on phones. */
.head-phone {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 48px;
  padding: 0 var(--s2);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.head-phone:hover, .head-phone:focus-visible { background: var(--accent); color: var(--accent-text); }
.head-phone-num { display: none; }
/* Phones and tablets: no contact in the header — the hero button, the contacts
   section and the sticky bar carry it; the name is next to the language switch. */
@media (max-width: 899px) {
  .head-phone { display: none; }
}

.nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  border-top: var(--rule) solid var(--text);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 1.25rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:hover, .nav a:focus-visible { text-decoration: underline; }

@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; z-index: 20; }
  .head-grid { grid-template-columns: auto 1fr auto auto; }
  .brand { grid-column: 1; font-size: 1.125rem; }
  .head-phone { grid-column: 3; }
  .nav { grid-column: 2; grid-row: 1; justify-content: flex-end; border-top: 0; margin-right: var(--s3); }
  .nav a { padding-inline: var(--s3) 0; min-height: 56px; font-size: .8rem; }
  .head-phone { min-height: 56px; font-size: .9rem; }
  .head-phone-num { display: inline; }
  .head-phone-label { display: none; }
}

/* ------------------------------------------------------------------ hero */
/* --longest (letters in the longest word of the name) is set inline by the
   template; --title-cap keeps the headline and the phone line inside the
   container on narrow screens (.92em = average advance of a heavy uppercase grotesk). */
.hero {
  --title-cap: calc((100vw - 2 * var(--page-pad)) / (var(--longest, 8) * .92));
  padding-top: var(--s6);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: var(--s3);
}
.kicker::before { content: ""; width: .9em; height: .9em; background: var(--accent); }

/* Three fluid steps by the longest word of the name: xl ≤ 8 letters, l ≤ 11,
   m beyond that; --title-cap (see .hero) wins whenever the word would not fit. */
.hero-title {
  --title-fluid: clamp(2.75rem, .9rem + 8.5vw, 9rem);
  font-size: min(var(--title-fluid), var(--title-cap));
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 14ch;
  overflow-wrap: break-word;
}
.hero-title--l { --title-fluid: clamp(2.375rem, .6rem + 6.5vw, 7rem); letter-spacing: -.035em; }
.hero-title--m { --title-fluid: clamp(2rem, .5rem + 5vw, 5.5rem); letter-spacing: -.04em; }
/* Up to three words: one word per line, the poster stack. */
.hero-title--stack .w { display: block; width: fit-content; }

/* The giant phone line. */
.hero-phone {
  display: inline-block;
  margin-top: var(--s4);
  font-family: var(--font-heading);
  font-size: min(clamp(1.75rem, 1rem + 3.2vw, 4rem), var(--title-cap));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: .12em solid currentColor;
  font-variant-numeric: tabular-nums;
}
.hero-phone:hover, .hero-phone:focus-visible { background: var(--accent); color: var(--accent-text); }

/* Tagline left, joined buttons right. */
.hero-foot {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-block: var(--s3) var(--s6);
  border-top: var(--rule-thick) solid var(--text);
}
.tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 24em;
}
.hero-actions { display: flex; flex-wrap: wrap; }
.hero-actions .btn { flex: 1 1 auto; }

/* Boxed headline: every wrapped line gets its own solid box. */
.boxed, .kicker--boxed, .hero-phone--boxed {
  background: var(--text);
  color: var(--bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.boxed { padding: .06em .14em; }
/* Optical alignment: the letters sit on the container edge, the box hangs into the gutter. */
.hero-title--stack .w.boxed { margin: .08em 0 0 -.14em; }
.kicker--boxed { padding: .45em .7em; }
.kicker--boxed::before { background: var(--accent); }
.hero-phone--boxed { padding: .08em .2em; border-bottom: 0; color: var(--bg); }
.hero-phone--boxed:hover, .hero-phone--boxed:focus-visible { background: var(--bg); color: var(--text); }

/* Pattern / photo field: a bleed area with the headline on top. */
.hero--pattern, .hero--photo { padding-top: 0; }
.hero-field {
  position: relative;
  overflow: hidden;
  padding-block: var(--s8) var(--s6);
  background: var(--bg);
}
.hero-field-copy { position: relative; }
.hero-field .hero-title { line-height: 1.02; }
.hero-field .hero-phone { margin-top: var(--s3); }
.hero--pattern .hero-foot, .hero--photo .hero-foot { margin-top: 0; }

.hero-field--photo { min-height: 72vh; display: flex; align-items: flex-end; }
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* Split: copy left, hard-edged photo right (under the copy on phones). */
.hero-split { display: grid; gap: var(--s6); }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--rule-thick) solid var(--text); }
.hero--split .hero-foot { padding-bottom: 0; }
.hero--split .hero-split { padding-bottom: var(--s6); }

@media (min-width: 900px) {
  .hero--type, .hero--split { padding-top: var(--s8); }
  .hero-foot { grid-template-columns: 7fr 5fr; align-items: end; margin-top: var(--s8); padding-block: var(--s4) var(--s8); }
  .hero-actions { justify-content: flex-end; }
  .hero-actions .btn { flex: 0 0 auto; min-width: 12rem; }
  .hero-field { padding-block: var(--s12) var(--s8); }
  .hero-field--photo { min-height: 80vh; }
  .hero-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: stretch; }
  /* The photo fills the column exactly as tall as the copy; the copy never pushes it out. */
  .hero-figure { min-height: 32rem; }
  .hero-figure img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  /* Headline steps scaled for the 7-column copy. */
  .hero--split .hero-title { --title-fluid: clamp(2.75rem, .9rem + 5.5vw, 6rem); }
  .hero--split .hero-title--l { --title-fluid: clamp(2.375rem, .6rem + 4.5vw, 5rem); }
  .hero--split .hero-title--m { --title-fluid: clamp(2rem, .5rem + 3.6vw, 4rem); }
  /* Inside the 7-column copy the foot stacks: tagline, then buttons flush left. */
  .hero--split .hero-foot { grid-template-columns: 1fr; margin-top: var(--s6); }
  .hero--split .hero-actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--s3);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.btn-call { background: var(--text); color: var(--bg); }
.btn-whatsapp, .btn-viber, .btn-telegram { background: var(--accent); color: var(--accent-text); }
/* Joined blocks: a 2px page-coloured seam keeps them apart when accent ≈ text (ink-paper). */
.btn + .btn { border-left: var(--rule) solid var(--bg); }
.btn-call:hover, .btn-call:focus-visible { background: var(--accent); color: var(--accent-text); }
.btn-whatsapp:hover, .btn-viber:hover, .btn-telegram:hover,
.btn-whatsapp:focus-visible, .btn-viber:focus-visible, .btn-telegram:focus-visible { background: var(--text); color: var(--bg); }

/* On an accent block the messenger button turns into a bg-coloured block. */
.block--accent .btn-whatsapp, .block--accent .btn-viber, .block--accent .btn-telegram { background: var(--bg); color: var(--text); }
.block--accent .btn-whatsapp:hover, .block--accent .btn-viber:hover, .block--accent .btn-telegram:hover,
.block--accent .btn-whatsapp:focus-visible, .block--accent .btn-viber:focus-visible, .block--accent .btn-telegram:focus-visible { background: var(--text); color: var(--bg); }
.block--accent .btn-call:hover, .block--accent .btn-call:focus-visible { background: var(--bg); color: var(--text); }

/* ----------------------------------------------------------------- strip */
/* Accent band under the hero: hours · address · route. */
.strip { background: var(--accent); color: var(--accent-text); border-bottom: var(--rule-thick) solid var(--bg); }
.strip-grid { display: grid; }
.strip-cell { padding-block: var(--s2); border-top: var(--rule) solid currentColor; }
.strip-cell:first-child { border-top: 0; }
.strip .label { opacity: .85; margin-bottom: .2rem; }
.strip .hours li, .strip-value { font-weight: 700; line-height: 1.4; }
.strip-cell--link { display: flex; align-items: center; }
.strip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration-thickness: .15em;
}
.strip-link::after { content: "\2192"; margin-left: .5em; }

@media (min-width: 900px) {
  .strip-grid { grid-template-columns: 5fr 5fr auto; }
  .strip-cell { padding: var(--s3) var(--s4); border-top: 0; border-left: var(--rule) solid currentColor; }
  .strip-cell:first-child { padding-left: 0; border-left: 0; }
  .strip-cell:last-child { padding-right: 0; }
}

/* -------------------------------------------------------------- services */
/* One full-width list: big name left, price right, 2px rules, hover inverts. */
.price-list { border-top: var(--rule) solid currentColor; }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s2);
  margin-inline: calc(-1 * var(--s2));
  border-bottom: var(--rule) solid var(--bg);
  transition: background-color .15s, color .15s;
}
.price-row:hover, .price-row:active { background: var(--bg); color: var(--text); }
.price-name {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.price-desc { margin-top: .4rem; font-size: .9rem; line-height: 1.45; max-width: var(--measure); opacity: .8; }
.price-value {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + 1vw, 1.625rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .price-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) auto; padding-block: var(--s4); }
  .price-main { display: contents; }
  .price-desc { margin-top: .25rem; padding-right: var(--s3); }
  .price-row:not(:has(.price-desc)) { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ----------------------------------------------------------------- about */
.about-grid { display: grid; gap: var(--s4); }
.rating { display: grid; gap: .25rem; margin-top: var(--s2); }
.rating-num {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--accent);
}
.rating-label { color: var(--muted); }
.about-text {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
  max-width: var(--measure);
}
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s3); margin-top: var(--s6); }
.fact { display: grid; align-content: start; gap: .35rem; padding-top: var(--s2); border-top: var(--rule-thick) solid var(--text); }
.fact-num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact-text--solo { font-size: .95rem; line-height: 1.35; letter-spacing: .04em; }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: var(--gutter); }
  .about-side .section-title { border-bottom: 0; padding-bottom: 0; }
  .about-main { padding-top: .4rem; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* ----------------------------------------------------------------- steps */
.steps { display: grid; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s3);
  padding-block: var(--s3);
  border-top: var(--rule) solid currentColor;
}
.step-num {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.step-name { font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem); line-height: 1.15; margin-top: .3rem; }
.step-desc { margin-top: .4rem; font-size: .95rem; line-height: 1.45; max-width: 28em; opacity: .85; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(var(--cols, 3), 1fr); border-top: var(--rule) solid currentColor; }
  .steps--2 { --cols: 2; } .steps--4 { --cols: 4; } .steps--5 { --cols: 5; } .steps--6 { --cols: 3; }
  .step { grid-template-columns: 1fr; row-gap: var(--s3); padding: var(--s4) var(--s3); border-top: 0; border-left: var(--rule) solid currentColor; }
  .step:first-child { padding-left: 0; border-left: 0; }
  .step-name { margin-top: 0; }
}

/* --------------------------------------------------------------- gallery */
/* Hard grid, 4px gutters in the page colour, square tiles. */
.gallery .section-title { margin-bottom: var(--s4); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rule-thick); }
.gallery-item { display: block; }
.gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* A single photo takes the whole row instead of leaving an empty cell. */
.gallery-grid li:only-child { grid-column: 1 / -1; }
.gallery-grid li:only-child img { aspect-ratio: 16 / 9; }
.gallery-item:hover img, .gallery-item:focus-visible img { outline: var(--rule-thick) solid var(--accent); outline-offset: calc(-1 * var(--rule-thick)); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background: var(--text);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(94vw, 1400px); max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border: 0;
  background: var(--accent);
  color: var(--accent-text);
  font: 800 1.75rem/1 var(--font-body);
  cursor: pointer;
}

@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------- contacts */
.contacts-grid { display: grid; gap: var(--s6); }
.contacts-actions { display: flex; flex-wrap: wrap; margin-bottom: var(--s4); }
.contacts-actions .btn { flex: 1 1 auto; }
.hours-block { margin-bottom: var(--s4); }
.hours-block .label { margin-bottom: .35rem; opacity: .85; }
.hours li { font-weight: 700; line-height: 1.45; }
.hours-block .hours li { font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.3; }

.contacts { border-top: var(--rule) solid currentColor; }
.contact { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; column-gap: var(--s2); padding-block: .75rem; border-bottom: var(--rule) solid currentColor; }
.contact dt { opacity: .85; }
/* Unbounded is wide: a long @handle shrinks a little on phones instead of breaking mid-word. */
.contact dd { margin: 0; font-family: var(--font-heading); font-size: clamp(.82rem, 3.4vw, 1.05rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 560px) { .contact { grid-template-columns: 6.5rem 1fr; } }
/* Inline links get a 44px tap height without moving the text. */
.contact dd a { display: inline-block; padding-block: .6em; margin-block: -.6em; }

.contacts-map .label { margin-bottom: .35rem; opacity: .85; }
.map { position: relative; aspect-ratio: 4 / 3; border: var(--rule-thick) solid currentColor; background: var(--surface); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.route-link {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin-top: var(--s2);
  padding: 0 var(--s3);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.route-link::after { content: "\2192"; margin-left: .6em; }
.route-link:hover, .route-link:focus-visible { background: var(--bg); color: var(--text); }

@media (min-width: 900px) {
  .contacts-grid { grid-template-columns: 5fr 7fr; gap: var(--gutter); }
  .contacts-actions .btn { flex: 0 0 auto; min-width: 11rem; }
  .contacts-map { padding-top: .35rem; }
  .map { aspect-ratio: 5 / 4; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { padding-block: var(--s8) var(--s6); border-top: var(--rule-thick) solid var(--bg); }
.footer-main { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: var(--rule) solid currentColor; }
.footer-name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.footer-address { font-weight: 700; max-width: 24em; }
.footer-phone a { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; text-decoration: none; display: inline-block; min-height: 44px; font-variant-numeric: tabular-nums; }
.footer-phone a:hover, .footer-phone a:focus-visible { text-decoration: underline; }
.footer-meta { display: grid; gap: .25rem; padding-top: var(--s2); font-size: .8rem; font-weight: 600; opacity: .85; }
.footer-meta a { text-decoration-thickness: 1px; }

@media (min-width: 900px) {
  .footer-main { grid-template-columns: 6fr 3fr 3fr; align-items: end; gap: var(--gutter); }
  .footer-meta { grid-template-columns: 1fr auto; }
}

/* ------------------------------------------------------ sticky mobile bar */
/* Two solid blocks, accent + text colour, no gaps; script.js adds .is-visible. */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--bar-h);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.sticky-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.sticky-call { background: var(--accent); color: var(--accent-text); }
.sticky-msg { background: var(--text); color: var(--bg); border-left: var(--rule) solid var(--bg); }
/* Page-coloured hairline on top so the bar stays distinct over text-coloured blocks. */
.sticky-bar { border-top: var(--rule) solid var(--bg); }

@media (max-width: 899px) {
  body { padding-bottom: var(--bar-h); }
}
@media (min-width: 900px) {
  .sticky-bar { display: none; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Language switch (base/lang_switch.html.j2): a <details> dropdown — current
   language on the button, all three in a small menu under it. */
.lang-switch { position: relative; grid-column: 2; grid-row: 1; align-self: stretch; }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  padding: 0 .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  font-weight: 800; border-left: var(--rule) solid var(--text); height: 100%;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-caret { width: .65em; height: .65em; flex: none; transition: transform .15s ease; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .3rem);
  z-index: 40;
  min-width: 10.5rem;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  border: var(--rule) solid var(--text); box-shadow: none; border-radius: 0;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: .7em;
  min-height: 42px;
  padding: 0 .75rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-weight: 800;
}
.lang-menu a:hover { background: var(--bg); }
.lang-menu a[aria-current="page"] { color: var(--accent); pointer-events: none; }
.lang-menu .lang-name { color: var(--muted); font-weight: 400; font-size: .85em; letter-spacing: 0; }
/* Desktop: fourth column of the header grid, after the contact. This must come
   after the base .lang-switch rule above. */
@media (min-width: 900px) {
  .lang-switch { grid-column: 4; grid-row: 1; }
}

/* Optional logo (site.yml `logo`) in front of the brand name. */
.brand-logo { display: inline-block; width: 2em; height: 2em; margin-right: .5em; border-radius: 50%; object-fit: cover; vertical-align: middle; }

/* «Meniul complet» (site.yml menu_url): a text link under the menu heading. */
.menu-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.menu-link:hover { text-decoration-thickness: 2px; }