/* ============================================================
   THEME TOGGLE BUTTON  (applies in both themes)
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffb37c;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease,
    box-shadow 0.25s ease;
}
.theme-toggle:hover {
  background: rgba(235, 124, 58, 0.18);
  transform: translateY(-1px);
}
/* show the icon of the CURRENT theme */
html[data-theme="dark"] .theme-toggle .ic-sun {
  display: none;
}
html[data-theme="light"] .theme-toggle .ic-moon {
  display: none;
}

/* ============================================================
   LIGHT THEME
   Dark is the default. Hero photo + footer keep their dark look.
   ============================================================ */
html[data-theme="light"] {
  --w-b-white: #281c12; /* primary text  -> dark */
  --w-b-black: #fbf4ee; /* base surfaces -> cream */
  --gray-gray: #6f6860; /* secondary text -> mid gray */
  --w-b-white-10: rgba(40, 25, 12, 0.05);
}

/* ---- Page surfaces ---- */
html[data-theme="light"] .background {
  background: #fbf4ee !important;
}
html[data-theme="light"] ._1920-w-light {
  background: #fbf4ee;
}
html[data-theme="light"] .main {
  background: radial-gradient(
      1100px 720px at 86% 58%,
      rgba(235, 124, 58, 0.08),
      transparent 60%
    ),
    radial-gradient(900px 620px at 8% 26%, rgba(235, 124, 58, 0.05), transparent 55%),
    #fbf4ee;
}

/* ---- Hero keeps its dark photo + light text ---- */
html[data-theme="light"] .section-main {
  --w-b-white: #ffffff;
  --gray-gray: #e4ded7;
}

/* hero circle disc: orange -> near-white (light mode), with a dark-text logo */
html[data-theme="light"] .ellipse-56 {
  background: linear-gradient(232.34deg, #eb7c3a -0.04%, #fafafa 99.93%) !important;
}
html[data-theme="light"] .law-1 {
  content: url("../assets/icons/law-logo-light.svg") !important;
}

/* ---- Hero photo brightness / overlay differs by theme ----
   dark  = darker (black overlay),  light = brighter (less darkness) */
/* full-cover overlay over the hero photo */
/* dark mode: extra dark */
html[data-theme="dark"] .bg-img {
  filter: brightness(0.95) saturate(1.0) !important;
}
html[data-theme="dark"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
/* light mode: same darkness as the previous dark mode */
html[data-theme="light"] .bg-img {
  filter: brightness(1.04) saturate(1.02) !important;
}
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

/* ---- Footer keeps its dark look ---- */
html[data-theme="light"] .footer {
  --w-b-white: #ffffff;
  --w-b-black: #010101;
  --gray-gray: #a9acb3;
  background: #010101 !important;
}

/* ============================================================
   NAVBAR  (light bar + dark text)
   ============================================================ */
html[data-theme="light"] .header.pro-scrolled {
  background: rgba(251, 244, 238, 0.86) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(150, 110, 80, 0.16) !important;
}
/* Nav text turns dark only once the bar sits over light content (scrolled);
   at the top it stays light over the dark hero photo. */
html[data-theme="light"] .header.pro-scrolled .nav2 a.nav-link {
  color: #2c2118 !important;
  -webkit-text-fill-color: #2c2118 !important;
}
/* same for the logo: white text is invisible on the white scrolled bar,
   so swap to the dark-text logo once scrolled (top stays white over hero) */
html[data-theme="light"] .header.pro-scrolled .law-logo {
  content: url("../assets/icons/law-logo-light.svg") !important;
}
html[data-theme="light"] .header .nav2 a.nav-link.active,
html[data-theme="light"] .header .nav2 a.nav-link:not(.active):hover {
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .header.pro-scrolled .div3,
html[data-theme="light"] .header.pro-scrolled .div4,
html[data-theme="light"] .header.pro-scrolled .lang2 .div2,
html[data-theme="light"] .header.pro-scrolled .lang3 .div2,
html[data-theme="light"] .header.pro-scrolled ._998-90-178-72-00 {
  color: #2c2118 !important;
  -webkit-text-fill-color: #2c2118 !important;
}
html[data-theme="light"] .header.pro-scrolled .language [data-lang].lang-active .div2,
html[data-theme="light"] .header.pro-scrolled .language [data-lang].lang-active .div3 {
  background: linear-gradient(125.6deg, #eb7c3a 0%, #ffb37c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .header.pro-scrolled .theme-toggle {
  background: rgba(235, 124, 58, 0.12);
  color: #e0732f;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.25);
}
html[data-theme="light"] .theme-toggle {
  background: rgba(235, 124, 58, 0.12);
  color: #e0732f;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.25);
}

/* ============================================================
   CARDS — About / Why / FAQ  (light peach, no dark glass)
   ============================================================ */
/* Solid light cards don't need the glass blur (and it hid them) */
html[data-theme="light"] .directions-container .direction,
html[data-theme="light"] .section-why-us .direction2,
html[data-theme="light"] .section-faq .faq-card2,
html[data-theme="light"] .directions-container .direction .frame-1000005511,
html[data-theme="light"] .section-contact .background-shadow,
html[data-theme="light"] .section-contact .input,
html[data-theme="light"] .section-contact .input2,
html[data-theme="light"] .section-contact .input3,
html[data-theme="light"] .section-contact .textarea,
html[data-theme="light"] .team-animation .article {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .directions-container .direction {
  background: linear-gradient(
    158deg,
    #fdeee3 0%,
    #fae5d4 55%,
    #f6dcc6 100%
  ) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 14px 34px rgba(206, 140, 90, 0.16) !important;
}
html[data-theme="light"] .directions-container .direction::before,
html[data-theme="light"] .directions-container .direction::after {
  display: none !important;
}
/* drop the JS-added dark glass overlay on the about-us cards */
html[data-theme="light"] .lh-glass-overlay-card {
  display: none !important;
}
/* the orange glow behind the cards is way too strong in light mode -> faint */
html[data-theme="light"] .section-about-us .ellipse {
  background: linear-gradient(
    240deg,
    rgba(235, 124, 58, 0.1) 0%,
    rgba(255, 179, 124, 0.08) 100%
  ) !important;
}

html[data-theme="light"] .section-why-us .direction2 {
  background: linear-gradient(160deg, #ffffff 0%, #fdf3ea 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 120, 95, 0.16),
    0 10px 28px rgba(180, 140, 110, 0.1) !important;
}
html[data-theme="light"] .section-why-us .direction2::before,
html[data-theme="light"] .section-why-us .direction2::after {
  display: none !important;
}

html[data-theme="light"] .section-faq .faq-card2 {
  background: linear-gradient(160deg, #fdefe4 0%, #fae7d8 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.16) !important;
}
html[data-theme="light"] .section-faq .faq-card2::before,
html[data-theme="light"] .section-faq .faq-card2::after {
  display: none !important;
}

/* ---- Icon chips: light mode gets its OWN clean light circle (the dark
   orb lives in glass.css). A soft white disc + thin orange rim so the
   orange icon reads cleanly — simple, not flashy. ---- */
html[data-theme="light"] .directions-container .direction .frame-1000005511 {
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fff1e6 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.22),
    0 4px 10px rgba(235, 124, 58, 0.12) !important;
}
html[data-theme="light"] .directions-container .direction .frame-1000005511::before {
  display: none !important;
}

/* ============================================================
   WHY-US number circles (I / II / III)
   ============================================================ */
html[data-theme="light"] .section-why-us .ellipse-54,
html[data-theme="light"] .section-why-us .number,
html[data-theme="light"] .section-why-us .number2,
html[data-theme="light"] .section-why-us .number3 {
  border-color: rgba(235, 124, 58, 0.5) !important;
}

/* ============================================================
   TEAM — clean Figma look, no dark glass shadows
   ============================================================ */
/* strip the dark glass (backdrop blur + dark rim shadow) from every chip */
html[data-theme="light"] .team-animation .lawyer,
html[data-theme="light"] .team-animation .lawyer2,
html[data-theme="light"] .team-animation .next-before,
html[data-theme="light"] .team-animation .before,
html[data-theme="light"] .team-animation .before2,
html[data-theme="light"] .team-animation .who,
html[data-theme="light"] .team-animation .who2,
html[data-theme="light"] .team-animation .tapbar,
html[data-theme="light"] .team-animation .tap-bar,
html[data-theme="light"] .team-animation .tap-bar2,
html[data-theme="light"] .team-animation .tap-bar3 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .team-animation .lawyer::before,
html[data-theme="light"] .team-animation .lawyer::after,
html[data-theme="light"] .team-animation .lawyer2::before,
html[data-theme="light"] .team-animation .lawyer2::after,
html[data-theme="light"] .team-animation .next-before::before,
html[data-theme="light"] .team-animation .next-before::after,
html[data-theme="light"] .team-animation .before::before,
html[data-theme="light"] .team-animation .before::after,
html[data-theme="light"] .team-animation .before2::before,
html[data-theme="light"] .team-animation .before2::after,
html[data-theme="light"] .team-animation .who::before,
html[data-theme="light"] .team-animation .who::after,
html[data-theme="light"] .team-animation .who2::before,
html[data-theme="light"] .team-animation .who2::after,
html[data-theme="light"] .team-animation .tapbar::before,
html[data-theme="light"] .team-animation .tapbar::after,
html[data-theme="light"] .team-animation .tap-bar::before,
html[data-theme="light"] .team-animation .tap-bar::after,
html[data-theme="light"] .team-animation .tap-bar2::before,
html[data-theme="light"] .team-animation .tap-bar2::after,
html[data-theme="light"] .team-animation .tap-bar3::before,
html[data-theme="light"] .team-animation .tap-bar3::after {
  display: none !important;
}

/* active lawyer card -> white + thin border; name dark */
html[data-theme="light"] .team-animation .lawyer {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 25, 12, 0.16) !important;
}
html[data-theme="light"] .team-animation .lawyer .div13,
html[data-theme="light"] .team-animation .lawyer .div16,
html[data-theme="light"] .team-animation .lawyer .div18 {
  color: #241a12 !important;
  -webkit-text-fill-color: #241a12 !important;
}
/* inactive lawyer cards -> soft peach; name orange */
html[data-theme="light"] .team-animation .lawyer2 {
  background: #fdeee2 !important;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.14) !important;
}
html[data-theme="light"] .team-animation .lawyer2 .div13,
html[data-theme="light"] .team-animation .lawyer2 .div16,
html[data-theme="light"] .team-animation .lawyer2 .div18 {
  color: #e8732e !important;
  -webkit-text-fill-color: #e8732e !important;
}

/* role badge -> light pill */
html[data-theme="light"] .team-animation .lawyer2 .who,
html[data-theme="light"] .team-animation .lawyer2 .who2 {
  background: rgba(235, 124, 58, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.28) !important;
}
html[data-theme="light"] .team-animation .lawyer .who,
html[data-theme="light"] .team-animation .lawyer .who2 {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 25, 12, 0.2) !important;
}

/* tab bar -> light peach rail; active tab white+border; inactive transparent */
html[data-theme="light"] .team-animation .tapbar {
  background: #f7e4d4 !important;
}
html[data-theme="light"] .team-animation .tap-bar {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 25, 12, 0.16) !important;
}
html[data-theme="light"] .team-animation .tap-bar2,
html[data-theme="light"] .team-animation .tap-bar3 {
  background: transparent !important;
}

/* pagination numbers + arrows */
html[data-theme="light"] .team-animation .before2,
html[data-theme="light"] .team-animation .next-before {
  background: #fdeee2 !important;
  box-shadow: inset 0 0 0 1px rgba(235, 124, 58, 0.16) !important;
}
html[data-theme="light"] .team-animation .before {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 25, 12, 0.18) !important;
}

/* article -> text sits on the page, no box (matches Figma) */
html[data-theme="light"] .team-animation .article {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ============================================================
   CONTACT — clean white fields, no glass tint
   ============================================================ */
/* the form card -> white border + a soft shadow */
html[data-theme="light"] .section-contact .form {
  background: linear-gradient(155deg, #fdf4ee 0%, #fbeade 100%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 16px 38px rgba(212, 150, 112, 0.22) !important;
  border-radius: 16px !important;
}
html[data-theme="light"] .section-contact .container18,
html[data-theme="light"] .section-contact .container20 {
  background: transparent !important;
}
/* form fields -> warm peach gradient + white border */
html[data-theme="light"] .section-contact .input,
html[data-theme="light"] .section-contact .input2,
html[data-theme="light"] .section-contact .input3,
html[data-theme="light"] .section-contact .combobox,
html[data-theme="light"] .section-contact .textarea {
  background: linear-gradient(180deg, #fce5d8 0%, #f7d6c3 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.92),
    0 2px 8px rgba(212, 150, 112, 0.12) !important;
}
/* dropdown panel -> light peach + white border */
html[data-theme="light"] .section-contact .combobox2 {
  background: linear-gradient(180deg, #fdf1e8 0%, #fbe7d9 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .section-contact .input::before,
html[data-theme="light"] .section-contact .input::after,
html[data-theme="light"] .section-contact .input2::before,
html[data-theme="light"] .section-contact .input2::after,
html[data-theme="light"] .section-contact .input3::before,
html[data-theme="light"] .section-contact .input3::after,
html[data-theme="light"] .section-contact .combobox::before,
html[data-theme="light"] .section-contact .combobox::after,
html[data-theme="light"] .section-contact .combobox2::before,
html[data-theme="light"] .section-contact .combobox2::after,
html[data-theme="light"] .section-contact .textarea::before,
html[data-theme="light"] .section-contact .textarea::after {
  display: none !important;
}
/* placeholders + typed text + select label */
html[data-theme="light"] .section-contact .contact-control::placeholder,
html[data-theme="light"] .section-contact .contact-textarea-control::placeholder {
  color: #9c9189 !important;
  -webkit-text-fill-color: #9c9189 !important;
  opacity: 1;
}
html[data-theme="light"] .section-contact .contact-control,
html[data-theme="light"] .section-contact .contact-textarea-control,
html[data-theme="light"] .section-contact .contact-select-label {
  color: #2a1d12 !important;
  -webkit-text-fill-color: #2a1d12 !important;
}
/* dropdown panel shadow + white border */
html[data-theme="light"] .section-contact .combobox2 {
  box-shadow: 0 18px 40px rgba(150, 105, 72, 0.22),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9) !important;
}
/* options: muted by default, the highlighted one is a white pill + dark ring */
html[data-theme="light"] .section-contact .option .div27 {
  color: #8a7a6c !important;
  -webkit-text-fill-color: #8a7a6c !important;
}
html[data-theme="light"] .section-contact .option:hover,
html[data-theme="light"] .section-contact .option.is-active,
html[data-theme="light"] .section-contact .option[aria-selected="true"] {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(40, 25, 12, 0.55) !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .section-contact .option:hover .div27,
html[data-theme="light"] .section-contact .option.is-active .div27,
html[data-theme="light"] .section-contact .option[aria-selected="true"] .div27 {
  color: #221a12 !important;
  -webkit-text-fill-color: #221a12 !important;
}
/* Contact circle: KEEP THE EXACT SAME LOOK AS DARK MODE in light mode.
   The disc, its glass layers and the info pills all fall back to the
   shared styling (main.css + glass.css, which isn't theme-scoped) — we
   only force the disc's text white, because the page-level --w-b-white
   is dark in light mode and would otherwise blacken the address + pills. */
html[data-theme="light"] .section-contact .container22 {
  --w-b-white: #ffffff;
}

/* Force contact pills to match the Figma reference (black border, clear glass, black text) */
html[data-theme="light"] .section-contact .contact,
html[data-theme="light"] .section-contact .contact2,
html[data-theme="light"] .section-contact .contact3 {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1.5px solid #1a1a1a !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Remove liquid glass gradients on the pills */
html[data-theme="light"] .section-contact .contact::before,
html[data-theme="light"] .section-contact .contact::after,
html[data-theme="light"] .section-contact .contact2::before,
html[data-theme="light"] .section-contact .contact2::after,
html[data-theme="light"] .section-contact .contact3::before,
html[data-theme="light"] .section-contact .contact3::after {
  display: none !important;
}

/* Force dark text inside the pills */
html[data-theme="light"] .section-contact .contact ._9-00-18-00,
html[data-theme="light"] .section-contact .contact ._13-00-14-00,
html[data-theme="light"] .section-contact .contact2 ._9-00-18-00,
html[data-theme="light"] .section-contact .contact2 ._13-00-14-00,
html[data-theme="light"] .section-contact .contact3 .div28,
html[data-theme="light"] .section-contact .contact3 ._9-00-18-00,
html[data-theme="light"] .section-contact .contact3 ._13-00-14-00 {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  font-weight: 500;
  font-size: 15px !important;
}

/* Rotate horizontal lines to be vertical separators */
html[data-theme="light"] .section-contact .vector,
html[data-theme="light"] .section-contact .vector2,
html[data-theme="light"] .section-contact .vector3 {
  transform: rotate(90deg);
  width: 20px !important;
}

/* On phones the address sits inside the orange disc, so keep its text + pin
   white (the disc is rebuilt as a solid orange circle in pro.css). */
@media (max-width: 600px) {
  html[data-theme="light"] .section-contact .background-shadow {
    --w-b-white: #ffffff;
    background: linear-gradient(322.36deg, #EB7C3A 0.06%, #FFB37C 99.94%) !important;
  }
  html[data-theme="light"] .section-contact ._100115-2-2-306 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html[data-theme="light"] .section-contact .svg19 {
    color: #ffffff !important;
  }
}

/* ============================================================
   CONTACT (dark) — matte & understated, NO liquid glass
   (the glass made it look too bright; this matches the Figma)
   ============================================================ */
html[data-theme="dark"] .section-contact .form,
html[data-theme="dark"] .section-contact .input,
html[data-theme="dark"] .section-contact .input2,
html[data-theme="dark"] .section-contact .input3,
html[data-theme="dark"] .section-contact .combobox,
html[data-theme="dark"] .section-contact .combobox2,
html[data-theme="dark"] .section-contact .textarea {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .section-contact .input::before,
html[data-theme="dark"] .section-contact .input::after,
html[data-theme="dark"] .section-contact .input2::before,
html[data-theme="dark"] .section-contact .input2::after,
html[data-theme="dark"] .section-contact .input3::before,
html[data-theme="dark"] .section-contact .input3::after,
html[data-theme="dark"] .section-contact .combobox::before,
html[data-theme="dark"] .section-contact .combobox::after,
html[data-theme="dark"] .section-contact .combobox2::before,
html[data-theme="dark"] .section-contact .combobox2::after,
html[data-theme="dark"] .section-contact .textarea::before,
html[data-theme="dark"] .section-contact .textarea::after,
html[data-theme="dark"] .section-contact .form::before,
html[data-theme="dark"] .section-contact .form::after {
  display: none !important;
}
/* matte form card */
html[data-theme="dark"] .section-contact .form {
  background: linear-gradient(
    -86deg,
    rgba(235, 124, 58, 0.1) 0%,
    rgba(235, 124, 58, 0.03) 60%,
    rgba(20, 14, 9, 0.2) 100%
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* matte dark inputs with a thin rim */
html[data-theme="dark"] .section-contact .input,
html[data-theme="dark"] .section-contact .input2,
html[data-theme="dark"] .section-contact .input3,
html[data-theme="dark"] .section-contact .combobox,
html[data-theme="dark"] .section-contact .textarea {
  background: rgba(20, 14, 9, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
/* dropdown panel: solid dark */
html[data-theme="dark"] .section-contact .combobox2 {
  background: #1b130d !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .section-contact .option:hover,
html[data-theme="dark"] .section-contact .option.is-active,
html[data-theme="dark"] .section-contact .option[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.06) !important;
}
/* tame the orange glow so it reads as a soft edge light, not a flood */
html[data-theme="dark"] .section-contact .ellipse-572 {
  opacity: 0.6 !important;
}