:root{
    --teal:#0B7C8F;
    --teal-dark:#075A68;
    --teal-tint:#EAF6F7;
    --rose:#D04266;
    --rose-dark:#AE2E4E;
    --cream:#FFFBFA;
    --ink:#173B41;
  }

  *{box-sizing:border-box;}

  body{
    font-family:'Poppins',sans-serif;
    background:var(--cream);
    margin:0;
  }

  .brand-serif{
    font-family:'Playfair Display',serif;
  }

  /* ================= TOP BAR ================= */
  .top-bar{
    background:linear-gradient(90deg,var(--teal-dark),var(--teal));
    color:#eaf7f9;
    font-size:.85rem;
    letter-spacing:.02em;
    padding:8px 0;
    overflow:hidden;
    position:relative;
    animation:slideDown .6s ease both;
  }

  .top-bar::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% -50%, rgba(208,66,102,.35), transparent 60%);
    pointer-events:none;
  }

  .top-bar a{
    color:#eaf7f9;
    text-decoration:none;
    transition:color .25s ease, transform .25s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .top-bar a:hover{
    color:#ffffff;
    transform:translateY(-1px);
  }

  .top-bar .icon-badge{
    width:24px;height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
    flex:0 0 auto;
  }

  .top-bar .address-text{
    max-width:520px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ================= NAVBAR ================= */
  .main-nav{
    background:#ffffff;
    padding:16px 0;
    transition:all .35s ease;
    box-shadow:0 1px 0 rgba(11,124,143,.08);
    animation:slideDown .7s ease both;
    animation-delay:.05s;
    z-index:1030;
  }

  .main-nav.scrolled{
    padding:8px 0;
    box-shadow:0 8px 30px rgba(7,90,104,.12);
  }

  .brand-mark{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }

  .brand-icon{
    width:46px;height:46px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--rose));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.25rem;
    flex:0 0 auto;
    box-shadow:0 6px 16px rgba(11,124,143,.28);
    transition:transform .35s ease;
  }

  .main-nav:not(.scrolled) .brand-icon{transform:rotate(0deg);}
  .brand-mark:hover .brand-icon{transform:rotate(-8deg) scale(1.05);}

  .brand-name{
    font-size:1.28rem;
    font-weight:700;
    color:var(--ink);
    line-height:1.1;
    margin:0;
  }

  .brand-title{
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--rose);
    font-weight:600;
  }

  .nav-link-custom{
    font-weight:500;
    color:var(--ink) !important;
    padding:.6rem 1rem !important;
    position:relative;
    transition:color .25s ease;
  }

  .nav-link-custom::after{
    content:"";
    position:absolute;
    left:1rem;right:1rem;bottom:.35rem;
    height:2px;
    background:var(--rose);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
  }

  .nav-link-custom:hover,
  .nav-link-custom:focus,
  .nav-item.show .nav-link-custom{
    color:var(--teal) !important;
  }

  .nav-link-custom:hover::after,
  .nav-item.show .nav-link-custom::after{
    transform:scaleX(1);
  }

  /* Services mega dropdown */
.services-dropdown{
    border:none;
    border-radius:16px;
    padding:14px;
    box-shadow:0 24px 48px rgba(7,90,104,.18);
    min-width:520px;
    margin-top:14px !important;
}

  .services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }

  .service-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:10px;
    color:var(--ink);
    text-decoration:none;
    font-size:.87rem;
    font-weight:500;
    transition:background .22s ease, color .22s ease, transform .22s ease;
  }

  .service-item .svc-icon{
    width:34px;height:34px;
    border-radius:9px;
    background:var(--teal-tint);
    color:var(--teal);
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;
    flex:0 0 auto;
    transition:background .22s ease, color .22s ease;
  }

  .service-item:hover{
    background:var(--teal-tint);
    color:var(--teal-dark);
    transform:translateX(3px);
  }

  .service-item:hover .svc-icon{
    background:var(--rose);
    color:#fff;
  }

  .dropdown-toggle::after{
    vertical-align:.15em;
    transition:transform .25s ease;
  }

  .nav-item.show .dropdown-toggle::after{
    transform:rotate(180deg);
  }

  /* CTA */
  .btn-appointment{
    background:linear-gradient(135deg,var(--rose),var(--rose-dark));
    color:#fff;
    border:none;
    padding:.65rem 1.5rem;
    border-radius:50px;
    font-weight:600;
    font-size:.92rem;
    letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(208,66,102,.32);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    white-space:nowrap;
  }

  .btn-appointment:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(208,66,102,.42);
    filter:brightness(1.04);
  }

  .btn-appointment i{margin-right:6px;}

  @keyframes slideDown{
    from{opacity:0; transform:translateY(-14px);}
    to{opacity:1; transform:translateY(0);}
  }

  @media (prefers-reduced-motion: reduce){
    .top-bar, .main-nav, .brand-icon, .nav-link-custom::after,
    .services-dropdown, .service-item, .btn-appointment{
      animation:none !important;
      transition:none !important;
    }
  }

  /* Mobile */
  @media (max-width: 991.98px){
    .top-bar .row > div{
      font-size:.78rem;
    }
    .top-bar .address-text{max-width:220px;}
    .services-dropdown{
      min-width:100%;
      box-shadow:none;
      border:1px solid rgba(11,124,143,.1);
    }
    .services-grid{grid-template-columns:1fr;}
    .nav-link-custom::after{display:none;}
    .btn-appointment{
      display:inline-flex;
      margin-top:10px;
      width:100%;
      justify-content:center;
    }
  }

  @media (max-width: 575.98px){
    .top-bar .address-text{max-width:150px;}
    .brand-name{font-size:1.05rem;}
  }