/* ============================================================
   PRO LAYER
   Professional polish on top of the existing dark-glass design:
   premium typography, trust signals, stronger CTAs, responsive.
   Loaded last so it wins over main.css / glass.css.
   ============================================================ */

/* ---------- 1. Premium typography ---------- */
:root {
  --roboto-regular-h1-font-family: "Playfair Display", Georgia, serif;
  --roboto-medium-h2-font-family: "Playfair Display", Georgia, serif;
  --roboto-regular-p-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --roboto-regular-14px-font-family: "Inter", system-ui, sans-serif;
  --roboto-regular-12px-font-family: "Inter", system-ui, sans-serif;
  --roboto-medium-14px-font-family: "Inter", system-ui, sans-serif;
  --roboto-medium-h3-font-family: "Inter", system-ui, sans-serif;
  --moonlit-nasturtium-8fdab3netlifyapp-inter-regular-font-family: "Inter",
    system-ui, sans-serif;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bulleted lists: keep bullets inside (global * { padding:0 } killed the
   default list indent, so markers were poking out to the left). */
.div-6-span2 {
  padding-left: 1.4em;
  list-style-position: outside;
}
.div-6-span2 li {
  margin-bottom: 4px;
  padding-left: 2px;
}

/* ---------- Sticky / fixed navbar ---------- */
.header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 1000;
  overflow: visible !important;
  transition: background 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease, height 0.3s ease;
}
.header .container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
/* keep a clear gap between the nav and the language / phone block */
.header .container2 {
  width: 100%;
  gap: 32px;
}
.header .nav {
  flex-wrap: wrap;
}
.header .container3 {
  flex-shrink: 0;
}
/* Bigger, more visible navbar logo (was only 65x36) */
.law-logo {
  width: 92px !important;
  height: auto !important;
}
/* Clickable header phone (tel: link) — keep it looking like plain text */
.tel-link {
  text-decoration: none;
  color: inherit;
  -webkit-text-fill-color: inherit;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.tel-link:hover {
  opacity: 0.8;
}
/* Header phone number: light over the dark hero photo (at the top).
   It turns dark only once the bar scrolls onto light content in light
   mode — see theme-light.css `.pro-scrolled ._998-90-178-72-00`. */
.header ._998-90-178-72-00 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Nav links: white by default, orange gradient + sliding underline when active */
.header .nav2 a.nav-link {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}
.header .nav2 a.nav-link.active,
.header .nav2 a.nav-link:not(.active):hover {
  background: linear-gradient(97.81deg, #eb7c3a 0%, #ffb37c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.header .nav2 a.nav-link:not(.active):hover::after {
  transform: scaleX(1);
}
.header.pro-scrolled {
  background: rgba(12, 9, 7, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
/* compensate for the now-fixed header */
.section-main {
  padding-top: 70px !important;
}

/* Lift the hero (and the fixed header inside it) above all later sections,
   so the navbar never gets covered by content while scrolling. */
.main > .section-main {
  z-index: 100 !important;
}

/* Hero = full-screen (100vh), responsive */
.section-main {
  min-height: 100vh;
  min-height: 100dvh;
}
.bg-img {
  height: 100vh !important;
  height: 100dvh !important;
  /* brighten the photo (much lighter, only a hint of darkness) */
  filter: brightness(1.32) saturate(1.04);
  /* hard cut at the hero bottom — no fade/blend into the next section */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
/* full-width overlay over the hero photo (sits above .bg-img, below the
   hero content). 100vw so it covers the photo edge-to-edge on any screen
   — the fixed-width .section-main would clip a child overlay. */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  pointer-events: none;
}
/* scroll indicator pinned to the bottom of the hero */
.mouse {
  position: absolute !important;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 3;
  /* proper rounded scroll-mouse shape — border-image ignored the
     border-radius, which left it a sharp rectangle */
  width: 26px !important;
  height: 42px !important;
  border: 2px solid #eb7c3a !important;
  border-image: none !important;
  border-radius: 14px !important;
  padding: 8px 0 0 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
/* the wheel dot scrolls down and fades, on a loop */
.mouse .ellipse-209 {
  width: 4px !important;
  height: 8px !important;
  border-radius: 3px !important;
  animation: lh-mouse-scroll 1.6s ease-in-out infinite;
}
@keyframes lh-mouse-scroll {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(12px);
  }
  100% {
    opacity: 0;
    transform: translateY(15px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mouse .ellipse-209 {
    animation: none;
  }
}

/* ---------- Scroll-reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Smooth micro-interactions on cards/links */
.directions-container .direction,
.section-why-us .direction2,
.section-faq .faq-card2,
.footer .link,
.footer .link2 {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.directions-container .direction:hover,
.section-why-us .direction2:hover {
  transform: translateY(-4px);
}
/* Don't clip the hover-lift / glow of the cards (parents were overflow:hidden) */
.directions-container,
.directions-container2 {
  overflow: visible !important;
}
.footer .link:hover,
.footer .link2:hover {
  transform: translateY(-2px);
}

/* Language switcher (Рус | Eng | Uz) */
.language [data-lang] {
  cursor: pointer;
  transition: color 0.2s ease;
}
.language [data-lang] .div2,
.language [data-lang] .div3 {
  cursor: pointer;
}
.language [data-lang]:not(.lang-active) .div3 {
  -webkit-text-fill-color: var(--gray-gray, #a9acb3);
  background: none;
  color: var(--gray-gray, #a9acb3);
}
.language [data-lang].lang-active .div2,
.language [data-lang].lang-active .div3 {
  background: linear-gradient(125.6deg, #eb7c3a 0%, #ffb37c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Remove leftover empty Figma artboard placeholders */
.page,
.page2,
.page3,
.page4,
.page5 {
  display: none !important;
}

/* Big section headings → elegant serif */
.div5,
.div10,
.div11,
.div19,
.div22 {
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-weight: 600;
}

/* Card / item titles → clean Inter semibold */
.div8,
.div13,
.div16,
.div18,
.div25 {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- 2. Stronger primary CTA ---------- */
.button {
  background: linear-gradient(97.81deg, #eb7c3a 0%, #ffb37c 100%) !important;
  border: 0 !important;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(235, 124, 58, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(235, 124, 58, 0.45);
  filter: brightness(1.04);
}
.button:active {
  transform: translateY(0);
}
.button .div7 {
  color: #ffffff;
  font-weight: 600;
}

/* Hero advantage pills become real, clickable links to the form */
.advantage,
.advantage2,
.advantage3 {
  cursor: pointer;
}

/* Footer subscribe + "scroll to top" feel clickable */
.for-true2,
.up-down .button2,
.faq-card,
.faq-card2 {
  cursor: pointer;
}

/* ---------- 3. Trust signals (hero stats) ---------- */
.pro-stats {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pro-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pro-stat-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(97.81deg, #eb7c3a 0%, #ffb37c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pro-stat-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px;
  color: #a9acb3;
  letter-spacing: 0.02em;
}
.pro-stat-divider {
  width: 1px;
  align-self: stretch;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- 4. Form feedback (success / error) ---------- */
.pro-form-msg {
  display: none;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.pro-form-msg.is-visible {
  display: block;
}
/* keep the "Тип услуги" dropdown solidly above the rest of the form so the
   message box / submit button never bleed through it */
.section-contact .custom-combobox.is-open {
  z-index: 200 !important;
}
.section-contact .combobox2 {
  z-index: 200 !important;
}
.pro-form-msg.is-ok {
  background: rgba(84, 189, 12, 0.14);
  border: 1px solid rgba(84, 189, 12, 0.4);
  color: #cfeec0;
}
.pro-form-msg.is-err {
  background: rgba(235, 124, 58, 0.14);
  border: 1px solid rgba(235, 124, 58, 0.4);
  color: #ffd9bf;
}
.contact-control.is-invalid,
.contact-textarea-control.is-invalid {
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.8);
  border-radius: 6px;
}

/* ---------- 4b. FAQ accordion (animated + uniform fixed-size cards) ---------- */
.section-faq .faq-card,
.section-faq .faq-card2 {
  cursor: pointer;
}
.section-faq .heading-3-button {
  min-height: 28px;
}
/* Cards past the visible count are hidden by JS (inline display:none).
   First 8 show; every "Show more" click reveals 8 more. */
.faq-more {
  display: block;
  margin: 26px auto 0;
  padding: 12px 34px;
  border: 1px solid rgba(235, 124, 58, 0.5);
  border-radius: 999px;
  background: rgba(235, 124, 58, 0.08);
  color: #ffb37c;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease,
    box-shadow 0.25s ease;
}
.faq-more:hover {
  background: linear-gradient(135deg, #eb7c3a 0%, #ffb37c 100%);
  color: #14110d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(235, 124, 58, 0.35);
}
/* Uniform header: question stays on ONE line — size not driven by text length */
.section-faq .container14 {
  min-width: 0;
}
.section-faq .container7 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.section-faq .div16 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* No dangling gap below the closed header */
.section-faq .faq-card,
.section-faq .faq-card2 {
  gap: 0 !important;
}
/* Smooth open/close via max-height (exact px set by JS) — works in every browser.
   overflow:hidden on .tavsifi itself reliably clips the answer when closed. */
.section-faq .tavsifi {
  display: block !important;
  overflow: hidden !important;
  max-height: 0;
  width: 100%;
  align-self: stretch;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-faq .faq-card.pro-open .tavsifi,
.section-faq .faq-card2.pro-open .tavsifi {
  max-height: 600px; /* fallback if JS is slow; JS sets the exact height */
}
.section-faq .tavsifi .faq-ans {
  display: block;
  min-width: 0;
}
.section-faq .tavsifi .div24 {
  display: block; /* override Figma flex so the answer wraps normally */
  padding-top: 14px;
  width: 100%;
}
.pro-chevron {
  transition: transform 0.3s ease;
}
.section-faq .faq-card.pro-open .pro-chevron,
.section-faq .faq-card2.pro-open .pro-chevron {
  transform: rotate(180deg);
}

/* ---------- 4c. Team tab bar: hover / active / inactive ---------- */
.team-animation .tapbar > div {
  cursor: pointer;
  transition: background 0.22s ease, box-shadow 0.22s ease, color 0.2s ease !important;
}

/* Inactive → flat: no pill, no rim, just muted text */
.team-animation .tapbar > div.tap-bar2 {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Active → warm filled pill with a clean glass rim */
.team-animation .tapbar > div.tap-bar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Hover on inactive → light glass pill with the same rim */
.team-animation .tapbar > div.tap-bar2:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 100%
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.team-animation .tapbar > div.tap-bar2:hover .div21 {
  color: #ffffff;
}

/* Keep the article block the same height across tabs (no jump on shorter text) */
.team-animation .article {
  min-height: 260px;
}

/* Team carousel = vertical swiper: a 3-card window that slides smoothly.
   The glass numbers/arrows keep their original liquid-glass look (from glass.css). */
.team-animation .lawyers-carousel {
  position: relative;
  display: block !important;
  overflow: hidden;
  height: 440px;
}
.team-animation .lawyers-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.team-animation .numbers .num,
.team-animation .corouselation .next-before {
  cursor: pointer;
}
/* condensed pagination "•••" gap marker */
.team-animation .numbers .num-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa7b4;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  min-height: 14px;
  user-select: none;
}

/* ---------- 5. Inline icon fallbacks (replace broken <img>) ---------- */
.pro-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lawyers-carousel .pro-photo {
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Card description: clamp to 3 lines with "…" — full text lives in the tabs */
.lawyers-carousel .div15 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lawyer .pro-avatar,
.lawyer2 .pro-avatar {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: #ffb37c;
  background: radial-gradient(
    circle at 40% 30%,
    rgba(235, 124, 58, 0.28),
    rgba(60, 36, 22, 0.55)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ---------- 6. Mobile hamburger (hidden on desktop) ---------- */
.pro-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.pro-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #ffb37c;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.pro-burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.pro-burger.is-open span:nth-child(2) {
  opacity: 0;
}
.pro-burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================
   Contact location icon — animated radar/ripple waves
   ============================================================ */
.section-contact .svg19 {
  position: relative;
  overflow: visible;
  color: #ffffff !important; /* white pin reads on the orange disc */
  animation: lh-pin-pulse 2.4s ease-in-out infinite;
}
/* radar / sonar — white rings expanding out of the pin (visible on orange) */
.section-contact .svg19::before,
.section-contact .svg19::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
  animation: lh-ripple 2.4s ease-out infinite;
}
.section-contact .svg19::after {
  animation-delay: 1.2s;
}
@keyframes lh-ripple {
  0% {
    transform: scale(0.4);
    opacity: 0.85;
  }
  70% {
    opacity: 0.18;
  }
  100% {
    transform: scale(3.1);
    opacity: 0;
  }
}
@keyframes lh-pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
/* the address disc opens Google Maps */
.section-contact .background-shadow[data-map] {
  cursor: pointer;
}
.section-contact .map-link {
  display: inline-block;
  margin-top: 10px;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 1px;
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.section-contact .map-link:hover {
  opacity: 0.85;
  border-color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .section-contact .svg19,
  .section-contact .svg19::before,
  .section-contact .svg19::after {
    animation: none;
  }
}

/* ============================================================
   FOOTER — convert from fixed/absolute Figma export to centered flow
   (was overflowing on wide screens: columns spilled off both sides)
   ============================================================ */
.footer {
  height: auto !important;
  padding: 64px 24px 28px !important;
}
.footer .container24 {
  position: static !important;
  left: auto !important;
  top: auto !important;
  translate: none !important;
  transform: none !important;
  width: 100% !important;
  max-width: 1240px;
  margin: 0 auto !important;
  justify-content: space-between !important;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer .container24 > * {
  flex: 1 1 200px;
  min-width: 0 !important;
  max-width: 300px;
  padding-right: 0 !important;
}
.footer .container25,
.footer .container11,
.footer .list,
.footer .item,
.footer .item2 {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
.footer .horizontal-divider {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 1240px;
  margin: 40px auto 0 !important;
}
.footer .container27 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
  align-items: center !important;
  text-align: center;
}
.footer .up-down {
  top: 32px !important;
  right: 40px !important;
  bottom: auto !important;
}

/* Social icons — consistent base + clear hover */
.footer .container26 .link,
.footer .container26 .link2 {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease,
    box-shadow 0.25s ease;
}
.footer .container26 .link:hover,
.footer .container26 .link2:hover {
  transform: translateY(-3px) scale(1.06);
  background: linear-gradient(135deg, #eb7c3a 0%, #ffb37c 100%) !important;
  box-shadow: 0 10px 20px rgba(235, 124, 58, 0.42);
}
.footer .container26 .link:hover .pro-icon,
.footer .container26 .link2:hover .pro-icon {
  color: #1a130d !important;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

/* Tablet / small laptop */
@media (max-width: 1200px) {
  .section-main {
    width: 100% !important;
  }
  .header {
    width: 100% !important;
  }
  .container9 {
    gap: 40px !important;
  }
  .container10 {
    width: 56% !important;
    min-width: 0 !important;
  }
  .div5 {
    font-size: 38px !important;
    line-height: 46px !important;
  }
}

/* Hide decorative nav phone block a bit earlier to avoid crowding */
@media (max-width: 1024px) {
  .container6 {
    display: none !important;
  }
  .nav {
    gap: 18px !important;
  }
}

/* Tablet portrait */
@media (max-width: 900px) {
  /* Stop any fixed 1440px child from stretching the page wider than the screen */
  html,
  body,
  ._1920-w-light,
  .background,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .section-main,
  .header,
  .container,
  .container2,
  .container9,
  .container10,
  .hero,
  .section-about-us,
  .section-why-us,
  .team-animation,
  .lawyers-brd-black-version,
  .lawyers-carousel,
  .about2,
  .article,
  .section-faq,
  .container12,
  .faq-question,
  .section-contact,
  .container15,
  .container17,
  .container22,
  .form,
  .container11,
  .about-us,
  .container13,
  .footer,
  .container24,
  .container25 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Cap every fixed-width inner element to its container (retrofit responsive) */
  .main * {
    max-width: 100% !important;
  }
  .lawyer,
  .lawyer2,
  .direction2,
  .direction-center,
  .direction-right,
  .about-dt,
  .div12,
  .div15,
  .about,
  .fullname-who,
  .article,
  .container11 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Team tabs wrap to fit */
  .tapbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tap-bar,
  .tap-bar2,
  .tap-bar3 {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .pro-burger {
    display: flex;
  }
  .header .nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: rgba(12, 9, 7, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 8px 24px 16px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
  }
  .header.pro-nav-open .nav {
    max-height: 320px;
    padding-top: 8px;
    padding-bottom: 16px;
  }
  .header .nav2 {
    width: 100%;
    align-items: flex-start !important;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .container3 {
    margin-left: auto;
  }
  .header {
    overflow: visible !important;
  }
  .container2 {
    position: relative;
  }

  /* Hero → single column, drop heavy decorations, center vertically */
  .section-main {
    justify-content: center !important;
  }
  .container9 {
    flex-direction: column !important;
    gap: 28px !important;
    padding: 0 24px !important;
  }
  .container10 {
    width: 100% !important;
  }
  .circle,
  .advantage,
  .advantage2,
  .advantage3,
  .mouse {
    display: none !important;
  }

  /* About / Why / Team / Contact rows → stack */
  .section-about-us,
  .section-why-us,
  .team-animation {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 24px !important;
  }
  .directions-container,
  .directions-container2,
  .lawyers-brd-black-version,
  .about-us,
  .about2 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ellipse,
  .ellipse2 {
    display: none !important;
  }

  .container17 {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .container15,
  .container13 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Phones */
@media (max-width: 600px) {
  /* ---- compact navbar so the language switcher never gets clipped ---- */
  .header .container2 {
    gap: 10px !important;
  }
  .header .container3 {
    gap: 10px !important;
    margin-left: auto;
  }
  .header .language {
    gap: 3px !important;
  }
  .header .language .div3,
  .header .language .div2,
  .header .language .div4 {
    font-size: 13px !important;
  }
  .header .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    margin-right: 0 !important;
  }
  .law-logo {
    width: 78px !important;
    height: auto !important;
  }
  .pro-burger {
    margin-left: 4px;
  }

  .div5 {
    font-size: 30px !important;
    line-height: 38px !important;
  }
  .div10,
  .div11,
  .div19,
  .div22 {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  .directions-container {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 16px !important;
  }
  .direction {
    width: 100% !important;
  }
  .pro-stat-num {
    font-size: 26px;
  }
  .pro-stats {
    gap: 18px;
  }

  /* Contact info pills → flow instead of absolute overlap */
  .container22 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
  }
  .container22 .contact,
  .container22 .contact2,
  .container22 .contact3 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }
  /* address disc → a real circle (was a stretched 434x366 oval), centered,
     solid orange in both themes, with the white animated pin inside */
  .container22 .background-shadow {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 290px !important;
    max-width: 84vw !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    margin: 4px auto 6px !important;
    padding: 0 30px !important;
    justify-content: center !important;
    background: linear-gradient(322.36deg, #EB7C3A 0.06%, #FFB37C 99.94%) !important;
  }
  .container22 .background-shadow ._100115-2-2-306 {
    font-size: 15px !important;
    line-height: 21px !important;
  }
  .ellipse-573,
  .ellipse-572 {
    display: none !important;
  }
  .container18,
  .container20 {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .container18 > *,
  .container20 > * {
    width: 100% !important;
  }

  /* ---- Team cards: stop the cramping ----
     fixed 136px height clipped the content; let cards grow, stack the
     name + role badge, and shrink the photo so the text has room */
  .lawyer,
  .lawyer2 {
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    padding: 10px !important;
    gap: 10px !important;
  }
  .photo-2025-10-23-21-19-55-2 {
    width: 78px !important;
    align-self: flex-start !important;
    aspect-ratio: 78 / 98 !important;
  }
  .about {
    overflow: visible !important;
    gap: 6px !important;
  }
  .fullname-who {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  .who,
  .who2 {
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }
  .div14 {
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 14px !important;
  }
  .who,
  .who2 {
    overflow: visible !important;
  }
  .div13,
  .div16,
  .div18 {
    font-size: 16px !important;
    line-height: 20px !important;
  }
  .div15 {
    font-size: 13px !important;
    line-height: 18px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  /* compact the number rail so the cards get more width */
  .team-animation .numbers .num,
  .team-animation .next-before {
    width: 34px !important;
    height: 34px !important;
  }
  .team-animation .numbers {
    gap: 8px !important;
  }
  .corouselation {
    gap: 8px !important;
  }

  /* Footer → stack */
  .container24 {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 24px !important;
  }
}

/* Small phones — iPhone SE / iPhone 5 (down to 320px) */
@media (max-width: 380px) {
  /* extra-compact navbar */
  .law-logo {
    width: 66px !important;
  }
  .header .container2 {
    gap: 7px !important;
  }
  .header .container3 {
    gap: 7px !important;
  }
  .header .language .div3,
  .header .language .div2,
  .header .language .div4 {
    font-size: 12px !important;
  }
  .header .theme-toggle {
    width: 30px !important;
    height: 30px !important;
  }
  .pro-burger {
    margin-left: 2px;
  }
  /* tighter section gutters */
  .container9,
  .section-about-us,
  .section-why-us,
  .team-animation,
  .container15,
  .container13,
  .container24 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .div5 {
    font-size: 26px !important;
    line-height: 33px !important;
  }
  .div10,
  .div11,
  .div19,
  .div22 {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  /* keep the hero CTA full-width-ish and tappable */
  .button {
    width: 100% !important;
  }
}