:root {
      --gold-100: #faf3e8;
      --gold-200: #f0e1c6;
      --gold-300: #d6b87c;
      --gold-400: #c6a24c;
      --gold-500: #b8860b;
      --gold-600: #9e740a;
      --gold-glow: rgba(184, 134, 11, 0.35);
      --navy-50: #f0f2f8;
      --navy-600: #2d364f;
      --navy-700: #1e253a;
      --navy-800: #131a2c;
      --navy-900: #0a1124;
      --navy-950: #060b18;
      --cream: #f9f7f3;
      --white: #ffffff;
      --text-dark: #1a1a1a;
      --text-muted: #5a5a72;
      --border-gold: rgba(184, 134, 11, 0.18);
      --border-gold-md: rgba(184, 134, 11, 0.32);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07);
      --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
      --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

      --g1: #b8860b;
      --g2: #c6a24c;
      --g3: #d6b87c;
      --g4: #f0e1c6;
      --g5: #faf3e8;
      --n9: #060b18;
      --n8: #0a1124;
      --n7: #131a2c;
      --n6: #1e253a;
      --cream: #f9f7f3;
      --white: #fff;
      --muted: #5a5a72;
      --dark: #1a1a1a;
      --bg: #rgba(184, 134, 11, 0.18);
      --border: rgba(184, 134, 11, 0.18);
      --border-md: rgba(184, 134, 11, 0.32);
      --sh-sm: 0 1px 3px rgba(0, 0, 0, .05);
      --sh-md: 0 6px 20px rgba(0, 0, 0, .07);
      --sh-lg: 0 16px 40px rgba(0, 0, 0, .1);
      --sh-xl: 0 24px 64px rgba(0, 0, 0, .14);
  }

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
  }

  body {
      font-family: 'Inter', sans-serif;
      background: var(--cream);
      color: var(--text-dark);
      line-height: 1.75;
      overflow-x: hidden;
  }


  p {
      margin-bottom: 0rem;
  }


  ul{
    margin-bottom: 0rem;
    padding-left: 0rem ;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.2;
  }

  a {
      text-decoration: none !important;
      color: black;
      transition: color .2s;
      border: none !important;
  }

  img {
      max-width: 100%;
      display: block;
  }

  /* ============================
   PRELOADER
   ============================ */
  #preloader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: var(--navy-950);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 24px;
      transition: opacity .6s ease, visibility .6s ease;
  }

  #preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
  }

  .preloader-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
  }

  .preloader-scale {
      animation: preloaderSpin 2.4s ease-in-out infinite;
  }

  @keyframes preloaderSpin {
      0% {
          transform: rotate(0deg) scale(1);
      }

      25% {
          transform: rotate(-8deg) scale(1.05);
      }

      75% {
          transform: rotate(8deg) scale(1.05);
      }

      100% {
          transform: rotate(0deg) scale(1);
      }
  }

  .preloader-name {
      font-family: 'Cinzel', serif;
      font-size: 1.6rem;
      color: var(--gold-400);
      letter-spacing: 0.22em;
      text-transform: uppercase;
  }

  .preloader-sub {
      font-size: 0.65rem;
      color: rgba(255, 255, 255, 0.35);
      letter-spacing: 0.28em;
      text-transform: uppercase;
  }

  .preloader-bar {
      width: 200px;
      height: 2px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 8px;
  }

  .preloader-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-300));
      animation: preloaderFill 2s cubic-bezier(.4, 0, .2, 1) forwards;
      width: 0%;
  }

  @keyframes preloaderFill {
      0% {
          width: 0%;
      }

      100% {
          width: 100%;
      }
  }

  /* ============================
   TOP BAR
   ============================ */
  .top-bar {
      background: var(--navy-950);
      color: rgba(255, 255, 255, 0.7);
      padding: 9px 0;
      font-size: 0.8rem;
      border-bottom: 1px solid rgba(184, 134, 11, 0.2);
  }

  .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
  }

  .top-bar a {
      color: rgba(255, 255, 255, 0.8);
  }

  .top-bar a:hover {
      color: var(--gold-400);
  }

  .top-contact {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      align-items: center;
  }

  .top-contact span {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .top-badge {
      background: linear-gradient(90deg, rgba(184, 134, 11, 0.18), rgba(184, 134, 11, 0.08));
      padding: 4px 16px;
      border-radius: 20px;
      font-size: 0.72rem;
      border: 1px solid rgba(184, 134, 11, 0.3);
      color: var(--gold-300);
      font-weight: 600;
      letter-spacing: 0.04em;
  }

  /* ============================
   NAVBAR
   ============================ */
  .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid transparent;
      transition: all var(--transition);
  }

  .navbar.scrolled {
      background: rgba(255, 255, 255, 0.97);
      border-bottom: 1px solid var(--border-gold);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  }

  .container {
      /* max-width: 1200px;
            margin: 0 auto; */
      padding: 0 32px;
  }

  .nav-inner {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      padding: 5px 0;
  }

  .nav-logo .logo-sub {
      font-size: 9px;
      margin-bottom: 0px;
      margin-left: 7px;
      font-weight: 600;
      font-family: 'Courier New', Courier, monospace;
  }

  .nav-logo img {
      width: 70px;
      height: 70px;
  }

  .navbar.scrolled .logo-svg {
      height: 38px;
  }

  .nav-menu {
      display: flex;
      gap: 4px;
      margin-bottom: 0px;
      list-style: none;
      align-items: center;
  }

  .nav-menu a {
      font-weight: 500;
      font-size: 0.985rem;
      color: var(--navy-700);
      padding: 8px 15px;
      border-radius: 6px;
      transition: all .22s;
      letter-spacing: 0.01em;
  }

  .nav-menu a:hover {
      color: var(--gold-600);
      background: var(--gold-100);
  }

  .nav-cta {
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600)) !important;
      color: white !important;
      font-weight: 700 !important;
      border-radius: 30px !important;
      padding: 10px 22px !important;
      margin-left: 8px;
      box-shadow: 0 4px 16px rgba(184, 134, 11, 0.3);
  }

  .nav-cta:hover {
      background: linear-gradient(135deg, var(--navy-800), var(--navy-700)) !important;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 8px;
  }

  .hamburger span {
      width: 24px;
      height: 2px;
      background: var(--navy-700);
      display: block;
      transition: .3s;
      border-radius: 2px;
  }

  .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
  }



  .navbar {
      padding: 0 !important;
      /* override Bootstrap's default padding */
      min-height: auto !important;
      /* remove fixed height */
      flex-wrap: nowrap;
      /* prevent wrapping */
  }

  /* ============================
   SECTION COMMONS
   ============================ */
  section {
      padding: 100px 0;
      position: relative;
  }

  .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(184, 134, 11, 0.09);
      color: var(--gold-600);
      padding: 5px 18px;
      border-radius: 30px;
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      width: max-content;
      margin-bottom: 16px;
      border: 1px solid rgba(184, 134, 11, 0.22);
  }

  .section-title {
      font-size: clamp(1.9rem, 3.2vw, 2.75rem);
      color: var(--navy-800);
      margin-bottom: 18px;
      font-weight: 700;
  }

  .section-rule {
      width: 56px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
      border-radius: 3px;
      margin-bottom: 22px;
  }

  .section-sub {
      color: var(--text-muted);
      max-width: 580px;
      font-size: 1rem;
      line-height: 1.8;
  }

  .text-center {
      text-align: center;
  }

  .text-center .section-rule {
      margin-left: auto;
      margin-right: auto;
  }

  .text-center .section-sub {
      margin-left: auto;
      margin-right: auto;
  }

  /* ============================
   HERO — ENHANCED WITH CAROUSEL
   ============================ */

  .hero-banner {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--navy-900);
      padding: 0px 0px;
  }

  .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
  }

  .hero-bg-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, var(--navy-950) 0%, #0d1528 50%, var(--navy-900) 100%);
  }

  .hero-bg-pattern {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
      opacity: 0.4;
  }

  .hero-container {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 70px 32px 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
      flex: 1;
  }

  .hero-content {
      max-width: 540px;
  }

  .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(198, 162, 76, 0.35);
      color: var(--gold-300);
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 26px;
      backdrop-filter: blur(8px);
      font-family: 'Inter', sans-serif;
  }

  .hero-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold-400);
      animation: pulse-dot 2s ease-in-out infinite;
  }

  @keyframes pulse-dot {

      0%,
      100% {
          opacity: 1;
          transform: scale(1);
      }

      50% {
          opacity: 0.4;
          transform: scale(0.8);
      }
  }

  .hero-headline {
      font-family: 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      color: white;
      line-height: 1.15;
      font-weight: 700;
      margin-bottom: 22px;
  }

  .gold-gradient {
      color: transparent;
      background: linear-gradient(135deg, #e8c96a, var(--gold-400), var(--gold-600));
      -webkit-background-clip: text;
      background-clip: text;
      font-style: normal;
  }

  .hero-divider {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 18px 0 20px;
  }

  .divider-line {
      flex: 1;
      max-width: 48px;
      height: 1px;
      background: linear-gradient(90deg, var(--gold-500), transparent);
  }

  .divider-text {
      font-size: 0.64rem;
      letter-spacing: 0.18em;
      color: rgba(255, 255, 255, 0.35);
      text-transform: uppercase;
      font-family: 'Cinzel', serif;
  }

  .hero-description {
      color: rgba(255, 255, 255, 0.58);
      font-size: 0.95rem;
      line-height: 1.85;
      margin-bottom: 32px;
      /* max-width: 440px; */
      font-family: 'Inter', sans-serif;
  }

  .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 42px;
  }

  .btn-primary,
  .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 0.88rem;
      width: max-content;
      cursor: pointer;
      transition: all var(--transition);
      letter-spacing: 0.02em;
      border: none;
      text-decoration: none;
      font-family: 'Inter', sans-serif;
  }

  .btn-primary {
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      color: white;
      box-shadow: 0 8px 28px rgba(184, 134, 11, 0.35);
  }

  .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(184, 134, 11, 0.45);
  }

  .btn-outline {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      color: white;
  }

  .btn-outline:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--gold-400);
      color: var(--gold-300);
  }

  .hero-trust {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
  }

  .trust-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 30px;
      padding: 6px 12px;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.75rem;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
  }

  .trust-pill svg {
      color: var(--gold-400);
      flex-shrink: 0;
  }

  /* ==================== CAROUSEL ==================== */
  .hero-carousel {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 420px;
      margin: 0 auto;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(198, 162, 76, 0.2);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  }

  .carousel-track {
      display: flex;
      height: 100%;
      transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
  }

  .carousel-slide {
      min-width: 100%;
      height: 100%;
  }

  .slide-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 32px;
      text-align: center;
      position: relative;
  }

  .slide-1 {
      background: linear-gradient(145deg, #0d1829 0%, #1a2840 40%, #0a1520 100%);
  }

  .slide-2 {
      background: linear-gradient(145deg, #12100a 0%, #1e1a08 40%, #0d0c06 100%);
  }

  .slide-3 {
      background: linear-gradient(145deg, #0a1520 0%, #0d1f2d 40%, #061018 100%);
  }

  .slide-4 {
      background: linear-gradient(145deg, #0a1a1a 0%, #0d2a2a 40%, #061212 100%);
  }

  .slide-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(184, 134, 11, 0.1);
      border: 2px solid rgba(184, 134, 11, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      position: relative;
      box-shadow: 0 0 40px rgba(184, 134, 11, 0.2);
  }

  .slide-icon svg {
      width: 36px;
      height: 36px;
      color: var(--gold-400);
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  }

  .slide-title {
      font-family: 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      color: white;
      font-weight: 600;
      margin-bottom: 12px;
      line-height: 1.3;
  }

  .slide-desc {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.85rem;
      line-height: 1.7;
      max-width: 320px;
      font-family: 'Inter', sans-serif;
  }

  /* Carousel Controls */
  .carousel-controls {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 5;
  }

  .carousel-dots {
      display: flex;
      gap: 8px;
  }

  .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .carousel-dot.active {
      background: var(--gold-400);
      width: 24px;
      border-radius: 4px;
      border-color: var(--gold-400);
      box-shadow: 0 0 12px rgba(184, 134, 11, 0.4);
  }

  .carousel-arrow {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(184, 134, 11, 0.3);
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: var(--gold-400);
  }

  .carousel-arrow:hover {
      background: rgba(184, 134, 11, 0.2);
      border-color: var(--gold-400);
      box-shadow: 0 0 18px rgba(184, 134, 11, 0.3);
  }

  /* ==================== STAT BAR ==================== */
  .hero-stats {
      display: flex;
      /* border-top: 1px solid rgba(184, 134, 11, 0.18); */
      margin-top: 36px;
      padding-top: 22px;
      /* backdrop-filter: blur(12px); */
      /* background: rgba(255, 255, 255, 0.02); */
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .stat-item {
      flex: 1;
      text-align: center;
      padding: 0 14px;
      border-right: 1px solid rgba(184, 134, 11, 0.1);
  }

  .stat-item:last-child {
      border-right: none;
  }

  .stat-number {
      font-family: 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      color: var(--gold-400);
      font-weight: 700;
      display: block;
      line-height: 1;
  }

  .about-stat-row .stat-label {
      font-size: 0.66rem;
      color: rgb(0, 0, 0);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 4px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
  }

  /* ==================== RESPONSIVE ==================== */
  @media (max-width: 1024px) {
      .hero-grid {
          grid-template-columns: 1fr;
          gap: 36px;
      }

      .hero-carousel {
          max-width: 420px;
          height: 340px;
          order: -1;
      }

      .hero-content {
          max-width: 100%;
          text-align: center;
      }

      .hero-description {
          max-width: 100%;
          margin-left: auto;
          margin-right: auto;
      }

      .hero-actions {
          justify-content: center;
      }

      .hero-trust {
          justify-content: center;
      }

      .hero-divider {
          justify-content: center;
      }
  }

  @media (max-width: 768px) {
      .hero-container {
          padding: 50px 10px 24px;
      }

   

      .hero-carousel {
          max-width: 360px;
          height: 300px;
      }

      .hero-headline {
          font-size: clamp(1.8rem, 5vw, 2.4rem);
      }

      .hero-stats {
          flex-wrap: wrap;
      }

      .stat-item {
          flex: 1 1 45%;
          padding: 10px 8px;
          border-bottom: 1px solid rgba(184, 134, 11, 0.1);
      }
  }

  @media (max-width: 480px) {
      .hero-carousel {
          max-width: 300px;
          height: 260px;
      }

      .slide-inner {
          padding: 24px 18px;
      }

      .slide-icon {
          width: 56px;
          height: 56px;
          margin-bottom: 16px;
      }

      .slide-icon svg {
          width: 26px;
          height: 26px;
      }

      .slide-title {
          font-size: 1rem;
      }

      .slide-desc {
          font-size: 0.75rem;
      }
  }

  /* ============================
   ABOUT — ENHANCED
   ============================ */

  .about-section {
      background: var(--white);
      padding: 100px 0;
      overflow: visible;
  }



  .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
  }

  /* ---------- Left Visual Column ---------- */
  .about-visual {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .about-image-frame {
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      background: var(--white);
  }

  .about-image-wrapper {
      width: 100%;
      height: 525px;
      overflow: hidden;
  }

  .about-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.4s ease;
  }

  .about-image-wrapper:hover img {
      transform: scale(1.02);
  }

  /* Name card = flex row, space-between */
  .about-name-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 28px;
      border-top: 1px solid var(--border-gold);
      background: linear-gradient(to bottom, #fcfcfd, var(--white));
      flex-wrap: wrap;
      gap: 16px;
  }

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

  .about-name-card .advocate-name {
      font-family: 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--navy-800);
      line-height: 1.2;
      margin: 0;
  }

  .advocate-designation {
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      color: var(--text-muted);
      letter-spacing: 0.03em;
      margin: 4px 0 0;
  }

  /* Experience badge – right side, trademark style */
  .about-experience-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(184, 134, 11, 0.07);
      border: 1px solid rgba(184, 134, 11, 0.25);
      border-radius: 50px;
      padding: 8px 18px;
      box-shadow: 0 2px 10px rgba(184, 134, 11, 0.1);
      flex-shrink: 0;
      position: relative;
  }

  /* Optional subtle star icon before the years */
  .about-experience-badge::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2'%3E%3Cpath d='M15 10L9 16'/%3E%3Cline x1='4' y1='20' x2='10' y2='14'/%3E%3Crect x='2' y='20' width='16' height='2' rx='1'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 3px;
  }

  .exp-years {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--gold-600);
      line-height: 1;
  }

  .exp-label {
      font-size: 0.65rem;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
  }

  /* Stats row */
  .about-stat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .stat-block {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      transition: all var(--transition);
  }

  .stat-block:hover {
      background: var(--gold-100);
      border-color: var(--border-gold-md);
      transform: translateY(-2px);
  }

  .stat-block svg {
      width: 20px;
      height: 20px;
      color: var(--gold-500);
      flex-shrink: 0;
  }

  .stat-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--navy-800);
      line-height: 1.2;
      display: block;
  }

  .stat-label {
      font-size: 0.7rem;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 500;
  }

  /* ---------- Right Content Column ---------- */
  .about-content {
      padding-top: 8px;
  }

  .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(184, 134, 11, 0.08);
      color: var(--gold-600);
      padding: 6px 18px;
      border-radius: 30px;
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 16px;
      border: 1px solid rgba(184, 134, 11, 0.2);
  }

  .section-title {
      font-family: 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.5vw, 2.7rem);
      color: var(--navy-800);
      margin-bottom: 16px;
      font-weight: 700;
      line-height: 1.2;
  }

  .section-rule {
      width: 56px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold-500), var(--gold-300, #d6b87c));
      border-radius: 3px;
      margin-bottom: 22px;
  }

  .section-sub {
      color: var(--text-muted);
      font-size: 0.98rem;
      line-height: 1.8;
      margin-bottom: 30px;
      max-width: 560px;
  }

  /* Features list */
  .about-features-enhanced {
      list-style: none;
      margin: 0 0 36px;
    padding-left: 0px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .about-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      background: var(--cream);
      border: 1px solid var(--border-gold);
      transition: all var(--transition);
      cursor: default;
  }

  .about-feature-item:hover {
      background: rgba(184, 134, 11, 0.05);
      border-color: var(--border-gold-md);
      transform: translateX(4px);
  }

  .about-feature-icon {
      width: 38px;
      height: 38px;
      background: var(--white);
      border: 1px solid var(--border-gold-md);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .about-feature-icon svg {
      width: 16px;
      height: 16px;
      color: var(--gold-600);
  }

  .about-feature-text {
      font-size: 0.9rem;
      color: var(--navy-700);
      font-weight: 500;
      line-height: 1.55;
      margin-top: 2px;
  }

  /* CTA button */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 28px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 0.93rem;
      cursor: pointer;
      transition: all 0.3s ease;
      letter-spacing: 0.02em;
      border: none;
      text-decoration: none;
  }

  .btn-primary {
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      color: white;
      box-shadow: 0 8px 28px rgba(184, 134, 11, 0.35);
  }

  .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(184, 134, 11, 0.45);
  }

  /* Reveal animations (keep if you use) */
  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.visible {
      opacity: 1;
      transform: none;
  }

  .reveal-delay-1 {
      transition-delay: 0.15s;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
      .about-grid {
          grid-template-columns: 1fr;
          gap: 50px;
      }

      .about-image-wrapper {
          height: 380px;
      }

      .about-content {
          padding-top: 0;
      }
  }

  @media (max-width: 768px) {

      .about-image-wrapper {
          height: 320px;
      }

      .advocate-name {
          font-size: 1.4rem;
      }

      .about-stat-row {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 480px) {
      .about-image-wrapper {
          height: 260px;
      }

      .about-name-card {
          padding: 18px 20px;
      }
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
      .about-grid {
          grid-template-columns: 1fr;
          gap: 60px;
      }

      .about-visual-wrap {
          justify-content: center;
          order: -1;
      }
  }

  @media (max-width: 768px) {

      .about-img-stack {
          max-width: 400px;
          min-height: 420px;
      }

      .about-img-main {
          height: 380px;
      }

      .about-img-float {
          width: 65%;
      }

      .advocate-name {
          font-size: 1rem;
      }

      .about-years-badge {
          top: 15px;
          right: -5px;
          padding: 12px 16px;
      }

      .about-years-badge .num {
          font-size: 2rem;
      }
  }

  @media (max-width: 480px) {
      .about-img-stack {
          max-width: 320px;
          min-height: 360px;
      }

      .about-img-main {
          height: 300px;
          width: 85%;
      }

      .about-img-float {
          width: 75%;
          bottom: -15px;
          right: 0;
      }

      .about-floating-card {
          left: -10px;
          bottom: 40px;
      }

      .about-years-badge {
          top: 10px;
          right: 0;
      }
  }

  /* ============================
   CREDENTIALS STRIP
   ============================ */
  .credentials-strip {
      background: var(--navy-950);
      border-top: 1px solid rgba(184, 134, 11, 0.2);
      border-bottom: 1px solid rgba(184, 134, 11, 0.2);
      padding: 0;
      overflow: hidden;
      position: relative;
  }

  .credentials-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(6, 11, 24, 0.9) 0%, transparent 10%, transparent 90%, rgba(6, 11, 24, 0.9) 100%);
      z-index: 2;
      pointer-events: none;
  }

  .cred-header {
      background: rgba(184, 134, 11, 0.08);
      border-bottom: 1px solid rgba(184, 134, 11, 0.12);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
  }

  .cred-header-label {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.24em;
      color: var(--gold-400);
      text-transform: uppercase;
      font-weight: 600;
  }

  .cred-scroll-wrap {
      display: flex;
      align-items: stretch;
      overflow: hidden;
  }

  .cred-scroll-track {
      display: flex;
      gap: 0;
      animation: credScroll 28s linear infinite;
      white-space: nowrap;
  }

  .cred-scroll-track:hover {
      animation-play-state: paused;
  }

  @keyframes credScroll {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-50%);
      }
  }

  .cred-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 36px;
      border-right: 1px solid rgba(184, 134, 11, 0.1);
      transition: background .3s;
      cursor: default;
      flex-shrink: 0;
  }

  .cred-item:hover {
      background: rgba(184, 134, 11, 0.06);
  }

  .cred-item-icon {
      width: 36px;
      height: 36px;
      background: rgba(184, 134, 11, 0.1);
      border: 1px solid rgba(184, 134, 11, 0.2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .cred-item-icon svg {
      width: 16px;
      height: 16px;
      color: var(--gold-400);
  }

  .cred-item-name {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.85rem;
      letter-spacing: 0.02em;
  }

  .cred-item-sub {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.38);
      letter-spacing: 0.03em;
      margin-top: 1px;
  }

  /* ============================
   SERVICES — REDESIGNED
   ============================ */
  .services-section {
      background: var(--navy-950);
      position: relative;
      overflow: hidden;
  }

  .services-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(184, 134, 11, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(184, 134, 11, 0.04) 0%, transparent 60%);
  }

  .services-section .section-tag {
      background: rgba(184, 134, 11, 0.12);
      color: var(--gold-300);
  }

  .services-section .section-title {
      color: white;
  }

  .services-section .section-sub {
      color: rgba(255, 255, 255, 0.5);
  }

  .services-section .section-rule {
      background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
  }

  .services-grid-new {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 56px;
      background: rgba(184, 134, 11, 0.08);
      border: 1px solid rgba(184, 134, 11, 0.12);
      border-radius: var(--radius-lg);
      overflow: hidden;
  }

  .service-tile {
      background: rgba(255, 255, 255, 0.025);
      padding: 36px 30px;
      transition: all .35s;
      position: relative;
      overflow: hidden;
      cursor: default;
  }

  .service-tile::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0;
      background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
      transition: height .4s;
  }

  .service-tile:hover {
      background: rgba(255, 255, 255, 0.06);
  }

  .service-tile:hover::before {
      height: 100%;
  }

  .service-tile-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      color: rgb(255, 255, 255);
      letter-spacing: 0.14em;
      font-weight: 600;
      margin-bottom: 18px;
  }

  .service-tile-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(184, 134, 11, 0.1);
      border: 1px solid rgba(184, 134, 11, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: all .35s;
  }

  .service-tile:hover .service-tile-icon {
      background: rgba(184, 134, 11, 0.22);
      box-shadow: 0 0 24px rgba(184, 134, 11, 0.25);
  }

  .service-tile-icon svg {
      width: 22px;
      height: 22px;
      color: var(--gold-400);
  }

  .service-tile h3 {
      color: white;
      font-size: 1.05rem;
      margin-bottom: 10px;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
  }

  .service-tile-desc {
      color: rgba(255, 255, 255, 0.45);
      font-size: 0.83rem;
      line-height: 1.65;
      margin-bottom: 18px;
  }

  .service-tile-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
  }

  .service-tag-pill {
      font-size: 0.65rem;
      padding: 3px 10px;
      border-radius: 20px;
      background: rgba(184, 134, 11, 0.08);
      color: rgba(255, 255, 255, 0.45);
      border: 1px solid rgba(184, 134, 11, 0.14);
      letter-spacing: 0.04em;
  }

  .service-tile:hover .service-tag-pill {
      background: rgba(184, 134, 11, 0.15);
      color: var(--gold-300);
  }

  .service-tile-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--gold-400);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 20px;
      opacity: 0;
      transform: translateX(-6px);
      transition: all .3s;
  }

  .service-tile:hover .service-tile-cta {
      opacity: 1;
      transform: none;
  }

  /* ============================
   IN DEPTH — REDESIGNED
   ============================ */
  .indepth-section {
      background: var(--cream);
      overflow: hidden;
  }

  .indepth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 0;
      border-bottom: 1px solid var(--border-gold);
      position: relative;
      margin-top: 52px;
  }

  .indepth-tab {
      flex: 1;
      padding: 18px 24px;
      text-align: center;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text-muted);
      border-bottom: 3px solid transparent;
      transition: all .3s;
      letter-spacing: 0.02em;
  }

  .indepth-tab.active {
      color: var(--gold-600);
      border-bottom-color: var(--gold-500);
  }

  .indepth-tab:hover {
      background: var(--gold-100);
      color: var(--gold-600);
  }

  .indepth-panel {
      display: none;
      padding: 64px 0 0;
  }

  .indepth-panel.active {
      display: block;
      animation: fadePanel .4s ease;
  }

  @keyframes fadePanel {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

      to {
          opacity: 1;
          transform: none;
      }
  }

  .indepth-panel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
  }

  .indepth-panel-grid.flip .indepth-media {
      order: 2;
  }

  .indepth-media {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border-gold);
      box-shadow: var(--shadow-lg);
      position: relative;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .indepth-media-bg {
      position: absolute;
      inset: 0;
  }

  .indepth-media-bg-1 {
      background: linear-gradient(145deg, #0d1829, #1a2840, #0a1520);
  }

  .indepth-media-bg-2 {
      background: linear-gradient(145deg, var(--navy-900), var(--navy-800));
  }

  .indepth-media-bg-3 {
      background: linear-gradient(145deg, #12100a, #1e1a08);
  }

  .indepth-media-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 10px;
  }

  .indepth-media-content img {
      border-radius: 7px;
  }

  .indepth-media-icon {
      color: var(--gold-400);
      filter: drop-shadow(0 8px 32px rgba(184, 134, 11, 0.4));
  }

  .indepth-media-stat {
      text-align: center;
  }

  .indepth-media-stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem;
      color: var(--gold-400);
      font-weight: 700;
      display: block;
      line-height: 1;
  }

  .indepth-media-stat-label {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.45);
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }

  .indepth-media-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(184, 134, 11, 0.15);
      border: 1px solid rgba(184, 134, 11, 0.3);
      border-radius: 30px;
      padding: 6px 14px;
      font-size: 0.62rem;
      color: var(--gold-300);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 700;
  }

  .indepth-content h3 {
      font-size: clamp(1.5rem, 2.4vw, 2.1rem);
      color: var(--navy-800);
      margin-bottom: 14px;
  }

  .indepth-content>p {
      color: var(--text-muted);
      margin-bottom: 28px;
      font-size: 0.96rem;
      line-height: 1.85;
  }

  .indepth-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      padding-left: 0px;
  }

  .indepth-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 13px 16px;
      border-radius: 10px;
      background: white;
      border: 1px solid var(--border-gold);
      font-size: 0.9rem;
      color: var(--navy-700);
      font-weight: 500;
      transition: all .25s;
  }

  .indepth-list li:hover {
      border-color: var(--border-gold-md);
      background: var(--gold-100);
  }

  .indepth-list li svg {
      width: 15px;
      height: 15px;
      color: var(--gold-500);
      flex-shrink: 0;
      margin-top: 2px;
  }

  /* ============================
   LEAD ADVOCATE — REDESIGNED
   ============================ */
  .advocate-section {
      background: white;
      overflow: hidden;
  }

  .advocate-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 52px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border-gold);
  }

  .advocate-visual-col {
      background: linear-gradient(145deg, var(--navy-900) 0%, var(--navy-800) 60%, #0d1829 100%);
      padding: 56px 48px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
  }

  .advocate-visual-col::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(135deg, rgba(184, 134, 11, 0.02) 0, rgba(184, 134, 11, 0.02) 1px, transparent 1px, transparent 18px);
  }

  .advocate-visual-col::after {
      content: '⚖';
      position: absolute;
      font-size: 240px;
      bottom: -50px;
      right: -40px;
      opacity: 0.025;
      transform: rotate(10deg);
      pointer-events: none;
      color: var(--gold-400);
  }

  .advocate-portrait {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 3px solid var(--gold-400);
      background: rgba(184, 134, 11, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 0 8px rgba(184, 134, 11, 0.08), 0 20px 48px rgba(0, 0, 0, 0.4);
  }

  
  .advocate-monogram {
      font-family: 'Cinzel', serif;
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--gold-400);
  }

  .advocate-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      color: white;
      font-weight: 700;
      position: relative;
      z-index: 1;
      margin-bottom: 4px;
  }

  .advocate-role-tag {
      display: inline-block;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: var(--gold-300);
      text-transform: uppercase;
      font-weight: 700;
      background: rgba(184, 134, 11, 0.12);
      border: 1px solid rgba(184, 134, 11, 0.25);
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
      position: relative;
      width: max-content;

      z-index: 1;
  }

  .advocate-enroll-text {
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 0.04em;
      position: relative;
      z-index: 1;
      margin-bottom: 32px;
  }

  .advocate-divider {
      width: 48px;
      height: 2px;
      background: var(--gold-500);
      margin: 0 0 28px;
      position: relative;
      z-index: 1;
  }

  .advocate-quote-col {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.08rem;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.7;
      position: relative;
      z-index: 1;
      border-left: 2px solid rgba(184, 134, 11, 0.4);
      padding-left: 18px;
      margin-bottom: 32px;
  }

  .advocate-stat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      position: relative;
      z-index: 1;
  }

  .advocate-stat-box {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(184, 134, 11, 0.15);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
  }

  .advocate-stat-box .num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      color: var(--gold-400);
      font-weight: 700;
      display: block;
      line-height: 1;
  }

  .advocate-stat-box .lbl {
      font-size: 0.62rem;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 0.08em;
      text-transform: uppercase;
  }

  .advocate-info-col {
      padding: 56px 48px;
      background: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .advocate-credentials-list {
      list-style: none;
      display: flex;
      padding-left: 0px;
      flex-direction: column;
      gap: 20px;
      margin: 28px 0 36px;
  }

  .advocate-cred-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-gold);
  }

  .advocate-cred-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }

  .advocate-cred-icon {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      background: var(--gold-100);
      border: 1px solid var(--border-gold-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .advocate-cred-icon svg {
      width: 20px;
      height: 20px;
      color: var(--gold-600);
  }

  .advocate-cred-title {
      font-weight: 700;
      color: var(--navy-800);
      font-size: 0.95rem;
      margin-bottom: 3px;
  }

  .advocate-cred-sub {
      color: var(--text-muted);
      font-size: 0.82rem;
      line-height: 1.5;
  }

  /* ============================
   WHY CHOOSE US — REDESIGNED
   ============================ */
  .why-section {
      background: var(--cream);
      position: relative;
  }

  .why-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 72px;
      align-items: start;
      margin-top: 52px;
  }

  .why-sticky-col {
      position: sticky;
      top: 120px;
  }

  .why-sticky-col .section-tag {
      margin-bottom: 14px;
  }

  .why-sticky-col .section-rule {
      margin-bottom: 20px;
  }

  .why-sticky-col>p {
      color: var(--text-muted);
      font-size: 0.96rem;
      line-height: 1.8;
      margin-bottom: 28px;
  }

  .why-contact-card {
      background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
      border-radius: var(--radius-md);
      padding: 28px;
      border: 1px solid var(--border-gold);
  }

  .why-contact-card h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      color: white;
      margin-bottom: 8px;
  }

  .why-contact-card p {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.82rem;
      margin-bottom: 18px;
      line-height: 1.65;
  }

  .why-reasons-col {
      display: flex;
      flex-direction: column;
      gap: 0;
  }

  .why-reason-row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0;
      border-bottom: 1px solid var(--border-gold);
      padding: 0;
      transition: all .3s;
      cursor: default;
  }

  .why-reason-row:first-child {
      border-top: 1px solid var(--border-gold);
  }

  .why-reason-num-col {
      padding: 28px 24px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      border-right: 1px solid var(--border-gold);
      min-width: 72px;
  }

  .why-reason-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      color: var(--gold-300);
      font-weight: 700;
      transition: all .3s;
      line-height: 1;
  }

  .why-reason-body {
      padding: 28px 32px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
  }

  .why-reason-icon {
      width: 46px;
      height: 46px;
      border-radius: 11px;
      background: var(--gold-100);
      border: 1px solid var(--border-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .3s;
  }

  .why-reason-icon svg {
      width: 20px;
      height: 20px;
      color: var(--gold-600);
  }

  .why-reason-text h3 {
      font-size: 1.05rem;
      color: var(--navy-800);
      margin-bottom: 5px;
      font-family: 'Inter', sans-serif;
      transition: color .3s;
  }

  .why-reason-text p {
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.7;
  }

  .why-reason-row:hover {
      background: var(--gold-100);
  }

  .why-reason-row:hover .why-reason-num {
      color: var(--gold-600);
  }

  .why-reason-row:hover .why-reason-icon {
      background: var(--gold-500);
      border-color: var(--gold-500);
  }

  .why-reason-row:hover .why-reason-icon svg {
      color: white;
  }

  .why-reason-row:hover .why-reason-text h3 {
      color: var(--gold-600);
  }

  /* ============================
   PROCESS — REDESIGNED
   ============================ */
  .process-section {
      background: var(--navy-900);
      position: relative;
      overflow: hidden;
  }

  .process-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(184, 134, 11, 0.04), transparent 70%);
  }

  .process-section .section-tag {
      background: rgba(184, 134, 11, 0.12);
      color: var(--gold-300);
  }

  .process-section .section-title {
      color: white;
  }

  .process-section .section-sub {
      color: rgba(255, 255, 255, 0.5);
  }

  .process-section .section-rule {
      background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
  }

  .process-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 64px;
      position: relative;
      z-index: 2;
  }

  .process-grid::before {
      content: '';
      position: absolute;
      top: 44px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.3), rgba(184, 134, 11, 0.5), rgba(184, 134, 11, 0.3), transparent);
      z-index: 0;
  }

  .process-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 12px;
      position: relative;
      z-index: 2;
  }

  .process-node-circle {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid rgba(184, 134, 11, 0.3);
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 24px;
      transition: all .4s;
      position: relative;
      overflow: hidden;
  }

  .process-node-circle::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      transform: scale(0);
      transition: transform .4s;
  }

  .process-node:hover .process-node-circle {
      border-color: var(--gold-400);
      box-shadow: 0 0 0 8px rgba(184, 134, 11, 0.07), 0 12px 32px rgba(184, 134, 11, 0.3);
  }

  .process-node:hover .process-node-circle::after {
      transform: scale(1);
  }

  .process-node-step {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--gold-400);
      position: relative;
      z-index: 1;
      line-height: 1;
      transition: color .3s;
  }

  .process-node-icon {
      position: relative;
      z-index: 1;
      color: rgba(255, 255, 255, 0.35);
      transition: color .3s;
  }

  .process-node-icon svg {
      width: 14px;
      height: 14px;
  }

  .process-node:hover .process-node-step {
      color: white;
  }

  .process-node:hover .process-node-icon {
      color: rgba(255, 255, 255, 0.7);
  }

  .process-node h3 {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 7px;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
  }

  .process-node p {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.38);
      line-height: 1.6;
  }

  /* ============================
   STATS
   ============================ */
  .stats-section {
      background: linear-gradient(160deg, var(--navy-950), #141208);
      padding: 72px 0;
      position: relative;
      overflow: hidden;
  }

  .stats-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(184, 134, 11, 0.06), transparent 70%);
  }

  .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
      position: relative;
      z-index: 2;
  }

  .stat-item {
      padding: 28px 20px;
      border: 1px solid rgba(184, 134, 11, 0.1);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.02);
      transition: all .3s;
  }

  .stat-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(184, 134, 11, 0.25);
      transform: translateY(-4px);
  }

  .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.6rem, 4.5vw, 3.5rem);
      color: var(--gold-400);
      font-weight: 700;
      display: block;
  }

  .stat-label {
      color: rgba(255, 255, 255, 0.55);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 4px;
  }

  /* ============================
   TESTIMONIALS
   ============================ */
  .testimonials-section {
      background: var(--cream);
  }

  .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 52px;
  }

  .testimonial-card {
      background: white;
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-lg);
      padding: 32px 26px;
      box-shadow: var(--shadow-sm);
      transition: all .3s;
  }

  .testimonial-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-5px);
  }

  .quote-mark {
      font-size: 4rem;
      color: var(--gold-200);
      font-family: 'Cormorant Garamond', serif;
      line-height: .5;
      display: block;
      margin-bottom: 10px;
  }

  .testimonial-card>p {
      color: var(--text-muted);
      font-style: italic;
      margin-bottom: 22px;
      line-height: 1.7;
  }

  .tc-author {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .tc-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 0.8rem;
  }

  .tc-stars {
      color: var(--gold-400);
      font-size: 0.75rem;
      margin-bottom: 3px;
  }

  /* ============================
   FAQ
   ============================ */
  .faq-section {
      background: white;
  }

  .faq-list {
      max-width: 800px;
      margin: 48px auto 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .faq-item {
      background: var(--cream);
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: all .3s;
  }

  .faq-item.open {
      border-color: var(--gold-400);
      box-shadow: var(--shadow-md);
  }

  .faq-question {
      padding: 20px 24px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: var(--navy-800);
      transition: background .2s;
  }

  .faq-question:hover {
      background: rgba(184, 134, 11, 0.04);
  }

  .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid var(--gold-400);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .3s;
      flex-shrink: 0;
      color: var(--gold-500);
      font-size: 1rem;
      font-weight: 700;
  }

  .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: var(--gold-500);
      color: white;
      border-color: var(--gold-500);
  }

  .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease;
  }

  .faq-item.open .faq-answer {
      max-height: 300px;
  }

  .faq-answer-inner {
      padding: 0 24px 22px;
      color: var(--text-muted);
      line-height: 1.8;
  }

  /* ============================
   CONTACT — REDESIGNED
   ============================ */
  .contact-section {
      background: var(--navy-950);
      position: relative;
      overflow: hidden;
  }

  .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 70% at 15% 50%, rgba(184, 134, 11, 0.05), transparent 60%);
  }

  .contact-section .section-tag {
      background: rgba(184, 134, 11, 0.12);
      color: var(--gold-300);
  }

  .contact-section .section-title {
      color: white;
  }

  .contact-section .section-rule {
      background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
  }

  .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 0;
      margin-top: 52px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(184, 134, 11, 0.15);
      position: relative;
      z-index: 2;
  }

  .contact-info-col {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
      padding: 52px 44px;
      border-right: 1px solid rgba(184, 134, 11, 0.12);
  }

  .contact-info-col h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      color: white;
      margin-bottom: 6px;
  }

  .contact-info-col>p {
      color: rgba(255, 255, 255, 0.45);
      font-size: 0.88rem;
      margin-bottom: 36px;
      line-height: 1.7;
  }

  .contact-item-new {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(184, 134, 11, 0.1);
  }

  .contact-item-new:last-of-type {
      border-bottom: none;
      margin-bottom: 32px;
  }

  .contact-icon-new {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: rgba(184, 134, 11, 0.1);
      border: 1px solid rgba(184, 134, 11, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .contact-icon-new svg {
      width: 18px;
      height: 18px;
      color: var(--gold-400);
  }

  .contact-item-label {
      font-size: 0.65rem;
      color: rgba(255, 255, 255, 0.804);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 2px;
  }

  .contact-item-value {
      color: white;
      font-size: 0.92rem;
      font-weight: 500;
  }

  .contact-item-value a {
      color: white;
  }

  .contact-item-value a:hover {
      color: var(--gold-400);
  }

  .contact-hours-box {
      background: rgba(184, 134, 11, 0.07);
      border: 1px solid rgba(184, 134, 11, 0.15);
      border-radius: 12px;
      padding: 18px 20px;
      margin-top: 24px;
  }

  .contact-hours-title {
      font-size: 0.65rem;
      color: var(--gold-400);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 8px;
  }

  .contact-hours-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: 4px;
  }

  .contact-hours-row span:last-child {
      color: rgba(255, 255, 255, 0.75);
  }

  .contact-form-col {
      padding: 52px 44px;
      background: rgba(255, 255, 255, 0.02);
  }

  .contact-form-col h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      color: white;
      margin-bottom: 6px;
  }

  .contact-form-col>p {
      color: rgba(255, 255, 255, 0.721);
      font-size: 0.85rem;
      margin-bottom: 30px !important;
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .form-group {
      margin-bottom: 16px;
  }

  .form-group label {
      display: block;
      color: rgba(255, 255, 255, 0.45);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 600;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(184, 134, 11, 0.18);
      border-radius: 9px;
      padding: 13px 16px;
      color: white;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: .25s;
      font-size: 0.9rem;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
      color: rgba(255, 255, 255, 0.2);
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
      border-color: var(--gold-500);
      box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
  }

  .form-group select option {
      background: var(--navy-800);
      color: white;
  }

  .form-group textarea {
      resize: vertical;
      min-height: 100px;
  }

  .btn-submit {
      width: 100%;
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      color: white;
      border: none;
      padding: 14px;
      border-radius: 30px;
      font-weight: 700;
      cursor: pointer;
      transition: .3s;
      font-size: 0.95rem;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .btn-submit:hover {

      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  /* ============================
   FOOTER
   ============================ */
  .footer {
      background: var(--navy-950);
      color: rgba(255, 255, 255, 0.5);
      padding: 72px 0 0;
      border-top: 1px solid rgba(184, 135, 11, 0.823);
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      gap: 52px;
  }


  .footer-grid p {
      color: #fff;
  }

  .footer-grid img {
      width: 120px;
  }

  .footer-col h4 {
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-400);
      margin-bottom: 20px;
      font-weight: 700;
  }

  .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-left: 0px;
  }

  .footer-col ul li a {
      color: rgba(255, 255, 255, 0.87);
      transition: .2s;
      font-size: 0.88rem;
  }

  .footer-col ul li a:hover {
      color: var(--gold-400);
  }

  .footer-bottom {
      margin-top: 52px;
      padding: 22px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      justify-content: space-between;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.91);
  }

  .footer-bottom a {
      letter-spacing: 1.2px;
      color: var(--g2);
  }

  .footer-bottom a:hover {
      color: var(--gold-400);
  }

  /* ============================
   DISCLAIMER POPUP
   ============================ */
  .popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(10px);
      z-index: 99998;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
  }

  .popup-box {
      background: white;
      max-width: 560px;
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
      animation: fadeInUp .4s ease;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(24px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .popup-header {
      background: var(--navy-900);
      padding: 26px 32px;
      display: flex;
      align-items: center;
      gap: 16px;
      border-bottom: 1px solid rgba(184, 134, 11, 0.2);
  }

  .popup-body {
      padding: 30px 32px;
  }

  .popup-actions {
      display: flex;
      gap: 12px;
      margin-top: 22px;
  }

  .btn-agree,
  .btn-exit {
      flex: 1;
      padding: 12px;
      border-radius: 30px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid transparent;
      transition: .3s;
      font-size: 0.9rem;
  }

  .btn-agree {
      background: var(--gold-500);
      color: white;
      border-color: var(--gold-500);
  }

  .btn-agree:hover {
      background: var(--navy-800);
      border-color: var(--navy-800);
  }

  .btn-exit {
      background: transparent;
      border-color: #ddd;
      color: #555;
  }

  .btn-exit:hover {
      background: #fde8e8;
      border-color: #c00;
      color: #c00;
  }

  /* ============================
   ANIMATIONS
   ============================ */
  .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
  }

  .reveal.visible {
      opacity: 1;
      transform: none;
  }

  .reveal-delay-1 {
      transition-delay: .1s;
  }

  .reveal-delay-2 {
      transition-delay: .2s;
  }

  .reveal-delay-3 {
      transition-delay: .3s;
  }

  /* ============================
   RESPONSIVE
   ============================ */
  @media(max-width:1024px) {
      .services-grid-new {
          grid-template-columns: repeat(2, 1fr);
      }

      .hero-carousel {
          width: 45%;
      }

      .hero-content-col {
          max-width: 60%;
      }

      .about-grid,
      .advocate-layout,
      .contact-layout {
          grid-template-columns: 1fr;
      }

      .advocate-layout {
          border-radius: var(--radius-lg);
      }

      .contact-layout {
          border-radius: var(--radius-lg);
      }

      .contact-info-col {
          border-right: none;
          border-bottom: 1px solid rgba(184, 134, 11, 0.12);
      }

      .indepth-panel-grid {
          grid-template-columns: 1fr;
      }

      .indepth-panel-grid.flip .indepth-media {
          order: 0;
      }

      .why-layout {
          grid-template-columns: 1fr;
      }

      .why-sticky-col {
          position: static;
      }

      .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 36px;
      }
  }

  @media(max-width:768px) {
      .hamburger {
          display: flex;
      }


      .trust-pill 
 {
    
    font-size: 0.70rem;
 }

      .nav-menu {
          display: none;
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: white;
          padding: 20px;
          box-shadow: var(--shadow-lg);
          gap: 8px;
          border-top: 1px solid var(--border-gold);
      }

      .nav-menu.open {
          display: flex;
      }

      .hero-carousel {
          display: none;
      }

      .hero-content-col {
          max-width: 100%;
      }

      .hero-content-col {
          padding: 60px 0 40px;
      }

      .hero-stat-item {
          padding: 16px 12px;
      }

      .hero-stat-bar .container {
          flex-wrap: wrap;
      }

      .container {
          padding: 0px 10px;
      }

      .hero-stat-item {
          min-width: 50%;
      }

      .services-grid-new {
          grid-template-columns: 1fr;
      }

      .process-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
      }

      .process-grid::before {
          display: none;
      }

      .stats-grid {
          grid-template-columns: 1fr 1fr;
      }

      .testimonials-grid {
          grid-template-columns: 1fr;
      }

      .form-row {
          grid-template-columns: 1fr;
      }

      .about-img-stack {
          height: 320px;
      }

      .advocate-visual-col,
      .advocate-info-col {
          padding: 36px 28px;
      }

      .contact-info-col,
      .contact-form-col {
          padding: 36px 10px;
      }

      .top-badge {
          display: none;
      }

      .nav-logo img {
          width: 56px;
          height: 56px;
      }

      .nav-logo .logo-sub {
          margin-left: 0px;
          margin-bottom: 0px;
      }
  }

  @media(max-width:480px) {
      section {
          padding: 72px 0;
      }

      .hero-stat-item {
          min-width: 100%;
      }

      .process-grid {
          grid-template-columns: 1fr;
      }

      .footer-grid {
          grid-template-columns: 1fr;
      }

      .indepth-tabs{
        margin-top: 32px;
      }

          .trust-pill {
        font-size: 0.53rem;
    }

    .hero-actions { 
    margin-bottom: 22px;
}

      

      .indepth-tab {
          text-align: left;
      }
         .indepth-tab 
 { 
    padding: 18px 11px
 }
 .indepth-media-content{
    margin-top:30px;
 }
  }



  /* enquiry  */

  /* ============================================= */
  /* HERO — redesigned: docket / case-clock framing */
  /* ============================================= */
  .page-hero {
      background: var(--navy-900);
      position: relative;
      overflow: hidden;
      padding: 0;
      border-bottom: 1px solid rgba(184, 134, 11, 0.22);
  }

  .page-hero-gradient {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 55% 70% at 88% 0%, rgba(184, 134, 11, 0.09) 0%, transparent 60%), linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 100%);
  }

  .page-hero-grain {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
      opacity: .4;
      pointer-events: none;
  }

  .page-hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: stretch;
  }

  .page-hero-content {
      padding: 52px 0 56px;
  }

  .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 26px;
  }

  .breadcrumb a {
      color: rgba(255, 255, 255, 0.6);
  }

  .breadcrumb a:hover {
      color: var(--gold-400);
  }

  .docket-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--gold-300);
      border: 1px solid rgba(184, 134, 11, 0.35);
      padding: 5px 12px;
      border-radius: 3px;
      margin-bottom: 22px;
  }

  .docket-tag::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold-400);
  }

  .page-hero h1 {
      font-size: clamp(2.1rem, 3.6vw, 2.95rem);
      color: white;
      margin-bottom: 18px;
      max-width: 480px;
  }

  .page-hero h1 em {
      color: var(--gold-300);
      font-style: normal;
  }

  .page-hero p {
      color: rgba(255, 255, 255, 0.55);
      font-size: 1rem;
      max-width: 460px;
      line-height: 1.8;
  }

  .hero-cta-row {
      margin-top: 28px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
  }

  /* Right rail: statutory clock panel */
  .hero-clock-panel {
      border-left: 1px solid rgba(184, 134, 11, 0.18);
      padding: 52px 0 0 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
  }

  .clock-eyebrow {
      font-family: 'Cinzel', serif;
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgb(255, 255, 255);
      margin-bottom: 18px;
  }

  .clock-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 14px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .clock-row:last-of-type {
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .clock-form {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.84rem;
      color: var(--gold-300);
  }

  .clock-window {
      font-size: 0.84rem;
      color: rgba(255, 255, 255, 0.55);
      text-align: right;
  }

  .clock-foot {
      margin-top: 18px;
      font-size: 0.76rem;
      color: rgba(255, 255, 255, 0.32);
      line-height: 1.6;
  }

  @media (max-width: 1024px) {
      .page-hero-inner {
          grid-template-columns: 1fr;
      }

      .hero-clock-panel {
          border-left: none;
          border-top: 1px solid rgba(184, 134, 11, 0.18);
          padding: 32px 0;
      }
  }

  /* ============================================= */
  /* SERVICE BRIEF — short strip right after hero    */
  /* ============================================= */
  .service-brief p {
      line-height: 1.9;
  }

  .service-brief {
      background: var(--gold-100);
      border-bottom: 1px solid var(--border-gold);
      padding: 34px 0;
  }

  .service-brief-lede {
      color: var(--navy-700);
      font-size: 0.95rem;
      line-height: 1.65;
      margin-bottom: 26px;
  }

  .service-brief-lede strong {
      color: var(--navy-800);
  }

  .service-brief-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border-gold-md);
      border: 1px solid var(--border-gold-md);
      border-radius: 10px;
      overflow: hidden;
  }

  .service-brief-item {
      background: var(--white);
      padding: 18px 20px;
  }

  .service-brief-item-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.03em;
      color: var(--gold-600);
      margin-bottom: 6px;
  }

  .service-brief-item-desc {
      font-size: 0.82rem;
      color: var(--navy-700);
      line-height: 1.55;
  }

  @media (max-width: 768px) {
      .service-brief-row {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media (max-width: 480px) {
      .service-brief-row {
          grid-template-columns: 1fr;
      }
  }

  /* ============================================= */
  /* SERVICE OVERVIEW — redesigned: notice anatomy   */
  /* ============================================= */
  .service-overview {
      background: var(--white);
      border-bottom: 1px solid var(--border-gold);
      padding: 76px 0;
  }

  .overview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
  }

  .overview-badge {
      display: inline-block;
      background: var(--gold-100);
      color: var(--gold-600);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 14px;
      border: 1px solid rgba(184, 134, 11, 0.2);
  }

  .overview-content h2 {
      font-size: 1.9rem;
      color: var(--navy-800);
      margin-bottom: 14px;
  }

  .overview-desc {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.85;
      margin-bottom: 28px;
      max-width: 460px;
  }

  /* service ledger rows replacing checkmark list */
  .service-ledger {
      border-top: 1px solid var(--border-gold);
  }

  .ledger-row {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid var(--border-gold);
  }

  .ledger-row-code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--gold-500);
      letter-spacing: 0.03em;
      padding-top: 2px;
  }

  .ledger-row-title {
      font-weight: 600;
      color: var(--navy-700);
      font-size: 0.95rem;
      margin-bottom: 3px;
  }

  .ledger-row-desc {
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.6;
  }

  /* notice-anatomy panel replacing generic SVG */
  .notice-panel {
      background: var(--navy-900);
      border-radius: var(--radius-md);
      border: 1px solid rgba(184, 134, 11, 0.25);
      padding: 0;
      overflow: hidden;
      position: relative;
  }

  .notice-panel-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 22px;
      border-bottom: 1px solid rgba(184, 134, 11, 0.2);
      background: rgba(255, 255, 255, 0.02);
  }

  .notice-panel-bar span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.4);
  }

  .notice-panel-bar .dot-row {
      display: flex;
      gap: 6px;
  }

  .notice-panel-bar .dot-row i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(184, 134, 11, 0.4);
      display: inline-block;
  }

  .notice-doc {
      padding: 26px 26px 28px;
  }

  .notice-doc-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px dashed rgba(184, 134, 11, 0.25);
  }

  .notice-doc-head h4 {
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      letter-spacing: 0.06em;
      color: var(--gold-300);
      text-transform: uppercase;
  }

  .notice-doc-head small {
      display: block;
      color: rgba(255, 255, 255, 0.35);
      font-size: 0.7rem;
      margin-top: 4px;
      font-family: 'JetBrains Mono', monospace;
  }

  .notice-stamp {
      width: 46px;
      height: 46px;
      border: 1.5px solid var(--gold-400);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-8deg);
      opacity: 0.7;
      flex-shrink: 0;
  }

  .notice-stamp span {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      color: var(--gold-300);
      letter-spacing: 0.04em;
      text-align: center;
      line-height: 1.15;
  }

  .notice-field {
      display: flex;
      justify-content: space-between;
      padding: 9px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.8rem;
  }

  .notice-field dt {
      color: rgba(255, 255, 255, 0.42);
  }

  .notice-field dd {
      color: rgba(255, 255, 255, 0.85);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
  }

  .notice-field dd.flag {
      color: var(--gold-300);
  }

  .notice-doc-foot {
      margin-top: 18px;
      display: flex;
      gap: 10px;
      align-items: center;
      padding-top: 16px;
      border-top: 1px dashed rgba(184, 134, 11, 0.25);
  }

  .notice-doc-foot svg {
      width: 16px;
      height: 16px;
      color: var(--gold-400);
      flex-shrink: 0;
  }

  .notice-doc-foot p {
      font-size: 0.76rem;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1.5;
  }

  @media (max-width: 1024px) {
      .overview-grid {
          grid-template-columns: 1fr;
          gap: 40px;
      }
  }

  /* ============================================= */
  /* ENQUIRY FORM — redesigned: case intake          */
  /* ============================================= */
  .enquiry-section {
      background: var(--cream);
      padding: 80px 0;
  }

  .enquiry-kicker {
      text-align: left;
      margin-bottom: 40px;
  }

  .enquiry-kicker .overview-badge {
      margin-bottom: 12px;
  }

  .enquiry-kicker h2 {
      font-size: 1.9rem;
      color: var(--navy-800);
  }

  .enquiry-grid {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 48px;
      align-items: start;
  }

  /* Contact Card — recast as advocate dossier card */
  .contact-card {
      background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
      border-radius: var(--radius-lg);
      padding: 0;
      border: 1px solid var(--border-gold);
      box-shadow: var(--shadow-xl);
      position: sticky;
      top: 100px;
      overflow: hidden;
  }

  .contact-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(135deg, rgba(184, 134, 11, 0.03) 0, rgba(184, 134, 11, 0.03) 1px, transparent 1px, transparent 14px);
      pointer-events: none;
  }

  .cc-header {
      position: relative;
      z-index: 1;
      padding: 32px 36px 24px;
      border-bottom: 1px solid rgba(184, 134, 11, 0.16);
  }

  .cc-header-label {
      font-family: 'Cinzel', serif;
      font-size: 0.66rem;
      letter-spacing: 0.2em;
      color: var(--gold-400);
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 8px;
  }

  .cc-header h3 {
      color: white;
      font-size: 1.3rem;
      margin-bottom: 4px;
  }

  .cc-header p {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.8rem;
  }

  .cc-body {
      padding: 26px 36px 32px;
      position: relative;
      z-index: 1;
  }

  .cc-item {
      display: flex;
      gap: 16px;
      margin-bottom: 22px;
      align-items: flex-start;
  }

  .cc-icon {
      width: 42px;
      height: 42px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(184, 134, 11, 0.25);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .cc-icon svg {
      width: 18px;
      height: 18px;
      color: var(--gold-400);
  }

  .cc-text small {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
  }

  .cc-text a,
  .cc-text strong {
      color: white;
      font-size: 0.94rem;
      display: block;
      margin-top: 3px;
      font-weight: 600;
  }

  .cc-text a:hover {
      color: var(--gold-300);
  }

  .cc-divider {
      height: 1px;
      background: rgba(184, 134, 11, 0.15);
      margin: 24px 0;
  }

  .cc-quick-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .cc-quick-actions .btn {
      justify-content: center;
      width: 100%;
  }

  .cc-note {
      margin-top: 24px;
      padding: 16px 18px;
      background: rgba(255, 255, 255, 0.03);
      border-left: 2px solid var(--gold-500);
      border-radius: 0 8px 8px 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.81rem;
      line-height: 1.55;
  }

  .cc-note strong {
      display: block;
      color: var(--gold-300);
      font-weight: 600;
      margin-bottom: 3px;
      font-size: 0.81rem;
  }

  /* Form Card */
  .form-card {
      background: white;
      z-index: 999;
      border: 1px solid var(--border-gold);
      border-radius: var(--radius-lg);
      padding: 0;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
  }

  .form-card-head {
      padding: 38px 44px 26px;
      border-bottom: 1px solid var(--border-gold);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
  }

  .form-card-head h2 {
      font-size: 1.65rem;
      color: var(--navy-800);
      margin-bottom: 6px;
  }

  .form-card-head .subtitle {
      color: var(--text-muted);
      font-size: 0.9rem;
  }

  .form-card-head .response-pill {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: var(--gold-100);
      border: 1px solid var(--border-gold-md);
      border-radius: 10px;
      padding: 10px 16px;
  }

  .response-pill strong {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      color: var(--gold-600);
      line-height: 1;
  }

  .response-pill span {
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gold-600);
      margin-top: 3px;
  }

  .form-card-body {
      padding: 34px 44px 44px;
  }

  .form-group {
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      color: var(--g1);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      font-weight: 600;
  }

  .form-group label .req {
      color: var(--gold-500);
  }

  .form-group input::placeholder {
      color: #000;
  }

  .form-group textarea::placeholder {
      color: #000;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100%;
      background: var(--cream);
      border: 1.5px solid var(--border-gold);
      border-radius: 9px;
      padding: 13px 16px;
      color: var(--text-dark);
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: .25s;
      font-size: 0.92rem;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
      border-color: var(--gold-500);
      box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
      background: white;
  }

  .form-group input:invalid:not(:placeholder-shown):required {
      border-color: var(--danger);
  }

  .field-hint {
      font-size: 0.74rem;
      color: var(--text-muted);
      margin-top: 6px;
  }

  .form-group textarea {
      resize: vertical;
      min-height: 130px;
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 28px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 0.93rem;
      cursor: pointer;
      transition: all .3s;
      letter-spacing: 0.02em;
      border: none;
  }

  .btn-primary {
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      color: white;
      box-shadow: 0 8px 28px rgba(184, 134, 11, 0.35);
  }

  .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(184, 134, 11, 0.45);
  }

  .btn-outline-white {
      background: transparent;
      border: 2px solid rgba(255, 255, 255, 0.22);
      color: white;
  }

  .btn-outline-white:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: var(--gold-400);
      color: var(--gold-300);
  }

  .btn-block {
      width: 100%;
      justify-content: center;
  }

  .form-foot-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      font-size: 0.78rem;
      color: var(--text-muted);
  }

  .form-foot-note svg {
      width: 14px;
      height: 14px;
      color: var(--gold-500);
      flex-shrink: 0;
  }

  .success-message {
      display: none;
      text-align: center;
      padding: 40px 8px 8px;
  }

  .success-message.active {
      display: block;
  }

  .success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(46, 125, 79, 0.1);
      border: 2px solid var(--success);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
  }

  .success-icon svg {
      width: 32px;
      height: 32px;
      color: var(--success);
  }

  .success-ref {
      display: inline-block;
      margin-top: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: var(--text-muted);
      background: var(--cream);
      border: 1px solid var(--border-gold);
      padding: 7px 14px;
      border-radius: 6px;
  }

  @media (max-width: 1024px) {
      .enquiry-grid {
          grid-template-columns: 1fr;
      }
  }


  @media (max-width: 768px) {

      .form-row {
          grid-template-columns: 1fr;
      }

      .form-card-head {
          flex-direction: column;
      }

      .form-card-head,
      .form-card-body {
          padding-left: 24px;
          padding-right: 24px;
      }
  }


  /* enquiry  */






  /* blog section */
    /* =====================
           ARTICLE HERO
           ===================== */
        .article-hero {
            background: var(--navy-900);
            position: relative;
            overflow: hidden;
            padding: 56px 0 0;
        }
        .article-hero-gradient {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 55% 70% at 90% 10%, rgba(184, 134, 11, 0.11) 0%, transparent 60%), linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 100%);
        }
        .article-hero-grain {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
            opacity: .4;
            pointer-events: none;
        }
        .article-hero-grid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(184, 134, 11, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 134, 11, 0.035) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
        }
        .article-hero-inner {
            position: relative;
            z-index: 2;
            padding-bottom: 52px;
        }
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.45);
            margin-bottom: 22px;
        }
        .breadcrumb a {
            color: rgba(255, 255, 255, 0.6);
        }
        .breadcrumb a:hover {
            color: var(--gold-400);
        }
        .breadcrumb svg {
            width: 12px;
            height: 12px;
            opacity: .5;
        }
        .article-cat-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(184, 134, 11, 0.35);
            color: var(--gold-300);
            padding: 5px 16px;
            border-radius: 30px;
            font-size: 0.7rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 18px;
        }
        .article-hero h1 {
            font-size: clamp(1.9rem, 3.8vw, 3rem);
            color: white;
            max-width: 820px;
            margin-bottom: 20px;
            line-height: 1.22;
        }
        .article-hero-meta {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 32px;
        }
        .meta-author-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .meta-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }
        .meta-author-row .name {
            color: white;
            font-size: 0.88rem;
            font-weight: 600;
        }
        .meta-author-row .role {
            color: rgba(255, 255, 255, 0.45);
            font-size: 0.74rem;
        }
        .meta-sep {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(184, 134, 11, 0.5);
        }
        .meta-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.8rem;
        }
        .meta-chip svg {
            width: 14px;
            height: 14px;
            color: var(--gold-400);
        }
        

        /* Hero image block */
        .article-hero-visual {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
            border: 1px solid rgba(184, 134, 11, 0.15);
            border-bottom: none;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            padding: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 220px;
            position: relative;
            overflow: hidden;
            margin-top: 32px;
        }
        .article-hero-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(135deg, rgba(184, 134, 11, 0.03) 0, rgba(184, 134, 11, 0.03) 1px, transparent 1px, transparent 14px);
        }
        .article-hero-visual svg.main-icon {
            width: 110px;
            height: 110px;
            color: var(--gold-400);
            filter: drop-shadow(0 8px 28px rgba(184, 134, 11, 0.4));
            position: relative;
            z-index: 1;
        }
        .article-hero-visual .overlay-num {
            position: absolute;
            right: 32px;
            bottom: -10px;
            font-family: 'Cormorant Garamond', serif;
            font-size: 8rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.025);
            line-height: 1;
        }

        /* =====================
           ARTICLE LAYOUT
           ===================== */
        .article-section {
            padding: 0 0 96px;
        }
        .article-layout {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 52px;
            align-items: start;
            padding-top: 52px;
        }

        /* =====================
           ARTICLE BODY
           ===================== */
        .article-body {
            background: white;
            border: 1px solid var(--border-gold);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            padding: 52px 52px 48px;
            box-shadow: var(--shadow-lg);
        }

        /* Reading progress bar */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
            z-index: 9999;
            transition: width .1s linear;
        }

        /* Typography */
        .article-lead {
            font-size: 1.15rem;
            color: var(--text-body);
            line-height: 1.9;
            margin-bottom: 32px;
            font-weight: 400;
            border-left: 4px solid var(--gold-400);
            padding-left: 22px;
            font-style: italic;
        }
        .article-body p {
            font-size: 0.98rem;
            color: var(--text-body);
            line-height: 1.88;
            margin-bottom: 20px;
        }
        .article-body h2 {
            font-size: 1.65rem;
            color: var(--navy-800);
            margin: 44px 0 16px;
            padding-top: 8px;
            position: relative;
        }
        .article-body h2::before {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 36px;
            height: 2px;
            background: var(--gold-400);
        }
        .article-body h3 {
            font-size: 1.22rem;
            color: var(--navy-800);
            margin: 28px 0 12px;
        }
        .article-body ul,
        .article-body ol {
            margin: 0 0 22px 0;
            padding-left: 0;
            list-style: none;
        }
        .article-body ul li,
        .article-body ol li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: var(--text-body);
            font-size: 0.96rem;
            line-height: 1.75;
            margin-bottom: 10px;
        }
        .article-body ul li::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--gold-400);
            border-radius: 2px;
            flex-shrink: 0;
            margin-top: 7px;
            transform: rotate(45deg);
        }
        .article-body ol {
            counter-reset: ol-counter;
        }
        .article-body ol li {
            counter-increment: ol-counter;
        }
        .article-body ol li::before {
            content: counter(ol-counter);
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gold-500);
            flex-shrink: 0;
            min-width: 24px;
        }

        /* Callout / Alert boxes */
        .callout {
            padding: 22px 24px;
            border-radius: var(--radius-md);
            margin: 28px 0;
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }
        .callout svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-top: 2px;
            aria-hidden: "true";
        }
        .callout-warning {
            background: rgba(184, 134, 11, 0.07);
            border: 1px solid rgba(184, 134, 11, 0.25);
        }
        .callout-warning svg {
            color: var(--gold-500);
        }
        .callout-warning p {
            color: var(--navy-700);
            font-size: 0.93rem;
            margin: 0;
        }
        .callout-info {
            background: rgba(30, 37, 58, 0.05);
            border: 1px solid rgba(30, 37, 58, 0.15);
        }
        .callout-info svg {
            color: var(--navy-700);
        }
        .callout-info p {
            color: var(--navy-700);
            font-size: 0.93rem;
            margin: 0;
        }
        .callout-success {
            background: rgba(46, 125, 79, 0.07);
            border: 1px solid rgba(46, 125, 79, 0.2);
        }
        .callout-success svg {
            color: #2e7d4f;
        }
        .callout-success p {
            color: #1a4a2e;
            font-size: 0.93rem;
            margin: 0;
        }

        /* Timeline / Step list */
        .step-list {
            list-style: none;
            padding: 0;
            margin: 0 0 28px;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .step-item {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            position: relative;
            padding-bottom: 28px;
        }
        .step-item:last-child {
            padding-bottom: 0;
        }
        .step-item::after {
            content: '';
            position: absolute;
            left: 19px;
            top: 40px;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--gold-300), rgba(184, 134, 11, 0.1));
        }
        .step-item:last-child::after {
            display: none;
        }
        .step-num-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
            z-index: 1;
            aria-hidden: "true";
        }
        .step-content h4 {
            font-size: 1rem;
            color: var(--navy-800);
            margin-bottom: 6px;
        }
        .step-content p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.7;
            margin: 0;
        }

        /* Key points box */
        .key-box {
            background: linear-gradient(135deg, var(--gold-100), #fefbf4);
            border: 1px solid var(--border-gold-md);
            border-radius: var(--radius-md);
            padding: 28px 30px;
            margin: 32px 0;
        }
        .key-box-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--navy-800);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .key-box-title svg {
            width: 18px;
            height: 18px;
            color: var(--gold-500);
            aria-hidden: "true";
        }
        .key-box ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0;
            margin: 0;
        }
        .key-box ul li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--navy-700);
            line-height: 1.65;
        }
        .key-box ul li svg {
            width: 14px;
            height: 14px;
            color: var(--gold-500);
            flex-shrink: 0;
            margin-top: 3px;
            aria-hidden: "true";
        }

        /* Blockquote */
        .article-body blockquote {
            border-left: 4px solid var(--gold-400);
            padding: 18px 22px;
            background: rgba(184, 134, 11, 0.04);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            margin: 28px 0;
        }
        .article-body blockquote p {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.12rem;
            font-style: italic;
            color: var(--navy-700);
            margin: 0;
            line-height: 1.75;
        }
        .article-body blockquote cite {
            display: block;
            margin-top: 10px;
            font-size: 0.78rem;
            color: var(--text-muted);
            font-style: normal;
            letter-spacing: 0.04em;
        }

        /* Section divider */
        .article-divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 40px 0;
        }
        .article-divider::before,
        .article-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-gold);
        }
        .article-divider span {
            color: var(--gold-400);
            font-size: 0.9rem;
        }

        /* Tags in article */
        .article-tags {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding-top: 28px;
            border-top: 1px solid var(--border-gold);
            margin-top: 40px;
        }
        .article-tags-label {
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .article-tag {
            padding: 5px 13px;
            border-radius: 20px;
            border: 1.5px solid var(--border-gold);
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-muted);
            transition: all .2s;
        }
        .article-tag:hover {
            background: var(--gold-100);
            border-color: var(--gold-400);
            color: var(--gold-600);
        }

        /* Author box */
        .author-box {
            background: var(--cream);
            border: 1px solid var(--border-gold);
            border-radius: var(--radius-lg);
            padding: 32px 30px;
            margin-top: 36px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 24px;
            align-items: start;
        }
        .author-box-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 2px solid var(--gold-400);
            background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cinzel', serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--gold-400);
            aria-hidden: "true";
        }
        .author-box-name {
            font-size: 1.15rem;
            color: var(--navy-800);
            margin-bottom: 3px;
        }
        .author-box-role {
            font-size: 0.76rem;
            color: var(--gold-600);
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .author-box-bio {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.75;
            margin-bottom: 14px;
        }
        .author-box-consult {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.84rem;
            transition: all .3s;
            box-shadow: 0 6px 20px rgba(184, 134, 11, 0.3);
        }
        .author-box-consult:hover {
            transform: translateY(-2px);
        }

        /* =====================
           SIDEBAR
           ===================== */
        .article-sidebar {
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: sticky;
            top: 88px;
        }
        .sidebar-card {
            background: white;
            border: 1px solid var(--border-gold);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-sm);
        }
        .sidebar-card-title {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--gold-600);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sidebar-card-title svg {
            width: 14px;
            height: 14px;
            aria-hidden: "true";
        }

        /* Table of Contents */
        .toc-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .toc-list li a {
            display: block;
            padding: 7px 12px;
            border-radius: 8px;
            font-size: 0.84rem;
            color: var(--text-muted);
            border-left: 2px solid var(--border-gold);
            transition: all .2s;
        }
        .toc-list li a:hover,
        .toc-list li a.active {
            color: var(--gold-600);
            border-left-color: var(--gold-500);
            background: var(--gold-100);
        }
        .toc-list li.toc-h3 a {
            padding-left: 22px;
            font-size: 0.8rem;
        }

        /* Consult CTA */
        .sidebar-consult-card {
            background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
            border-color: var(--border-gold);
        }
        .sidebar-consult-card .sidebar-card-title {
            color: var(--gold-300);
        }
        .sidebar-consult-card p {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.84rem;
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .sidebar-consult-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
            color: white;
            padding: 12px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.86rem;
            transition: all .3s;
            margin-bottom: 10px;
        }
        .sidebar-consult-btn:hover {
            background: white;
            color: var(--navy-800);
        }
        .sidebar-whatsapp-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(184, 134, 11, 0.25);
            color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 0.84rem;
            transition: all .3s;
        }
        .sidebar-whatsapp-btn:hover {
            background: rgba(184, 134, 11, 0.12);
        }

        /* Related posts sidebar */
        .related-mini-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .related-mini-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .related-mini-thumb {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: linear-gradient(145deg, var(--navy-800), var(--navy-900));
            border: 1px solid var(--border-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            aria-hidden: "true";
        }
        .related-mini-thumb svg {
            width: 20px;
            height: 20px;
            color: var(--gold-400);
        }
        .related-mini-item h5 {
            font-size: 0.84rem;
            color: var(--navy-800);
            line-height: 1.4;
            margin-bottom: 3px;
        }
        .related-mini-item a:hover h5 {
            color: var(--gold-600);
        }
        .related-mini-item span {
            font-size: 0.72rem;
            color: var(--text-muted);
        }

        /* Share box sidebar */
        .share-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .share-side-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 10px;
            border-radius: 10px;
            border: 1.5px solid var(--border-gold);
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all .25s;
        }
        .share-side-btn svg {
            width: 14px;
            height: 14px;
            aria-hidden: "true";
        }
        .share-side-btn:hover {
            background: var(--gold-100);
            border-color: var(--gold-400);
            color: var(--gold-600);
        }

        /* =====================
           RELATED POSTS (bottom full width)
           ===================== */
        .related-section {
            background: var(--cream);
            padding: 72px 0 96px;
        }
        .related-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 44px;
        }
        .related-card {
            background: white;
            border: 1px solid var(--border-gold);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all .35s;
            height:max-content;
            box-shadow: var(--shadow-sm);
        }
        .related-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: var(--gold-400);
        }
        .related-thumb {
            background: linear-gradient(145deg, var(--navy-800), var(--navy-900));
            height: calc(100% - 50%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            aria-hidden: "true";
        }
        .related-thumb::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(135deg, rgba(184, 134, 11, 0.03) 0, rgba(184, 134, 11, 0.03) 1px, transparent 1px, transparent 14px);
        }
        .related-thumb svg {
            width: 46px;
            height: 46px;
            color: var(--gold-400);
            opacity: .85;
            filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
            position: relative;
            z-index: 1;
        }
        .related-top-strip {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
        }
        .related-body {
            padding: 17px;
        }
        .related-cat {
            font-size: 0.96rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--gold-600);
            margin-bottom: 8px;
        }
        .related-body h3 {
            font-size: 1rem;
            color: var(--navy-800);
            line-height: 1.35;
            margin-bottom: 8px;
        }

        .related-body h3 a{
  font-size: 1rem;
            color: var(--navy-800);
          
        }
        .related-body p {
            font-size: 0.82rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .related-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 12px;
            border-top: 1px solid var(--border-gold);
        }
        .related-date {
            font-size: 0.74rem;
            color: var(--text-muted);
        }
        .read-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--gold-600);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            transition: all .25s;
        }
        .read-link svg {
            width: 11px;
            height: 11px;
            transition: transform .25s;
            aria-hidden: "true";
        }
        .read-link:hover {
            color: var(--navy-800);
        }
        .read-link:hover svg {
            transform: translateX(4px);
        }

        /* =====================
           CTA BAND
           ===================== */
        .cta-band {
            background: linear-gradient(135deg, var(--navy-900), var(--navy-950));
            padding: 72px 0;
            position: relative;
            overflow: hidden;
        }
        .cta-band::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(184, 134, 11, 0.1), transparent 60%);
        }
        .cta-inner {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 32px;
            flex-wrap: wrap;
        }
        .cta-inner h2 {
            color: white;
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            margin-bottom: 8px;
        }
        .cta-inner p {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.96rem;
        }
        .cta-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        /* =====================
           REMOVED REVEAL ANIMATIONS
           (content visible immediately — no scroll required)
           ===================== */
        /* .reveal classes are intentionally left unstyled so content is always visible */

        /* RESPONSIVE */
        @media(max-width:1024px) {
            .article-layout {
                grid-template-columns: 1fr;
            }
            .article-sidebar {
                position: static;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
            }
            .related-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        @media(max-width:768px) {
            .article-body {
                padding: 32px 4px;
            }
            .article-sidebar {
                grid-template-columns: 1fr;
            }
            .author-box {
                grid-template-columns: 1fr;
            }
            .share-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            .cta-inner {
                flex-direction: column;
                text-align: center;
            }
            .cta-actions {
                justify-content: center;
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 36px;
            }
            .related-grid {
                grid-template-columns: 1fr;
            }
        }
        @media(max-width:480px) {
            .article-hero-meta {
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 12px;
            }
            .meta-sep{
                display: none;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
        }
  /* blog section */


  /* gallery section */

  .gallery-section {
    background: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: all .5s ease;
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.05)
    );
    opacity: 0;
    transition: .4s;
    z-index: 1;
}

.gallery-item::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(198,162,76,.95);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .4s;
    z-index: 2;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover::before,
.gallery-item:hover::after {
    opacity: 1;
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item img {
        height: 240px;
    }
}
  /* gallery section */


/* about us  */



/* ── SHARED DESIGN TOKENS ── */
.ab-section-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(184,134,11,.09);color:var(--g1);padding:4px 16px;border-radius:30px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px;border:1px solid rgba(184,134,11,.22);}
 
 

/* ── PAGE HERO ── */
.ab-page-hero{position:relative;overflow:hidden;background:var(--n8);min-height:490px;display:flex;align-items:center;}
.ab-ph-bg-img{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1505664194779-8beaceb93744?w=1600&q=80&auto=format&fit=crop') center/cover;opacity:.12;}
.ab-ph-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,11,24,.96) 0%,rgba(10,17,36,.88) 60%,rgba(19,26,44,.75) 100%);}
.ab-ph-inner{position:relative;z-index:2;padding:100px 0 80px;}
.ab-ph-breadcrumb{display:flex;align-items:center;gap:7px;font-size:.72rem;color:rgba(255,255,255,.38);margin-bottom:22px;letter-spacing:.04em;}
.ab-ph-breadcrumb a{color:var(--g2);}
.ab-ph-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(184,134,11,.1);border:1px solid rgba(184,134,11,.35);color:var(--g3);padding:5px 16px;border-radius:30px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
.ab-ph-dot{width:6px;height:6px;border-radius:50%;background:var(--g2);animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.ab-page-hero h1{font-size:clamp(2.3rem,5vw,3.7rem);color:white;margin-bottom:16px;line-height:1.1;}
.ab-page-hero h1 em{color:transparent;font-style:normal;background:linear-gradient(135deg,var(--g3),var(--g1));-webkit-background-clip:text;background-clip:text;}
.ab-page-hero .lead{color:rgba(255,255,255,.6);font-size:1rem;line-height:1.85;max-width:560px;}
.ab-ph-stat-strip{border:1px solid rgba(184,134,11,.2);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02);margin-top:44px;}
.ab-ph-stat{padding:18px 20px;text-align:center;border-right:1px solid rgba(184,134,11,.15);}
.ab-ph-stat:last-child{border-right:none;}
.ab-ph-stat-num{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;color:var(--g2);line-height:1;}
.ab-ph-stat-lbl{font-size:.62rem;color:rgba(255,255,255,.42);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;}

/* ── ABOUT THE ADVOCATE ── */
.ab-adv-section{background:white;padding:96px 0;}
.ab-adv-photo-card{background:linear-gradient(160deg,var(--n7),var(--n9));border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-xl);}
.ab-adv-photo-area{height:300px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(184,134,11,.12),rgba(0,0,0,.2));}
.ab-adv-initials{font-family:'Cinzel',serif;font-size:5rem;font-weight:700;color:var(--g2);opacity:.5;position:relative;z-index:1;}
.ab-adv-photo-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--n8) 100%);}
.ab-adv-photo-badge{position:absolute;top:14px;left:16px;background:rgba(6,11,24,.78);backdrop-filter:blur(8px);border:1px solid rgba(184,134,11,.3);padding:5px 12px;border-radius:20px;font-size:.58rem;color:var(--g3);letter-spacing:.12em;text-transform:uppercase;font-weight:600;z-index:2;}
.ab-adv-card-body{padding:24px 28px 30px;}
.ab-adv-card-body h3{color:white;font-size:1.5rem;margin-bottom:3px;}
.ab-adv-role{color:var(--g3);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.ab-adv-rule{width:34px;height:2px;background:var(--g1);margin:12px 0;border-radius:2px;}
.ab-adv-enroll{color:rgba(255,255,255,.38);font-size:.74rem;line-height:1.65;margin-bottom:16px;}
.ab-adv-chips{display:flex;flex-wrap:wrap;gap:5px;}
.ab-adv-chip{font-size:.6rem;background:rgba(184,134,11,.1);border:1px solid rgba(184,134,11,.22);color:var(--g3);padding:3px 10px;border-radius:20px;}
.ab-adv-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.18rem;color:var(--n6);line-height:1.75;border-left:3px solid var(--g2);padding-left:20px;margin:0 0 24px;}
.ab-adv-bio p{color:var(--muted);font-size:.94rem;line-height:1.85;margin-bottom:14px;}
.ab-cred-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;}
.ab-cred-icon-box{width:38px;height:38px;border-radius:9px;background:var(--g5);border:1px solid var(--border-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ab-cred-icon-box svg{width:17px;height:17px;color:var(--g1);}
.ab-cred-title{font-weight:600;color:var(--n6);font-size:.9rem;margin-bottom:1px;}
.ab-cred-sub{color:var(--muted);font-size:.79rem;}

/* ── VISION / MISSION SECTION ── */
.ab-vm-section{background:var(--n9);padding:96px 0;position:relative;overflow:hidden;}
.ab-vm-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 20%,rgba(184,134,11,.07),transparent 60%);pointer-events:none;}
.ab-vm-card{background:rgba(255,255,255,.028);border:1px solid rgba(184,134,11,.15);border-radius:14px;padding:36px 32px;height:100%;position:relative;overflow:hidden;transition:all .35s;}
.ab-vm-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g1),var(--g3));transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.ab-vm-card:hover{background:rgba(255,255,255,.05);border-color:rgba(184,134,11,.3);transform:translateY(-4px);}
.ab-vm-card:hover::after{transform:scaleX(1);}
.ab-vm-icon{width:54px;height:54px;background:rgba(184,134,11,.12);border:1px solid rgba(184,134,11,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .3s;}
.ab-vm-card:hover .ab-vm-icon{background:rgba(184,134,11,.22);}
.ab-vm-icon svg{width:24px;height:24px;color:var(--g2);}
.ab-vm-card h3{color:var(--g3);font-size:1.3rem;margin-bottom:12px;}
.ab-vm-card p{color:rgba(255,255,255,.52);font-size:.9rem;line-height:1.82;}
.vm-divider{width:1px;background:rgba(184,134,11,.15);align-self:stretch;}

/* ── WHY CHOOSE US ── */
.ab-why-section{background:var(--cream);padding:96px 0;}
.ab-why-img-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--sh-xl);height:100%;min-height:480px;}
.ab-why-img-wrap img{width:100%;height:100%;object-fit:cover;}
.ab-why-img-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6, 11, 24, 0.408),rgba(10, 17, 36, 0.222));}
.ab-why-img-badge{position:absolute;bottom:24px;left:24px;right:24px;background:rgba(6,11,24,.82);backdrop-filter:blur(12px);border:1px solid rgba(184,134,11,.25);border-radius:10px;padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ab-why-stat{text-align:center;}
.ab-why-stat-num{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:700;color:var(--g2);line-height:1;}
.ab-why-stat-lbl{font-size:.62rem;color:rgba(255,255,255,.45);letter-spacing:.07em;text-transform:uppercase;margin-top:2px;}
.ab-why-card{background:white;border:1px solid var(--border);border-radius:11px;padding:22px 20px;height:100%;transition:all .3s;position:relative;overflow:hidden;}
.ab-why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g1),var(--g3));transform:scaleX(0);transform-origin:left;transition:transform .35s;}
.ab-why-card:hover{box-shadow:var(--sh-lg);border-color:var(--g2);transform:translateY(-3px);}
.ab-why-card:hover::before{transform:scaleX(1);}
.ab-why-icon{width:44px;height:44px;border-radius:10px;background:var(--g5);border:1px solid var(--border-md);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:all .3s;}
.ab-why-card:hover .ab-why-icon{background:var(--g1);}
.ab-why-card:hover .ab-why-icon svg{color:white;}
.ab-why-icon svg{width:20px;height:20px;color:var(--g1);transition:color .3s;}
.ab-why-card h4{font-family:'Inter',sans-serif;font-size:.93rem;font-weight:700;color:var(--n6);margin-bottom:6px;}
.ab-why-card p{color:var(--muted);font-size:.83rem;line-height:1.68;}

/* ── CORE EXPERTISE ── */
.ab-exp-section{background:white;padding:96px 0;}
.ab-exp-card{background:var(--cream);border:1px solid var(--border);border-radius:12px;overflow:hidden;height:100%;transition:all .35s;}
.ab-exp-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--g2);}
.ab-exp-card-top{background:linear-gradient(145deg,var(--n7),var(--n8));padding:24px 24px 20px;position:relative;overflow:hidden;}
.ab-exp-card-top::after{content:attr(data-num);position:absolute;top:-8px;right:14px;font-family:'Cormorant Garamond',serif;font-size:5rem;font-weight:700;color:rgba(255,255,255,.04);line-height:1;pointer-events:none;}
.ab-exp-icon-box{width:46px;height:46px;background:rgba(184,134,11,.18);border:1px solid rgba(184,134,11,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:all .3s;}
.ab-exp-card:hover .ab-exp-icon-box{background:rgba(184,134,11,.3);box-shadow:0 0 18px rgba(184,134,11,.28);}
.ab-exp-icon-box svg{width:20px;height:20px;color:var(--g2);}
.ab-exp-card-top h3{color:white;font-size:1rem;margin-bottom:5px;}
.ab-exp-card-top p{color:rgba(255,255,255,.48);font-size:.8rem;line-height:1.6;}
.ab-exp-card-body{padding:20px 24px 24px;}
.ab-exp-list{list-style:none; padding-left:0px; display:flex;flex-direction:column;gap:8px;}
.ab-exp-list li{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:.93rem;line-height:1.55;}
.ab-exp-check{width:14px;height:14px;border-radius:50%;background:rgba(184,134,11,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.ab-exp-check svg{width:7px;height:7px;color:var(--g1);}

 

/* ── PHILOSOPHY ── */
.ab-phil-section{background:var(--n9);padding:96px 0;position:relative;overflow:hidden;}
.ab-phil-section::before{content:'⚖';position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:320px;opacity:.02;pointer-events:none;}
.ab-phil-card{background:rgba(255,255,255,.025);border:1px solid rgba(184,134,11,.12);border-radius:12px;padding:28px 24px;height:100%;transition:all .3s;}
.ab-phil-card:hover{background:rgba(184,134,11,.07);border-color:rgba(184,134,11,.28);transform:translateY(-3px);}
.ab-phil-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:700;color:rgb(184, 135, 11);line-height:1;margin-bottom:10px;}
.ab-phil-card h4{color:var(--g3);font-size:1.05rem;margin-bottom:8px;}
.ab-phil-card p{color:rgba(255,255,255,.48);font-size:.87rem;line-height:1.75;}
.ab-phil-highlight{background:linear-gradient(135deg,rgba(184,134,11,.12),rgba(184,134,11,.04));border:1px solid rgba(184,134,11,.25);border-radius:14px;padding:40px;position:relative;overflow:hidden;}
.ab-phil-highlight::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g1),var(--g3),var(--g1));}
.ab-phil-highlight blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:white;line-height:1.75;margin-bottom:20px;}
.ab-phil-highlight cite{font-size:.75rem;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;}

/* ── COMMITMENT / EXCELLENCE ── */
.ab-commit-section{background:var(--cream);padding:96px 0;}
.ab-commit-card{background:white;border:1px solid var(--border);border-radius:12px;padding:28px 24px;height:100%;transition:all .3s;display:flex;gap:16px;align-items:flex-start;}
.ab-commit-card:hover{box-shadow:var(--sh-md);border-color:var(--g2);transform:translateY(-2px);}
.ab-commit-icon{width:50px;height:50px;border-radius:11px;background:linear-gradient(135deg,var(--g1),#9e740a);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 18px rgba(184,134,11,.28);}
.ab-commit-icon svg{width:22px;height:22px;color:white;}
.ab-commit-text h4{font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;color:var(--n6);margin-bottom:6px;}
.ab-commit-text p{color:var(--muted);font-size:.85rem;line-height:1.7;}
.ab-excellence-wrap{background:linear-gradient(135deg,var(--g1),#9e740a);border-radius:16px;padding:52px 44px;color:white;position:relative;overflow:hidden;}
.ab-excellence-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 14px);pointer-events:none;}
.ab-excellence-wrap h2{font-size:clamp(1.6rem,3vw,2.3rem);color:white;margin-bottom:14px;}
.ab-excellence-wrap p{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.82;margin-bottom:24px;}
.ab-excellence-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}
.ab-ex-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:14px 16px;text-align:center;}
.ab-ex-stat-num{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:700;line-height:1;}
.ab-ex-stat-lbl{font-size:.62rem;opacity:.72;letter-spacing:.07em;text-transform:uppercase;margin-top:2px;}
.ab-btn-white{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--g1);padding:12px 24px;border-radius:30px;font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:all .3s;font-family:'Inter',sans-serif;}
.ab-btn-white:hover{background:var(--n7);color:white;transform:translateY(-2px);}

/* ── CTA STRIP ── */
.ab-cta-strip{background:linear-gradient(135deg,var(--n7),var(--n8));padding:60px 0;border-top:1px solid rgba(184,134,11,.15);border-bottom:1px solid rgba(184,134,11,.15);}
.ab-btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:white;padding:12px 24px;border-radius:30px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .3s;font-family:'Inter',sans-serif;}
.ab-btn-wa:hover{background:#1ebe5a;transform:translateY(-2px);color:white;}

 
/* ── RESPONSIVE ── */
@media(max-width:768px){
  .ab-hamburger{display:flex;}
  #navCollapse{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:16px;box-shadow:var(--sh-lg);border-top:1px solid var(--border);}
  #navCollapse.open{display:flex;flex-direction:column;gap:6px;}
  .ab-ph-inner{padding:72px 10px 56px;}
  .ab-why-img-wrap{min-height:320px;}
  .ab-excellence-wrap{padding:36px 28px;}
  .ab-phil-highlight{padding:28px 24px;}
}
/* about us  */

  /* locatiom */
 /* ============================================================
   ALL STYLES SCOPED TO .delhi-law-office WRAPPER
   ============================================================ */
.delhi-law-office .section-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(184,134,11,0.09);color:var(--gold-600);padding:5px 18px;border-radius:30px;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;margin-bottom:16px;border:1px solid rgba(184,134,11,0.22);}
.delhi-law-office .section-rule{width:56px;height:3px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));border-radius:3px;margin-bottom:22px;}
.delhi-law-office .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:30px;font-weight:600;font-size:0.91rem;cursor:pointer;transition:all .3s;letter-spacing:0.02em;border:none;}
.delhi-law-office .btn-primary{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:white;box-shadow:0 8px 28px rgba(184,134,11,0.35);}
.delhi-law-office .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(184,134,11,0.45);color:white;}
.delhi-law-office .btn-outline-w{background:transparent;border:2px solid rgba(255,255,255,0.3);color:white;}
.delhi-law-office .btn-outline-w:hover{background:rgba(255,255,255,0.07);border-color:var(--gold-400);color:var(--gold-300);}
.delhi-law-office .breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:rgba(255,255,255,0.45);margin-bottom:22px;list-style:none;}
.delhi-law-office .breadcrumb a{color:rgba(255,255,255,0.65);}
.delhi-law-office .breadcrumb a:hover{color:var(--gold-400);}
.delhi-law-office .breadcrumb svg{width:11px;height:11px;opacity:.5;}

/* ===================== HERO ===================== */
.delhi-law-office .page-hero{background:var(--navy-900);position:relative;overflow:hidden;padding:64px 0 0;}
.delhi-law-office .hero-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 55% 75% at 85% 10%,rgba(184,134,11,0.11) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 5% 85%,rgba(184,134,11,0.05) 0%,transparent 55%),linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 100%);}
.delhi-law-office .hero-grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;}
.delhi-law-office .hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(184,134,11,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(184,134,11,0.04) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;}
.delhi-law-office .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;padding-bottom:52px;}
.delhi-law-office .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(184,134,11,0.35);color:var(--gold-300);padding:7px 18px;border-radius:30px;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;margin-bottom:22px;}
.delhi-law-office .hero-eyebrow .blink{width:6px;height:6px;border-radius:50%;background:var(--gold-400);animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.delhi-law-office .hero-content h1{font-size:clamp(2rem,4vw,3.1rem);color:white;margin-bottom:20px;line-height:1.18;}
.delhi-law-office .hero-content h1 em{color:transparent;font-style:normal;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));-webkit-background-clip:text;background-clip:text;}
.delhi-law-office .hero-sub{color:rgba(255,255,255,0.62);font-size:1.02rem;max-width:520px;line-height:1.85;margin-bottom:30px;}
.delhi-law-office .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}

/* Trust badges */
.delhi-law-office .trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.delhi-law-office .trust-badge{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.75);font-size:0.84rem;font-weight:500;}
.delhi-law-office .trust-check{width:22px;height:22px;border-radius:50%;background:rgba(184,134,11,0.18);display:flex;align-items:center;justify-content:center;color:var(--gold-400);font-size:0.72rem;font-weight:700;flex-shrink:0;}

/* Courts Panel (right side) */
.delhi-law-office .courts-panel{background:rgba(255,255,255,0.025);border:1px solid rgba(184,134,11,0.18);border-radius:var(--radius-lg);padding:30px 26px;backdrop-filter:blur(4px);}
.delhi-law-office .courts-panel-label{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.2em;color:var(--gold-400);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:8px;}
.delhi-law-office .courts-panel-label svg{width:13px;height:13px;}
.delhi-law-office .court-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.delhi-law-office .court-row:last-of-type{border-bottom:none;}
.delhi-law-office .court-code{font-family:'Cinzel',serif;font-size:0.66rem;letter-spacing:0.08em;color:var(--gold-400);min-width:80px;padding-top:2px;text-transform:uppercase;flex-shrink:0;}
.delhi-law-office .court-desc{font-size:0.84rem;color:rgba(255,255,255,0.7);line-height:1.5;}
.delhi-law-office .courts-panel-foot{margin-top:18px;font-size:0.78rem;color:rgba(255,255,255,0.4);line-height:1.6;border-top:1px solid rgba(184,134,11,0.12);padding-top:16px;}

/* Hero bottom visual bar */
.delhi-law-office .hero-visual-bar{background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border-top:1px solid rgba(184,134,11,0.15);border-bottom:none;position:relative;z-index:2;}
.delhi-law-office .hero-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.delhi-law-office .hero-stat{padding:22px 28px;border-right:1px solid rgba(184,134,11,0.1);text-align:center;}
.delhi-law-office .hero-stat:last-child{border-right:none;}
.delhi-law-office .hero-stat-num{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;color:var(--gold-400);display:block;line-height:1;}
.delhi-law-office .hero-stat-label{font-size:0.72rem;color:rgba(255,255,255,0.45);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px;}

/* ===================== SERVICE BRIEF ===================== */
.delhi-law-office .service-brief{background:white;padding:72px 0;}
.delhi-law-office .sb-lede{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--text-dark);line-height:1.55;margin-bottom:20px;}
.delhi-law-office .sb-body p{color:var(--text-muted);line-height:1.85;font-size:1.02rem;margin-bottom:16px;}
.delhi-law-office .sb-body ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding:0;}
.delhi-law-office .sb-body ul li{display:flex;align-items:flex-start;gap:10px;color:var(--text-muted);font-size:0.94rem;}
.delhi-law-office .sb-body ul li::before{content:'';width:8px;height:8px;background:var(--gold-500);border-radius:2px;margin-top:8px;flex-shrink:0;transform:rotate(45deg);}
.delhi-law-office .sb-body strong{color:var(--text-dark);}
.delhi-law-office .sb-body a{color:var(--gold-600);font-weight:500;}
.delhi-law-office .sb-body a:hover{color:var(--navy-800);}
.delhi-law-office .brief-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;}
.delhi-law-office .brief-card{background:var(--cream);border:1px solid var(--border-gold);border-radius:var(--radius-md);padding:22px;transition:all .3s;}
.delhi-law-office .brief-card:hover{box-shadow:var(--shadow-md);border-color:var(--gold-400);transform:translateY(-3px);}
.delhi-law-office .brief-card-icon{width:40px;height:40px;background:var(--gold-100);border:1px solid var(--border-gold-md);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.delhi-law-office .brief-card-icon svg{width:18px;height:18px;color:var(--gold-500);}
.delhi-law-office .brief-card-label{font-size:0.74rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-600);margin-bottom:6px;}
.delhi-law-office .brief-card-desc{font-size:0.82rem;color:var(--text-muted);line-height:1.55;}

/* ===================== SERVICE OVERVIEW / LEDGER ===================== */
.delhi-law-office .overview-section{background:var(--cream);padding:72px 0;}
.delhi-law-office .overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.delhi-law-office .overview-section h2{font-size:clamp(1.7rem,2.8vw,2.2rem);color:var(--navy-800);margin-bottom:14px;}
.delhi-law-office .overview-desc{color:var(--text-muted);font-size:0.96rem;margin-bottom:28px;line-height:1.8;}

/* Ledger */
.delhi-law-office .service-ledger{border:1px solid var(--border-gold);border-radius:var(--radius-md);overflow:hidden;}
.delhi-law-office .ledger-head{background:var(--navy-800);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;}
.delhi-law-office .ledger-head span{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.18em;color:var(--gold-400);text-transform:uppercase;}
.delhi-law-office .ledger-dots{display:flex;gap:5px;}
.delhi-law-office .ledger-dots i{width:7px;height:7px;border-radius:50%;background:var(--gold-400);opacity:.6;display:block;}
.delhi-law-office .ledger-row{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;background:white;border-bottom:1px solid var(--border-gold);transition:background .2s;}
.delhi-law-office .ledger-row:last-child{border-bottom:none;}
.delhi-law-office .ledger-row:hover{background:var(--gold-100);}
.delhi-law-office .ledger-code{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.1em;color:var(--gold-500);min-width:80px;padding-top:3px;text-transform:uppercase;font-weight:600;flex-shrink:0;}
.delhi-law-office .ledger-title{font-weight:600;color:var(--navy-800);font-size:0.9rem;margin-bottom:3px;}
.delhi-law-office .ledger-desc{font-size:0.8rem;color:var(--text-muted);line-height:1.5;}

/* Office info card */
.delhi-law-office .office-card{border:1px solid var(--border-gold);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.delhi-law-office .office-card-bar{background:var(--navy-800);padding:14px 22px;display:flex;justify-content:space-between;align-items:center;}
.delhi-law-office .office-card-bar span{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.16em;color:var(--gold-400);text-transform:uppercase;}
.delhi-law-office .office-body{padding:28px 24px;background:white;}
.delhi-law-office .office-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-gold);}
.delhi-law-office .office-head h4{font-size:1.2rem;color:var(--navy-800);margin-bottom:3px;}
.delhi-law-office .office-head small{color:var(--text-muted);font-size:0.78rem;}
.delhi-law-office .office-stamp{background:#fdf2f2;border:2px solid var(--danger);color:var(--danger);font-size:0.58rem;font-weight:700;letter-spacing:0.06em;text-align:center;padding:8px 12px;border-radius:4px;text-transform:uppercase;line-height:1.4;transform:rotate(-3deg);flex-shrink:0;}
.delhi-law-office .office-field{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid rgba(184,134,11,0.1);font-size:0.86rem;}
.delhi-law-office .office-field:last-of-type{border-bottom:none;}
.delhi-law-office .office-field dt{font-weight:700;color:var(--navy-800);font-size:0.76rem;letter-spacing:0.04em;text-transform:uppercase;min-width:100px;flex-shrink:0;padding-top:2px;}
.delhi-law-office .office-field dd{color:var(--text-muted);margin:0;line-height:1.5;}
.delhi-law-office .office-field dd.warn{color:var(--danger);font-weight:500;}
.delhi-law-office .office-note{margin-top:20px;display:flex;gap:12px;background:var(--gold-100);border:1px solid var(--border-gold-md);border-radius:var(--radius-sm);padding:14px 16px;}
.delhi-law-office .office-note svg{width:18px;height:18px;color:var(--gold-500);flex-shrink:0;margin-top:2px;}
.delhi-law-office .office-note p{font-size:0.8rem;color:var(--navy-700);line-height:1.6;margin:0;}

/* Map embed */
.delhi-law-office .map-section{background:white;padding:0;overflow:hidden;}
.delhi-law-office .map-wrap{position:relative;height:380px;background:var(--navy-900);overflow:hidden;}
.delhi-law-office .map-embed{width:100%;height:100%;border:none;filter:grayscale(30%) contrast(1.1);}
.delhi-law-office .map-overlay{position:absolute;top:20px;left:20px;background:white;border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-lg);max-width:260px;border-left:4px solid var(--gold-500);}
.delhi-law-office .map-overlay h4{font-size:0.92rem;color:var(--navy-800);margin-bottom:5px;}
.delhi-law-office .map-overlay p{font-size:0.78rem;color:var(--text-muted);line-height:1.5;margin-bottom:10px;}
.delhi-law-office .map-overlay a{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;font-weight:700;color:var(--gold-600);text-transform:uppercase;letter-spacing:0.06em;}
.delhi-law-office .map-overlay a svg{width:12px;height:12px;}

/* ===================== AREAS SERVED ===================== */
.delhi-law-office .areas-section{background:var(--navy-950);position:relative;overflow:hidden;padding:72px 0;}
.delhi-law-office .areas-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(184,134,11,0.06),transparent 70%);}
.delhi-law-office .areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;position:relative;z-index:2;}
.delhi-law-office .area-card{background:rgba(255,255,255,0.025);border:1px solid rgba(184,134,11,0.12);border-radius:var(--radius-lg);padding:28px 24px;transition:all .3s;position:relative;overflow:hidden;}
.delhi-law-office .area-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);transform:scaleX(0);transition:transform .4s;}
.delhi-law-office .area-card:hover{background:rgba(255,255,255,0.05);border-color:rgba(184,134,11,0.3);transform:translateY(-4px);}
.delhi-law-office .area-card:hover::before{transform:scaleX(1);}
.delhi-law-office .area-card-icon{width:44px;height:44px;border-radius:12px;background:rgba(184,134,11,0.1);border:1px solid rgba(184,134,11,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.delhi-law-office .area-card-icon svg{width:20px;height:20px;color:var(--gold-400);}
.delhi-law-office .area-card h3{color:var(--gold-300);font-size:1.05rem;margin-bottom:8px;}
.delhi-law-office .area-card p{color:rgba(255,255,255,0.5);font-size:0.84rem;line-height:1.65;}
.delhi-law-office .area-courts{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.delhi-law-office .area-courts li{font-size:0.78rem;color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:7px;}
.delhi-law-office .area-courts li::before{content:'';width:5px;height:5px;background:var(--gold-500);border-radius:50%;flex-shrink:0;}

/* ===================== NCR COVERAGE GRID ===================== */
.delhi-law-office .ncr-section{background:white;padding:72px 0;}
.delhi-law-office .ncr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;}
.delhi-law-office .ncr-card{background:var(--cream);border:1px solid var(--border-gold);border-radius:var(--radius-md);padding:22px 18px;text-align:center;transition:all .3s;}
.delhi-law-office .ncr-card:hover{border-color:var(--gold-400);background:var(--gold-100);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.delhi-law-office .ncr-card svg{width:26px;height:26px;color:var(--gold-500);margin:0 auto 10px;}
.delhi-law-office .ncr-card h4{font-size:1.16rem;color:var(--navy-800);margin-bottom:5px;}
.delhi-law-office .ncr-card p{font-size:0.78rem;color:var(--text-muted);line-height:1.5;}

/* ===================== ENQUIRY SECTION ===================== */
.delhi-law-office .enquiry-section{background:var(--cream);padding:72px 0;}
.delhi-law-office .enquiry-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:44px;margin-top:44px;}
.delhi-law-office .contact-card{background:linear-gradient(150deg,var(--navy-800),var(--navy-900));border:1px solid var(--border-gold);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:92px;}
.delhi-law-office .cc-header{background:rgba(255,255,255,0.03);padding:28px 26px;border-bottom:1px solid rgba(184,134,11,0.15);text-align:center;}
.delhi-law-office .cc-header-label{font-family:'Cinzel',serif;font-size:0.63rem;letter-spacing:0.18em;color:var(--gold-400);text-transform:uppercase;margin-bottom:8px;}
.delhi-law-office .cc-header h3{color:white;font-size:1.35rem;margin-bottom:3px;}
.delhi-law-office .cc-header p{color:rgba(255,255,255,0.45);font-size:0.8rem;}
.delhi-law-office .cc-body{padding:26px 24px;}
.delhi-law-office .cc-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.delhi-law-office .cc-icon{width:40px;height:40px;border-radius:50%;background:rgba(184,134,11,0.1);border:1px solid rgba(184,134,11,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.delhi-law-office .cc-icon svg{width:17px;height:17px;color:var(--gold-400);}
.delhi-law-office .cc-text small{display:block;font-size:0.68rem;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:3px;}
.delhi-law-office .cc-text a,.delhi-law-office .cc-text strong{color:white;font-size:0.9rem;font-weight:600;display:block;}
.delhi-law-office .cc-text a:hover{color:var(--gold-300);}
.delhi-law-office .cc-divider{height:1px;background:rgba(184,134,11,0.15);margin:20px 0;}
.delhi-law-office .cc-actions{display:flex;flex-direction:column;gap:10px;}
.delhi-law-office .cc-btn-wa{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:white;padding:13px;border-radius:30px;font-weight:700;font-size:0.88rem;transition:all .3s;box-shadow:0 6px 20px rgba(184,134,11,0.3);}
.delhi-law-office .cc-btn-wa:hover{transform:translateY(-2px);}
.delhi-law-office .cc-btn-call{display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,0.06);border:1px solid rgba(184,134,11,0.25);color:rgba(255,255,255,0.85);padding:11px;border-radius:30px;font-weight:600;font-size:0.88rem;transition:all .3s;}
.delhi-law-office .cc-btn-call:hover{background:rgba(184,134,11,0.12);}
.delhi-law-office .cc-note{margin-top:20px;padding:14px;background:rgba(184,134,11,0.07);border-radius:var(--radius-sm);border-left:3px solid var(--gold-400);font-size:0.78rem;color:rgba(255,255,255,0.55);line-height:1.65;}
.delhi-law-office .cc-note strong{color:rgba(255,255,255,0.85);}

/* Form card */
.delhi-law-office .form-card{background:white;border:1px solid var(--border-gold);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.delhi-law-office .form-card-head{padding:26px 30px 20px;border-bottom:1px solid var(--border-gold);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.delhi-law-office .form-card-head h2{font-size:1.45rem;color:var(--navy-800);margin-bottom:4px;}
.delhi-law-office .form-card-head .sub{color:var(--text-muted);font-size:0.84rem;}
.delhi-law-office .response-pill{display:flex;align-items:center;gap:10px;background:#f0faf4;border:1px solid #c8e6d0;padding:10px 16px;border-radius:30px;flex-shrink:0;}
.delhi-law-office .response-pill strong{font-size:1.3rem;color:var(--success);font-weight:700;}
.delhi-law-office .response-pill span{font-size:0.7rem;color:#444;letter-spacing:0.03em;}
.delhi-law-office .form-body{padding:26px 30px 30px;}
.delhi-law-office .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.delhi-law-office .form-group{margin-bottom:18px;}
.delhi-law-office .form-group label{display:block;font-weight:600;font-size:0.82rem;color:var(--navy-700);margin-bottom:7px;}
.delhi-law-office .form-group label .req{color:var(--danger);}
.delhi-law-office .form-group input,.delhi-law-office .form-group select,.delhi-law-office .form-group textarea{width:100%;padding:12px 15px;border:1.5px solid var(--border-gold);border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:0.9rem;color:var(--text-dark);background:var(--cream);outline:none;transition:.25s;}
.delhi-law-office .form-group input:focus,.delhi-law-office .form-group select:focus,.delhi-law-office .form-group textarea:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(184,134,11,0.1);background:white;}
.delhi-law-office .form-group textarea{min-height:120px;resize:vertical;}
.delhi-law-office .field-hint{font-size:0.72rem;color:#a0a0b0;margin-top:5px;}
.delhi-law-office .form-submit{width:100%;background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:white;border:none;padding:14px;border-radius:30px;font-weight:700;font-size:0.96rem;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;gap:10px;}
.delhi-law-office .form-submit:hover{background:linear-gradient(135deg,var(--navy-700),var(--navy-800));transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.delhi-law-office .form-note{display:flex;gap:9px;margin-top:12px;font-size:0.72rem;color:#999;line-height:1.5;}
.delhi-law-office .form-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:#bbb;}
.delhi-law-office .form-success{display:none;text-align:center;padding:44px 24px;}
.delhi-law-office .form-success.active{display:block;animation:fadeInUp .4s ease;}
.delhi-law-office .success-icon{width:60px;height:60px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.delhi-law-office .success-icon svg{width:28px;height:28px;color:var(--success);}

/* ===================== FAQ ===================== */
.delhi-law-office .faq-section{background:white;padding:72px 0;}
.delhi-law-office .faq-section .inner{max-width:820px;margin:0 auto;}
.delhi-law-office .faq-list{display:flex;flex-direction:column;gap:12px;margin-top:44px;}
.delhi-law-office .faq-item{background:var(--cream);border:1px solid var(--border-gold);border-radius:var(--radius-md);overflow:hidden;transition:all .3s;}
.delhi-law-office .faq-item.open{border-color:var(--gold-400);box-shadow:var(--shadow-md);}
.delhi-law-office .faq-question{width:100%;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;font-size:0.92rem;color:var(--navy-800);text-align:left;transition:background .2s;gap:16px;}
.delhi-law-office .faq-question:hover{background:rgba(184,134,11,0.04);}
.delhi-law-office .faq-icon{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold-400);display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0;color:var(--gold-500);font-size:1rem;font-weight:700;}
.delhi-law-office .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--gold-500);color:white;border-color:var(--gold-500);}
.delhi-law-office .faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.delhi-law-office .faq-item.open .faq-answer{max-height:400px;}
.delhi-law-office .faq-answer-inner{padding:0 24px 22px;color:var(--text-muted);line-height:1.8;font-size:0.92rem;}
.delhi-law-office .faq-answer-inner strong{color:var(--navy-700);}

/* ===================== SEO LINKS HUB ===================== */
.delhi-law-office .links-section{background:var(--cream);padding:64px 0;border-top:1px solid var(--border-gold);border-bottom:1px solid var(--border-gold);}
.delhi-law-office .links-section h2{font-size:1.65rem;color:var(--navy-800);text-align:center;margin-bottom:32px;}
.delhi-law-office .links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.delhi-law-office .links-col h4{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-600);margin-bottom:16px;font-weight:700;font-family:'Inter',sans-serif;}
.delhi-law-office .links-col ul{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;}
.delhi-law-office .links-col ul li a{font-size:0.85rem;color:var(--text-muted);transition:color .2s;line-height:1.5;}
.delhi-law-office .links-col ul li a:hover{color:var(--gold-500);text-decoration:underline;}

/* ===================== CTA BAND ===================== */
.delhi-law-office .cta-band{background:linear-gradient(135deg,var(--navy-900),var(--navy-950));padding:72px 0;position:relative;overflow:hidden;}
.delhi-law-office .cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 0%,rgba(184,134,11,0.1),transparent 60%);}
.delhi-law-office .cta-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.delhi-law-office .cta-inner h2{color:white;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:8px;}
.delhi-law-office .cta-inner p{color:rgba(255,255,255,0.55);font-size:0.96rem;}
.delhi-law-office .cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ===================== FOOTER ===================== */
.delhi-law-office .footer{background:var(--navy-950);color:rgba(255,255,255,0.5);padding:72px 0 0;border-top:1px solid rgba(184,134,11,0.15);}
.delhi-law-office .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:52px;}
.delhi-law-office .footer-col h4{font-family:'Inter',sans-serif;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-400);margin-bottom:20px;font-weight:700;}
.delhi-law-office .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.delhi-law-office .footer-col ul li a{color:rgba(255,255,255,0.45);transition:.2s;font-size:0.88rem;}
.delhi-law-office .footer-col ul li a:hover{color:var(--gold-400);}
.delhi-law-office .footer-bottom{margin-top:52px;padding:22px 0;border-top:1px solid rgba(255,255,255,0.05);display:flex;justify-content:space-between;font-size:0.78rem;color:rgba(255,255,255,0.3);flex-wrap:wrap;gap:10px;}
.delhi-law-office .footer-bottom a:hover{color:var(--gold-400);}

/* ===================== ANIMATIONS ===================== */
.delhi-law-office .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.delhi-law-office .reveal.visible{opacity:1;transform:none;}
.delhi-law-office .reveal-delay-1{transition-delay:.1s;}
.delhi-law-office .reveal-delay-2{transition-delay:.2s;}
.delhi-law-office .reveal-delay-3{transition-delay:.3s;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
  .delhi-law-office .hero-inner{grid-template-columns:1fr;gap:40px;}
  .delhi-law-office .overview-grid{grid-template-columns:1fr;gap:36px;}
  .delhi-law-office .enquiry-grid{grid-template-columns:1fr;}
  .delhi-law-office .contact-card{position:static;}
  .delhi-law-office .brief-cards{grid-template-columns:1fr 1fr;}
  .delhi-law-office .ncr-grid{grid-template-columns:1fr 1fr;}
  .delhi-law-office .areas-grid{grid-template-columns:1fr 1fr;}
  .delhi-law-office .links-grid{grid-template-columns:1fr 1fr;}
  .delhi-law-office .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:768px){
  .delhi-law-office .hero-stats-row{grid-template-columns:1fr 1fr;}
  .delhi-law-office .hero-stat{border-right:none;border-bottom:1px solid rgba(184,134,11,0.1);}
  .delhi-law-office .form-row{grid-template-columns:1fr;}
  .delhi-law-office .cta-inner{flex-direction:column;text-align:center;}
  .delhi-law-office .cta-actions{justify-content:center;}
  .delhi-law-office .hero-cta-row{flex-direction:column;}
  .delhi-law-office .trust-badges{grid-template-columns:1fr;}
  .delhi-law-office .areas-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .delhi-law-office .brief-cards,.delhi-law-office .ncr-grid,.delhi-law-office .links-grid{grid-template-columns:1fr;}
  .delhi-law-office .footer-grid{grid-template-columns:1fr;}
  .delhi-law-office .hero-stats-row{grid-template-columns:1fr 1fr;}
}



  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1f2937;
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast.warning { background: #f59e0b; color: #1a1a1a; }



  
   #tl-fab-ring {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid #1a2b4c;
    animation: tl-ring 2s infinite;
    pointer-events: none;
    z-index: 99997;
  }
  @keyframes tl-ring {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.65); opacity: 0;  }
  }
  #tl-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 58px;
    height: 58px;
    background: #1a2b4c;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99998;
    transition: transform .2s;
  }
  #tl-fab:hover { transform: scale(1.08); }

  #tl-chat {
    position: fixed;
    bottom: 104px;
    right: 32px;
    width: 400px;
    max-width: calc(100vw - 40px);
    height: 580px;
    max-height: calc(100vh - 130px);
    display: none;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dde1ea;
    background: #fff;
    z-index: 99999;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    box-shadow: 0 24px 56px rgba(0,0,0,.14);
  }
  #tl-chat.tl-open { display: flex; }

  .tl-hd {
    background: #1a2b4c;
    padding: 0 20px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .tl-hd-left { display: flex; align-items: center; gap: 14px; }
  .tl-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1a2b4c;
    display: flex;
    border: 1px solid white;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .tl-name { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .2px; }
  .tl-sub  { color: rgba(255,255,255,.65); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
  .tl-dot  { width: 7px; height: 7px; border-radius: 50%; background: #25D366; }
  .tl-xbtn {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
  }
  .tl-xbtn:hover { color: #fff; }

  .tl-progress { height: 3px; background: #f0f2f5; flex-shrink: 0; }
  .tl-pbar     { height: 100%; background: #c9a96e; transition: width .4s ease; width: 0%; }

  .tl-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f9fb;
    scrollbar-width: thin;
  }

  .tl-bbl {
    max-width: 80%;
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    animation: tl-pop .2s ease;
    word-break: break-word;
  }
  .tl-bbl.bot {
    background: #fff;
    color: #1e293b;
    align-self: flex-start;
    border: 1px solid #e8eaf0;
    border-bottom-left-radius: 5px;
  }
  .tl-bbl.usr {
    background: #1a2b4c;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 5px;
  }
  .tl-bbl.sys {
    background: #fff7e6;
    color: #7a5200;
    align-self: flex-start;
    border: 1px solid #f0d9a0;
    border-bottom-left-radius: 5px;
    font-size: 13px;
  }
  @keyframes tl-pop {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
  }

  .tl-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    align-self: flex-start;
    animation: tl-pop .2s ease;
  }
  .tl-td {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b0bac9;
    animation: tl-bounce 1.1s infinite;
  }
  .tl-td:nth-child(2) { animation-delay: .2s; }
  .tl-td:nth-child(3) { animation-delay: .4s; }
  @keyframes tl-bounce {
    0%, 80%, 100% { transform: translateY(0);   }
    40%           { transform: translateY(-5px); }
  }

  .tl-opts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 92%; }
  .tl-opt {
    background: #fff;
    border: 1.5px solid #1a2b4c;
    color: #1a2b4c;
    padding: 8px 14px;
    border-radius: 22px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    font-family: inherit;
  }
  .tl-opt:hover { background: #1a2b4c; color: #fff; }

  .tl-summary {
    background: #fff;
    border: 1px solid #e0e4ec;
    border-radius: 14px;
    padding: 14px 16px;
    align-self: flex-start;
    max-width: 88%;
    animation: tl-pop .25s ease;
  }
  .tl-sr {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid #f0f2f5;
  }
  .tl-sr:last-child { border-bottom: none; }
  .tl-sl { color: #6b7280; min-width: 68px; font-size: 12px; padding-top: 1px; }
  .tl-sv { color: #1e293b; font-weight: 500; }

  .tl-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    align-self: flex-start;
    margin-top: 4px;
    transition: background .18s;
    animation: tl-pop .25s ease;
  }
  .tl-wa-btn:hover { background: #1ab355; }

  .tl-step-hint {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    padding: 4px 0 2px;
    flex-shrink: 0;
    letter-spacing: .3px;
    min-height: 20px;
  }

  .tl-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e8eaf0;
    flex-shrink: 0;
  }
  .tl-footer input {
    flex: 1;
    border: 1.5px solid #e0e4ec;
    border-radius: 26px;
    padding: 10px 18px;
    font-size: 14px;
    outline: none;
    background: #f8f9fb;
    color: #1e293b;
    transition: border .2s;
    font-family: inherit;
  }
  .tl-footer input:focus { border-color: #1a2b4c; background: #fff; }
  .tl-footer input::placeholder { color: #a0aab8; }
  .tl-send {
    width: 42px;
    height: 42px;
    border: none;
    background: #1a2b4c;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s;
  }
  .tl-send:hover { background: #2c3e6b; }

  @media (max-width: 480px) {
    #tl-fab, #tl-fab-ring { bottom: 20px; right: 20px; }
    #tl-chat { bottom: 90px; right: 10px; width: calc(100vw - 20px); height: 520px; }
    .popup-body {
        padding: 30px 13px;
    }
  }