/*
  Stage 1 custom overrides for the Профи Дом mobile UI rebuild.

  This stylesheet introduces a simplified brand treatment and header
  appearance without altering the core layout or functionality of the
  existing site.  All rules here are applied after the main
  stylesheet and therefore override conflicting definitions when
  necessary.
*/

/* Display the new simplified logo icon and brand text side by side */
.logo__icon {
  height: 36px;
  width: 36px;
  display: block;
}

/* ====================================================================
   Stage 5: Services catalog page
   --------------------------------------------------------------------
   Styles specific to services.html to present a polished catalogue
   of all offerings, including a dedicated hero, direction cards,
   popular services grid, price categories, selection guide and CTA.
   These follow the design language established on the homepage and
   direction pages while remaining responsive and accessible.
*/

/* Services hero accent and background */
.hero--services {
  --accent-color: #1F3E7A;
  background-image: url('../img/slider/hero-1.jpg');
  background-size: cover;
  background-position: center;
}

/* Services price block */
.services-price {
  padding: 3rem 0;
  background: #f8fafc;
}
.services-price h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.6rem;
  color: #1F3E7A;
}
.services-price .price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.services-price .price-item {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}
.services-price .price-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1F3E7A;
  margin: 0 0 0.8rem;
}
.services-price .price-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.services-price .price-item ul li {
  font-size: 0.9rem;
  color: #475569;
  display: flex;
  justify-content: space-between;
}
.services-price .price-item ul li strong {
  color: var(--accent-color, #1F3E7A);
}
.services-price .price-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: #475569;
}

/* Choose service section */
.choose-service {
  padding: 3rem 0;
}
.choose-service h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  color: #1F3E7A;
}
.choose-service p.section-intro {
  text-align: center;
  font-size: 1rem;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 2rem;
}
.choose-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.choose-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.choose-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}
.choose-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}
.choose-card h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: #1F3E7A;
}
.choose-card p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}
.choose-service .choose-cta {
  margin-top: 2.2rem;
  text-align: center;
}
.choose-service .choose-cta .btn-primary {
  background: #1F3E7A;
  color: #ffffff;
  padding: 0.75rem 1.8rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}
.choose-service .choose-cta .btn-primary:hover {
  background: #0f2765;
}

/* CTA variant for services page */
.cta--services {
  --accent-color: #1F3E7A;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .services-price .price-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .choose-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.logo__text {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1F3E7A;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-left: 0.4rem;
}

@media (max-width: 768px) {
  .logo__icon {
    height: 32px;
    width: 32px;
  }
  .logo__text {
    font-size: 1.1rem;
  }
}

/* Phone link in header: remove heavy gradient and button appearance */
.header .phone {
  background: none !important;
  color: #1F3E7A !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.header .phone:hover {
  transform: none !important;
  filter: none !important;
  color: var(--brand) !important;
}

/* Reduce CTA spacing slightly */
.header .cta {
  margin-right: 0.5rem;
}

/* Positioning adjustments for the logo in the mobile header */
.mobile-menu__header .logo {
  margin-left: 0;
}

/* --------------------------------------------------------------------- */
/* Hero slider styles                                                   */
/* The slider appears on the homepage and cycles between five slides.   */
/* It uses no external libraries and degrades gracefully when JavaScript */
/* is disabled by leaving the first slide visible.                      */

.hero-slider {
  position: relative;
  overflow: hidden;
  background: #0f172a;
  color: #fff;
}

.hero-slider__slides {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 440px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
}

.hero-slide.active {
  opacity: 1;
}

/*
 * Overlay for hero slides
 *
 * A two‑directional gradient is used to improve text contrast on top of
 * varied background photos.  The left portion of the slide is darker to
 * better separate the copy from the image, while the right side fades
 * gradually to reveal the photo.  A vertical gradient is layered on top
 * to ensure readability from top to bottom without completely obscuring
 * the underlying image.  Adjust the RGBA values if future photos need
 * more or less contrast.
 */
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  /* Horizontal gradient darkening the left half where text is placed */
  background: linear-gradient(90deg, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0.55) 40%, rgba(15,23,42,0.2) 100%),
              linear-gradient(180deg, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0.4) 60%, rgba(15,23,42,0.3) 100%);
  z-index: 1;
}

/*
 * Hero content wrapper
 *
 * The text block now sits on a semi‑transparent panel with rounded
 * corners and additional padding.  This improves readability on
 * photographic backgrounds without completely hiding the image.  The
 * backdrop filter adds a subtle blur behind the panel to further
 * separate foreground and background.  Adjust max‑width to control
 * how wide the text block can grow on large screens.
 */
.hero-slide__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0;
  padding: 2.5rem 2rem;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 14px;
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}

.hero-slide__content h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #fff;
}

/*
 * When hero headings on the homepage slides are implemented using a generic
 * element instead of an <h1> (to ensure only one H1 per page for better
 * semantics), apply the same typography settings as defined for the H1 above.
 * This class is added to the element replacing the H1 in slides 2–5.
 */
.hero-slide__content .hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #fff;
}


.hero-rotator {
  display: inline-block;
  margin: 0.15rem 0 1rem;
  font-size: clamp(1.08rem, 2.25vw, 1.65rem);
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
  max-width: 100%;
}

.hero-rotator__text {
  display: inline-block;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.hero-slide__content p {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  color: #e2e8f0;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-buttons .btn.secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: none;
}

.hero-slider__indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.indicator.active {
  background: #fff;
}

@media (max-width: 980px) {
  .hero-slider__slides {
    height: 60vh;
    min-height: 360px;
  }
  .hero-slide__content {
    max-width: 100%;
    padding: 1.6rem 1.2rem;
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
  }
  .hero-slide__content h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  /* Responsive typography for the hero-title class */
  .hero-slide__content .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }
  .hero-slide__content p {
    font-size: clamp(0.9rem, 3.5vw, 1.2rem);
  }
  .hero-buttons .btn {
    margin-right: 0;
    padding: 0.75rem 1.5rem;
  }
  .hero-slider__indicators {
    bottom: 15px;
    gap: 8px;
  }
  .indicator {
    width: 8px;
    height: 8px;
  }
}

/* --------------------------------------------------------------------- */
/* Individual hero slide positioning                                      */
/*                                                                        */
/* Each slide has its own class so that background-position can be        */
/* customised when actual photos are used.  By default all slides use     */
/* center-center positioning, which works for abstract placeholders.      */
/* When replacing the images (hero-1.jpg … hero-5.jpg) with real photos,  */
/* adjust the values below to keep important subjects in frame.  For      */
/* example, you can set `50% 20%` to shift focus higher on mobile.        */
.hero-slide--general {
  background-position: center center;
}
.hero-slide--plumbing {
  background-position: center center;
}
.hero-slide--electric {
  background-position: center center;
}
.hero-slide--appliance {
  background-position: center center;
}
.hero-slide--urgent {
  background-position: center center;
}

@media (max-width: 768px) {
  /* Mobile photo positions: adjust these if faces or key objects are cut */
  .hero-slide--general {
    background-position: center center; /* mobile hero photo position */
  }
  .hero-slide--plumbing {
    background-position: center center; /* mobile hero photo position */
  }
  .hero-slide--electric {
    background-position: center center; /* mobile hero photo position */
  }
  .hero-slide--appliance {
    background-position: center center; /* mobile hero photo position */
  }
  .hero-slide--urgent {
    background-position: center center; /* mobile hero photo position */
  }
}

/* --------------------------------------------------------------------- */
/* Hero text animation                                                   */
/* This animation causes the text elements on each hero slide to fade   */
/* in and rise up sequentially when the slide becomes active. It also   */
/* respects the user's reduced‑motion preference by disabling the      */
/* animation when requested.                                           */

@keyframes heroTextUp {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Initially hide hero text elements */
.hero-slide__content h1,
.hero-slide__content .hero-title,
.hero-slide__content .hero-rotator,
.hero-slide__content p,
.hero-slide__content .hero-buttons {
  opacity: 0;
}

/* Animate the visible slide's content */
.hero-slide.active .hero-slide__content h1,
.hero-slide.active .hero-slide__content .hero-title {
  animation: heroTextUp 0.65s ease forwards;
  animation-delay: 0.12s;
}

.hero-slide.active .hero-slide__content .hero-rotator {
  animation: heroTextUp 0.65s ease forwards;
  animation-delay: 0.22s;
}

.hero-slide.active .hero-slide__content p {
  animation: heroTextUp 0.65s ease forwards;
  animation-delay: 0.34s;
}

.hero-slide.active .hero-slide__content .hero-buttons {
  animation: heroTextUp 0.65s ease forwards;
  animation-delay: 0.50s;
}

/* Disable text animations if the user prefers reduced motion, but keep inactive slides hidden */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none !important;
  }

  .hero-slide:not(.active) {
    opacity: 0 !important;
  }

  .hero-slide.active {
    opacity: 1 !important;
  }

  .hero-slide__content h1,
  .hero-slide__content .hero-title,
  .hero-slide__content .hero-rotator,
  .hero-slide__content p,
  .hero-slide__content .hero-buttons {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* --------------------------------------------------------------------- */
/* Reviews book section                                                 */
/* Provides a light, card‑like carousel for customer testimonials with  */
/* a soft page‑flip effect. Navigation arrows and a counter are        */
/* included. The design complements the existing site aesthetic.       */

.reviews-book {
  margin-top: 4rem;
  padding: 2rem 0;
  background: #f8fafc;
}

.reviews-book h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.reviews-book .section-subtitle {
  text-align: center;
  color: #475569;
  margin-bottom: 2rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.4;
}

.reviews-book-wrapper {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.reviews-book-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  min-height: 240px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.review-info {
  display: flex;
  flex-direction: column;
}

.review-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1F3E7A;
}

.review-service {
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.review-rating .star {
  color: #f3b81e;
  font-size: 1.2rem;
  margin-left: 0.15rem;
}

.review-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #334155;
  margin-top: 1rem;
}

.review-footer {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

.reviews-book-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  gap: 1.5rem;
}

.reviews-book-nav button {
  background: #e2e8f0;
  color: #1F3E7A;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.reviews-book-nav button:hover {
  background: #cbd5e1;
}

.reviews-book-counter {
  font-size: 0.9rem;
  color: #64748b;
}

/* Flip animations */
@keyframes reviewFlipOut {
  from {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
  }
  to {
    opacity: 0;
    transform: rotateY(12deg) translateX(60px);
  }
}

@keyframes reviewFlipIn {
  from {
    opacity: 0;
    transform: rotateY(-12deg) translateX(-60px);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
  }
}

.reviews-book-card.animating-out {
  animation: reviewFlipOut 0.5s ease forwards;
}

.reviews-book-card.animating-in {
  animation: reviewFlipIn 0.5s ease forwards;
}

/* Responsiveness for smaller screens */
@media (max-width: 600px) {
  .reviews-book-card {
    padding: 1.4rem;
    border-radius: 16px;
    min-height: auto;
  }
  .reviews-book-nav button {
    width: 36px;
    height: 36px;
  }
}

/* Disable flip animations when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .reviews-book-card.animating-out,
  .reviews-book-card.animating-in {
    animation: none !important;
  }
}


@media (max-width: 480px) {
  .hero-rotator {
    font-size: clamp(1.05rem, 5.2vw, 1.25rem);
    line-height: 1.28;
    margin-bottom: 0.9rem;
  }
}

/* --------------------------------------------------------------------- */
/* Header refresh inspired by референса                                        */
/*                                                                              */
/* The header now uses a lighter backdrop with a subtle blur and displays       */
/* the phone number as a gradient button. The phone number is partially        */
/* blurred until the user hovers, focuses or taps the link. The blurred        */
/* reveal effect is implemented via the phone-hover module and custom CSS       */
/* classes defined below.                                                      */

/* Lighten the header background and apply blur similar to референса */
.header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.1) !important;
}

/* Style the phone button in the header as a gradient call-to-action */
.header .btn.phone {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  padding: 0.8rem 1.6rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  text-decoration: none !important;
}

.header .btn.phone:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
  filter: none !important;
}

/* Ensure the embedded SVG phone icon scales appropriately */
.header .btn.phone svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Phone hover reveal styles */
.phone-hover-target {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.phone-hover-target .phone-hover {
  position: relative !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  min-width: 168px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

.phone-hover-target .phone-hover__visible,
.phone-hover-target .phone-hover__blurred {
  display: inline-block !important;
  white-space: nowrap !important;
  will-change: opacity, transform, filter !important;
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease !important;
}

.phone-hover-target .phone-hover__visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  pointer-events: none !important;
}

.phone-hover-target .phone-hover__blurred {
  opacity: 0.46 !important;
  filter: blur(3px) !important;
  transform: translateY(0) scale(0.995) !important;
  pointer-events: none !important;
}

.phone-hover-target:hover .phone-hover__blurred,
.phone-hover-target:focus .phone-hover__blurred,
.phone-hover-target:focus-visible .phone-hover__blurred,
.phone-hover-target:active .phone-hover__blurred,
.phone-hover-target.is-phone-hover-shown .phone-hover__blurred {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) scale(1) !important;
}

@media (max-width: 767px) {
  .header .btn.phone.phone-hover-target {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .header .btn.phone.phone-hover-target .phone-hover {
    min-width: 142px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-hover-target .phone-hover__visible,
  .phone-hover-target .phone-hover__blurred {
    transition: none !important;
  }
}
/* Fixed contact buttons — soft hover animation */
.social-widget {
  right: 18px !important;
  bottom: 33.33% !important;
  z-index: 9998 !important;
  gap: 12px !important;
}

.social-widget__button {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), filter .3s cubic-bezier(.4, 0, .2, 1) !important;
}

.social-widget__button::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, .28), transparent) !important;
  transform: translateX(-120%) !important;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1) !important;
  pointer-events: none !important;
}

.social-widget__button:hover::before,
.social-widget__button:focus-visible::before {
  transform: translateX(120%) !important;
}

.social-widget__button:hover,
.social-widget__button:focus-visible {
  transform: scale(1.1) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .3) !important;
  filter: saturate(1.08) !important;
}

.social-widget__button:active {
  transform: scale(.95) !important;
}

.social-widget__button svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
}

.social-widget__button:hover svg,
.social-widget__button:focus-visible svg {
  transform: scale(1.15) !important;
}

.social-widget__button--call {
  color: #fff !important;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
}

.social-widget__button--request {
  color: #fff !important;
  background: linear-gradient(135deg, #16a34a, #34d399) !important;
}

@media (max-width: 768px) {
  .social-widget {
    right: 14px !important;
    bottom: 18px !important;
    gap: 10px !important;
  }

  .social-widget__button {
    width: 56px !important;
    height: 56px !important;
  }

  .social-widget__button svg {
    width: 25px !important;
    height: 25px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-widget,
  .social-widget__button,
  .social-widget__button::before,
  .social-widget__button svg {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .social-widget {
    display: none !important;
  }
}

/* --------------------------------------------------------------------- */
/* Directions and Popular Services redesign (Stage 3)                    */
/*                                                                        */
/* The directions and popular services blocks have been completely        */
/* refreshed for a stronger commercial presentation.  Each direction card */
/* now features an icon, a concise description, a set of colored chips    */
/* indicating typical tasks, and a call‑to‑action button.  The grid      */
/* layout adapts across breakpoints, presenting four cards in a row on    */
/* desktop and stacking gracefully on mobile.  Popular services are       */
/* presented as compact cards with category chips, descriptions, prices   */
/* and action buttons.  Color accents are derived from the service type   */
/* (plumbing, electric, appliance, split‑systems) to aid quick scanning. */

/* Directions Section */
.directions {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.directions h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.directions .section-subtitle {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 2.2rem;
  color: #475569;
  font-size: 1rem;
  line-height: 1.45;
}

.directions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

.direction-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.direction-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

.direction-card img {
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
}

.direction-card h3 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: #1F3E7A;
}

.direction-description {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.4;
  margin: 0 0 1rem;
}

.direction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

/* Base chip style used for both directions and services */
.tag,
.chip {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

/* Category colours for chips */
.tag--plumbing,
.chip--plumbing {
  background: #3b82f6;
}
.tag--electric,
.chip--electric {
  background: #fbbf24;
  color: #1f2937;
}
.tag--appliance,
.chip--appliance {
  background: #10b981;
}
.tag--split,
.chip--split {
  background: #06b6d4;
}

/* Direction buttons */
.direction-btn {
  display: inline-block;
  margin-top: auto;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.direction-btn--plumbing {
  background: #2563eb;
}
.direction-btn--plumbing:hover {
  background: #1e40af;
}
.direction-btn--electric {
  background: #fbbf24;
  color: #1f2937;
}
.direction-btn--electric:hover {
  background: #f59e0b;
  color: #1f2937;
}
.direction-btn--appliance {
  background: #10b981;
}
.direction-btn--appliance:hover {
  background: #059669;
}
.direction-btn--split {
  background: #06b6d4;
}
.direction-btn--split:hover {
  background: #0891b2;
}

/* Popular Services Section */
.popular-services {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.popular-services h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.popular-services .section-subtitle {
  text-align: center;
  color: #475569;
  max-width: 740px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.45;
}

.popular-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

.service-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

/* Category chips inside service cards reuse colours from tags */
.service-card .chip {
  margin-bottom: 0.6rem;
}

.service-card h3 {
  font-size: 1.25rem;
  margin: 0 0 0.45rem;
  color: #1F3E7A;
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #475569;
  margin: 0 0 0.8rem;
}

.service-card .price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1F3E7A;
  margin-bottom: 1rem;
}

.service-card .service-btn {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: #1F3E7A;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.service-card .service-btn:hover {
  background: #162c5c;
}

.popular-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: #475569;
}

.popular-actions {
  margin-top: 1.6rem;
  text-align: center;
}

.popular-actions .btn {
  padding: 0.75rem 1.8rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .direction-card {
    padding: 1.8rem 1.4rem;
  }
  .service-card {
    padding: 1.8rem 1.4rem;
  }
}

/* ====================================================================
   Stage 4: Direction pages hero and sections
   --------------------------------------------------------------------
   These styles enhance the three direction landing pages (santehnika.html,
   elektrika.html and remont‑tehniki.html) to match the commercial polish
   of the new homepage. Each hero gains a static photographic background
   with a soft gradient overlay for legibility, colour‑coded primary
   buttons and compact benefit chips. Subsequent sections reuse unified
   spacing, grids and card styles defined earlier while introducing
   lightweight lists for call situations, process steps and mini‑price
   tables. The design remains responsive and respects reduced motion.
*/

/* Colour accents per direction (plumbing, electric, appliances). */
.hero--santehnika {
  --accent-color: #0ea5e9;
}
.hero--elektrika {
  --accent-color: #f59e0b;
}
.hero--tehnika {
  --accent-color: #10b981;
}

/* Base styling for service heroes */
.hero--service {
  position: relative;
  padding: 90px 0 80px;
  min-height: 460px;
  display: flex;
  align-items: center;
  color: #ffffff;
  overflow: hidden;
}
.hero--service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 15, 29, 0.78) 0%, rgba(8, 15, 29, 0.64) 50%, rgba(8, 15, 29, 0.52) 100%);
  z-index: 0;
}

/* Specific hero backgrounds for each direction */
.hero--service.hero--santehnika {
  background-image: url("../img/slider/hero-2.jpg");
  background-size: cover;
  background-position: center center;
}
.hero--service.hero--elektrika {
  background-image: url("../img/slider/hero-3.jpg");
  background-size: cover;
  background-position: center center;
}
.hero--service.hero--tehnika {
  /* Use hero‑4 by default; if swapped for spilt‑systems later this rule can be overridden */
  background-image: url("../img/slider/hero-4.jpg");
  background-size: cover;
  background-position: center center;
}

/* Container within hero */
.hero--service .hero-container,
.hero--service .container {
  position: relative;
  z-index: 1;
}

.hero--service .hero-inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.hero--service .hero-inner h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}
.hero--service .hero-inner .hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
}

/* Benefit chips within hero */
.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 1.8rem;
  padding: 0;
  list-style: none;
}
.hero-benefits li {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

/* Hero buttons */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.hero-buttons .btn-primary,
.cta-section .btn-primary {
  background: var(--accent-color, #1F3E7A);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.hero-buttons .btn-primary:hover,
.cta-section .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color) 80%, #091a2a);
}
.hero-buttons .btn-secondary {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.hero-buttons .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Description section */
.description {
  padding: 3rem 0 2.2rem;
}
.description p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #475569;
  text-align: center;
}

/* Popular services section inside direction pages */
.popular-services {
  padding: 3rem 0 2rem;
}
.popular-services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #1F3E7A;
}
.popular-services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}
.popular-services .service-card {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.popular-services .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.10);
}
.popular-services .service-card .chip {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  color: #ffffff;
}
.popular-services .service-card .chip.plumbing {
  background: #0ea5e9;
}
.popular-services .service-card .chip.electric {
  background: #f59e0b;
}
.popular-services .service-card .chip.tehnika {
  background: #10b981;
}
/* Split-systems category for service cards */
.popular-services .service-card .chip.split {
  background: #06b6d4;
}
.popular-services .service-card h3 {
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
  color: #1F3E7A;
}
.popular-services .service-card p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #475569;
  margin: 0 0 0.8rem;
}
.popular-services .service-card strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1F3E7A;
  margin-bottom: 0.8rem;
}
.popular-services .service-card .service-btn {
  align-self: flex-start;
  padding: 0.6rem 1.3rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: var(--accent-color, #1F3E7A);
  transition: background-color 0.25s ease;
}
.popular-services .service-card .service-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 80%, #091a2a);
}

.popular-services .price-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: #475569;
}

/* Call situations block */
.call-situations {
  padding: 3rem 0 2rem;
  background: #f8fafc;
}
.call-situations h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.6rem;
  color: #1F3E7A;
}
.call-situations .situations-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.call-situations .situations-list li {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  color: #475569;
  font-size: 0.9rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.call-situations .situations-list li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-color, #0ea5e9);
  margin-top: 5px;
}

/* Process block */
.process {
  padding: 3rem 0 2rem;
}
.process h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.8rem;
  color: #1F3E7A;
}
.process .process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
  max-width: 960px;
  margin: 0 auto;
}
.process .process-step {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 20px;
  padding: 1.6rem 1.4rem;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
  text-align: center;
}
.process .process-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--accent-color, #0ea5e9);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
}
.process .process-step p {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.4;
}

/* Mini price block */
.mini-price {
  padding: 3rem 0 2rem;
  background: #f8fafc;
}
.mini-price h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.6rem;
  color: #1F3E7A;
}
.mini-price .price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  max-width: 960px;
  margin: 0 auto;
}
.mini-price .price-item {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mini-price .price-item .price-name {
  font-weight: 700;
  font-size: 1rem;
  color: #1F3E7A;
}
.mini-price .price-item .price-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-color, #0ea5e9);
}
.mini-price .price-item .price-note {
  font-size: 0.85rem;
  color: #475569;
}

/* CTA section at bottom of direction pages */
.cta-section {
  padding: 3rem 0 4rem;
  text-align: center;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1F3E7A;
}
.cta-section p {
  font-size: 1rem;
  line-height: 1.5;
  color: #475569;
  max-width: 720px;
  margin: 0 auto 1.6rem;
}

/* CTA variants colours */
.cta--plumbing {
  --accent-color: #0ea5e9;
}
.cta--electric {
  --accent-color: #f59e0b;
}
.cta--tehnika {
  --accent-color: #10b981;
}
/* Stage 7 CTA variant for call pages */
.cta--call {
  --accent-color: #0ea5e9;
}

/* Stage 7 hero variants for contacts and call pages */
.hero--contacts {
  --accent-color: #0ea5e9;
  background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url("../img/slider/hero-1.jpg");
  background-size: cover;
  background-position: center;
}
.hero--call {
  --accent-color: #0ea5e9;
  background-image: linear-gradient(rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.5)), url("../img/slider/hero-1.jpg");
  background-size: cover;
  background-position: center;
}

/* Stage 7 Contacts Page Cards */
.contacts-cards {
  padding: 3rem 0 2rem;
}
.contacts-cards .contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  max-width: 960px;
  margin: 0 auto;
}
.contacts-cards .contact-card {
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contacts-cards .contact-card h3 {
  font-size: 1.1rem;
  color: #1F3E7A;
  margin-bottom: 0.6rem;
}
.contacts-cards .contact-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
}
.contacts-cards .contact-card a {
  color: var(--accent-color, #0ea5e9);
}

/* Stage 7 Trust Block (reasons) */
.trust-block {
  padding: 3rem 0 2rem;
  background: #f8fafc;
}
.trust-block h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.6rem;
  color: #1F3E7A;
}
.trust-block .reasons-list {
  list-style: none;
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.trust-block .reasons-list li {
  background: #fff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  font-size: 0.9rem;
  color: #475569;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.trust-block .reasons-list li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-color, #0ea5e9);
  margin-top: 5px;
}

/* Stage 7 Zone Map */
.zone-map {
  padding: 3rem 0 2rem;
}
.zone-map h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.4rem;
  color: #1F3E7A;
}
.zone-map .map-placeholder {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}
.zone-map .map-placeholder img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stage 7 Call Form Section */
.call-form-section {
  padding: 3rem 0 2rem;
}
.call-form-section h2 {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 1.5rem;
  color: #1F3E7A;
}
.call-form-section .form-wrapper {
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
  padding: 2rem 2.5rem;
}
.call-form-section .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.call-form-section .form-row label {
  font-size: 0.95rem;
  color: #1F3E7A;
  font-weight: 600;
}
.call-form-section .form-row input,
.call-form-section .form-row select,
.call-form-section .form-row textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  transition: border-color 0.2s ease;
}
.call-form-section .form-row input:focus,
.call-form-section .form-row select:focus,
.call-form-section .form-row textarea:focus {
  border-color: var(--accent-color, #0ea5e9);
  outline: none;
}
.call-form-section .question-form__note {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.call-form-section .btn {
  width: 100%;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero--service,
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .popular-services .service-card,
  .process .process-step {
    transition: none !important;
    animation: none !important;
  }
}

/* Responsive adjustments for direction pages */
@media (max-width: 980px) {
  .hero--service {
    padding: 70px 0 60px;
    min-height: 360px;
  }
  .hero--service .hero-inner {
    max-width: 600px;
  }
}
@media (max-width: 768px) {
  .hero--service {
    padding: 60px 0 50px;
  }
  .hero--service .hero-inner h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .hero--service .hero-inner .hero-subtitle {
    font-size: 0.98rem;
  }
  .hero-benefits {
    gap: 0.5rem;
  }
  .hero-benefits li {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
  }
  .popular-services .services-grid {
    grid-template-columns: 1fr;
  }
  .process .process-grid {
    grid-template-columns: 1fr;
  }
  .call-situations .situations-list {
    grid-template-columns: 1fr;
  }
  .mini-price .price-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Surgical mobile header fix — align closer to референса reference
   Fixes: logo text clipping, oversized phone button, unstable blurred digits.
   ===================================================================== */
@media (max-width: 768px) {
  .header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  }

  .header .container.row {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 18px !important;
  }

  .header .logo {
    order: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .header .logo__icon,
  .header .logo img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    object-fit: contain !important;
  }

  .header .logo__text {
    display: none !important;
  }

  .header .cta {
    order: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .header .btn.phone,
  .header .btn.phone.phone-hover-target {
    width: 100% !important;
    max-width: 218px !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.25px !important;
    gap: 9px !important;
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.28) !important;
    overflow: hidden !important;
  }

  .header .btn.phone svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  .header .btn.phone.phone-hover-target .phone-hover {
    min-width: 0 !important;
    width: auto !important;
    max-width: 158px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .phone-hover-target .phone-hover__visible,
  .phone-hover-target .phone-hover__blurred {
    line-height: 1 !important;
  }

  .phone-hover-target .phone-hover__blurred {
    opacity: 0.62 !important;
    filter: blur(2.1px) !important;
  }

  .header .burger {
    order: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.28) !important;
  }

  .header .burger__line {
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 380px) {
  .header .container.row {
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header .logo,
  .header .burger {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .header .logo__icon,
  .header .logo img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .header .btn.phone,
  .header .btn.phone.phone-hover-target {
    height: 52px !important;
    min-height: 52px !important;
    max-width: 202px !important;
    font-size: 14px !important;
    gap: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .header .btn.phone.phone-hover-target .phone-hover {
    font-size: 14px !important;
    max-width: 146px !important;
  }
}