/* PlusTova custom layer — loaded after the Webflow stylesheet. */

/* nav logo sizing (replaces the 90x20 template SVGs) */
.logo-nav { height: 34px; width: auto; }

/* Pull-quote section (replaces the template's cropped-testimonial reveal) */
.section_croped-testimonial { min-height: 0; height: auto; padding: 0; background: #fffff8; overflow-x: clip; }
.pt-quote {
  position: relative;
  text-align: center;
  padding: 48px 0 clamp(84px, 12vw, 150px);
}
.pt-quote_eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2b2b28;
  opacity: 0.65;
  margin-bottom: 22px;
}
.pt-quote_text {
  background: none;
  border: 0;
  padding: 0;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.16;
  color: #2b2b28;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.pt-quote_meta {
  margin-top: 26px;
  font-size: 15px;
  color: #2b2b28;
  opacity: 0.72;
}
@media (max-width: 991px) {
    }
@media (max-width: 767px) {
    .pt-quote { padding: 40px 0 72px; }
}
/* mask window: template crops the 1440px canvas to a 512px slot (object-fit:none);
   cover scales the whole lockup into view instead of amputating its ends */
.mask_with-logo { width: 100%; height: 60vh; object-fit: cover; }

/* mask zoom origin: center of the plus bar -> the reveal opens as a symmetric slit */
.wrap_image-with-mask { transform-origin: 32.32% 49.96%; }

/* Guest book: drifting rows of review notes + stats band */
.pt-reviews {
  margin-top: clamp(36px, 4.5vw, 64px);
  margin-bottom: -30px;
  display: grid;
  gap: 22px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 36px 0 54px;
  overflow-x: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pt-reviews_track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transform: translateZ(0);
  gap: 24px;
  width: max-content;
  animation: pt-drift-a 70s linear infinite;
}
.pt-reviews_row.is-b .pt-reviews_track { animation: pt-drift-b 88s linear infinite; }
@keyframes pt-drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pt-drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.pt-note {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  border: 1px solid oklch(35% 0.02 190 / 0.14);
  border-radius: 3px;
  padding: 18px 20px 14px;
  box-shadow:
    0 1px 3px oklch(30% 0.03 190 / 0.07),
    0 10px 22px -10px oklch(30% 0.03 190 / 0.14);
  position: relative;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-note:hover {
  transform: translateY(-10px) scale(1.07);
  z-index: 2;
  box-shadow:
    0 2px 5px oklch(30% 0.03 190 / 0.08),
    0 16px 26px -10px oklch(30% 0.03 190 / 0.16);
}
.pt-note_text { font-size: 15px; line-height: 1.45; color: #2b2b28; }
.pt-note_meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  color: #2b2b28;
}
.pt-note_name { font-weight: 650; }
.pt-note_year {
  margin-left: auto;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  opacity: 0.85;
}
.pt-note_src { opacity: 0.55; letter-spacing: 0.05em; text-transform: uppercase; font-size: 10.5px; }

.pt-stats {
  margin-top: clamp(42px, 5vw, 72px);
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 96px);
}
.pt-stat { text-align: center; }
.pt-stat_num {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1;
  color: #2b2b28;
}
.pt-stat_label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2b2b28;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .pt-reviews_track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .pt-reviews_track > .pt-dup { display: none; }
  .pt-reviews { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 767px) {
  .pt-note { width: 260px; }
  /* flex-wrap dealt the four stats 2-1-1 on a phone: two sharing the top
     line, the other two stranded alone. A fixed 2x2 reads as designed. */
  .pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
}


/* footer logo: the +това lockup replaces the template's arch icon */
.logo_icon-footer { width: auto; height: auto; }
.logo_icon-footer img { height: 48px; width: auto; }
/* newsletter column rhythm: single gap source, 40px logo x phi^-1 = 25px */
.left-footer { row-gap: 25px; }
.left-footer .logo_icon-footer {
  display: flex;
  justify-content: center;
  line-height: 0;
  margin: 0;
}
.left-footer .heading_newsletter { margin: 0; padding: 0; text-align: center; }
.left-footer .heading_newsletter h2 { margin: 0; }
.left-footer .form-block_footer { margin: 0; }

.pt-specs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 0;
  padding: 0 24px;
  color: #fffff8;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.pt-specs span { padding: 0 22px; }
.pt-specs span + span { border-left: 1px solid oklch(98% 0.01 100 / 0.35); }

/* Space-overview mosaic (replaces the founder-quote / showreel section).
   Cream grout lines nod to the venue's preserved mosaic floor. */
.section_home-video { height: auto; min-height: 0; padding: 0; }
.pt-mosaic-wrap { position: relative; }
.pt-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 11vw;
  gap: 3px;
  background: #fffff8;
}
.pt-tile { margin: 0; overflow: hidden; }
.pt-tile.is-w2 { grid-column: span 2; }
.pt-tile.is-h2 { grid-row: span 2; }
.pt-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-tile:hover img { transform: scale(1.05); }
.pt-mosaic-wrap .pt-specs {
  bottom: 0;
  padding: 110px 24px 30px;
  background: linear-gradient(transparent, oklch(14% 0.03 190 / 0.42) 45%, oklch(12% 0.03 190 / 0.88));
  font-size: 13.5px;
  opacity: 1;
  text-shadow: 0 1px 10px oklch(10% 0.03 190 / 0.5);
}
.pt-mosaic-wrap .pt-specs span + span { border-left-color: oklch(98% 0.01 100 / 0.5); }
@media (max-width: 767px) {
  .pt-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; }
  .pt-tile.is-w2 { grid-column: span 2; }
  .pt-tile.is-h2 { grid-row: span 1; }
}

/* TEMPORARY preview lock: header shows only the logo; see PREVIEW_LOCK in plustova.js */
.preview-lock .right_navbar { justify-content: flex-end; }
.preview-lock .right_navbar .nav-menu { display: none !important; }
.preview-lock .right_navbar .menu-button { display: none !important; }
/* locked links look and hover like normal; the JS click handler blocks navigation */


/* Hero mosaic background: the space itself as a wall of tiles under a cream
   veil, so the headline keeps its contrast. Tiles assemble in after the title. */
.section_hero-home { position: relative; }
.section_hero-home .padding-global { position: relative; z-index: 2; }
.hero-mosaic { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-mosaic_grid {
  position: absolute;
  inset: 0 0 -4px 0; /* overshoot: fr-row rounding can never expose a seam at the hero's bottom edge */
  display: grid;
  /* minmax(0,...) not plain 1fr: the auto minimum of a plain fr track is the
     content size, and these portrait photos would push the rows taller than
     the hero and spill past the bottom edge */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3px;
  background: #fffff8;
}
.hm-tile { margin: 0; overflow: hidden; min-width: 0; min-height: 0; }
/* Nine tiles, each placed explicitly, so auto-flow can never leave a hole
   in the grout. Four wide blocks, three tall portraits (the client's photos
   are all portrait, so the 1-column tiles crop least), two small squares. */
@media (min-width: 768px) {
  .hm-a { grid-column: 1 / 3; grid-row: 1 / 3; }
  .hm-b { grid-column: 3 / 4; grid-row: 1 / 3; }
  .hm-c { grid-column: 4 / 6; grid-row: 1 / 3; }
  .hm-d { grid-column: 6 / 7; grid-row: 1 / 3; }
  .hm-e { grid-column: 1 / 2; grid-row: 3 / 5; }
  .hm-f { grid-column: 2 / 4; grid-row: 3 / 5; }
  .hm-g { grid-column: 4 / 6; grid-row: 3 / 5; }
  .hm-h { grid-column: 6 / 7; grid-row: 3 / 4; }
  .hm-i { grid-column: 6 / 7; grid-row: 4 / 5; }
}
.hm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-mosaic_veil {
  position: absolute;
  inset: 0;
  background: oklch(18% 0.006 110 / 0.55);
}
@media (max-width: 767px) {
  /* phones: a plain 3x3 fits the nine tiles exactly, and each cell comes out
     tall and narrow, which is the shape the source photos already are */
  .hero-mosaic_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
/* gallery leads the intro: tiles start hidden and pop in as their images
   arrive (inline script in the hero chunk adds .pt-in), no JS bundle wait.
   Without JS the pt-js class never lands and everything shows statically. */
.pt-js .hero-mosaic { opacity: 0; transition: opacity 0.5s ease-out; }
.pt-js .hero-mosaic.pt-in { opacity: 1; }
.pt-js .hm-tile {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt-js .hm-tile.pt-in { opacity: 1; transform: none; }

/* hero title: pre-split into .pt-w word spans in the markup and animated
   here in pure CSS, so the entrance starts at first paint with no JS wait.
   Mirrors the template tween: y 50% -> 0, fade, 0.05s word stagger. */
.pt-heading .pt-w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pt-heading .pt-w {
    /* base delay lets the gallery cascade lead before the words rise */
    animation: pt-word-in 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) calc(var(--d, 0s) + 0.55s) both;
  }
  @keyframes pt-word-in {
    from { opacity: 0; transform: translateY(55%); }
    to { opacity: 1; transform: none; }
  }
}

/* Client: no green intro phase. IX3 applies the dark from-state as inline
   styles at init; these overrides pin the final colors so the title entrance
   plays directly in petrol on cream, then the gallery fades in. */
.section_hero-home { background-color: #2b2b28 !important; color: #fffff8 !important; }
/* full-viewport hero: the gallery fills the first screen on any display */
.section_hero-home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rest-content {
  background-color: #fffff8 !important;
  /* IX3 also sets an inline color: cream on this block, the other half of the
     dark intro the client asked us to drop. The background was pinned but the
     colour was not, so until that timeline runs the section headings are cream
     on cream, which is to say invisible. Pinned to the end state. */
  color: #2b2b28 !important;
}

/* Client: dark green -> warm graphite. The template's entire dark tier shares
   one petrol value; overriding the variables recolors all text and dark
   surfaces coherently. Logo keeps petrol as the lone brand accent. */
:root {
  --_🎨-color--base---base--dark-100: #2b2b28;
  --_🎨-color--base---base--dark-88: #2b2b28;
  --_🎨-color--base---base--dark-64: #2b2b28;
  --_🎨-color--base---base--dark-48: #2b2b28;
  --_🎨-color--base---base--dark-32: #2b2b28;
  --_🎨-color--base---base--dark-16: #2b2b28;
  --_🎨-color--base---base--dark-8: #2b2b28;
  --_🎨-color--base---base--dark-6: #2b2b28;
  --_🎨-color--base---base--dark-4: #2b2b28;
  --_🎨-color--base---base--dark-0: #2b2b28;
  --_🎨-color--base---depth--dark: #2b2b28;
  --_🎨-color--base---colors--ceburgundy: #2b2b28;
}

/* dark hero: header runs light while over the hero, flips back after */
.pt-nav-light .logo-nav.is-dark { display: none !important; }
.pt-nav-light .logo-nav.is-light { display: inline-block !important; opacity: 1 !important; width: auto !important; height: 34px !important; max-width: none !important; }
.pt-nav-light .logo-nav.is-second-light { display: none !important; }
.pt-nav-light .right_navbar { color: #fffff8; }
.pt-nav-light .btn_nav a, .pt-nav-light .btn_nav .text-button { color: #fffff8; }
.pt-nav-light .btn_nav .cta_fill-line { background-color: #fffff8; }

/* dark hero: secondary button text + underline in cream */
.section_hero-home .button-group_hero-home .cta_tertiary,
.section_hero-home .button-group_hero-home .cta_tertiary .text-button {
  color: #fffff8 !important;
}
.section_hero-home .button-group_hero-home .cta_tertiary .cta_fill-line,
.section_hero-home .button-group_hero-home .underline_cta-button {
  background-color: oklch(98% 0.01 100 / 0.9);
}

/* on scroll the hero dims a touch deeper instead of being covered by the
   template's solid gray tone sheet (IX3 still drives the fade-in) */
.overlay_hero-home {
  background-color: rgba(12, 12, 10, 0.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* header plate: IX3 fades .nav-bg_desktop.is-base in on scroll. Over the
   dark hero that plate must be hero-charcoal, not the template's white;
   past the hero it returns to white under graphite text. Transitions keep
   the handoff at the hero boundary smooth in both scroll directions. */
.nav-bg_desktop.is-base { transition: opacity 0.3s ease; }
.pt-nav-light .nav-bg_desktop { opacity: 0 !important; }
.right_navbar, .btn_nav a, .btn_nav .text-button { transition: color 0.3s ease; }

/* 2011 logo-mask section: white ground instead of mint (plate fill in
   mask-plustova.svg is switched to match) */
.color-bg-top-bottom { background-color: #fffff8 !important; }

/* Compact footer: newsletter block and page links are gone; the dark tile
   holds just logo left + contact info right, vertically centered. */
.footer_mid-tile { margin-bottom: 0; align-items: center; }
.footer_bottom { padding-top: 10px; grid-row-gap: var(--spacing--space-small); }
.left-footer { justify-content: center; }
/* contact details: bigger and fully opaque so they carry the footer */
.right_footer .footer_info-tile .text-size-small {
  font-size: 1.1rem;
  line-height: 1.55;
  opacity: 1;
}
.footer_socials .cta_tertiary .text-button { font-size: 1.1rem; }

/* footer: single-band layout. Top row: copyright + Контакти. Dark tile:
   logo left, contact info as one horizontal band right. */
.wrap_footer-top { padding-top: 26px; padding-bottom: 26px; }
.footer_top-tile,
.left_footer-top,
.right_footer-top { min-height: 0; height: auto; padding: 0; }
.footer_top-tile { display: flex; justify-content: space-between; align-items: center; }
.footer_mid-tile { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.right_footer {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
}
.right_footer .footer_info-tile,
.right_footer .footer_socials { align-items: flex-start; }
.right_footer .text_right-aligned { text-align: left; }
.bottom_footer { margin-top: 0; padding: 10px 0 18px; }
@media (max-width: 767px) {
  .footer_mid-tile { flex-flow: column; align-items: flex-start; gap: 28px; }
  .right_footer { flex-wrap: wrap; }
}

/* footer v2: one dark tile with breathing room. Logo beside three labeled
   columns, then a bordered legal bar (copyright + Контакти/Поверителност). */
.footer_bottom { padding: clamp(52px, 7vw, 84px) 0 0; }
.footer_mid-tile { align-items: flex-start; }
.logo_icon-footer img { height: 56px; }
.pt-foot-label {
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.72;
  margin-bottom: 10px;
}
.right_footer .footer_info-tile { row-gap: 8px; }
.right_footer .footer_info-tile .text-size-small {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fffff8;
}
.footer_info-tile a { text-decoration: none; }
.footer_info-tile a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-foot-bar {
  margin-top: clamp(40px, 5vw, 60px);
  padding: 20px 0 26px;
  border-top: 1px solid oklch(98% 0.01 100 / 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.pt-foot-bar_links { display: flex; align-items: center; gap: 26px; }
/* Credits in the legal line. The separator is drawn by CSS rather than
   typed into the text, so that on a phone, where the line has to wrap, each
   credit simply takes its own line instead of stranding a lone "·" at the
   end of one or splitting a name off its label. */
.pt-sep { white-space: pre; }
@media (max-width: 767px) {
  .pt-credit { display: block; }
  .pt-sep { display: none; }
}
/* The studio credit is the one link in the legal line, and set in the same
   muted tone as the text around it there was nothing to say so: underline
   it, and bring it to full strength on hover like the contact details. */
.pt-foot-bar a.tone-subtle {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.25s ease;
}
.pt-foot-bar a.tone-subtle:hover { opacity: 1; }
@media (max-width: 767px) {
  .logo_icon-footer img { height: 48px; }
  .right_footer { gap: 28px 40px; }
}

/* Service cards: client photos instead of the template's colored shapes.
   Dark scrim keeps the heading, copy, and number readable in cream. */
.card_shape, .card_shape.is-second, .card_shape.is-third {
  position: relative;
  overflow: hidden;
  background-color: #2b2b28;
  color: #fffff8;
}
.card_shape .heading-style-h3 { color: #fffff8; }
.pt-card-bg { position: absolute; inset: 0; }
.pt-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.card_shape:hover .pt-card-photo { transform: scale(1.045); }
.pt-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    oklch(18% 0.008 110 / 0.66),
    oklch(18% 0.008 110 / 0.24) 48%,
    oklch(14% 0.008 110 / 0.52)
  );
}
.card-shape_top-tile, .wrap_number { position: relative; z-index: 5; }

/* 'More than a room for hire' block: the template indents the heading's
   first line 59.5%; the client wants it plain and left-aligned instead */
.heading-indent { text-indent: 0; margin-top: 0.75rem; }
.heading-indent .heading-style-h3 { max-width: 30ch; }

/* Primary CTA: terracotta, taken from the venue's own brick and clay
   (89.8% of the colour in the photos sits in the 15-45deg warm band;
   the template's lavender sat at 285deg). Cream label for 4.69:1.
   No !important here so the engine's hover animation still runs. */
.btn-bg { background-color: #b45a36; }
.cta_small { color: #fffff8; }

/* Client: hero headline in Montserrat, all caps. Caps need the serif's
   tight -2px tracking replaced with a hair of positive spacing, and a
   heavier weight to hold up over the photos. */
.pt-heading h1,
.absolute-heading .heading-style-h1 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Client: hero headline a touch smaller and on two lines. The headline
   column is capped at ~930px across the whole desktop range, so a fixed
   size is right here: at 54px the line runs 1.81 column-widths, which
   balances into exactly two lines with room for rendering differences.
   Phones and tablets keep their own sizes; two lines there would mean
   ~21px text. */
@media (min-width: 992px) {
  .pt-heading h1,
  .absolute-heading .heading-style-h1 { font-size: 54px; }
}

/* ================================================================
   Type system v2, built around the client's Montserrat.

   Two voices instead of three: Montserrat carries every structural
   role (headings, buttons, labels, nav), Lora carries reading (body
   copy and the editorial italics). Playfair and Inter Tight retire,
   which also drops two font families off the page weight.

   Declared on :root AND body because the template redefines these
   tokens on body inside its breakpoints, and for an inherited
   custom property the declaration closest in the tree wins.
   ================================================================ */
:root, body {
  --_🔠-typography---font--heading-serif: "Montserrat", system-ui, sans-serif;
  --_🔠-typography---font--heading-sans: "Montserrat", system-ui, sans-serif;
  --_🔠-typography---font--button: "Montserrat", system-ui, sans-serif;
  --_🔠-typography---font--label: "Montserrat", system-ui, sans-serif;
  --_🔠-typography---font--body: "Lora", Georgia, serif;

  /* Playfair tolerated -2px; in a geometric sans the round letters
     collide there, so headings get near-neutral tracking instead */
  --_🔠-typography---letter-spacing--h1: -0.5px;
  --_🔠-typography---letter-spacing--h2: -0.5px;
  --_🔠-typography---letter-spacing--h3: -0.3px;

  /* a serif reads solid at regular weight, a geometric sans needs more */
  --_🔠-typography---weight--heading-h1-h4: 600;

  /* the template asked body copy for weight 300, which Lora does not
     draw; left alone the browser would fake or round it. 400 is Lora's
     true text weight, and 500 keeps the bold variant distinct. */
  --_🔠-typography---weight--body: 400;
  --_🔠-typography---weight--body-bold: 500;
}

/* Lora sits on a smaller x-height than Inter Tight, so body copy gets
   a touch more size and leading to hold the same reading colour */
.text-size-small { font-size: 1.02em; line-height: 1.62; }

/* The uppercase micro-labels are structural signage, not reading, so they
   belong to Montserrat. Left on the body face they inherited a serif, and
   serifs are not drawn for letterspaced caps at 11-13px. */
.pt-foot-label,
.pt-quote_eyebrow,
.pt-specs,
.pt-stat_label,
.pt-note_src,
.pt-note_meta {
  font-family: "Montserrat", system-ui, sans-serif;
}

/* The template's .text_style-sans points at the body token. That token used
   to hold a sans; since the body face became Lora it was quietly rendering
   the section openers in a serif, out of step with every other heading. */
.text_style-sans { font-family: "Montserrat", system-ui, sans-serif; }

/* Client: the section openers (Подходящи сме за / Място с история) were
   filling the full container width via the template's fit-to-width script,
   which put them at 138px. The class is off the markup now, and they cap at
   the hero's 54px so the two top-level headings read as one size. */
.heading-style-h0 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 600;   /* was 700: at the same size it still outweighed the hero */
  letter-spacing: 0.012em;
  line-height: 1.12;
}

/* Client: the summary line under the service cards was body-sized. It is a
   heading, so it takes the h3 tokens and stays in step with them. */
.wrap_text-card-shapes .text_body-bold {
  font-family: var(--_🔠-typography---font-family--h3);
  font-size: var(--_🔠-typography---size--h3);
  line-height: var(--_🔠-typography---line-height--h3);
  font-weight: var(--_🔠-typography---font-weight--h3);
  letter-spacing: var(--_🔠-typography---letter-spacing--h3);
}

/* Client: the use-case section sat flush against the dark hero. */
.section_blogs-home { padding-top: clamp(48px, 6vw, 88px); }

/* Client: both statement lines should hold at two or three lines. The
   summary's real problem was its container, capped at 428px, which forced
   five lines even on a wide screen; widening it does most of the work and
   the sizes only take over where the screen runs out of room. */
.master_home-description { max-width: min(1120px, 100%); }
.master_home-description h2 {
  font-size: clamp(22px, 2.8vw, 40px);
  text-wrap: balance;
}
.wrap_text-card-shapes { max-width: min(1000px, 100%); margin-left: auto; margin-right: auto; }
.wrap_text-card-shapes .text_body-bold {
  font-size: clamp(22px, 2.8vw, 40px);
  text-wrap: balance;
}

/* on phones the summary's 24px side padding cost it a whole line */
@media (max-width: 767px) {
  .wrap_text-card-shapes { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   Contact page. Written from scratch in the site's own language:
   cream ground, graphite ink, Montserrat for structure, Lora for
   reading, terracotta on the one action that matters. No template
   classes and no IX3 hooks, so nothing here can be held invisible
   by an animation that fails to run.
   ============================================================ */
.pt-contact {
  --ink: #2b2b28;
  --muted: #6f6c63;
  --hairline: oklch(28% 0.006 110 / 0.16);
  --accent: #b45a36;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(110px, 12vw, 170px) clamp(20px, 5vw, 40px) clamp(80px, 10vw, 140px);
  color: var(--ink);
}

.pt-eyebrow {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.pt-contact_title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 54px);
  letter-spacing: 0.012em;
  line-height: 1.12;
  margin: 14px 0 0;
}
.pt-contact_lead {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.6;
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

/* the three essentials, in the same labelled pattern as the footer */
.pt-contact_details {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.pt-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pt-detail_label {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pt-detail_value {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
a.pt-detail_value:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-detail_map {
  margin-top: 10px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pt-detail_map:hover { opacity: 0.75; }

/* form beside a picture of the place, so the column is not dead space */
.pt-contact_main {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.pt-form { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 26px); }
.pt-field--wide { grid-column: 1 / -1; }
.pt-form_foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
.pt-field { display: flex; flex-direction: column; gap: 8px; }
.pt-field_label {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.pt-field_opt {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: lowercase;
}
.pt-field_input {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 10px 2px;
  transition: border-color 0.2s ease;
}
.pt-field_input::placeholder { color: oklch(28% 0.006 110 / 0.42); }
.pt-field_input:hover { border-bottom-color: oklch(28% 0.006 110 / 0.34); }
.pt-field_input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.pt-field_input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.pt-field_area { resize: vertical; min-height: 120px; }

.pt-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fffff8;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.pt-btn svg { width: 12px; height: 12px; flex: none; }
.pt-btn:hover { background: #9d4c2c; }
.pt-btn:active { transform: translateY(1px); }
.pt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.pt-form_note {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

/* A field kept out of sight and out of the tab order, for the robots that
   fill in every input they find. Off-screen rather than display:none,
   which the better-behaved ones know to skip. */
.pt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* What replaces the form once the enquiry is safely stored. */
.pt-form_done {
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.pt-form_done h2 {
  margin: 0 0 12px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.5px;
}
.pt-form_done p {
  margin: 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
}
.pt-form_done a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.pt-contact_photo { margin: 0; }
.pt-contact_photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* FAQ on native details, so it opens without a line of JavaScript */
.pt-faq {
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--hairline);
}
.pt-faq_title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: 0.012em;
  line-height: 1.15;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}
.pt-faq_list { max-width: 900px; }
.pt-faq_item { border-bottom: 1px solid var(--hairline); }
.pt-faq_q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(16.5px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.35;
}
.pt-faq_q::-webkit-details-marker { display: none; }
.pt-faq_q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
.pt-faq_item[open] .pt-faq_q::after { transform: translateY(-30%) rotate(-135deg); }
.pt-faq_q:hover { color: var(--accent); }
.pt-faq_q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-faq_a {
  margin: 0;
  padding: 0 44px 24px 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

@media (min-width: 760px) {
  .pt-contact_details { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 900px) {
  .pt-contact_main { grid-template-columns: 1.25fr 0.75fr; }
  .pt-contact_photo { position: sticky; top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-btn, .pt-field_input, .pt-faq_q::after { transition: none; }
}

/* the select has to look like the underlined inputs around it */
.pt-select { position: relative; display: block; }
.pt-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
}
.pt-select select:invalid { color: oklch(28% 0.006 110 / 0.42); }
.pt-select::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 42%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

@media (min-width: 620px) {
  .pt-form { grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.4vw, 28px) 28px; }
}

/* In-page navigation. The buttons that used to point at template pages now
   jump to sections here, so the landing spot needs to clear the fixed
   header, and the jump itself should glide unless the visitor asked for
   less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#podhodyashti, #za-nas, #uslugi, #prostranstvoto, #otzivi {
  scroll-margin-top: clamp(76px, 8vw, 104px);
}

/* ================================================================
   MOBILE LAYER. Everything below is scoped under 992px, so the
   desktop layout is untouched by design, not by luck.
   ================================================================ */
@media (max-width: 991px) {
  /* The hero headline sits on exactly two lines, per the client.
     Measured ceilings: 20px holds two lines from 343px to 398px of
     text column, 16.8px at 288px (a 320px phone); 20.5px tips to
     three everywhere. 5.2vw tracks just under those ceilings. */
  .pt-heading h1,
  .absolute-heading .heading-style-h1 {
    font-size: clamp(16px, 5.2vw, 20px);
  }

  /* The Контакти button stays in the top right, as on desktop. The
     template swaps it for the hamburger below 992px, but the preview
     lock hides the menu, which left phones with no header route to the
     contact page at all. The button already knows how to dress for the
     dark hero (.pt-nav-light turns it cream) and carries the 44px
     thumb-target overlay like every other tertiary button. */
  .btn_nav { display: block; }

  /* The brand link is a zero-size anchor: its logo variants either hang
     out of it (absolute, ratio-true at 103.9x34) or sit in flow crushed
     to the template's 5rem clamp, which is why the scrolled header drew
     the mark smaller than the hero state did, and why the flex row
     centered the Контакти button on the empty anchor instead of the
     visible logo. Give the anchor the mark's real box: every variant
     renders 104x34, and logo and button share a centerline in every
     header state without correction factors. */
  .brand_navbar { max-width: none; width: 104px; height: 34px; }

  /* Swipe hint on the services card row: a cream pill nudging sideways
     over the right edge until the visitor swipes or the auto-advance
     takes over (plustova.js creates and removes it). */
  .pt-swipe-wrap { position: relative; }
  .pt-swipe-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 248, 0.94);
    color: #2b2b28;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(20, 20, 18, 0.18);
    pointer-events: none;
    animation: pt-swipe-nudge 1.5s ease-in-out infinite;
    transition: opacity 0.35s ease;
  }
  .pt-swipe-hint svg { width: 12px; height: 12px; }
  .pt-swipe-hint.is-gone { opacity: 0; }
  @keyframes pt-swipe-nudge {
    0%, 100% { transform: translate(0, -50%); }
    50%      { transform: translate(-7px, -50%); }
  }

  /* 2011 finale: open the reveal from the plus. The mask SVG (1440x900,
     cream plate, lockup knocked out) is object-fit: cover, so on a
     portrait screen the artwork recenters and the desktop origin
     (32.32%, the plus at 1440 wide) lands over the letters: the entry
     screen showed a letter's edge crossing the photo. The calc repeats
     the cover arithmetic, x = center minus the plus's offset from the
     artwork center (263.8 SVG units) at the rendered scale, so it hits
     the plus at every width. The origin is the FIXED point, not the
     window's center: it sits ~12% from the screen's left, so the entry
     window reaches mostly rightward and downward from it. SVG
     (456.2, 473.8) places that whole window inside the contiguous
     crossbar-and-stem ink (x 446-484, y 431-515) for phone aspects,
     clear of the hand-drawn gap above the crossbar. At the entry scale
     of 30 the viewport then sits fully inside the plus, image
     unobstructed, and the cream sweeps out from the plus on scroll. */
  .wrap_image-with-mask {
    transform-origin: calc(50% - 263.8 * max(100vw / 1440, 60vh / 900)) 51.59%;
  }

  /* No sideways panning. Desktop Chrome reports no horizontal overflow,
     but iOS also counts what transforms and absolute layers sweep past
     the edges (the drifting marquee tracks, the full-bleed hero tiles),
     and lets the whole page pan sideways to reach it. Clip, not hidden:
     hidden would make body a scroll container and quietly kill the
     sticky 2011 finale, clip only cuts the paint and the pan. Scrollers
     inside the page (the cards row, the specs line) are their own
     scroll containers and keep swiping. */
  html, body { overflow-x: clip; }

  /* Brand logo. The phone navbar caps .brand_navbar at 5rem, so with the
     logo's height pinned at 34px and its width clamped to 80px both sides
     of the box are fixed and the mark (672x220) was drawn squashed to fit.
     The footer link clamps its copy of the same file a few px the other
     way. Contain redraws the artwork at its own ratio inside whatever box
     the layout produces, so nothing around it moves; where the box already
     matches the ratio (the light nav state over the hero) it is a no-op. */
  .logo-nav,
  .logo_icon-footer img { object-fit: contain; }

  /* Thumb targets. Measured on a phone these ran 20px to 36px tall,
     against the 44px both Apple and WCAG ask for. The pseudo-element
     grows the tappable area around the link without moving anything,
     so the type and the underlines stay exactly where they were. */
  .cta_tertiary,
  .brand_navbar,
  .footer_info-tile a,
  .left_footer-top a,
  .pt-foot-bar .tone-subtle,
  .pt-detail_value,
  .pt-detail_map { position: relative; }
  .cta_tertiary::before,
  .brand_navbar::before,
  .footer_info-tile a::before,
  .left_footer-top a::before,
  .pt-foot-bar .tone-subtle::before,
  .pt-detail_value::before,
  .pt-detail_map::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  .cta_small { min-height: 44px; }
  /* stacked footer links sat 38px apart, so 44px targets would have
     overlapped and stolen each other's taps. Matching the specificity of
     .right_footer .footer_info-tile, which otherwise wins on 8px. */
  .right_footer .footer_info-tile { row-gap: 18px; }
  .pt-foot-bar { row-gap: 26px; }
  .cta_small .button-inner { min-height: 44px; align-items: center; }

  /* The three service cards sit in a horizontal scroller. Each was as
     wide as the viewport, so nothing of the next card showed and there
     was no hint to swipe. Narrowing them leaves a deliberate peek, and
     snapping makes the swipe land cleanly. */
  .grid_shape-cards {
    /* the template only makes this row a scroller below 768px; between 768
       and 991 the 82vw cards spilled out and widened the whole page */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .grid_shape-cards > .card_shape {
    width: 82vw;
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }

  /* "Events since 2011" beside the 500+ stat: the template's label-2
     token collapses here (10px, then 8px on phones), far below the
     12-13px every other micro-label on the page holds. Same system.
     The image strip plus the readable stat no longer fit a 320px screen
     on one line, so the row may wrap; where it fits, wrap never fires. */
  .label-small { font-size: 12px; line-height: 1.4; }
  .block_partners { flex-wrap: wrap; }

  /* Below 992px the specs band wraps, and a per-item border cannot know
     where its line began: wrapped rows led with a stray "|", and two
     items that happened to share a line ran together with no divider.
     One spec per line is wrap-proof and needs no dividers at all — and
     stacked five high the overlay would drown the mosaic (308px of scrim
     on a 366px grid at 812px), so the phone treatment, a solid band
     under the photos, takes over for the whole wrapping range. */
  /* Specs carousel. The desktop lays the five specs as one divided line
     over the bottom of the last mosaic photo; narrower screens cannot
     fit that line, and stacking it made a heavy dark slab under the
     photos. So the line stays on the photo and moves instead: with no
     JS it is a swipeable row whose ends fade out, and plustova.js turns
     it into a slow seamless ticker wherever it overflows. */
  .pt-mosaic-wrap .pt-specs {
    top: auto;
    bottom: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 64px 16px 18px;
    font-size: 11.5px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .pt-mosaic-wrap .pt-specs::-webkit-scrollbar { display: none; }
  .pt-mosaic-wrap .pt-specs span { flex: 0 0 auto; white-space: nowrap; padding: 0 14px; }
  .pt-mosaic-wrap .pt-specs span + span { border-left: 1px solid oklch(98% 0.01 100 / 0.4); }
  /* the JS-built ticker: a clipping window, a sliding track, and a second
     copy of the items so the loop closes without a visible seam; every
     span carries the divider so the seam reads like any other joint */
  .pt-mosaic-wrap .pt-specs.pt-built { overflow: hidden; padding-left: 0; padding-right: 0; }
  .pt-specs_run { overflow: hidden; width: 100%; }
  .pt-specs_track { display: flex; align-items: center; width: max-content; }
  .pt-specs.pt-loop .pt-specs_track { animation: pt-specs-run 32s linear infinite; }
  .pt-specs.pt-loop .pt-specs_track span { border-left: 1px solid oklch(98% 0.01 100 / 0.4); }
  .pt-specs.pt-loop:active .pt-specs_track { animation-play-state: paused; }
  @keyframes pt-specs-run { to { transform: translate3d(-50%, 0, 0); } }

  /* "We're perfect for" near 430px wrapped with the lone preposition
     "for" as the whole second line; balancing gives Подходящи / сме за. */
  #podhodyashti .heading-style-h0 { text-wrap: balance; }

  /* flex-wrap dealt the four stats 3-1 here, the fourth stranded alone
     on a centered second line. The phone 2x2 reads as designed, so the
     grid takes over for the whole wrapping range. */
  .pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

  /* contact form: placeholders at 0.42 alpha blended to ~2.5:1 on the
     cream, faint in daylight. 0.55 clears 3:1 and still reads muted. */
  .pt-field_input::placeholder { color: oklch(28% 0.006 110 / 0.55); }
  .pt-select select:invalid { color: oklch(28% 0.006 110 / 0.55); }

  /* the kitchen paragraph kept the desktop 4-track subgrid and its span-3
     placement, rendering as a 175px sliver beside the photo; below 992px
     it should simply fill the text column like the community row does. */
  ._4-columns { display: block; }

  /* Orphan one-letter words, hero edition. The hero title is pre-split
     into inline-block word spans, and the line breaker keeps a wrap
     opportunity around atomic inlines no matter what character sits
     between them, so a no-break space alone cannot hold и/с/а to its
     word there. plustova.js wraps the letter and its word in this class
     below 992px instead. */
  .pt-nw { white-space: nowrap; }

  /* Accordion arrows. The engine's click timeline rotates .icon_faq by
     class with no scoping to the tapped row, so the first tap turned all
     four mobile arrows to the open position for good and direction
     stopped telling open from closed. The row height IS tracked per row,
     so plustova.js mirrors it onto .pt-open and these pins outrank the
     engine's inline styles: only the open row's arrow turns and brightens,
     the rest hold the resting state they were painted with. */
  #podhodyashti .expandable-single .icon_faq.is-mobile {
    transform: none !important;
    opacity: 0.08 !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #podhodyashti .expandable-single.pt-open .icon_faq.is-mobile {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px) {
  /* Review card metadata was 10.5px and 12.5px, below comfortable
     reading on a phone. The source tag sits on the same 12px floor the
     page's other micro-labels hold (.label-small, .pt-stat_label): at
     11.5px it was the one visible label left under it. */
  .pt-note_src { font-size: 12px; }
  .pt-note_name { font-size: 13px; }

  /* The closing logo reveal is pinned for three full screens. That is a
     long scroll on a phone for one animation; two is plenty. */
  .wrap_sticky-logo { height: 200vh; }

  /* Community section: photo above the heading. When the two columns
     stack on a phone, the template yanks the text column to the top with
     order -9999; the kitchen section leads with its photo, and the
     community storefront (with the 15 000+ widget) should too. Order 0
     lets the DOM order stand, and there the image comes first. The id is
     the community text column's Webflow node. */
  #w-node-_2dc130e9-ab16-8547-73b3-00807a02ab6e-8edc2170 { order: 0; }

  /* Hero address strip on the narrowest phones (~320px): the three items
     each broke internally, orphaning the house number ("Marin Drinov St"
     / "30") and splitting "\a9  since" / "2011". Whole items move to the next
     line instead of their words. Above ~360px all three fit on one line
     and both declarations are no-ops. */
  .home-marquee_text { flex-wrap: wrap; }
  .home-marquee_text .text-size-xs { white-space: nowrap; }

  /* The address strip belongs at the very bottom of the hero photo. In
     flow it ends the vertically centered text block, which on a phone
     leaves it floating ~150px up the image. Pinning it to the section
     needs the section to be its containing block, so the padding
     wrapper's positioning moves to the text block it was lifting: the
     strip and the text each carry z-index 2 themselves, keeping both
     above the slideshow (z 0) and under the scroll dimmer (z 10),
     exactly as before. Phones only; the mosaic layouts keep the flow. */
  .section_hero-home .padding-global { position: static; }
  .section_hero-home .master_text-home { position: relative; z-index: 2; }
  .section_hero-home .home-marquee_text {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 2;
    margin-bottom: 0;
    /* the template's width: 100% wins over the right inset on an
       absolute box, shoving "1504 Sofia" 16px past the screen edge;
       auto lets left and right size the strip to the viewport */
    width: auto;
  }
}

/* ================================================================
   PHONES: the hero gallery becomes a slideshow.
   A nine-tile mosaic reads as thumbnails on a 390px screen, so on
   phones the same nine photos stack and cross-fade instead, one at a
   time, full bleed. Pure CSS: no timer to miss, nothing for a failed
   script to leave blank. Tablets and desktop keep the mosaic.
   ================================================================ */
@media (max-width: 767px) {
  .hero-mosaic_grid {
    display: block;
    gap: 0;
    background: none;
  }
  .hm-tile {
    position: absolute;
    inset: 0;
    /* the reveal transition would fight the slideshow */
    transition: none;
  }
  .hm-tile img { width: 100%; height: 100%; object-fit: cover; }

  @media (prefers-reduced-motion: no-preference) {
    /* The desktop reveal's ".pt-js .hm-tile.pt-in { opacity: 1 }" beats a
       bare .hm-tile on specificity, and an animation only owns opacity
       AFTER its delay: with the stronger selector left out, every tile
       waiting on its delay stood at static opacity 1, nine photos deep,
       and the DOM-last tile simply covered the show. The selector list
       here outweighs it, so a waiting tile is invisible and each slide
       owns the screen only during its own five seconds. */
    .pt-js .hm-tile.pt-in,
    .hm-tile {
      opacity: 0;
      /* longhands, never the animation shorthand: the shorthand's implied
         delay: 0s would outweigh the lower-specificity nth-child stagger
         below and run all nine slides in unison */
      animation-name: pt-hero-slide;
      animation-duration: 31.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      will-change: opacity, transform;
    }
    /* nine slides, three and a half seconds each, with a one-second
       crossfade at the seam: the client found the five-second pace too
       slow to ever see the later photos */
    .hm-tile:nth-child(1) { animation-delay: 0s; }
    .hm-tile:nth-child(2) { animation-delay: 3.5s; }
    .hm-tile:nth-child(3) { animation-delay: 7s; }
    .hm-tile:nth-child(4) { animation-delay: 10.5s; }
    .hm-tile:nth-child(5) { animation-delay: 14s; }
    .hm-tile:nth-child(6) { animation-delay: 17.5s; }
    .hm-tile:nth-child(7) { animation-delay: 21s; }
    .hm-tile:nth-child(8) { animation-delay: 24.5s; }
    .hm-tile:nth-child(9) { animation-delay: 28s; }
  }

  /* no motion asked for: one photo, held */
  @media (prefers-reduced-motion: reduce) {
    .pt-js .hm-tile, .hm-tile { opacity: 0 !important; }
    .pt-js .hm-tile:first-child, .hm-tile:first-child { opacity: 1 !important; }
  }
}

/* ================================================================
   Entry animations for the sections the engine leaves static
   (the pt-* sections built from scratch and the template blocks with
   no IX3 hooks). plustova.js adds .pt-anim/.pt-anim-img only when
   IntersectionObserver exists and motion is welcome, so without JS
   nothing is ever hidden; .pt-vis plays the entrance once. The
   transition lives on the visible state so arming never animates. */
.pt-anim { opacity: 0; transform: translateY(24px); }
.pt-anim.pt-vis {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pt-d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .pt-anim { opacity: 1 !important; transform: none !important; }
}

@keyframes pt-hero-slide {
  0%      { opacity: 0; transform: scale(1.07); }
  3.2%    { opacity: 1; }
  11.1%   { opacity: 1; }
  14.3%   { opacity: 0; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.07); }
}

/* The kitchen-and-bar row was text (4 of 12 columns), photo (6) and the
   template's video showreel (2). The showreel had no video, so it was
   removed, which left its two columns as a blank strip on the right. The
   photo now takes them. Targeted by its own node id so the community row,
   which shares the grid_columns class but lays out differently, is left
   alone; where that grid collapses to a single column this does nothing. */
#w-node-fc01d381-4482-bb7f-f78f-1fbcf59dd825-8edc2170 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}